SAPUI5 : Select Line item in Table not working - sapui5

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?)

Related

suggestion rows width increase in multi input field

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>

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.

SAPUI5 SmartTable itemPressed - get pressed cell

is there any chance to get the value of the pressed cell in the itemPress event ? I would like to set a tooltip when somebody presses a cell in a column. Alternatively, is it possible to register this event on a cell only ?
I am using SmartTable (responsive -> sap.m.table) based on XML View:
<smartTable:SmartTable
id="kubas"
entitySet="myEntity"
initiallyVisibleFields="absender,empfaenger,nachtyp"
smartFilterId="smartFilterBar"
tableType="ResponsiveTable"
useExportToExcel="true"
useVariantManagement="true"
useTablePersonalisation="true"
header="Entries"
showRowCount="true"
persistencyKey="SmartTableAnalytical_Explored"
enableAutoBinding="true"
demandPopin="true"
class="sapUiResponsiveContentPadding"
dataReceived="onDataReceived"
>
</smartTable:SmartTable>
Or would it be better to somehow incorporate an icon / image to the cells value and set the tooltip for it ?
It is generally not a very good practice to set tooptip by itemPress event of a cell.
Either you can set a tooltip in Column header or you can customize your Column item showing tooltip.
You can customize your inner table of SmartTable, for example, Column header and Column item like below. More info please see here.
<smartTable:SmartTable entitySet="LineItemsSet"
smartFilterId="smartFilterBar" tableType="ResponsiveTable"
useExportToExcel="true" useVariantManagement="false"
useTablePersonalisation="true" header="Line Items" showRowCount="true"
persistencyKey="SmartTableAnalytical_Explored" enableAutoBinding="true"
demandPopin="true" class="sapUiResponsiveContentPadding">
<Table>
<columns>
<Column width="100px" hAlign="Left">
<customData>
<core:CustomData key="p13nData"
value='\{"columnKey": "Dmbtr", "maxLength": "5","columnIndex":"4", "leadingProperty": "Dmbtr"}' />
</customData>
<Text text="{/#LineItems/Dmbtr/#sap:label}" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text
text="{Dmbtr}" />
</cells>
</ColumnListItem>
</items>
</Table>
</smartTable:SmartTable>
Set tooltip for column header if you want to show general information regarding this column.
<columns>
<Column width="100px" hAlign="Left">
<customData>
<core:CustomData key="p13nData"
value='\{"columnKey": "Dmbtr", "maxLength": "5","columnIndex":"4", "leadingProperty": "Dmbtr"}' />
</customData>
<Text text="{/#LineItems/Dmbtr/#sap:label}" tooltip = "YOUR TOOLTIP"/>
</Column>
</columns>
Set tooltip for each individual cell.
<items>
<ColumnListItem>
<cells>
<Text text="{Dmbtr}" tooltip = "YOUR TOOLTIP"/>
</cells>
</ColumnListItem>
</items>
One more thing though, when i wanted to add the second column i was unable to bind it, in terms, the data was not coming from my entitySet, the column remain empty. If i put a hardcoded text, then it gets popuplated. Any clue why ?
<Table growing="true" growingScrollToLoad="true" >
<columns>
<Column hAlign="Left" vAlign="Middle" visible="true" >
<customData>
<core:CustomData key="p13nData"
value='\{"columnKey": "column1", "leadingProperty": "column1", "filterProperty": "column1", "columnIndex":"0"}' />
</customData>
<Text text="Column1" />
</Column>
<Column hAlign="Left" vAlign="Middle" visible="true" >
<customData>
<core:CustomData key="p13nData"
value='\{"columnKey": "column2", "columnIndex":"1"}' />
</customData>
<Text text="Column2" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<HBox>
<core:Icon src="sap-icon://sys-help" />
<ToolbarSpacer width="5px" />
<Text text="{column1}" tooltip="dasda" />
</HBox>
</cells>
<cells>
<Text text="{column2}" tooltip="dasda" />
</cells>
</ColumnListItem>
</items>

How set not-visible an item than not have the "visible" property?

I have a button and a grid below.
Inside the grid I have some elements (input, checkbox, label, ...)
How can I set not visible all the elements inside the grid together together at once?
<Grid xmlns="sap.ui.layout" id="idGrid">
<content>
<Label xmlns="sap.m"
id="idLabel"
design="Standard"
text="the label">
</Label>
<Input xmlns="sap.m"
id="idInput"
value="the input">
</Input>
</content>
</Grid>
put the Grid content into a VerticalLayout.
sap.ui.controller("test.controller", {
handleHide: function(oEvent) {
var bt = oEvent.getSource();
var vl = this.getView().byId("vlContent");
if (vl.getVisible()) {
vl.setVisible(false);
bt.setText("Show");
} else {
vl.setVisible(true);
bt.setText("Hide");
}
}
});
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:Grid defaultSpan="L12 M12 S12" width="auto" id="idGridDetail">
<l:content>
<l:VerticalLayout id="vlContent">
<f:SimpleForm id="SimpleFormDisplay111" minWidth="1024" maxContainerCols="2" editable="false" layout="ResponsiveGridLayout" title="" labelSpanL="3" labelSpanM="3" emptySpanL="4" emptySpanM="4" columnsL="1" columnsM="1">
<f:content>
<Label text="Se OC valido per Incas" />
<Text text="{/seOCValidoPerIncas}" />
<Label text="ocdc" id="idLabelCdc" />
<Text text="{/cdc}" id="idTextCdc" />
<Label text="Ultimo passaggio Incas" />
<Text text="{/ultimoPassaggioIncas}" />
</f:content>
</f:SimpleForm>
<Panel expandable="true" expanded="true" headerText="Passaggio da Rampa a Incas">
<content>
<Table xmlns="sap.m" id="idTable_RampaToIncas_testate" items="{
path: '/passaggioRampaToIncas/testate'}">
<headerToolbar>
<Toolbar>
<Label text="Testate" design="Bold"></Label>
</Toolbar>
</headerToolbar>
<items>
<ColumnListItem>
<cells>
<Text text="{dataIns}" />
<Text text="{sePassatoABridge}" />
<Text text="{comando}" />
<Text text="{comando_desc}" />
<Text text="{tag}" />
<Text text="{viaggio}" />
</cells>
</ColumnListItem>
</items>
</Table>
<Label text=""></Label>
<Table xmlns="sap.m" id="idTable_RampaToIncas_righe" items="{
path: '/passaggioRampaToIncas/righe'}">
<headerToolbar>
<Toolbar>
<Label text="Righe" design="Bold"></Label>
</Toolbar>
</headerToolbar>
<items>
<ColumnListItem>
<cells>
<Text text="{dataIns}" />
<Text text="{sePassatoABridge}" />
<Text text="{comando}" />
<Text text="{comando_desc}" />
<Text text="{riga}" />
<Text text="{articolo}" />
</cells>
</ColumnListItem>
</items>
</Table>
<Label text=""></Label>
<Table xmlns="sap.m" id="idTable_RampaToIncas_eventiAttivazione" items="{
path: '/passaggioRampaToIncas/attivazione'}">
<headerToolbar>
<Toolbar>
<Label text="Eventi Attivazione" design="Bold"></Label>
</Toolbar>
</headerToolbar>
<items>
<ColumnListItem>
<cells>
<Text text="{dataIns}" />
</cells>
</ColumnListItem>
</items>
</Table>
</content>
</Panel>
<Panel expandable="true" expanded="true" headerText="Passaggio da Incas a Rampa">
<content>
<Table xmlns="sap.m" id="idTable_IncasToRampa_righe" items="{
path: '/passaggioIncasToRampa/righe'}">
<headerToolbar>
<Toolbar>
<Label text="Righe" design="Bold"></Label>
</Toolbar>
</headerToolbar>
<items>
<ColumnListItem>
<cells>
<Text text="{dataIns}" />
<Text text="{riga}" />
<Text text="{articolo}" />
<Text text="{qta_caricata}" />
<Text text="{qta_prevista}" />
</cells>
</ColumnListItem>
</items>
</Table>
</content>
</Panel>
</l:VerticalLayout>
</l:content>
</l:Grid>
<Button text="Hide" press="handleHide" />
</mvc:View>
</script>
<boy class="sapUiBody" id="content" />

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?