How to set additionalText for items of MultiComboBox - sapui5

I'd like to add additionalText property while using sap.m.MultiComboBox. My view looks as follows:
<MultiComboBox items="{/list}" width="17rem" >
<core:ListItem key="{Name}" text="{Name}" additionalText="{Price}" />
</MultiComboBox>
But this doesn't seem to work as ListItem is not an aggregation for MultiComboBox.

As of UI5 1.60
The control sap.m.MultiComboBox now supports the property showSecondaryValues which should be used together with additionalText in <core:ListItem>.
<MultiComboBox xmlns="sap.m" showSecondaryValues="true" items="{/ProductCollection}">
<core:ListItem key="{ProductId}" text="{Name}" additionalText="{ProductId}" />
</MultiComboBox>
Sample: MultiComboBox - Two columns layout
UI5 1.58 and below
The problem is that, initially, the control Multi Combo Box was not designed to display more than one attribute in the list. According to the Fiori Design Guideline:
Do not use the multi-combo box if you need to display more than one attribute.
I wouldn't suggest to invest much time to do any hack around this limitation making the app more error-prone and less maintainable. Instead, use an alternative control such as Select Dialog with the option multiSelect: true.
The guideline also mentions Value Help Dialog as an option. But it's currently closed sourced and thus not available in OpenUI5 yet.

Would concatenating the text property work for you? As you don't seem to be able to define a really additional text, a workaround should be something like this:
<MultiComboBox items="{/list}" width="17rem" >
<core:Item key="{Name}" text="{Name}: {Price}" />
</MultiComboBox>

<ComboBox
showSecondaryValues= "true"
items="{
path: '/ProductCollection',
sorter: { path: 'Name' }
}">
<core:ListItem key="{ProductId}" text="{Name}" additionalText = {CurrencyCode}"/>
refer this

Related

Inside a combo box and multicombo box I need to make specific value as graded out.(for this we are getting a flag from Odata)

<ComboBox items="{ProductModel>FIELDTOVAL/results}"
change='onSelectionChange' visible="{parts:[{path:'ProductModel>FIELDTOVAL/results/1/Valuedesc'},{path:'ProductModel>Fieldselmode'},{path:'ProductModel>Fieldname'}] ,formatter:'.comboboxVisibility'}">
<core:Item key="{ProductModel>Valueid}" text="{ProductModel>Valuedesc}" enabled ="path:'ProductModel>Valuedefault',formatter:'.combodefault'}" />
}
combodefault:function(cd){
return(cd ==="X")?false:true;}
Resulting combobox post applying formatter We have a requirement where inside a sap.m.ComboBox and sap.m.MultiComboBox we need to show values as greyed out ones.
If the flag from our Odata-Service has Valuedefault = "X" then the specific value should be greyed out.Please note we are using XML-View. Getting confused which property of UI controls can be used. Any suggestions on the same please.
Regards,
Ranjan R
Take a look at Expression Binding.
<ComboBox items="{/myEntity}">
<core:Item key="{key}" text="{text}" enabled="{= ${Valuedefault} !== 'X'}"/>
</ComboBox>

MultiComboxBox within a table closes after selection

I have tried to resolve the problem for quite sometime but have not been successful.
Inside a table, I have a sap.m.MultiComBox. The drop down in the multicombobox closes after selecting the first value. If not inside the table, the multicombobox works fine as expected (popover does not close). One additional behavior I observed is that if I don't have the selectedKeys bound, then it works fine.
Any reasons or suggestions?
<Table
growing="true"
items="{employee>/EmployeeCollection}">
<columns>
<Column width="10%" />
<Column width="55%" />
<Column width="35%"/>
</columns>
<ColumnListItem>
<Image id="image" src="{employee>dataURI}" class="sapOB_Assign_Usercircle" />
<Text text="{employee>Name}" class="tableText" />
<VBox>
<MultiComboBox id="mcb1"
selectedKeys="{employee>roles}"
items="{
path: 'roles>/BusinessRoles',
templateShareable: false
}">
<core:Item key="{roles>id}" text="{roles>name}" />
</MultiComboBox>
<HBox />
</VBox>
</ColumnListItem>
</Table>
You must be using UI5 version 1.66 or below with growing="true" on the Table. In that case, the dropdown closes immediately after the selection due to a focus loss caused by rerendering of the list item (Its DOM element being rewritten completely). The rerendering itself is caused by two-way bound selectedKeys which explains why it "works" if the property is not bound.
Normally, two-way binding should not be used together with growing. According to the API reference:
Note: Growing must not be used together with two-way binding.
But it's still unclear whether the above constraint is still valid today (See issue #3013).
In order to keep two-way binding with growing="true", add the attribute key* to the list binding info:
<Table
growing="true"
items="{
path: 'employee>/EmployeeCollection',
key: 'employeeId'
}"
>
Here is a working example: https://jsbin.com/ciyosir/edit?js,output. As you can see, the dropdown is kept open even after selection because the list item is not rerendered thanks to the extended change detection.
Additionally, I'd suggest to upgrade to the latest stable UI5 version in order to benefit from many controls having migrated to the new semantic rendering.
* The key awaits a property name from the model of which the value is unique. For more information, see topic Extended Change Detection.

Add contains filtering option in the Filter tab in the P13n dialog for the Smart Table

I am using SmartTable with property useTablePersonalisation set to true which generates P13n dialog by button . According to the manual I should be able to change data type of filter operator:
The second field offers an operator for specifying the filter in more detail. The operators that are available depends on the data type of the selected column.
I am interested in these two options from manual:
I want to get "string type" option, which autogenerates this:
But I am still getting option autogenerated for "number type" instead of "string type". I declared this field as Edm.String in the backend entity.
Please do you have any idea how to resolve this issue?
Here is my xml code, Abc is Edm.String:
<smartTable:SmartTable id="idSmartTable" smartFilterId="idSmartFilterBar" tableType="ResponsiveTable" entitySet="AbcSet"
useVariantManagement="false" useTablePersonalisation="true" header=" " showRowCount="true" enableAutoBinding="true" useExportToExcel="false"
showFullScreenButton="true">
<Table growing="true" mode="None">
<columns>
<Column>
<customData>
<core:CustomData key="p13nData" value='\{"columnKey": "Abc","leadingProperty": "Abc","sortProperty": "Abc","filterProperty": "Abc"}'/>
</customData>
<header><Text text="{i18n>Abc}" wrapping="false"/></header>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{Abc}"/>
</cells>
</ColumnListItem>
</items>
</Table>
</smartTable:SmartTable>
I was trying to change data type to "sap.ui.model.type.String" of CustomData in the xml table definition or in the ColumnListItem but maybe I am doing something wrong. I must use 1.38 UI5 version.
Thanks for any device.
Since you are using the custom columns in the smart table you need to define "type" property in the custom data of your column.
Following types should be used for different data types:
string
numeric
date
you can see the sample code in the URL mentioned, here they have used type numeric in the example.
[https://ui5.sap.com/#/entity/sap.ui.comp.smarttable.SmartTable/sample/sap.ui.comp.sample.smarttable.mtableCustom/code]
You can check the SAP UI5 example from the below link:
https://ui5.sap.com/#/entity/sap.ui.comp.smarttable.SmartTable/sample/sap.ui.comp.sample.smarttable.mtableCustom/code
Basically you need to use ' "type": "text" ' in the custom data along with the sort and filter property.
Thanks,
Mahesh

How to make only one cell editable in smart table sapui5

I am using a sapui5 smart table to list down my products. It includes product code, product description and order quantity.
Among these three fields i want to update only the order quantity. It should be an inline editing in the table.
In my smart table i have enabled the property "editable" as "true". It makes the entire row is editable. Instead of making entire row editable, i want make only one cell to be editable.
Example
<smartFilterBar:SmartFilterBar id="smartFilterBar" entityType="ZDEMO_C_MyEntityType" persistencyKey="SmartFilter_Explored">
</smartFilterBar:SmartFilterBar>
<smartTable:SmartTable id="mySmartTable"
smartFilterId="smartFilterBar"
tableType="GridTable"
editable="true"
entitySet="ZDEMO_C_MyEntity"
useVariantManagement="false"
useTablePersonalisation="true"
header="My Products"
showRowCount="true"
useExportToExcel="true"
enableAutoBinding="true">
</smartTable:SmartTable>
I can see 2 ways:
Make use of "field controls" concept. It requires adding a special properties within your entity type, which define the state of the fields (cells). Also some annotations have to be introduced (in the metadata.xml by backend) to initiate the handling.
Here is a link where concept described using Form control as an example, but the same rules are applicable for Table as well:
https://blogs.sap.com/2017/06/06/dynamic-field-control-using-annotations-in-sapui5/
Redefine the table rows manually in your XML and bind the needed cell(s) against the property of the local JSON model, which could be changed depending on some conditions (e.g. Edit button press).
The 1st approach is better from the architectural perspective but requires some data model modifications (from the backend side).
The 2nd approach allows to do everything on UI and program some complex UI logic, which defines the cells state.
You choose.
You can add a sap ui table inside the smart table and add columns with customdata property. Follow these steps.
Make editable="true" as editable="false"
In your xml, make sure to add this namespace xmlns:core="sap.ui.core"
Within the smarttable tag add below.
<smartTable:SmartTable .................................
<Table>
<columns>
<Column>
<customData>
<core:CustomData key="p13nData" value='\{"columnKey": "OrderQty", "leadingProperty": "OrderQty", "columnIndex":"2"}'/>
</customData>
<Text text="Order Qty"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Input value="{OrderQty}" type="Number" editable="true"/>
</cells>
</ColumnListItem>
</items>
</Table>
</smartTable:SmartTable>
Add below tag inside table to make your column editable
<table:Column sortProperty="Max_Capacity" filterProperty="Max_Capacity" id="maxCapCol">
<Label text="Max Capacity"/>
<table:template>
<Input text="{Max_Capacity}" />
</table:template>
</table:Column>

Change Text Font to Bold

I have a table (sap.m.Table) and would like to change the header font to bold, but I'm unable to do that. Here is my code for one of the column definitions in my *.view.xml:
<Column xmlns="sap.m"
hAlign="Left"
width="17em"
>
<Text text="Vendor" />
</Column>
After looking at the API (sap.m.Text), I don't see a way to change the text style and I'm also new to UI5. Could someone point me to where to look for this?
sap.m.FormattedText
Another option is to use sap.m.FormattedText[api] with an inline tag <strong> within the htmlText value.
<Column ...>
<FormattedText htmlText="<strong>My Column</strong>" />
</Column>
Note
In XML, the character < needs to be escaped with <.
Browsers do not guarantee that the text within <strong> is always displayed in bold.
The <strong> element is for content that is of greater importance, while the <b> element is used to draw attention to text without indicating that it's more important. [source]
The element <b> is currently not supported by the FormattedText. On the other hand, <em> is supported to emphasize the text.
sap.m.Label
Instead of sap.m.Text, you can use sap.m.Label which supports "Bold" design.
<Column id="myColumn">
<Label labelFor="myColumn"
design="Bold"
text="..."
wrapping="true"
/>
</Column>
Additionally, enable the property wrapping (available since 1.50) in order to achieve the default behavior of sap.m.Text. Wrapping should be enabled for column headers as recommended by Fiori design guidelines:
Column Headers - Best Practices
Use controls that wrap [...]. Do not use controls that truncate.
Note: If the label is not labeling anything, please try with different controls like sap.m.FormattedText.
I found by chance that using <FormattedText> instead of <Text> creates bold headers. This works without (!) using any additional bold or strong markup in the htmlText of <FormattedText>.
So in your case you would go with:
<Column
hAlign="Left"
width="17em"
>
<FormattedText htmlText="Vendor" />
</Column>
Whether this works seems to be somewhat dependent on the SAPUI5 version and the theme in use.
It works for me on SAPUI5 1.108 with the default theme (no data-sap-ui-theme specified in index.html).
Try like in the Documentation
Create a custom CSS
Add your styleclass to the Control.