suggestion rows width increase in multi input field - sapui5

I have a MultiInput field in FilterBar when user enter the value suggestion table will display . Sample 1
I have 5 column in suggestion table data is overlapping. The Suggestion table taking the width of that multiInput field. sample 2
How to increase the suggestion table width like that of sample 1?
<fb:FilterBar <fb:FilterBar reset="onReset" class="sapUiSizeCompact" search="onSearch" useToolbar="false" showRestoreButton="false"
showClearButton="false">
<fb:filterGroupItems>
<fb:FilterGroupItem groupName="Filters" partOfCurrentVariant="true" visibleInFilterBar="true" name="0F" label="Plant" labelTooltip="Plant"
mandatory="false">
<fb:control>
<MultiInput showSuggestion="true" valueHelpRequest=".onValueHelpRequested" startSuggestion="2" suggestionRows="{/ProductCollection}">
<suggestionColumns>
<Column>
<Label text="ProductId"/>
</Column>
<Column>
<Label text="Product Name"/>
</Column>
<Column>
<Label text="Category"/>
</Column>
<Column>
<Label text="Description"/>
</Column>
<Column>
<Label text="Main Category"/>
</Column>
</suggestionColumns>
<suggestionRows>
<ColumnListItem>
<cells>
<Label text="{ProductId}" />
<Label text="{Name}" />
<Label text="{Category}" />
<Label text="{Description}" />
<Label text="{MainCategory}" />
</cells>
</ColumnListItem>
</suggestionRows>
</MultiInput>
</fb:control>
</fb:FilterGroupItem>
</fb:filterGroupItems>
</fb:FilterBar>

Related

SAPUI5 sap m table dyanmic columns and items bound in the view

I have a odata service which provides an array of objects which are the column headers. How do I bind this data to my table columns.
I need to dynamically get all of the data of Columns and use this to set my sap m table columns, with the column description using the 'Fieldname' property.
Tried to bind my view data (Columns) to the column, but that doesn't work like it would if you were applying it to the Table component.
<columns items="{view>/Columns}">
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="{view>Fieldname}"/>
</Column>
</columns>
Can this be done dynamically through the view?
Below is my current setup with the static columns solution.
<!-- Production Plan Table -->
<Table id="ProdPlanTable" items="{view>/MatchingOrders}" class="table">
<!--Table Header Toolbar-->
<headerToolbar>
<Toolbar class="toolbarHeader sapUiMediumMarginTop">
<content>
<!-- Planner Group filter -->
<VBox>
<Label text="{i18n>PlannerGroupHdr}"/>
<Select id="selectPG" items="{path: 'view>/FilterPlannerGroup', sorter: {path: 'Id'}}" change="onFilterSelect" selectedKey="{view>/FilterPlannerGroup/PlannerGroup}" width="200px">
<items>
<core:ListItem text="{view>PlannerGroup}" key="{view>PlannerGroup}"/>
</items>
</Select>
</VBox>
<!-- Status filter -->
<VBox>
<Label text="{i18n>StatusHdr}"/>
<Select id="selectSTA" items="{path: 'view>/FilterStatus', sorter: {path: 'Id'}}" change="onFilterSelect" selectedKey="{view>/FilterStatus/Status}" width="200px">
<items>
<core:ListItem key="{view>Status}" text="{view>Status}"/>
</items>
</Select>
</VBox>
<!-- Required / Delivered UoM -->
<VBox>
<Label text="{i18n>UoMHdr}"/>
<Select items="{view>/FilterUoM}" change="onUoMSelect" selectedKey="{view>/SelectedUoMId}" width="200px">
<items>
<core:ListItem key="{view>UoMText}" text="{view>UoMText}"/>
</items>
</Select>
</VBox>
<!-- Toolbar Spacer -->
<ToolbarSpacer/>
<!-- Refresh button -->
<VBox>
<Label text=""/>
<Button text="{view>/LastRefreshTimeFormatted}" icon="sap-icon://refresh" type="Accept" press="refreshWithoutFilters"/>
</VBox>
</content>
</Toolbar>
</headerToolbar>
<!-- Headers -->
<!--<columns items="{view>/Columns}">-->
<!-- <Column minScreenWidth="Tablet" demandPopin="true">-->
<!-- <Text text="{view>/Columns/Fieldname}"/>-->
<!-- </Column>-->
<columns>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="{i18n>PlannerGroup}"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="{i18n>ProcessOrder}"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="{i18n>Info}"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="{i18n>Article}"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true" hAlign="End">
<Text text="{i18n>OrderQty}"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true" hAlign="End">
<Text text="{i18n>RequiredQty}"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true" hAlign="End">
<Text text="{i18n>DeliveredQty}"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="{i18n>Status}"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="{i18n>StartDateTime}"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="{i18n>EndDateTime}"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="{i18n>LongText}"/>
</Column>
</columns>
<!-- Items -->
<items>
<ColumnListItem type="Inactive">
<Text text="{view>PlannerGroup}"/>
<Text text="{view>ProcessOrder}"/>
<Text text="{view>GoodsRecipient}"/>
<ObjectIdentifier title="{view>Article}" text="{view>ArticleDescription}"/>
<ObjectNumber number="{path: 'view>RequiredQty', formatter: '.formatter.numberThousands'}" unit="{view>OrderUOM}"/>
<Text text="{path: 'view>SelectedUoMQty/RequiredQty', formatter: '.formatter.numberThousands'}"/>
<Text text="{path: 'view>SelectedUoMQty/DeliveredQty', formatter: '.formatter.numberThousands'}"/>
<Text text="{view>Status}"/>
<Text text="{path: 'view>StartDay', formatter: '.formatter.date'}, {path: 'view>StartTime', formatter: '.formatter.time'}"/>
<Text text="{path: 'view>EndDay', formatter: '.formatter.date'}, {path: 'view>EndTime', formatter: '.formatter.time'}"/>
<Button icon="{= ${view>LongTextExists} ? 'sap-icon://attachment-text-file' : 'sap-icon://add-document'}" type="{= ${view>LongTextExists} ? 'Emphasized' : 'Default'}" press="onOpenProductionNote"/>
</ColumnListItem>
</items>
</Table>

how do i make sap.m.table to adjust any number of columns without overflowing

I'm using sap.m.table to display data using model that will be set in the controller.But last 2 columns of my table are hidden when displayed due to overflow.Here is my code:
<Table id="table1" busyIndicatorDelay="{worklistView>/tableBusyDelay}" growing="true" growingScrollToLoad="true"
noDataText="{worklistView>/tableNoDataText}" fixedLayout="true" updateFinished="onUpdateFinished" width="auto"
items="{responseListData>/oData}">
<headerToolbar>
<Toolbar>
<Title id="tableHeader" text="{worklistView>/worklistTableTitle}"/>
<ToolbarSpacer/>
<SearchField id="searchField" tooltip="{i18n>worklistSearchTooltip}" search="onSearch" width="auto"></SearchField>
<!--<Button press="onRankSort" id="ranksort" icon="sap-icon://drop-down-list" tooltip="Rank Sort"/>-->
<Button press="onPriceSort" id="pricesort" icon="sap-icon://drop-down-list" tooltip="Price Sort"/>
</Toolbar>
</headerToolbar>
<columns>
<Column width="4rem" id="supplierid" minScreenWidth="Medium" demandPopin="true" hAlign="Begin" >
<Text id="nameColumnTitle" text="Supplier ID"/>
</Column>
<Column width="4rem" id="quanity" hAlign="Begin" demandPopin="false">
<Text text="Qty/Unit"/>
</Column>
<Column width="4rem" id="price" hAlign="Begin" demandPopin="true">
<Text text="Price"/>
</Column>
<Column width="4rem" id="offervaliddate" hAlign="Begin" demandPopin="true" minScreenWidth="Tablet">
<Text text="Offer Valid Until"/>
</Column>
<Column width="4rem" id="tc" hAlign="Begin">
<Text text="T&C"/>
</Column>
<Column width="4rem" id="responsedate" hAlign="End">
<Text text="Delivery Due Date"/>
</Column>
<Column id="attachment" width="4rem" hAlign="End">
<core:Icon src="sap-icon://chain-link" size="1.5em" color="#000">
<core:layoutData>
<FlexItemData growFactor="1"/>
</core:layoutData>
</core:Icon>
</Column>
<Column width="4rem" id="note" hAlign="End">
<Text text="Comment"/>
</Column>
<Column width="4rem" id="rank" hAlign="End" visible="false">
<Text text="Rank"/>
</Column>
<Column width="4rem" id="selected" hAlign="End" visible="false">
<Text text="Selected"/>
</Column>
</columns>
<items>
<ColumnListItem app:createdBy="{responseListData>responseCreatedBy}">
<cells>
<ObjectNumber number="{responseListData>responseCreatedBy}"/>
<Text width="60px" text="{responseListData>sellerQuantity} {responseListData>sellerUnits}"/>
<ObjectNumber number=" {responseListData>sellerPrice}" unit="{responseListData>sellerCurrency}"/>
<Text width="60px" text="{responseListData>offerValidUntil}"/>
<ObjectNumber number="{responseListData>sellerTermsAndConditions}" tooltip="{responseListData>sellerTermsAndConditions}"/>
<Text width="60px" text="{responseListData>sellerDeliveryDueDate}"/>
<Link id="attachmentLink" text="{/oFormData/0/data/fileType}" target="_blank" press="downloadFile"/>
<ObjectNumber number="{responseListData>sellerComments}" tooltip="{responseListData>sellerComments}"/>
<!--<ComboBox enabled="{responseListData>/cBoxEnable}">-->
<!-- <core:Item key="1" text="1" />-->
<!-- <core:Item key="2" text="2" />-->
<!-- <core:Item key="3" text="3" />-->
<!-- <core:Item key="4" text="4" />-->
<!-- <core:Item key="5" text="5" />-->
<!--</ComboBox>-->
<Select width="60px" enabled="{responseListData>comboEnable}" change="changeRank" selectedKey="{responseListData>sellerRank}">
<core:Item key="0" text=" "/>
<core:Item key="1" text="1"/>
<core:Item key="2" text="2"/>
<core:Item key="3" text="3"/>
<core:Item key="4" text="4"/>
<core:Item key="5" text="5"/>
</Select>
<CheckBox id="select" selected="{responseListData>sel1}" enabled="{responseListData>sel}" visible="{responseListData>show}"
select="onSelect" app:createdBy="{responseListData>responseCreatedBy}"/>
<!--<Button enabled="false" text=">" press="move" />-->
</cells>
</ColumnListItem>
</items>
</Table>
What property will help me to adjust all the columns without overflow?I tried adjusting the width but it works in some case and in others i have the same problem
You should remove visible property.

How to show two Buttons in single column in SAPUI5

I have a Table with four column, in the last column I want to have two buttons in each row.
I have tried using static code in XML, but it's not working:
<Table id="tableid">
<columns>
<Column>
<Text text="Product" />
</Column>
<Column>
<Text text="Price" />
</Column>
<Column>
<Text text="compant" />
</Column>
<Column>
<Text text="Buttons" />
</Column>
</columns>
</Table>
<items>
<ColumnListItem>
<cells>
<Text text="TV"/>
</cells>
<cells>
<Text text="15000"/>
</cells>
<cells>
<Text text="samsung"/>
</cells>
<cells>
<Button text="Button1"/>
<Button text="Button2"/>
</cells>
</ColumnListItem>
</items>
You can use HBox control to get two buttons in single cell.
Here I have created jsbin for it.
I had the same need. I share a peace of my code, I include tooltip and didn't use texts in buttons:
<columns>
<Column>
<header>
<Text text="ID" />
</header>
</Column>
<Column>
<header>
<Text text="Name" />
</header>
</Column>
<Column>
<header>
<Text text="Actions" />
</header>
</Column>
</columns>
<ColumnListItem>
<Text text="{CustomerID}" />
<Text text="{ContactName}" />
<cells>
<HBox>
<Button icon="sap-icon://detail-view" type="Transparent" tooltip="View" press="onPressViewXXX"/>
<Button icon="sap-icon://begin" type="Transparent" tooltip="Reproc" press="onPressReprocXXX"/>
<Button icon="sap-icon://decline" type="Transparent" tooltip="Cancel" press="onPressCancelXXX"/>
</HBox>
</cells>
</ColumnListItem>
</Table>

SAPUI5 : Select Line item in Table not working

I have built an XML fragment like below.
<core:FragmentDefinition xmlns="sap.m"
xmlns:fb="sap.ui.comp.filterbar" xmlns:core="sap.ui.core">
<Dialog stretch="false" title="Select User" showHeader="true">
<content>
<fb:FilterBar reset="onReset" search="onSearch"
advancedMode="true">
<fb:filterItems>
<fb:FilterItem id="searchField" name="userSeacrch">
<fb:control>
<SearchField width="100%" id="searchUser" showSearchButton="false"/>
</fb:control>
</fb:FilterItem>
</fb:filterItems>
<fb:filterGroupItems>
<fb:FilterGroupItem groupName="G1" id="fname1" idgroupTitle="Group1" name="A" label="First Name" labelTooltip="First Name">
<fb:control>
<Input type="Text" id="fname"/>
</fb:control>
</fb:FilterGroupItem>
<fb:FilterGroupItem groupName="G1" id="lname1" groupTitle="Group1" name="B" label="Last Name" labelTooltip="Last Name">
<fb:control>
<Input type="Text" id="lname"/>
</fb:control>
</fb:FilterGroupItem>
<fb:FilterGroupItem groupName="G1" id="department1" groupTitle="Group1" name="C" label="Department" labelTooltip="Department">
<fb:control>
<Input type="Text" id="department"/>
</fb:control>
</fb:FilterGroupItem>
</fb:filterGroupItems>
</fb:FilterBar>
<Table id="idF4" inset="true"
backgroundDesign="Translucent"
visibleRowCount="5"
noDataText="No data exists" >
<headerToolbar>
<Toolbar>
<Label text="User(s)"></Label>
</Toolbar>
</headerToolbar>
<columns>
<Column>
<Text text="User" type="Navigation"/>
</Column>
<Column minScreenWidth="small" popinDisplay="Inline" demandPopin="true">
<Text text="First Name" type="Navigation" />
</Column>
<Column minScreenWidth="small" popinDisplay="Inline" demandPopin="true">
<Text text="Last Name" type="Navigation" />
</Column>
<Column>
<Text text="Department" type="Navigation"/>
</Column>
</columns>
<items>
<ColumnListItem type="Navigation" selected="true" press="handleLineItemPress">
<cells>
<Text />
<Text />
<Text />
<Text "/>
</cells>
</ColumnListItem>
</items>
</Table>
</content>
<beginButton>
<Button text="Cancel" press="onCloseDialog" />
</beginButton>
</Dialog>
</core:FragmentDefinition>
I am not dynamically binding the data. But instead following the below approach.
for ( var i = 0; i < oData.results.length; i++) {
oEntry.Bname = oData.results[i].Bname;
oEntry.Name1 = oData.results[i].Name1;
oEntry.Name2 = oData.results[i].Name2;
oEntry.Department = oData.results[i].Department;
var oTemplate = new sap.m.ColumnListItem(
{
cells : [
new sap.m.Text({
text : oEntry.Bname
}),
new sap.m.Text({
text : oEntry.Name1
}),
new sap.m.Text({
text : oEntry.Name2
}),
new sap.m.Text({
text : oEntry.Department
}) ] } );
oTable.addItem(oTemplate);
}
Now when I select an entry from this table, the event "press" is not trigerred.
I have a controller code also.
handleLineItemPress : function(oEvent){
var currentRowContext = oEvent.getParameter("rowContext");
},
Really?....
Just take a good look at your code first.
You have defined a table -- without databinding -- so it just has one ColumnListItem with a press event assigned.
In your code, you are adding more ColumnListItem's to your table, and these don't have a press event assigned.
And now you're asking why the press event for those rows isn't working? ;-)
(On a side note, what's the reasoning why you aren't using data binding?)

SAP UI5 - Change the color of a Custom Data Field in table cell

I am new to SAP UI5 and working my way through the sample Fiori apps. My XML view contains a table control and is as under:
<Table id="idProductsTable" inset="false"
items="{path: '/ShipmentCollection'
}">
<headerToolbar>
<Toolbar>
<Label text="Shipment List"></Label>
<ToolbarSpacer />
<Button icon="sap-icon://refresh" press="refreshDataFromBackend" />
</Toolbar>
</headerToolbar>
<columns>
<Column width="12em">
<Label text="Shipment" />
</Column>
<Column minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
<Label text="Carrier`" />
</Column>
<Column minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
<Label text="Dimensions" />
</Column>
<Column minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
<Label text="Weight" />
</Column>
<Column hAlign="Center">
<Label text="Price" />
</Column>
</columns>
<items>
<ColumnListItem id="listItems" type="Navigation"
press="onListItemPress">
<cells>
<l:VerticalLayout>
<Label text="{ShipNum}"></Label>
<Label text="{Text}"></Label>
</l:VerticalLayout>
<Text text="{Carrier}" />
<Text text="{Route}" />
<Text text="{Cust}" />
<Text text="{DelDate}" />
</cells>
</ColumnListItem>
</items>
</Table>
How can I change the color of Text field in cell-1 based on the contents of this field?
Thanks!
1.You can use data binding formatter to change the color. For example, your first cell.
<Label text="{path:'ShipNum', formatter:'Formatter.colorFormatter'}"></Label>
2.Define yourstyle for changing color in the css file.
3.Define the function colorFormatter in the demoformatter.js
sap.ui.core.Element.extend("demoformatter", {
colorFormatter:function(value) {
this.addStyleClass("yourstyle");
return value;
}
});
Formatter = new demoformatter();
==================xml===================================
<t:Table >
<t:columns>
<t:Column width="11rem">
<Label text="标志" />
<t:template>
<Text text="{
path: 'status',
formatter: 'yaoji.utils.formatter.format'
}"
/>
</t:template>
</t:Column>
</t:columns>
</t:Table>
===================format js===========================
yaoji.utils.formatter.format = function (cellValue) {
this.onAfterRendering= function() {
//!!! if not after redering, can't get the dom
var cellId = this.getId();
$("#"+cellId).parent().parent().parent().css("background- color","red");
return cellValue;
};
Maybe another, uglier option is to just add a updateFinished event handler on the table and then set the classes dynamically there?