As you can see in the image below, the labels are cut off and part of the text is replaced with ellipsis (...). I want to have a SimpleForm that is always (whatever the screen size or DOM with available) showing the Label left from the text (as shown in the screenshot), but I want the full label to be visible.
<f:SimpleForm
editable="false"
layout="GridLayout"
title="Title"
labelSpanXL="12"
labelSpanL="12"
labelSpanM="12"
labelSpanS="12"
adjustLabelSpan="true"
emptySpanXL="8"
emptySpanL="8"
emptySpanM="8"
emptySpanS="8"
columnsXL="5"
columnsL="5"
columnsM="5"
singleContainerFullSize="true">
<f:content>
<Label text="LABEL VERY LONG LABEL IS LONG"/>
<Text text="TEXT"/>
</f:content>
</f:SimpleForm>
As of UI5 version 1.50, you can enable wrapping in Label so that it doesn't get cut off.
Update: And as of version 1.54, the wrapping is automatically enabled in (Simple)Form
You could use FlexBox in your <f:content>.
<f:content>
<FlexBox width="100%" wrap="Wrap">
<HBox width="100%" class="sapUiTinyMarginBottom">
<VBox class="sapUiTinyMarginEnd">
<Label text="LABEL VERY LONG LABEL IS LONG"/>
</VBox>
<VBox>
<Text text="TEXT"/>
</VBox>
</HBox>
<HBox width="100%">
<VBox class="sapUiTinyMarginEnd">
<Label text="SECOND LABEL VERY LONG LABEL IS LONG"/>
</VBox>
<VBox>
<Text text="SECOND TEXT"/>
</VBox>
</HBox>
</FlexBox>
</f:content>
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 have a smarttable with custom toolbar and a table inside.
Now I want to put just the table and not the whole smarttable inside of a scroll container. But if I do that then data is not bound to the inner table anymore.
<smartTable:SmartTable id="_0" entitySet="ProjectOrganisationHeadSet" tableBindingPath="/ProjectOrganisationHeadSet"
tableType="ResponsiveTable" smartFilterId="prorgrelWorklistFilterBarId" showFullScreenButton="true" useVariantManagement="false"
enableAutoBinding="true" ignoredFields="" beforeRebindTable="handleBeforeRebindTable" app:myStatus="EDIT"
initiallyVisibleFields="ProjectorgaId,Title,....">
<smartTable:customToolbar>
<OverflowToolbar design="Transparent">
<ToolbarSpacer/>
<Button type="Transparent" press="onCreateBtnPress" icon="sap-icon://add"/>
</OverflowToolbar>
</smartTable:customToolbar>
<ScrollContainer id="__scrollContainer0" horizontal="true" vertical="true">
<Table id="table0" mode="None" busyIndicatorDelay="0">
<items>
<ColumnListItem type="Navigation" press="onPress">
<cells>
<Text text="{path: 'ProjectorgaId', formatter: '.formatter.intNumber'}"/>
</cells>
</ColumnListItem>
</items>
</Table>
</ScrollContainer>
While it must show 40 rows, it shows nothing. If I remove the scrollcontainer all rows will be shown.
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.