I am using OpenUI5, this is my code:
<GenericTile headerText="Header" subheader="Subheader" size="M" frameType="TwoByOne" press="press">
<tileContent>
<TileContent>
<content>
<Title text="Title" />
<NumericContent size="S" scale="M" value="{/para2}" valueColor="Error" indicator="Up" />
<Text text="Text1" />
<Link text="Link" press="viewMore" />
</content>
</TileContent>
</tileContent>
</GenericTile>
and all what I see is:
Why it doesn't display NumericContent, Text and Title?
As I noticed it only displaying the last element of content - it depends on order these elements.
Refer to this answer.
In short:
This is happening because content in sap.m.TileContent aggregations has the cardinality of 0..1 where 0 is the minimum cardinality, and 1 is the maximum cardinality. This means you can only have a single item inside the content property and so the Tile will only display the last element defined in your view.
You can work around this issue by adding a Sap.m.VBox inside your tile content like this:
<GenericTile subheader="Subheader" frameType="TwoByOne" press="press">
<TileContent>
<content>
<VBox>
<Title text="Title"/>
<NumericContent scale="M" value="{/para2}" valueColor="Error" indicator="Up"/>
<Text text="Text1"/>
<Link text="Link" press="viewMore"/>
</VBox>
</content>
</TileContent>
</GenericTile>
Although I really would advise you not to do this but instead use the properties on sap.m.TileContent such as footer and unit where you can insert text and number details to your Tile.
Related
I'm adding some GenericTile based on my model into a sap.f.GridList. This is successful. But my problem is that I don't want to have my whole page to be scrollable but only the GridList. That is the reason I add a Panel control and a TileContent.
What did I make wrong? Do you have any suggestion to achieve that?
Here is my code:
<Panel>
<TileContent footerColor="Good" frameType="OneByOne">
<f:GridList xmlns:f="sap.f" id="FormPart4" headerText="Liste des Cartons" items="{CartonsList>/results}" growing="true" noDataText="Aucunes données disponible">
<f:customLayout>
<cssgrid:GridBoxLayout xmlns:cssgrid="sap.ui.layout.cssgrid" boxMinWidth="17rem" />
</f:customLayout>
<f:GridListItem navigated="true">
<VBox class="sapUiSmallMargin">
<layoutData>
<FlexItemData growFactor="1" shrinkFactor="0" />
</layoutData>
<GenericTile header="Carton N°: " press="onCarton_Click" headerImage="sap-icon://palette">
<TileContent>
<NumericContent value="{CartonsList>Number}" withMargin="true" truncateValueTo="24" />
</TileContent>
</GenericTile>
</VBox>
</f:GridListItem>
</f:GridList>
</TileContent>
</Panel>
I am trying to make a line chart using Vizframe in an Object Page. Does anybody have an example how to do it? I searched the APIs and the sdn but find just samples with Layout element and not Object Page Layout element.
So when I test it within a simple Layout element (< layout > element) the line charts works fine. But when I try it with Object Page Layout elementt, the chart doesn't show and there is no errors in the console.
Thanks a lot,
Haylee N.
I joined the two different views here:
View.xml with Layout element ( that works )
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core"
xmlns:u="sap.uxap" xmlns:layout="sap.ui.layout" xmlns="sap.m" xmlns:f="sap.f"
xmlns:t="sap.ui.table" xmlns:viz="sap.viz.ui5.controls" xmlns:viz.data="sap.viz.ui5.data"
xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds" xmlns:sample="test.controller.ChartsOverview"
xmlns:goals="test.view.goals" controllerName="test.controller.ChartsOverview"
height="100%">
<Page title="SAPUI5 App">
<layout:FixFlex id='chartFixFlex' minFlexSize="250">
<layout:fixContent>
<Panel id='settingsPanel' class="panelStyle" expandable="true"
expanded="true" headerText="Summary" width="auto">
<content>
<HBox class='settingsHBox'>
<VBox width="200px">
<Label text='Reports' design="Bold" class='settingsLabel'></Label>
</VBox>
</HBox>
</content>
</Panel>
</layout:fixContent>
<layout:flexContent>
<viz:Popover id="idPopOver"></viz:Popover>
<viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}"
height='50%' width="50%" vizType='timeseries_line'>
<viz:dataset>
<viz.data:FlattenedDataset data="{/milk}">
<viz.data:dimensions>
<viz.data:DimensionDefinition name="Date"
value="{Date}" dataType="date" />
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition name="Revenue"
value="{Revenue}" />
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem uid="valueAxis" type="Measure"
values="Revenue" />
<viz.feeds:FeedItem uid="timeAxis" type="Dimension"
values="Date" />
</viz:feeds>
</viz:VizFrame>
</layout:flexContent>
</layout:FixFlex>
</Page>
</mvc:View>
View.xml with Object Page Layout element ( that doesn't work )
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core"
xmlns="sap.uxap" xmlns:layout="sap.ui.layout" xmlns:m="sap.m" xmlns:f="sap.f"
xmlns:t="sap.ui.table" xmlns:viz="sap.viz.ui5.controls" xmlns:viz.data="sap.viz.ui5.data"
xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds" xmlns:sample="test.controller.ChartsOverview"
xmlns:goals="test.view.goals" controllerName="test.controller.ChartsOverview"
height="100%">
<m:Page showHeader="true" title="{i18n>appTitle}" showFooter="true"
showNavButton="false">
<ObjectPageLayout id="ObjectPageLayout"
enableLazyLoading="false" subSectionLayout="TitleOnLeft"
showTitleInHeaderContent="true" showHeaderContent="true">
<headerTitle>
<ObjectPageHeader objectTitle="Quality Monitor"
objectSubtitle="Reports based on errors processed"
isObjectIconAlwaysVisible="false" isObjectTitleAlwaysVisible="false"
isObjectSubtitleAlwaysVisible="false" isActionAreaAlwaysVisible="true"
id="ObjectPageLayoutHeaderTitle">
<actions>
</actions>
</ObjectPageHeader>
</headerTitle>
<sections>
<ObjectPageSection title="Charts">
<subSections>
<ObjectPageSubSection>
<blocks>
<viz:Popover id="idPopOver"></viz:Popover>
<viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}"
height='50%' width="50%" vizType='timeseries_line'>
<viz:dataset>
<viz.data:FlattenedDataset data="{/milk}">
<viz.data:dimensions>
<viz.data:DimensionDefinition
name="Date" value="{Date}" dataType="date" />
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition name="Revenue"
value="{Revenue}" />
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem uid="valueAxis" type="Measure"
values="Revenue" />
<viz.feeds:FeedItem uid="timeAxis" type="Dimension"
values="Date" />
</viz:feeds>
</viz:VizFrame>
</blocks>
</ObjectPageSubSection>
</subSections>
</ObjectPageSection>
</sections>
</ObjectPageLayout>
</m:Page>
</mvc:View>
Whoever may come here for an answer, giving the height of vizframe with pixels does the trick.
As pointed by people in this question some controls use adaptive containers that adapt height to fit their content. If that content uses "100%" of height (which is initially 0) the content efectively becomes 0px and those controls end up adapting their hight to 0px height of the content. For the same reason if you use fixed height instead of a percentage it actually works.
For me personally, this problem only occurred because I blindly copied sample code for VizFrame into IconTabBar container, without realizing the difference in containers used.
Solution to my problem: remove the height="100%" property from VizFrame, which will not force height and in turn will allow the height of VizFrame to be calculated based on its content (title, actual chart, legend and such), instead of container that VizFrame is placed into.
I can't find the problem in my code. The number of rows is always correct, but it only shows the values of the last object in the array of the binding. I'm using the correct aggregation <items> so that's not the issue. Maybe (I hope) I'm just overlooking something.
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<Dialog title="{i18n>selectionTitle}" horizontalScrolling="false">
<beginButton>
<Button text="{i18n>closeSelectionButton}" press="handleCloseSelectedTrainings"/>
</beginButton>
<endButton>
<Button type="Accept" text="{i18n>submitSelectionButton}" press="handleSubmitSelectedTrainings"/>
</endButton>
<content>
<List noDataText="Empty" items="{selectedTrainings>/}" mode="Delete" delete="handleDeleteSelectionItem">
<items>
<CustomListItem >
<HBox>
<core:Icon size="2rem" src="{icon}" class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom"/>
<VBox class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom">
<Text text="{Title}" />
<Label text="{Type} {= ${Begda} ? ${Begda}.toLocaleDateString() : '' }"/>
<HBox>
<CheckBox text="{i18n>selectionMgrApproved}" selected="{Approved}" />
</HBox>
</VBox>
</HBox>
</CustomListItem>
</items>
</List>
</content>
</Dialog>
You are using named model selectedTrainings for items bindings and you forgot to put a model name into CustomListItem elements. Put a model name into bindings like this:
<Text text="{selectedTrainings>Title}" />
Why is It not possible to add a SplitApp Container as an aggregation for ICONTab Bar. I have tried to add the splitApp under ICONTAB Bar and it is working. But it is not working with SplitApp Container.
<mvc:View controllerName="com.sap.controller.Main"
xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<App>
<pages>
<Page title="{i18n>title}">
<content>
<IconTabBar id="idIconTabBar" select="handleIconTabBarSelect"
class="sapUiResponsiveContentPadding">
<items>
<IconTabFilter>
<content></content>
</IconTabFilter>
<IconTabFilter>
<content>
<SplitApp id="SplitContDemo1" initialDetail="detail" initialMaster="master">
<detailPages>
<Page id="detail" title="Detail 1" class="sapUiStdPage">
<content>
<Label text="Detail page 1"/>
<Button text="Go to Detail page2" press="onPressNavToDetail"/>
</content>
</Page>
</detailPages>
<masterPages>
<Page id="master" title="Master 1" icon="sap-icon://action"
class="sapUiStdPage">
<content>
<List>
<items>
<StandardListItem title="To Master2" type="Navigation"
press="onPressGoToMaster"/>
</items>
</List>
</content>
</Page>
</masterPages>
</SplitApp>
</content>
</IconTabFilter>
</items>
</IconTabBar>
<SplitContainer id="SplitContDemo">
<detailPages>
<Button text="Detailed Button"/>
</detailPages>
<masterPages>
<Button text="Master Button"/>
</masterPages>
</SplitContainer>
</content>
</Page>
</pages>
</App>
</mvc:View>
Regards,
MS
It is not very clear what your problem is exactly. You can put anything inside the content aggregation of an IconTabFilter. In the items aggregation of an IconTabBar you can only put IconTabFilters and IconTabSeparators.
I have checked your example and made it to work by putting the Split Container inside an IconTabFilter: https://jsfiddle.net/enykp4h8/1/.
<IconTabFilter text="Split Container">
<SplitContainer id="SplitContDemo">
<detailPages>
<Button text="Detailed Button" />
</detailPages>
<masterPages>
<Button text="Master Button" />
</masterPages>
</SplitContainer>
</IconTabFilter>
Later update:
If you put the SplitContainer alone in the IconTabBar, it will seem as though it does not work because the tab's content has 0 height. This is because the SplitContainer has a height 100% of its parent element whilst the tab's height is determined based on the height of its children (so they are somehow codependent).
To go around this you can either use some custom CSS to give the container a fixed height or you can ask the IconTabBar to stretch to its parent's height (using stretchContentHeight):
CSS Solution:
.fixContHeight.sapMSplitContainer {
height: 300px
}
<SplitContainer id="SplitContDemo" class="fixContHeight" >
<!-- the pages... -->
</SplitContainer>
Stretch Content Solution:
<IconTabBar id="idIconTabBar" select="handleIconTabBarSelect"
class="sapUiResponsiveContentPadding" stretchContentHeight="true">
<items>
<IconTabFilter text="Split Container">
<SplitContainer id="SplitContDemo">
<detailPages>
<Button text="Detailed Button" />
</detailPages>
<masterPages>
<Button text="Master Button" />
</masterPages>
</SplitContainer>
</IconTabFilter>
<items>
</IconTabBar>
I have a list inside Tile container.Direct list is working Okay, but inside the tile container I'm unable to trigger itemPress event. the code is as below
<TileContainer id="container" tileDelete="handleTileDelete">
<CustomTile class="sapMTile customTile sapMPointer ">
<ScrollContainer height="100%" width="100%" vertical="true" focusable="true">
<l:VerticalLayout class=" sapUiContentPadding" width="100%">
<l:content>
<FlexBox>
<List items="{/activeRules}" headerText="" **itemPress="onActiveRulesListItemPress"** growing="true" growingThreshold="3">
<CustomListItem>
<HBox>
<VBox class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom">
<Text class="flexTilebar" text="{name}"/>
<FlexBox class="flexTilebar">
<micro:StackedBarMicroChart size="Responsive" maxValue="{/maxNumberOfInvocztions}">
<micro:bars>
<micro:StackedBarMicroChartBar valueColor="Neutral" value="{numberOfInvocations}"/>
</micro:bars>
</micro:StackedBarMicroChart>
</FlexBox>
<FlexBox class="flexTilebar">
<micro:StackedBarMicroChart bars="{scheduledServiceInvocations}" maxValue="{/maxScheduleCount}" size="Responsive">
<micro:bars>
<micro:StackedBarMicroChartBar value="{scheduleCount}"/>
</micro:bars>
</micro:StackedBarMicroChart>
</FlexBox>
</VBox>
</HBox>
</CustomListItem>
</List>
</FlexBox>
</l:content>
</l:VerticalLayout>
</ScrollContainer>
</CustomTile>
</TileContainer>
Set type="Navigation" in customListItem Because CustomListItem inherits from ListItemBase
Have you tried to set the type property in CustomListItem as its default value is Inactive.
See ListBase documentation:
Fires when an item is pressed unless the item's type property is Inactive.