sap.m.IconTabFilter: How to display full text with icon? - sapui5

I want to display IconTabBar with full texts and icons. How to fix it? With showAll="true", full text is used but without icon.

showall does not work in this way. It has nothing to do with wrapping of text items.
Form the API documentation for sap.m.IconTabFilter: "Enables special
visualization for disabled filter (show all items).
Default value is false."
Possible Solution: Use CSS to increase the size of the single IconTabFilters or disable the text wrapping using CSS.

If your labels get truncated, consider using shorter labels or text tabs (without icons), as text tabs cannot get truncated.
The text-only variant is one of the most common types. It allows longer labels, and can also display counters above the text to indicate the number of items on the tab page.
Unlike all other tab variants, the labels do not get truncated. The full text is always shown.

<IconTabBar>
<items>
<IconTabFilter icon="sap-icon://hint">
<l:SimpleForm minWidth="1024">
<core:Title text="Address"/>
<Label text="Name"/>
<Text text="{BuyerName}"/>
<Label text="Created At"/>
<Text text="{CreatedAt}"/>
<Label text="Created By Bp"/>
<Text text="{CreatedByBp}"/>
</l:SimpleForm>
</IconTabFilter>
<IconTabFilter icon="sap-icon://attachment">
<l:SimpleForm id="SupplierForm" minWidth="1024">
<Label text="status"/>
<Label text="Name" />
<Input value="{BuyerName}">
</Input>
</l:SimpleForm>
</IconTabFilter>
</items>
</IconTabBar>

Related

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: 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

sapui5 coordinate plotting

A question regarding below process. I have a table maintained in blue box. Sample table maintenance and expected output.
How could I render the coordinates to a clickable table/grid like what is shown in red box. Which SAPUI5 control able to achieve this objective? The X will be the lot id which will be maintained in the table and it shall have an event triggered to show the detail information when user click on the cell. Some lot will have single cell and some will need to merge cell(Note: if the coordinate is not maintained, it shall leaves blank to that cell and is non-clickable).
Does this requirment able to achive using sapui5 for fiori app?
There are several ways to achieve this, but not all of them offer the complete set of functionality that you describe.
The first way that comes into mind is to use a sap.m.Table with the "mergeDuplicates" properties set on the columns. Example (working fiddle here):
<Table>
<columns>
<Column mergeDuplicates="true">
<header><Label text="1" /></header>
</Column>
<Column mergeDuplicates="true">
<header><Label text="2" /></header>
</Column>
<Column mergeDuplicates="true">
<header><Label text="3" /></header>
</Column>
</columns>
<ColumnListItem>
<Button text="A"/>
<Button text="B"/>
<Button text="X"/>
</ColumnListItem>
<ColumnListItem>
<Button text="A"/>
<Button text="C"/>
<Button text="C"/>
</ColumnListItem>
<ColumnListItem>
<Button text="A"/>
<Button text="C"/>
<Button text="C"/>
</ColumnListItem>
</Table>
The main downside of this is that you cannot merge cells across columns (i.e. in this example, you would get cell "C" twice: once for the second column and once for the third).
Another version is to use the sap.ui.layout.Grid. This has mostly the same limitation (that you can only merge "cells" in a single direction) and also has the added limitation that:
The Grid control is a layout which positions its child controls in a 12 column flow layout.
Lastly, you could use a sap.ui.commons.layout.MatrixLayout (which is deprecated btw, but no "full" replacement was provided). This actually can be used to model your problem completely. Example (working fiddle here):
<layout:MatrixLayout class="matrix">
<layout:rows>
<layout:MatrixLayoutRow height="4em">
<layout:MatrixLayoutCell padding="None" rowSpan="3">
<Button text="A" width="100%"/>
</layout:MatrixLayoutCell>
<layout:MatrixLayoutCell padding="None">
<Button text="B" width="100%"/>
</layout:MatrixLayoutCell>
<layout:MatrixLayoutCell padding="None">
<Button text="X" width="100%"/>
</layout:MatrixLayoutCell>
</layout:MatrixLayoutRow>
<layout:MatrixLayoutRow height="4em">
<layout:MatrixLayoutCell padding="None" colSpan="2" rowSpan="2" >
<Button text="C" width="100%"/>
</layout:MatrixLayoutCell>
</layout:MatrixLayoutRow>
<layout:MatrixLayoutRow height="4em">
</layout:MatrixLayoutRow>
</layout:rows>
</layout:MatrixLayout>
But as you see, it is slightly more complicated and may need some CSS fiddling.

Which SAPUI5 control can be used to display dynamic content in form of Labels or lists?

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}"/>

Large text is shown as ..... in SAPUI5

I have a large text to be displayed in each tab of IconTabBar.
Everything works fine.
But, the text is not shown completely.
Problem: "My large Text to be shown" is displayed as "My large Text ....."
I couldn't find any solution on developer site. Is there any way I can display complete text instead of ..... ?
There are three ways to define a IconTabFilter to display text.
No Icon: Display long text
With Icon and Horiontal Design: Providing more space for texts,still show ... if text is very long.
With Icon and Vertical Design: Using minimum horizontal space.
Please check and run the code snippets to see different display effects.
sap.ui.controller("test.controller", {
});
var oView = sap.ui.xmlview({
viewContent: jQuery("#view1").html()
});
oView.placeAt("content");
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"></script>
<script id="view1" type="sapui5/xmlview">
<mvc:View xmlns:l="sap.ui.layout" controllerName="test.controller" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:f="sap.ui.layout.form">
<l:VerticalLayout>
<IconTabBar>
<items>
<IconTabFilter text="Large text Large text">
<Text text="Large text Large text " />
</IconTabFilter>
<IconTabFilter text="Very Large text Very Large text Very Large text">
<Text text="Very Large text Very Large text " />
</IconTabFilter>
</items>
</IconTabBar>
<IconTabBar>
<items>
<IconTabFilter icon="sap-icon://hint" text="Large text Large text">
<Text text="Large text Large text " />
</IconTabFilter>
</items>
</IconTabBar>
<IconTabBar>
<items>
<IconTabFilter icon="sap-icon://attachment" design="Horizontal" text="Large text Large text">
<Text text="Large text Large text " />
</IconTabFilter>
</items>
</IconTabBar>
<IconTabBar>
<items>
<IconTabFilter icon="sap-icon://attachment" design="Horizontal" text="Very Large text Very Large text">
<Text text="Very Large text Very Large text " />
</IconTabFilter>
</items>
</IconTabBar>
</l:VerticalLayout>
</mvc:View>
</script>
<boy class="sapUiBody" id="content" />
The text of the IconTabFilter is showing ellipsis if you use it in combination with an icon.
It is possible to use only text, without icons, then there is no truncation at all.
If you use text and icon, the vertical design allows only very short text, the horizontal design allows longer text, but still after several characters the text will be truncated.
As the IconTabBar is a sap.m Control it is designed to run on mobile devices as well, therefore there is the truncation.
If you want to use Icons + Text you can also set the tooltip for the texts which are still too long.
And if you really want to have Icons + long text you can overwrite the css styles which are set to get this behaviour.
This would be the following rule:
.sapMITBFilter .sapMITBText {
width: 5rem;
overflow: hidden;
text-overflow: ellipsis;
}
But be aware that if you change the css there can be other issues and that the css can change in the future.