I have a line chart in my sapui5 app and I want to put it in an object page subsection. When I put it in a normal layout in a page, it's working. But when I separate it in a fragment and call from object page subsection nothing is shown.
here is my fragment :
<core:FragmentDefinition xmlns:m="sap.m" xmlns:core="sap.ui.core" xmlns:viz="sap.viz.ui5.controls" xmlns:layout="sap.ui.layout"
xmlns:mvc="sap.ui.core.mvc" xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds" xmlns:viz.data="sap.viz.ui5.data" height="100%" xmlns:common="sap.suite.ui.commons">
<layout:FixFlex>
<layout:flexContent>
<viz:Popover id="idPopOver"></viz:Popover>
<viz:VizFrame id="idLineGraph" uiConfig="{applicationSet:'fiori'}" height='100%' width="100%" vizType='line'></viz:VizFrame>
</layout:flexContent>
</layout:FixFlex>
</core:FragmentDefinition>
and here is my subsection:
<ux:ObjectPageSection id="idChart" title="{i18n>chartSection}" titleUppercase="false">
<ux:subSections>
<ux:ObjectPageSubSection>
<ux:blocks>
<core:Fragment id="idChartFragment" fragmentName="mynamespace.zmm_stok_list.fragments.grafik" type="XML"/>
</ux:blocks>
</ux:ObjectPageSubSection>
</ux:subSections>
</ux:ObjectPageSection>
I also saw that question Q but it looks like OP have preferred to keep that answer which hi's found for himself.
lastly, there a blog about almost same thing but using cds views.blog
But you know cds views are not like xml views and I guess they are generated automatically and we can not see which componenets are used.
So I still couldn't found a way to do this that way. But if I put my vizframe in object layout section directly (not seperated in a fragment) and give the height of vizframe with pixels it works. Not much but I'm ok with this.
Ps: When vizframe is seperated in a fragment, giving its height with pixels does not work either.
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 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.
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>
I have added a Tile Container in one of the Icon Tab Filter of my Icon Tab Bar. When I click on the filter, the tiles and tile container are missing. When I use Chrome Inspector to look into the page, it seems like the Tiles are there but it is not displayed. Any idea why?
View for the Icon Tab Bar
<mvc:View
controllerName="nav.controller.Main"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<IconTabBar>
<items>
<IconTabFilter
icon="sap-icon://attachment"
iconColor="Critical"
text="Tile Container"
count="3">
<mvc:XMLView viewName="nav.view.TestTile" />
</IconTabFilter>
</items>
</IconTabBar>
View for the Tile Container (nav.view.TestTile)
<mvc:View
controllerName="nav.controller.TestTile"
displayBlock="true"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<TileContainer
tiles="{/Tiles}">
<StandardTile
title="{description}"
icon="sap-icon://process"
number="{number}"
numberUnit="{numberUnit}"
info="{info}"
infoState="{infoState}"
press="ehTilePressed">
</StandardTile>
</TileContainer>
Regards,
TM
There are two properties of sap.m.IconTabBar: expandable and expanded.
expandable: user can click the filter to toggle the collapse state of filter tab.
expanded: Indicates if the actual filter tab is expanded or not.
You can set set expandable = "false" and expanded = "true" to let the filter tab visible all the time.
Regards,
Allen
it appearantly is a problem with the height of the tile container depending on the parent container and the parent container depending on the content ...
In my case i could do something by fixing the height of the container:
<TileContainer editable="false" allowAdd="false" xmlns="sap.m" xmlns:html="http://www.w3.org/1999/xhtml" id="myTileContainer" height="500px">
<tiles>
<StandardTile press="doSomething" removable="false" title="huhu" info="We are a tile"/>
<StandardTile press="doSomething" removable="false" title="huhu" info="We are a tile"/>
<StandardTile press="doSomething" removable="false" title="huhu" info="We are a tile"/>
<StandardTile press="doSomething" removable="false" title="huhu" info="We are a tile"/>
</tiles>
</TileContainer>
But that is obviously not apllicable to most cases, since the height should not be fixed, since it kind of defeats most purposes.
Cheers
Michael
I came across the same issue. Set the IconTabBar's stretchContentHeight property to true.
Check the documentation for more details
https://sapui5.hana.ondemand.com/#docs/api/symbols/sap.m.IconTabBar.html
Hook on to this. The right answer is already given: the height of the parent view of the TileContainer is 0 as long as no explicit height given for the TileContainer.
I figured it out by using the element inspector.
But how to make this whole stuff more repsonsive? I am receiving items form a oData service and cannot just set a fixed height. There must be any better way. Looking for something to tell the ItemTabBar that it should completely adapt to the size of its contents. Actually it looks more like a bug to me right now.
Anyone found a better solution than just setting a fixed height?
Umbraco newbie here. I've researched a tonne but can't seem to find what I' looking for.
I have a site with a slider on the homepage, the slider is sitting in a macro which is using a for-each (of a nodes children) with a final goal to display the 'heroImage' image from that doctype. I cant post images as a newbie to this site, but heres my content structure:
HOME
PORTFOLIO
- First Item
- Another Item
ABOUT
CONTACT US
Home, Portfolio, ABOUT and CONTACT US are "Landing Pages" document types, and the children under Portfolio (First Item and Another Item) are "Portfolio Entries" document types. Below is the code on "Landing Page" calling the Slideshow macro.
Portfolio Entry has fields:
heroImage
images
body
Slideshow macro obviously being the highlight there. Easy enough. Heres my macro code where you'll see I'm trying to display the heroImage of the node in question for each 'for-each'.
<xsl:template match="/">
<!-- slider -->
<div id="slideshow">
<div id="slider" class="nivoSlider">
<xsl:for-each select="umbraco.library:GetXmlNodeById(1081)/*[#isDoc and position() < 4]">
<xsl:variable name="mediaId" select="umbraco.library:GetMedia(#id, 'false')/data [#alias = 'umbracoFile']" />
<xsl:if test="$mediaId > 0">
<xsl:variable name="mediaNode" select="umbraco.library:GetMedia($mediaId, 0)" />
<xsl:if test="count($mediaNode/data) > 0 and string($mediaNode/data[#alias='umbracoFile']) != ''">
<img src="{$mediaNode/data[#alias='umbracoFile']}" alt="[image]" />
</xsl:if>
</xsl:if>
</xsl:for-each>
</div>
</div>
<!-- data-transition="slideInLeft" -->
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</xsl:template>
I feel like im so close, and ran out of search queries as most of the solutions I found were dependant on the imageId being passed onto the macro from the other side of the macro which wouldn't work.
Hope Ive explained this enough and thanks in advance for your help!
First of all, it looks like you're hardcoding the parent node id. In the code you just provided, it seems to only be getting the children of the node with id 1081. From reading what you just posted, it would seem that on all landing pages, you want to display their individual portfolio entries.
Either way, I would stay away from hardcoding IDs. If the node id changes in any way(user deletes the node, it gets exported as a package to the live environment, etc), your code will stop working. I'd just use $currentPage instead.
Judging by your filter, I imagine you only want the first 3 items to show in the slider. The code seems correct, but you seem to be using the old schema and its associated xpath. If you're using a newer version of Umbraco, the way you reference node data in xslt would have changed. I would guess that you've found many code examples and tried merging them together, without realising they wouldn't call the same schema.
This wiki link will provide more information, and hopefully fix your problem if you're using the wrong xpath.