Show SAPUI5 View two times simultaneous - sapui5

I build a sapui5 application which shows information related to a SAP plant. Now I need to show the same view two times on the same page but with information of two different plants. Imagine like two iFrames. The App should be able to run with only one view (like now), also it should be able to show data several times on the same page.
To solve this, I build an additional view (splitview) which contains a componentcontainer to load the "real" view (main view). This ends up in a continuous loop.
This is how I tried to build splitview
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:l="sap.ui.layout"
controllerName="zqinsplotlist.zqinsplotlist.controller.splitview" xmlns:html="http://www.w3.org/1999/xhtml">
<App>
<pages>
<Page title="Title">
<content>
<l:HorizontalLayout class="sapUiContentPadding">
<ComponentContainer xmlns="sap.ui.core" name="zqinsplotlist.zqinsplotlist"
settings='\{ "componentData" : \{ "startupParameters" : \{"Werks" : ["1001"], "Zfcod" : ["PLOS"], "Herkunft" : ["03"] \} \}\}'/>
<Text text="Hello Split"/>
</l:HorizontalLayout>
</content>
</Page>
</pages>
</App>
</mvc:View>
I expected that this will load my Main view once. But it gets called in a loop over and over again.

Why don't you try sth. like this:
<mvc:View
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:l="sap.ui.layout"
controllerName="zqinsplotlist.zqinsplotlist.controller.splitview"
xmlns:data="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
xmlns:html="http://www.w3.org/1999/xhtml">
<App>
<l:HorizontalLayout class="sapUiContentPadding">
<mvc:XMLView
viewName="zqinsplotlist.zqinsplotlist.view.MyView"
data:some="data to distinguish the views"
data:instance="1"
/>
<mvc:XMLView
viewName="zqinsplotlist.zqinsplotlist.view.MyView"
data:some="other data to distinguish this view from the above"
/>
</l:HorizontalLayout>
</App>
</mvc:View>
In the controller of MyView distinguish the two view instances by sth. like this:
if (this.getView().data('instance') === 1) {
// do stuff
}
That should work but I haven't tested. Not a 100% sure that custom data works on views instanciated from XML. Well, it should...
BR
Chris

Related

Where to add a Shell Bar control in an XML view when using SAPUI5?

I am new to OpenUI5/SAPUI5 and trying to build my first app with it. It will be a standalone app and I am struggling with the Shell Bar control, which I want to add to my views.
As I understand things, I write my root view which contains an App control, and then I swap in and out my individual views using the pages aggregation of the App control (by using a router).
Now I want the Shell Bar to be "stuck" to the top, which means it cannot be part of the individual pages, as this would also swap out the Shell Bar and I would have to include it in every view that is managed by the router. It also feels "wrong" to have the Shell Bar not be part of the root view.
I tried different approaches for "nailing" the Shell Bar to the top of my view, but depending on my different tries, I end up with various results, all of which are not what I intend to do.
Example 1 (Shell Bar is a child of App outside its pages aggregation):
<Shell>
<App>
<f:ShellBar title="Funky Title"
showNotifications="true"
notificationsNumber="2"
homeIcon="./static/logo.png">
<f:menu>
<Menu>
<MenuItem text="{i18n>learnMenuEntry}" icon="sap-icon://e-learning"/>
<MenuItem text="{i18n>catalogMenuEntry}" icon="sap-icon://course-book"/>
<MenuItem text="{i18n>statisticsMenuEntry}" icon="sap-icon://line-chart"/>
<MenuItem text="{i18n>settingsMenuEntry}" icon="sap-icon://settings"/>
</Menu>
</f:menu>
<f:profile>
<f:Avatar initials="UI"/>
</f:profile>
</f:ShellBar>
<pages>
<Page title="{i18n>homePageTitle}">
<content>
[ ... ]
</content>
</Page>
</pages>
</App>
</Shell>
This shows the Shell Bar at the top, but whatever is part of the Page control is not shown at all. I think adding controls outside of the aggregation breaks the App control.
Example 2 (Shell Bar is outside of Shell):
<mvc:View
controllerName="webhrt.controller.App"
xmlns="sap.m"
xmlns:f="sap.f"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true">
<f:ShellBar title="Funky title"
secondTitle="Startseite"
showNotifications="true"
notificationsNumber="2"
homeIcon="./static/logo.png">
<f:menu>
<Menu>
<MenuItem text="{i18n>learnMenuEntry}" icon="sap-icon://e-learning"/>
<MenuItem text="{i18n>catalogMenuEntry}" icon="sap-icon://course-book"/>
<MenuItem text="{i18n>statisticsMenuEntry}" icon="sap-icon://line-chart"/>
<MenuItem text="{i18n>settingsMenuEntry}" icon="sap-icon://settings"/>
</Menu>
</f:menu>
<f:profile>
<f:Avatar initials="UI"/>
</f:profile>
</f:ShellBar>
<Shell>
<App>
<pages>
<Page title="{i18n>homePageTitle}">
<content>
[ ... ]
</Panel>
</content>
</Page>
</pages>
</App>
</Shell>
</mvc:View>
This somehow works, but because the Shell Bar lives "outside" the Shell, it is not part of the letterboxing which limits the width of the page. It covers the whole width of the screen.
I also tried adding the Shell Bar as a child of the Shell control, but this is not supported as per the documentation for the Shell control, which only allows an App control as its child.
What am I missing? I also browsed through the examples on the OpenUI5 website, but the documentation on the use of the Shell Bar control is rather scarce.
This is how I do it.
Here is App.view.xml
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:f="sap.f" displayBlock="true" xmlns="sap.m" controllerName="cis.gp.controller.App" height="100%">
<Shell showLogout="false" appWidthLimited="false" >
<App busy="{appView>/busy}" busyIndicatorDelay="0" height="100%" autoFocus="false">
<Page id="app" class="sapMBrandingBar-CTX sapUiResponsivePadding--header sapUiResponsivePadding--content">
<customHeader>
<f:ShellBar title="{i18n>appTitle}">
<f:profile>
<Avatar src="sap-icon://sap-ui5" />
</f:profile>
</f:ShellBar>
</customHeader>
</Page>
</App>
</Shell>
</mvc:View>
In your manifest routing,
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"async": true,
"viewPath": "kk.view",
"controlAggregation": "content",
"controlId": "app",
"clearControlAggregation": false
},
Note that controlAggregation is 'content' (as Page is our root control now)

UI5 - VBox is not valid for aggregation footer of ObjectPageLayout

I have an application with a footer which is same for all pages. Until now, I used separate view for this which I attached to the bottoms of the pages. However, now I created two fragments for item details page (Display/Add modes), using the ObjectPageLayout and want to add my footer into both of those. As I understand, I should use fragment instead of View so I rewrote my footer view into fragment so it looks like this:
<core:FragmentDefinition xmlns="sap.m"
xmlns:f="sap.f"
xmlns:core="sap.ui.core"
>
<VBox>
<Text text=""/>
<Text text=""/>
<f:Card class="sapUiTinyMargin" height="100px" width="1144px">
<f:content>
<VBox width="100%" alignItems="Center">
<Text text=""/>
<HBox>
<Label text="{i18n>needHelp}" />
<ToolbarSpacer width="20px" />
<Link text="{i18n>contactUs}" href="mailto:xxx.xxx#xxx.com"/>
</HBox>
</VBox>
</f:content>
</f:Card>
</VBox>
</core:FragmentDefinition>
And then I put this fragment into the footer of the ObjectPageLayout, like this
<footer>
<core:Fragment fragmentName="xxx.portal.view.Footer" type="XML"/>
</footer>
However, when I try to load the page, I get the error "Assertion failed: "Element sap.m.VBox#__vbox1" is not valid for aggregation "footer" of Element sap.uxap.ObjectPageLayout#nav---connection--ObjectPageLayout"
Any idea why is it showing up and what I am doing wrong? I would also like to note that if I use some simpler elements in the footer (such as Toolbar), there is no error and it gets displayed correctly.
Thank you

Using template views in SAPUI5?

I have some XML view files. They have some common parts. For example customHeaderContent in the following piece of code repeated in many other pages. Is possible somehow transfer these parts to a template file and them from there. I know fragment view files. But I don't know how to aggregate common parts in XML files and attach them to different views.
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:semantic="sap.m.semantic" xmlns:footerbar="sap.ushell.ui.footerbar" controllerName="xyz.controller.Worklist" afterRendering="onInit">
<semantic:FullscreenPage id="page" navButtonPress="onNavBack" showNavButton="true" title="{i18n>worklistViewTitle}">
<semantic:content>
.....
</semantic:content>
<semantic:customHeaderContent>
<Button icon="images/de.svg" width="auto" id="__button_lang" tooltip="{i18n>lang_de}" press="onChangeLangBtnPress"/>
</semantic:customHeaderContent>
</semantic:FullscreenPage>
The link provided by the OP may be erased in the future so here is the gist of the answer there.
Refer to your fragment XML views using the Fragment declaration of sap.ui.core, as example below where the 'my.useful.SimpleUiPart' view is being used:
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" xmlns:commons="sap.ui.commons" controllerName="testdata.fragments.XMLViewController" >
<commons:HorizontalDivider />
<core:Fragment fragmentName="my.useful.SimpleUiPart" type="XML" />
<core:Fragment id="xmlInXml" fragmentName="my.useful.SimpleUiPart" type="XML" />
<commons:HorizontalDivider />
</mvc:View>

Insert table in XML-view

I created a table in my controller-function onRoutePatternMatched.
Now I want to bring this table to the view.
This should be done with oTable.placeAt("sample1");
What is the right code to insert it on a specific place in my xml-view?
Home.view.xml
<?xml version="1.0" encoding="UTF-8" ?>
<mvc:View controllerName="ztest.controller.VarConf" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
xmlns:html="http://www.w3.org/1999/xhtml">
<Page>
<content id="sample1"></content>
<content id="sample2">
<Label text="{varConfDet>/chassisnr}" />
</content>
</Page>
</mvc:View>
Error:
sap-ui-core.js:152 Uncaught Error: DOM element with ID 'sample1' not found in page, but application tries to insert content.
put an id on on the page and not on its content aggregation(s): <Page id="myPge">
in Controller call this.getView().byId("myPage").addContent(oTable);
Because content os the default aggregation of the sap.m.Page you could also only call this.getView().byId("myPage").add(oTable);. Also be aware that you might to remove previously added content... Of course, you could also use different panels etc. with different ids and place the table somewhere in there...

What is the <l:content> tag meaning?

What is the meaning of the <l:content> tag in SAPUI5? I know it is about content, but the references to this tag in the documentation are not making sense to me. Can someone give me use cases for this tag? It is used only on the <l:Grid> control?
Thanks in advance!
The Grid is the sap.ui.layout.Grid .
As you can see that Grid has an aggregation called content. The Tag <l:content> is placed there to show the interpreter, which aggregation you fill.
That is not the problem in the sap.ui.layout.Grid, since it has only one aggregation, but ...
... imagine you want to use a sap.ui.layout.form.SimpleForm.
The SimpleForm has the aggregations titleand content. So to define a title you have to write the tag <title> (with the correct prefix, in this case it would be eg. <f:title> with xmlns:f="sap.ui.layout.forms")
<mvc:View xmlns:f="sap.ui.layout.form" xmlns:mvc="sap.ui.core.mvc">
<f:SimpleForm>
<f:title>some random title</f:title>
<f:content>
<!-- any sap.ui.core.Control you like -->
</f:content>
</f:SimpleForm>
</mvc:View>
And another thing: The aggregation, that is marked with "(default aggregation)" (in the case with the Grid it is content) you do not have to add the tag.
<mvc:View xmlns:f="sap.ui.layout.form" xmlns:mvc="sap.ui.core.mvc">
<f:SimpleForm>
<f:title>some random title</f:title>
<!-- any sap.ui.core.Control you like, is is recognized as content -->
</f:SimpleForm>
</mvc:View>