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>
Related
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
I'm writing here after a couple of hours of reading everything available on-line, including SAPUI5 Explored Apps, API, etcs.
I need to use Image with Maps to define and capture different clickable areas in an image.
SAPUI5 explored says there is an UseMap parameter, but don't provide enough info or example. I've tried and can't map and get the clicked location.
The API offers sap.m.ImageHelper, with one parameter to use maps. But it also lacks example or enough documentation.
Finally, I'm aware that there's some examples on-line using sap.ui.commons. But I couldn't find any example using sap.m
Anyone has a real working example of this?
Thank you!
Regards,
Douglas
The sap.m.Image useMap property simply adds a useMap property to the element. However you need to define a map element with the same name as in the useMap property along with the regions.
You could use the HTML control from the sap.ui.core library to add a HTML map element to the page.
<Image src="img/someImage.jpg"
width="200px"
useMap="regions"
>
</Image>
<core:HTML content='<map name="regions">
<area shape="rect" coords="0,0,82,126" href="link1.html" alt="Link 1">
<area shape="rect" coords="90,90, 158,103" href="link2.htm" alt="Link 2">
</map>'>
</core:HTML>
You don't necessarily have to revert to a stringified version of your map coding.
Here's how you can provide a map as the useMap parameter for a sap.m.image by referencing the html namespace (Note the declaration xmlns:html="http://www.w3.org/1999/xhtml" at the top):
<mvc:View controllerName="xy.controller.Master" xmlns="sap.m" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" >
<App>
<pages>
<Page title="{i18n>title}">
<content>
<Image src="img/Blume.PNG" densityAware="false" width="" useMap="Map">
<layoutData>
<FlexItemData growFactor="1"/>
</layoutData>
</Image>
<html:map name="Map" id="Map">
<html:area alt="" title="" href="www.google.de" shape="poly" coords="384,505,444,507,444,528,390,527"/>
<html:area alt="" title="" href="www.google.de" shape="poly" coords="426,582,494,583,494,636,426,632"/>
</html:map>
</content>
</Page>
</pages>
</App>
</mvc:View>
Credits: https://answers.sap.com/questions/290270/how-use-sapmimage-with-usemap-and-get-the-clicked.html
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>
I want to place a text field in a matrix layout. Please check below code and please suggest how to check XML code errors? Every time I stuck in designing the XML code. Please suggest me how to overcome that.
<core:View
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:l="sap.ui.commons.layout"
controllerName="matrix.matrix"
xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="ytftfhgff">
<content>
<l:MatrixLayout layoutFixed="true" columns="4" width="600px" widths="150px,150px,150px,150px">
<l:MatrixLayoutRow>
<l:MatrixLayoutCell colSpan="4">
<Text text="Its a heading" />
</l:MatrixLayoutCell>
</l:MatrixLayoutRow>
<l:MatrixLayoutRow>
<l:MatrixLayoutCell>
<Label text="First Name"/>
</l:MatrixLayoutCell>
<l:MatrixLayoutCell>
<TextField id="axscx" width="20em"></TextField>
</l:MatrixLayoutCell>
</l:MatrixLayoutRow>
</l:MatrixLayout>
</content>
</Page>
</core:View>
Thanks in advance,
sriman.
In general the errors logged by the XMLTemplateParser to the console should be understandable enough to get a basic idea of what's going wrong. In your case it is quite simple. The default namespace is set to "sap.m", i.e. the runtime tries to load the TextField control from that library. This cannot work as sap.m does not have a TextField control.
You can either use the Input control, i.e. replace TextField with Input. Or introduce an additional namespace:
xmlns:commons="sap.ui.commons"
and define the TextField in the following way:
<commons:TextField id="axscx" width="20em"/>
I would prefer using the Input field.
I want to set a text value by taking a value from another page or another input area. Here is my text field. I tried many combinations for this.byId("thisOne")., but they didn't work.
this.byId("thisOne").setValue("Some thing");
another way:
sap.ui.getCore().byId("thisOne")....
The text element:
<Text text="" id ="thisOne"/>
My XML file:
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" controllerName="App.view.Take"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form">
<Page showHeader="false">
<Label text="thisOne" />
<Input text="" id="thisOne" />
<Button type="Accept" text="Accept" ></Button>
<Button type="Reject" text="Reject" ></Button>
</Page>
</mvc:View>
If you specify an ID explicitly for a control, within an XML view, the actual ID will be prepended with the ID of the XML view, for example the Input control might have an actual ID of "__xmlview0--thisOne".
Best practice is to use the XML View's byId function to get the ID of a control contained within it. So for example in your controller attached to the view (App.view.Take.controller.js in your case) you could do this:
this.getView().byId("thisOne").setValue("Some thing");
Note that setValue will NOT work.
setValue is not the supported method for sap.m.Text Control. setValue is supported for sap.m.Input (or any other control which inherit properties from sap.m.Inputbase )
var oValue = sap.ui.getCore().byId("inputId").getValue();
Then
sap.ui.getCore().byId("thisOne").setText(oValue);
Refer to sap.m.Text and sap.m.Input for more details.
If you want to get your textfield and then add a value to it. You have to do this:
sap.ui.getCore().byId("thisOne").setValue("Some thing");