I got a requirement to build a table that should look like
Desired Interface
Where start time and End time will have TimePicker input fields. Can someone please suggest how to achieve this interface( what controls to use or maybe an example in jsfiddle would be highly appreciated) Thanks in Advance
Here is what i have so far:
<Table id="idNonRosterTable" inset="false" items="{schedule>/}">
<columns>
<Column hAlign="Center"/>
<Column hAlign="Center">
<Text text="Monday"/>
</Column>
<Column hAlign="Center">
<Text text="Tuesday"/>
</Column>
<Column hAlign="Center">
<Text text="Wednsday"/>
</Column>
<Column hAlign="Center">
<Text text="Thursday"/>
</Column>
<Column hAlign="Center">
<Text text="Friday"/>
</Column>
<Column hAlign="Center">
<Text text="Total hours per week"/>
</Column>
</columns>
<items>
<ColumnListItem vAlign="Middle" >
<cells>
<ObjectIdentifier title="{schedule>week}"/>
<HBox>
<VBox><Text text="Start time"/><TimePicker valueFormat="HH:mm" displayFormat="HH:mm"/><Text text="Total Hrs/Day"/></VBox>
<VBox><Text text="End time"/><TimePicker valueFormat="HH:mm" displayFormat="HH:mm"/><Text/></VBox>
</HBox>
<HBox>
<VBox><Text text="Start time"/><TimePicker valueFormat="HH:mm" displayFormat="HH:mm"/><Text text="Total Hrs/Day"/></VBox>
<VBox><Text text="End time"/><TimePicker valueFormat="HH:mm" displayFormat="HH:mm"/><Text/></VBox>
</HBox>
<HBox>
<VBox><Text text="Start time"/><TimePicker valueFormat="HH:mm" displayFormat="HH:mm"/><Text text="Total Hrs/Day"/></VBox>
<VBox><Text text="End time"/><TimePicker valueFormat="HH:mm" displayFormat="HH:mm"/><Text/></VBox>
</HBox>
<HBox>
<VBox><Text text="Start time"/><TimePicker valueFormat="HH:mm" displayFormat="HH:mm"/><Text text="Total Hrs/Day"/></VBox>
<VBox><Text text="End time"/><TimePicker valueFormat="HH:mm" displayFormat="HH:mm"/><Text/></VBox>
</HBox>
<HBox>
<VBox><Text text="Start time"/><TimePicker valueFormat="HH:mm" displayFormat="HH:mm"/><Text text="Total Hrs/Day"/></VBox>
<VBox><Text text="End time"/><TimePicker valueFormat="HH:mm" displayFormat="HH:mm"/><Text/></VBox>
</HBox>
<Text/>
</cells>
</ColumnListItem>
</items>
</Table>
For me it looks like nested for loop with sap.ui.table.Table, addColumn() and addRow()
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 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.
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 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" />
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?