I use XML view, and the inside table as follows
<Table id="employeeTable"
growing="true"
growingThreshold="2"
updateStarted="startedLoading"
updateFinished="finishedLoading"
showNoData="false"
growingScrollToLoad="true"
items="{
path: '/data'
}">
<columns>
<Column><Text text="Name"/></Column>
<Column>
<Text text="Address"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{name}" />
<Text text="{address}" />
</cells>
</ColumnListItem>
</items>
</Table>
I call backend-side through ajax call. The result is JSON format.
How can I make use of the growing feature without having an OData service?
Related
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>
I'm facing a small issue with Split App(Master-Detail). I'm not able to see Footer for the Detail Page.
After trying in all scenarios I found that because of sap.m.Table, I'm not able to get the Footer.
If I remove sap.m.Table I'm able to see Footer in Detail Page. I tried even with Semantic Buttons and Semantic footers but still no luck.
Can you please help me how can I fix this issue?
Below is my Code in XML ::
<mvc:View controllerName="sap.msbi_leaveAndAttendence.controller.LeaveBalanceReport" xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m" xmlns:unified="sap.ui.unified" xmlns:ui="sap.suite.ui.commons"
xmlns:me="sap.me" xmlns:f="sap.ui.layout.form" xmlns:l="sap.ui.layout" xmlns:u="sap.ui.unified" xmlns:core="sap.ui.core">
<App>
<pages>
<Page title="Leave Balance Report" class="sapUiSizeCompact" showHeader="true" showFooter="true">
<content>
<IconTabBar id="idIconTabBarNoIcons" expanded="{device>/isNoPhone}" class="sapUiResponsiveContentPadding">
<items>
<IconTabFilter text="All Leaves">
<Table id="idLeaveTable" class="sapUiSizeCompact" inset="true" items="{path: 'allLeavesModel>/allLeaves'}">
<columns>
<Column>
<Text text="{i18n>startDate}"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="{i18n>endDate}"/>
</Column>
<Column minScreenWidth="Tablet">
<Text text="{i18n>noOfDays}"/>
</Column>
<Column>
<Text text="{i18n>typeOfLeave}"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{allLeavesModel>from}"/>
<Text text="{allLeavesModel>to}"/>
<Text text="{allLeavesModel>used}"/>
<Text text="{allLeavesModel>typeofleave}"/>
</cells>
</ColumnListItem>
</items>
</Table>
</IconTabFilter>
<IconTabFilter text="Extraordinary Leaves"></IconTabFilter>
</items>
</IconTabBar>
</content>
<footer>
<OverflowToolbar>
<ToolbarSpacer/>
<Button type="Accept" text="Submit">
<layoutData><OverflowToolbarLayoutData moveToOverflow="false"/></layoutData>
</Button>
</OverflowToolbar>
</footer>
</Page>
</pages>
</App>
</mvc:View>
I have resolved this issue by applying CSS for the main App.view.xml. After making overflow-y as hidden for the App.view.xml, Then i can see footer in my Detail page
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>
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>
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?