Can someone explain in brief or re-direct me to appropriate link to understand the difference between core:view and mvc:view in XML view of SAPUI5/Fiori application?
When we start an application in Eclipse and create XML view using sap.m library we see core:view, but in sample applications in SAPUI5 SDK - Demo Kit, we are seeing mvc:view. Please help us understanding when to use what.
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="splitapptest.Master" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Title">
<content>
</content>
</Page>
</core:View>
The View control is in sap.ui.core.mvc: see Class sap.ui.core.mvc.View in the API documentation. Therefore, the namespace for a View element in an XML view definition is sap.ui.core.mvc.
This usually translates to something like:
<mvc:View xmlns:mvc="sap.ui.core.mvc"…>
but of course the prefix is arbitrary and you could just as well have:
<banana:View xmlns:banana="sap.ui.core.mvc"…>
The point is that it's the namespace that's important, at least technically. The confusion probably arises because the XML processor is rather lenient on the namespace specified for the root View element.
So to answer your question specifically, while core:View might be "correct" if you crazily specified xmlns:core="sap.ui.core.mvc", it would be very confusing, so the best way to express it is
<mvc:View xmlns:mvc="sap.ui.core.mvc"…>
You can try with:
<a xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="splitapptest.Master" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Title">
<content>
</content>
</Page>
</a>
it will also work. The declaration does not matter. XMLTemplateProcessor will not parse this element.
Related
I want to add a popup to my application that contains a NavContainer. I need this to switch between two different views within the popup later. Now the NavContainer seems to need a fixed value for height and width to display content. Otherwise the popup will only be displayed in the size of the header and footer line. I realized that I can fix the size, but that's not the sense of a responsive application.
My code looks like this without the fixed information:
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
>
<Dialog id="genericDialog"
showHeader="false"
title="Detail View"
>
<NavContainer>
<Page id="page1">
<List items="{/avGenericSet}">
<CustomListItem class="sapUiResponsiveMargin">
<ObjectIdentifier title="{title}"/>
<Input value="{value}"/>
</CustomListItem>
</List>
</Page>
<Page id="page2">
<!-- ... -->
</Page>
</NavContainer>
<endButton>
<Button text="Close" press="closeGenericDialog"/>
</endButton>
</Dialog>
</core:FragmentDefinition>
The behavior can be observed in all popup types (Dialog, Popover, ResponsivePopover). Does any of you know a workaround or do I have to say goodbye to a "responsive" popup?
Try with contentHeight="100%" (and contentWidth if required) from the Dialog. Here is an example: https://embed.plnkr.co/7nimup1UMGsifeDQ?show=view/fragment/Dialog.fragment.xml,preview
I tried to find a solution by checking other questions with a similar error but none could help me. I tried to run the Component.js from my app in sandbox. Running the index.html works fine. My starting view is this:
<mvc:View
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
controllerName="com.sap.build.standard.qrCodeScanner.controller.Home"
>
<Page id="home"
class="customHomeBackground"
showHeader="true"
title="Home"
showFooter="true"
>
<content>
<FlexBox
class="customFlexBoxHome"
justifyContent="Center"
alignItems="Center"
wrap="Wrap"
>
<GenericTile class="customTile"
header="Scan invitations"
subheader="from your customers"
frameType="OneByOne"
press="_onGenericTilePress1"
>
<TileContent>
<ImageContent src="sap-icon://bar-code"/>
</TileContent>
</GenericTile>
</FlexBox>
</content>
<footer/>
<headerContent/>
<subHeader/>
<customHeader/>
</Page>
</mvc:View>
It's simply a single GenericTile. I can't access this view because of
Error: Cannot add direct child without default aggregation defined for control sap.m.GenericTile
Accessing the other views is no problem. So when I add e.g. a button instead of the GernericTile + children, it works fine.
I also tried to add one of these sample tiles instead but same error.
What's the problem with the GenericTile?
Piggybacking on #sunil-b-n's answer:
In the current version of UI5 the example code works fine, as per the plunkr Sunil provided.
However, if you change the library version to 1.38.15 like this, it is broken as per OP's question.
Look at the difference. In the latest version, this code is valid:
<GenericTile>
<TileContent>
<ImageContent src=""/>
</TileContent>
</GenericTile>
But in old versions, named aggregations need to be explicitly added accordingly:
<GenericTile>
<tileContent> <!-- named aggregation required. Default since 1.46.x -->
<TileContent>
<content> <!-- named aggregation required. Default since 1.38.18 -->
<ImageContent src=""/>
</content>
</TileContent>
</tileContent>
</GenericTile>
You need to figure out what version of UI5 you're on and use the appropriate SDK documentation to build your app, otherwise you'll run into trouble.
You can view the version-specific Demo Kit by adding the version number to the URL, e.g. https://ui5.sap.com/1.38.8/
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllerName="com.sap.build.standard.qrCodeScanner.controller.Home" >
<Page id="home" class="customHomeBackground" showHeader="true" title="Home" showFooter="true">
<content>
<FlexBox class="customFlexBoxHome" justifyContent="Center" alignItems="Center" wrap="Wrap">
<GenericTile class="customTile" header="Scan invitations" subheader="from your customers" frameType="OneByOne" press="_onGenericTilePress1">
<TileContent>
<ImageContent src="sap-icon://bar-code" />
</TileContent>
</GenericTile>
</FlexBox>
</content>
<footer/>
<headerContent/>
<subHeader/>
<customHeader/>
</Page>
</mvc:View>
This view is loading completely fine in the latest SAPUI5 version.
Working plnkr here
content is the default aggregation for sap.m.Page.
guess because of the wrapped sap.m.Page around the sap.m.GenericTile. just omit the sap.m.Page and you won't get the error. the sap fiori design guidelines says that tiles are used to display and launch apps on the launchpad. And therefore, they shall not be used on an overview page or anywhere else.
I'm having some sort of rudimentary problem with navigation in my sapui5 fiori app. I'm just trying to navigate from Opportunities to Complex Notes, but it's not working at all. Here is a stripped down version of my simple view. There is no logic in any controller. As simple as I could imagine it. Because it's so simple I'm thinking I'm reading the odata wrong. So here is a link to that odata. I really appreciate it, I'm spinning my wheels on this one and I'm sure it's something ridiculous. Always is.
<mvc:View xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="BlankDocumentToBeDeletedLater.controller.View1" displayBlock="true">
<App>
<pages>
<Page title="{i18n>title}">
<content>
<List noDataText="Drop list items here" id="__list0" items="{ path : '/Opportunities', parameters:{'$expand' : 'ComplexNotes'}}">
<items>
<CustomListItem>
<content>
<Title text="ID : {Guid}"></Title>
<List items="{ComplexNotes}">
<items>
<ObjectListItem title="whatevs" intro="{HeaderGuid}">
</ObjectListItem>
</items>
</List>
</content>
</CustomListItem>
</items>
</List>
</content>
</Page>
</pages>
</App>
“$” for expand is only needed on OData V4;
“/Opportunities” into the path for “listitems”;
text=”ID: {Guid}” won’t work, it needs a formatter to join the fixed text to the Guid property;
I've never seen a list in a list – the developer should try with the parent list first.
Check in the chrome network the request and response that is created by the UI5 binding.
We are on SAPUI5 library version 1.36.1.
We have a responsive popover to display messages to the user.
When creating & loading the Popover to the view we are getting the below message.
Element sap.m.Text is not valid for aggregation "_headerTitle" of
Element sap.m.NotificationListItem
I couldn't find what's the reason as when I try it in WEB-IDE I could see it in layout editor working fine, checked if version is the issue none found.
Below is my fragment for reference:
<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns:f="sap.ui.layout.form" xmlns:me="sap.me" xmlns="sap.m">
<Popover class="sapUiContentPadding" showHeader="false" placement="Auto">
<List items="{staffXMLErrors>/}">
<NotificationListItem title="{staffXMLErrors>Message}"
tooltip="{i18n>overview.words.click_a_message_to_navigate}"
showCloseButton="false"
priority="{path:'staffXMLErrors>Type',formatter:'._Formatters.formatNotificationPriority'}"
press="onStaffXMLErrorMessagePress" />
</List>
</Popover>
</core:FragmentDefinition>
As found out, the developer is loading all ui5 components explicitly in component.js like "sap.m.Text", "sap.m.label" ,"sap.m.NotificationListItem" etc., also there were several utilities included, as a trail I commented out all these and it worked fine.
so finally after removing all unwanted libraries, it worked fine.
At this point we could only avoid the issue but couldn't figure out what's exactly the reason is.
I am trying to build an app which has several views. The first view shows a list and a "create" button. Upon clicking the create button, a second view is shown.
I want to be able to embed a sub-view into this second view.
<mvc:View
controllerName="openui5.view.Framework"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc">
<Page id="detailPage"
showNavButton="true"
navButtonPress=".onBack">
<Button id="saveButton"
text="Save"
type="Accept"
icon="sap-icon://save"
press=".onSave" />
<Button id="nextButton"
text="Next"
type="Accept"
icon="sap-icon://action"
press=".onNext" />
<mvc:XMLView viewName="openui5.view.BasicInformation" async="true" />
</Page>
</mvc:View>
The embedded view:
<mvc:View
controllerName="openui5.view.BasicInformation"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Page id="page1">
<Button id="stuffButton"
text="Stuff"
type="Accept"
icon="sap-icon://save"
press=".onSave" />
</Page>
</mvc:View>
I can see the title of the sub-view but no button.
Am I not doing something "special" when trying to embed this sub-view?
we used also fragments for subviews and it worked fine, but i found it a bit cumbersume to put it in a jsfiddle..still it tried, see below. You should not need to have the view tag around your fragment. Your fragment should have the name xx.fragment.xml in your project and does not need a controller.
then you should be able to include it directly as as xml in your xml view
see also https://openui5.hana.ondemand.com/#docs/guide/2c677b574ea2486a8d5f5414d15e21c5.html
As said before, you could use Fragments which are good for "small portions" of content.
Other solution would be including a Shell component with an inner page to your View and then using routing mechanism so content of your "sub-view" would be loaded into this shell page:
On the main View:
<Shell id="shellContainer" appWidthLimited="false">
<App id="appContainer" backgroundOpacity="0"></App>
</Shell>
On manifest.json:
"targets": {...
"YourSubViewDestination": {
"viewType": "XML",
"viewName": "YourSubViewName",
"controlAggregation": "pages",
"controlId": "appContainer",
"parent": "YourMainViewDestination"
}
...}
On your create button action:
this.getOwnerComponent().getRouter().navTo("YourSubViewDestination", {});
You may need some help with routing: Routing navigation