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>
Related
I am using cards to display some data. i want to call some function on click of card control in sapui5.
<f:Card class="sapUiMediumMargin carousalCards" width="360px">
<f:content>
<VBox height="370px" justifyContent="SpaceBetween">
<HBox justifyContent="SpaceBetween">
<VBox>
<Title class="titleWidth" text="{getfileDefaultJSONModel>REFERENCE}" level="H1"/>
<Text class="sapMGTSubHdrTxt" text="{getfileDefaultJSONModel>CREATION_DATE}"></Text>
</VBox>
<HBox class="checkedIcon">
<RadioButton custom:model="getfileDefaultJSONModel" select="fnCreateClone" text="{getfileDefaultJSONModel>ID}" groupName="GroupA" visible="{getfileDefaultJSONModel>RADIO_VISIBLE}"/>
</HBox>
</HBox>
<HBox justifyContent="SpaceBetween" class="largeTileFooter">
<Text class="sapMTileCntFtrTxt" text="{getfileDefaultJSONModel>USER_ID} {getfileDefaultJSONModel>REFERENCE} Data"></Text>
<Text class="sapMNCValue Neutral" text="{getfileDefaultJSONModel>JSON_SIZE}"></Text>
</HBox>
</VBox>
</f:content>
</f:Card>
Currently, sap.f.Card does not have any click event. You can, however, use the browser events:
var card = this.getView().byId("your-card-id");
card.attachBrowserEvent("click", function(event) {
// handle card click
}, this);
At the time of writing, sap.f.Card does not provide any press events. You could..
Stick with the guidelines and make only the header clickable. Controls that implement sap.f.cards.IHeader do provide press event.
Or leverage sap.m.CustomListItem with type="Active" to make the card content clickable.
See the demo below:
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/ui/core/Fragment",
], Fragment => Fragment.load({
definition: `<f:Card xmlns:f="sap.f" width="18rem" class="sapUiSmallMargin">
<f:header>
<cards:Header xmlns:cards="sap.f.cards"
title="Clickable Header"
statusText="Status"
press="alert('Header pressed')"
/>
</f:header>
<f:content>
<FlexBox xmlns="sap.m" renderType="Bare" width="100%">
<CustomListItem type="Active" press="alert('Card pressed')">
<HBox height="7rem" justifyContent="SpaceAround" alignItems="Center">
<Title text="Clickable Card" titleStyle="H4" />
<core:Icon xmlns:core="sap.ui.core"
src="sap-icon://sap-ui5"
size="4rem"
color="#ff7b17"
class="sapUiTinyMarginBottom"
/>
</HBox>
<layoutData>
<FlexItemData minWidth="100%" />
</layoutData>
</CustomListItem>
</FlexBox>
</f:content>
</f:Card>`,
}).then(control => control.placeAt("content"))));
<script id="sap-ui-bootstrap" src="https://ui5.sap.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core, sap.m, sap.f, sap.ui.layout"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-async="true"
data-sap-ui-compatVersion="edge"
data-sap-ui-xx-waitForTheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>
I have a bandbox with a Listbox inside.
My Listbox has "onSelect" listener, and inside this i do a myListbox.clearSelection()
after read the value of the selected item and write it on a TextBox.
The problem is, that when I open the bandpopup another time, the selected item in the List remain selected and Marked in blue color, and i can't select the same element twice because it's remain selected.
For example:
Open the Bandpopup.
Clik in a element, the value is written on the Textbox, and then learSelection()" is called.
The user clear the Textbox.
Reopen the Bandpopup.
Click on the same item in the ListBox.
Nothing occurs, because this element remains selected.
The Zul code:
<?page title="Enviar a" contentType="text/html;charset=UTF-8"?>
<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" arg0="./envioWindow" ?>
<zk>
<window title="Enviar a" border="normal" width="60%" id="envioWindow"
apply="..............">
<bandbox id="sectorReparticionBusquedaSADE" >
<bandpopup apply="XXXXXX.FindSectorReparticionesBusquedaSADEBandboxComposer"
id="sectorReparticionesComboBusquedaSADE" width="650px">
<groupbox mold="3d">
<vbox>
<hbox>
<textbox id="textoSectorReparticionBusquedaSADE" />
</hbox>
<paging id="pagingSectorReparticionesDocsSADE" pageSize="10" />
<listbox mold="paging"
width="600px" id="sectoresReparticionesBusquedaSADEListbox"
model="#{listaSectorReparticionSADESeleccionada}"
selectedItem="#{sectorReparticionSeleccionada}"
paginal="${pagingSectorReparticionesDocsSADE}">
<listhead>
<listheader label="Código" width="30%" />
<listheader label="Nombre" height="70%" />
</listhead>
<listitem self="#{each=reparticion}">
<listcell label="#{reparticion.codigo}" />
<listcell label="#{reparticion.nombre}" />
</listitem>
</listbox>
</vbox>
</groupbox>
</bandpopup>
</bandbox>
<bandbox id="sectorBusquedaSADE" tooltiptext="Ingrese el nombre del sector correspondiente a la repartición seleccionada a la que desea agregar para enviarle un pase múltiple." >
<bandpopup apply="ar.gob.gcaba.ee.satra.pl.consulta.FindSectorBusquedaSADEBandboxComposer"
id="sectorComboBusquedaSADE" width="650px">
<groupbox mold="3d">
<vbox>
<hbox>
<textbox id="textoSectorBusquedaSADE" />
</hbox>
<paging id="pagingSectorDocsSADE" pageSize="10" />
<listbox mold="paging"
width="600px" id="sectoresBusquedaSADEListbox"
model="#{listaSectorSADESeleccionado}"
selectedItem="#{sectorSeleccionado}"
paginal="${pagingSectorDocsSADE}">
<listhead>
<listheader label="Código" width="30%" />
<listheader label="Nombre" height="70%" />
</listhead>
<listitem self="#{each=sector}">
<listcell label="#{sector.codigo}" />
<listcell label="#{sector.nombre}" />
</listitem>
</listbox>
</vbox>
</groupbox>
</bandpopup>
</bandbox>
</window>
</zk>
The listbox "sectoresReparticionesBusquedaSADEListbox" has the problem, the "sectoresBusquedaSADEListbox" don't have this problem, and for me both are equal.
I finally solved this resetting the binder every time thath i open the BandPopup:
private void resetComponent() {
this.binder = new AnnotateDataBinder(sectoresReparticionesBusquedaSADEListbox);
this.binder.bindBean("sectorReparticionSeleccionada", this.sectorReparticionSeleccionada);
this.binder.loadAll();
this.listaSectorReparticionSeleccionada = new ArrayList<ReparticionBean>();
this.binder.bindBean("listaSectorReparticionSADESeleccionada", this.listaSectorReparticionSeleccionada);
}
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>
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.