I want to alternate the row colors in a sap.m.List. For sap.m.Table there is a property called "alternateRowColor" that can be set "true". Ist there something similar for a List? Inside the List I got items with ObjectListItems.
<List items="{/MonateSet}">
<items>
<ObjectListItem title="{name}" number="{summe}" numberUnit="EUR" type="Active" press="onListItemPress"> </ObjectListItem>
</items>
</List>
I could solve the issue by seting mode="SingleSelectMaster" property of the list.
Related
I am using sap.m.UploadCollection to manage files selected by the user and upload to the server. I want the user to select all the required files then press a 'Save' button to upload all the files at one time. Thus I have set instantUpload to false. This UploadCollection is a part of the items in a sap.m.List. When the user selects a file from the file system an upload is automatically performed (not desired). If I use the same UploadCollection definition outside of the List it does not upload immediately. I need to get it working properly inside the list.
Code Snippet:
<List
items="{ path: 'submittal>/submission', templateShareable: true }">
<layoutData>
<layout:GridData span="XL12 L12 M12 S12"/>
</layoutData>
<items>
<CustomListItem>
<Panel headerText="Round # {submittal>roundId}" expandable="true" expanded="true">
<forms:SimpleForm layout="ResponsiveGridLayout" editable="true">
<UploadCollection
noDataText="No documents on file"
items="{path : 'submittal>documents', templateShareable : false}"
mode="SingleSelectMaster"
uploadEnabled="true"
uploadButtonInvisible="false"
uploadUrl="OptionController?optionId=JS002&action=submittalUpload"
instantUpload="false"
multiple="true"
beforeUploadStarts="submittalBeforeUpload"
uploadComplete="submittalUploadComplete"
selectionChange="documentSelected">
<layoutData>
<layout:GridData span="XL6 L8 M10 S12" linebreakXL="true" linebreakL="true" linebreakM="true" linebreakS="true" />
</layoutData>
<items>
<UploadCollectionItem
documentId="{submittal>id}"
fileName="{submittal>name}"
mimeType="{submittal>typeName}"
selected="{submittal>selected}"
visibleEdit="false"
enableDelete="true"
deletePress="documentDelete">
<attributes>
<ObjectAttribute title="File size" text="{ path: 'submittal>size', formatter: '.formatFileSize' }" />
</attributes>
</UploadCollectionItem>
</items>
</UploadCollection>
</forms:SimpleForm>
</Panel>
</CustomListItem>
</items>
</List>
UI5 Version: 1.78.1
Any help would be appreciated.
Thank you
It is not recommended to use UploadCollection directly inside List, Table, etc. but there is a simple workaround.
Just put a sap.m.Button into sap.m.List instead of using directly sap.m.UploadCollection. Then define fragment with a sap.m.Dialog that has sap.m.UploadCollection inside. In a button press event callback you just bind a row context into a dialog so you'll be able to show correct uploaded files (if there are any).
You can also design a button in your list in a way that you use attachment icon as an icon property and a number (counter) in a text property indicating how many files have been already uploaded.
It would be confusing for an end user to see list items and then another items (files) from UploadCollection inside one or more list items..
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
I am developing a Online Questionnaire application. In this I am using Checkbox and Labels inside a VBox and Hbox control to display the options for my answers. These answer options I am getting them from my questionnaire.json model.
Following is my App.view.xml showing the answers layout:
<VBox id="multipleChoices">
<items>
<HBox backgroundDesign="Solid" alignItems="Center">
<items>
<CheckBox id="mCheckBox0"/>
<Label text="" id="multipleChoice0" width="500px"/>
<CheckBox id="mCheckBox1"/>
<Label text="" id="multipleChoice1" width="500px"/>
</items>
</HBox>
<HBox backgroundDesign="Solid" alignItems="Center">
<items>
<CheckBox id="mCheckBox2"/>
<Label text="" id="multipleChoice2" width="500px"/>
<CheckBox id="mCheckBox3"/>
<Label text="" id="multipleChoice3" width="500px"/>
</items>
</HBox>
</items>
</VBox>
It gets applied in front end as follows:
Q1.png
Q2.png
Problem:
You can see in Q2.png 4 Labels and 4 radio buttons are being displayed even though there are only two answer options. How do I achieve the scenario where the labels's and radio buttons/ check boxes appear in same number as the answer choices and extra ones are hidden?
Is there a dynamic control which can help me with this one?
you should bind your question from your model to a List and a ListItem can have a template with Labels and checkboxs, so you don't need to care about the size of your answers. The way you are doing it at the moment is way too static.
Checkbox has a text property, therefore you could remove the labels and do a binding inside that property
<CheckBox id="mCheckBox1" text="{model/textOption1}"/>
<CheckBox id="mCheckBox2" text="{model/textOption1}"/>
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.
I've written an XML view. Inside it there is a table:
<Table xmlns="sap.m"
id="myTable"
select=""
selectionChange=""
swipe=""
growingStarted=""
growingFinished=""
updateStarted=""
updateFinished=""
itemPress="console.log('clicked on item')"
>
<columns>
<!-- sap.m.Column -->
</columns>
<items>
<!-- sap.m.ListItemBase -->
</items>
</Table>
I insert the row to the table using the onInit of the controller, but when I click on a row, the message is not shown.
If I use console.log(tablePippo.getProperty("itemPress")); inside the controller, it throws
Uncaught Error: Property "itemPress" does not exist in Element sap.m.Table#operationDetail--myTable
This really seems to be a frequent issue people face when they use sap.m.ListBase related controls. Let me give you an overview on how to manage the events (and particularly activate them at all):
The confusion could be related to the sap.m.ListMode of controls inheriting from sap.m.ListBase and the sap.m.ListType of items inheriting from sap.m.ListItemBase.
Let's assume the following sample List:
<List
selectionChange=".onSelectionChange"
itemPress=".onItemPress"
delete=".onDelete"
>
<items>
<ObjectListItem
title="Hello ListItem"
press=".onObjectListItemPress"
/>
</items>
</List>
sap.m.ListMode (Sample)
If you're using sap.m.List or sap.m.Table, event firing depends on the mode you're using. Unfortunately, a List / Table without a mode property will not fire any event from its side! If you want the List / Table to fire those events, you have to assign to it a mode. For example:
<List
mode="SingleSelect"
...
>
These are the possible modes from the sap.m.ListMode documentation:
None (default)
Since no mode property is assigned, none of the events will be fired!
SingleSelect | SingleSelectLeft
A list control with mode="SingleSelect" shows a radiobutton on the right side of each item and will fire the onSelectionChange event as soon as the user clicks on the given radio button control. Using "SingleSelectLeft" just moves the radio button to the left side of the item.
SingleSelectMaster
A list control with mode="SingleSelectMaster" will show you the hand on mouseover and fires the onSelectionChange in case of a click on an item.
MultiSelect
A list control in mode="MultiSelect" offers a checkbox and fires the onSelectionChange event on every check and uncheck of an item.
Delete
Using the list in mode="Delete" gives you a nice delete button and fires onDelete.
sap.m.ListType (Sample)
There's one more property you should have a look at: The type property of your items.
Every item inherits from sap.m.ListItemBase and thus has an attribute called type. Let's see how it looks like:
<items>
<ObjectListItem
type="Active"
press=".onObjectListItemPress"
detailPress=".onDetailPress"
...
/>
</items>
There are these types listed in the sap.m.ListMode documentation:
Active
Depending on the mode, the itemPress of the list and press of the list item can be fired. The selected item gets highlighted so the user can see what's selected.
Detail
A detail button (with icon sap-icon://edit) is offered which fires the detailPress event.
DetailAndActive
As the name says, this is a combination of Detail and Active type. So you have the detail button firing detailPress on button click, and the item itself firing the list event itemPress.
Navigation
The items have a navigation like look, and itemPress and item's press are called.
Inactive
No item event gets called from the item itself.
Now let's take a look at your problem. You should either assign your Table control a mode or assign your items a type. After that change the events should get fired.
Generally I would avoid using a ListMode and a ListType at the same time since there can be unexpected behavior but check it by yourself.
Add type="Active" to ColumnListItem
...
<items>
<ColumnListItem type="Active">
<cells>
<Text text="{Name}"/>
</cells>
</ColumnListItem>
</items>
...
Yang Wang: https://scn.sap.com/thread/3697995
Simple Solution using sap.m.CustomListItem
Use set the properties of the ListItem to
type="Active" press="listPress"
<List items="{/results}">
<items>
<CustomListItem type="Active" press="listPress">
<content>
<VBox>
<FlexBox direction="Row" justifyContent="SpaceBetween" alignItems="Start">
<items>
<Text text="{PernrName}" />
<Text textDirection="RTL" text="{Document Status}" class='subtext'/>
</items>
</FlexBox>
<FlexBox direction="Row" justifyContent="SpaceBetween" alignItems="End">
<items>
<Text text="{Date}" class='subtext'/>
<Text textDirection="RTL" text="{Current Processor}" class='subtext'/>
</items>
</FlexBox>
</VBox>
</content>
</CustomListItem>
Define myItemPress member function in the controller for the XML view and reference it as
itemPress = "myItemPress"
See example
Another problem in OP's code is that itemPress is used on the level of Table instead of the level of ListItemBase. This will indeed fire click events (if type="Active" is set for the ListItemBase element, as explained in other answers here). BUT: The context of the events will not allow to derive the clicked row in the list! So you get an event, but you will not be able to tell from which item it came.
Here is what needs to be changed to identify the clicked row in OP's example, using ColumnListItem as an example for ListItemBase:
Instead of...
<Table
...
itemPress="onItemPressed"
>
<items>
<!-- sap.m.ListItemBase -->
</items>
<columns>
<!-- sap.m.Column -->
</columns>
</Table>
... use this:
<Table
...
>
<items>
<ColumnListItem
type="Active"
press="onItemPressed"
>
...
</ColumnListItem>
</items>
<columns>
<!-- sap.m.Column -->
</columns>
</Table>
To derive the model path of the clicked row you can now use code like this:
onItemPressed: function (oEvt) {
var sModelPath = oEvt.getSource().getBindingContext('myModelName').getPath();
var sDiD = this.getView().getModel("myModelName").getProperty(sModelPath + "/myModelFieldName");
}
You can also add a customData node within the CustomListItem that holds row specific information and access it's key value pairs in the event handler through something like this:
var aCustomData = oEvt.getSource().getCustomData();
But again:
Both approaches will only work if onItemPressed is called on ListItemBase
/ ColumnListItem level!