sap.m.List: Remove Separators and Start Each Item with Bullet - sapui5

Below is my code: It generates a list with a horizontal separator after every item (Gives a feeling like the rows of the table).
I wish to display it like this instead:
Permissions:
Item 1
Item 2
Item 3
Even if bullet is not possible, at least, plain data one below the other would be nice. I do not want the separator in between.
<List id="PermissionsList"
noDataText="NoPermissions"
includeItemInSelection="true"
items="{PermissionsList>/}"
>
<headerToolbar>
<Toolbar>
<Title
text="Permissions"
level="H3"
/>
</Toolbar>
</headerToolbar>
<StandardListItem title="{PermissionsList>Text}"/>
</List>

You could try
<StandardListItem title="• {PermissionsList>Text}"/>
Which is the html code for bullet point. The alternative is adding a style class and using the :before selector to add whatever you like, it offers more flexibility in terms of styling.
To remove the separators, there's a flag for that:
showSeparators="None"
So the whole thing would be:
<List id="PermissionsList" showSeparators="None" noDataText="NoPermissions" items="{PermissionsList>/}" includeItemInSelection="true">
<headerToolbar>
<Toolbar>
<content>
<Title text="Permissions" level="H3"/>
</content>
</Toolbar>
</headerToolbar>
<StandardListItem title="• {PermissionsList>Text}"/>
</List>

Related

UI5 - VBox is not valid for aggregation footer of ObjectPageLayout

I have an application with a footer which is same for all pages. Until now, I used separate view for this which I attached to the bottoms of the pages. However, now I created two fragments for item details page (Display/Add modes), using the ObjectPageLayout and want to add my footer into both of those. As I understand, I should use fragment instead of View so I rewrote my footer view into fragment so it looks like this:
<core:FragmentDefinition xmlns="sap.m"
xmlns:f="sap.f"
xmlns:core="sap.ui.core"
>
<VBox>
<Text text=""/>
<Text text=""/>
<f:Card class="sapUiTinyMargin" height="100px" width="1144px">
<f:content>
<VBox width="100%" alignItems="Center">
<Text text=""/>
<HBox>
<Label text="{i18n>needHelp}" />
<ToolbarSpacer width="20px" />
<Link text="{i18n>contactUs}" href="mailto:xxx.xxx#xxx.com"/>
</HBox>
</VBox>
</f:content>
</f:Card>
</VBox>
</core:FragmentDefinition>
And then I put this fragment into the footer of the ObjectPageLayout, like this
<footer>
<core:Fragment fragmentName="xxx.portal.view.Footer" type="XML"/>
</footer>
However, when I try to load the page, I get the error "Assertion failed: "Element sap.m.VBox#__vbox1" is not valid for aggregation "footer" of Element sap.uxap.ObjectPageLayout#nav---connection--ObjectPageLayout"
Any idea why is it showing up and what I am doing wrong? I would also like to note that if I use some simpler elements in the footer (such as Toolbar), there is no error and it gets displayed correctly.
Thank you

sap.m.ObjectListItem: Need to keep whitespace (tabs) in title

<ObjectListItem
title="{i18n>uBOMItem}: {Item} Component: {ComponentDesc}"
number="{ComponentNo}"
>
I am using sap.m.ObjectListItem. While binding, I need tab space between {Item} & {ComponentDesc}.
E.g. like \t
Currently, sap.m.ObjectListItem does not support rendering whitespace for title.
And I agree with alexP's answer that it's not clean to combine multiple labels ("{i18n>uBOMItem}:" and "Component:") into one.
That being said; if it's really necessary to do so, however, you'll need to extend ObjectListItem.
Example: https://embed.plnkr.co/WaMaP4wqMevsjMxX
Internally, ObjectListItem renders its title from sap.m.Text. The Text control has a public property called renderWhiteSpaceapi which we can use to allow tabs to be rendered.
ObjectListItem is only for one value. In your case it's better to use CustomListItem.
<CustomListItem>
<HBox width="100%">
<VBox>
<Label emphasized="true" text="{i18n>uBOMItem}: {Item}" />
</VBox>
<VBox class="sapUiSmallMarginBegin">
<Label emphasized="true" text="Component: {ComponentDesc}" />
</VBox>
<VBox width="50%" justifyContent="End">
<ObjectNumber number="{ComponentNo}" />
</VBox>
</HBox>
</CustomListItem>
It's not clean to output two data bindings from your model in one label, text or similar. You should split the output. In case of an i18n label and a data binding in one control i would make a exception.

SAPUI5 Strange data binding behaviour

It's pretty silly problem but I have no idea why is it happening. I heve this in my controller:
this.getView().setModel(this.placesModel, "myCity");
then I set the data with Ajax request to my express RESTFull app and in View.xml
<List items="{path: 'myCity>/people'}">
<CustomListItem>
<VBox>
<Title text="Person:"/>
<Label text="{myCity>/people/name}"/>
<Label text="{myCity>/people/age}"/>
</VBox>
</CustomListItem>
</List>
I have object myCity with few properties. One of them is object people which is array of objects. When I try to list them like that I can see that all my people get listed but without corresponding name and age. Also I find it hard to understend when to use > when / when when >/.
Basic binding syntax with model name is {(model_name)>(path_to_property)}, if you don't have a model name (default model) you need to specify only {path_to_property}.
The initial slash (/) is needed if you don't have a contextbinding. In your case you have contextbinding set on List, so you don't need to use the slash.
Updated code:
<List items="{path: 'myCity>/people'}">
<CustomListItem>
<VBox>
<Title text="Person:"/>
<Label text="{myCity>name}"/>
<Label text="{myCity>age}"/>
</VBox>
</CustomListItem>
</List>
For more information refer to Binding Path.

SAPUI5: ObjectAttribute Wrap Text

I am attempting to display a wrapped long text in an ObjectAttribute in an SAP UI5 application:
<List id="__listObjectAttributes" noDataText="Drop list items here" headerText="Shipping Information" items="{Shipments}">
<items>
<ObjectListItem id="__listItemShipments" title="{ShipmentTxt}">
<attributes>
<ObjectAttribute id="__attributeShipmentId" title="Shipment #" text="{Id}"/>
<ObjectAttribute id="__attributeShipmentCode" title="Shipment Code" text="{ShipCd}"/>
<ObjectAttribute id="__attributeShipmentLongText" title="Long Text" text="{LongText}" binding="{ShipmentLongText}"/>
</attributes>
</ObjectListItem>
</items>
</List>
The problem is, when the list is displayed the text is truncated instead of wrapped. I've been looking for ways to wrap the text in an ObjectAttribute, but to no avail.
I have found articles that say both "you can do it" and "you can't do it".
Possible: https://archive.sap.com/discussions/thread/3589475
Not possible: https://experience.sap.com/fiori-design-web/object-list-item/
If it is not possible to add this information to an ObjectAttribute, does anyone know a way to display the same information in a list that will accept wrapped text?
Solution
#Ran Hassid's answer was correct! Using a CustomListItem in combination with a SimpleForm was the best solution. Here is the code I ended up going with:
<List id="__listObjectAttributes" noDataText="Drop list items here" headerText="Shipping Information" items="{Shipments}">
<items>
<CustomListItem id="__listItemShipments">
<content>
<form:SimpleForm id="__formShipmentList" editable="true" layout="GridLayout" labelMinWidth="100">
<form:content>
<!--Id-->
<Label id="__labelShipmentId" text="Id"/>
<Text id="__textShipmentId" text="{Id}"/>
<!--Shipment Code-->
<Label id="__labelShipmentCode" text="Shipment Code"/>
<Text id="__textShipmentCode" text="{ShipCd}"/>
<!--Long text-->
<Label id="__labelShipmentLongText" text="LongText"/>
<Text id="__textShipmentLongText" text="{Longtext}" binding="{ShipmentLongText}"/>
</form:content>
</form:SimpleForm>
</content>
</CustomListItem>
</items>
</List>
Then I added the sap.ui.layout.form to the mvc:View to simplify the code:
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:semantic="sap.m.semantic" xmlns:form="sap.ui.layout.form" controllerName="shipments.controller.ShipmentDetail">
I think that even if it is possible (I assume via css changes and so on) it is not recommended because it is not part of the ObjectAttribute interface. In order to achieve the same effect you can do one of the following:
Use CustomListItem instead of ObjectListItem and inside the content of it wrap a SimpleForm. The simple form layout should be grid layout because you want to position text next to the title in the same row. In the Text control you can put as longest string as you want and also control on the wrapping of it. So your code should look something like that (I didn't use binding but I assume you will know what to do in your code)
<List noDataText="Drop list items here" id="__list0">
<items>
<CustomListItem type="Navigation" id="__item1">
<content>
<sap.ui.layout.form:SimpleForm xmlns:sap.ui.layout.form="sap.ui.layout.form" xmlns:sap.ui.core="sap.ui.core" editable="true" layout="GridLayout" id="__form0" labelMinWidth="100">
<sap.ui.layout.form:content>
<sap.ui.core:Title text="Title" id="__title0" />
<Label text="Long Text" id="__label1" />
<Text text="Very long text with\nmultiple lines" />
<Label text="Other text" id="__label2" />
<Text text="Some text goes here" />
</sap.ui.layout.form:content>
</sap.ui.layout.form:SimpleForm>
</content>
</CustomListItem>
</items>
</List>
The second option is to use CustomListItem but with VBOX + HBOX. so you have a VBOX which wrap HBOX's and inside each HBOX you put title next to the text.
I recommend to go with the first approach because it's much more clear and responsive.
Good luck.
I would recommend using basic CSS to solve this issue.
XML-View:
...
<ObjectAttribute text="{aVeryLongText}" class="objectAttributeWrapper" />
...
CSS:
.objectAttributeWrapper * {
white-space: pre-line !important;
word-wrap: break-word !important;
}
This will even work if there are changes on the sap.m.ObjectAttribute Interface, since this CSS-Selector grabs all children of the element which we assigned the CSS class to.
Speaking from my experience this was a quick and stable solution. I had to extend a legacy app, where replacing the whole control would result in me needing to rewrite a whole controller.
Works like a charm and didnt break since 1.71.50

how to create icon and text in list?

I want to create moible application ( sap.m) with list with 4 fields :
icon label icon
label
-------------------
I want that in one row the label will be under the icon.
i found good example in standard list item but the problem that StandartdListItem not allow that the title will be icon. ( the idea is to do something like title and description the the title should be icon and need to be in the right screen )
do you know in which sap object I need to use ?
Example for StandartdListItem
<mvc:View
controllerName="sap.m.sample.StandardListItemTitle.List"
xmlns:l="sap.ui.layout"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<List
id="ShortProductList"
headerText="Products">
<items>
<StandardListItem
title="{0/Name}"
description="{0/ProductId}"
icon="{0/ProductPicUrl}"
iconDensityAware="false"
iconInset="false"
adaptTitleSize="false" />
<!-- set this item's description be empty -->
<StandardListItem
title="{1/Name}"
description=""
icon="{1/ProductPicUrl}"
iconDensityAware="false"
iconInset="false"
adaptTitleSize="false" />
<StandardListItem
title="{2/Name}"
description="{2/ProductId}"
icon="{2/ProductPicUrl}"
iconDensityAware="false"
iconInset="false"
adaptTitleSize="false" />
<!-- don't specify a description for this item -->
<StandardListItem
title="{3/Name}"
icon="{3/ProductPicUrl}"
iconDensityAware="false"
iconInset="false"
adaptTitleSize="false" />
</items>
You have to use CustomListItem and to build this particular row yourself I'm afraid. Probably you have to insert a horizontal layout and then a vertical layout to achieve your goal, but there may be different paths to your desired goal.