I have a view:
<List
items="{data>/Stages}">
<CustomListItem>
<Panel>
<headerToolbar>
<Toolbar>
<content>
<Button
visible="{= ${data>/Stages/length} > 1}" />
</content>
</Toolbar>
</headerToolbar>
<content>
<Table
growing="true"
growingScrollToLoad="false"
items="{
path: 'data>FieldWorks',
templateShareable: true
}"
class="blueTable originTable techTable">
<columns>
<Column
visible="true"
vAlign="Middle"
width="15px" />
</columns>
<items>
<ColumnListItem>
<cells>
<core:Icon
visible="{ ???}"
src="sap-icon://customfont/moving"
size="2.1rem"
color="#14c6c9" />
</cells>
</ColumnListItem>
</items>
</Table>
</content>
</Panel>
</CustomListItem>
</List>
I have a model (example):
data: {
Stages: [{
FieldWorks: [{}, ....]
}, .....]
}
I hide my button (in my toolBar) by expression binding as you can see.
What is the best way to hide my Icon (in CustomListItem) by condition FieldWorks.length > 1
If you are using a JSON Model just add boolean property to your JSONModel to the FieldWorks entity and bind the visible property to it. Then one time you have to set it when data is loaded or created and that's it.
You can define a new property in your json Model under the FieldWorks property in order to bind the visibility of the icon.
you can use Object.defineProperty (SPEC MDN) to define your calculated new property.
Related
I have an XML fragment and use it in several places in an XML view like this:
<IconTabFilter text="ABC" key="1" icon="sap-icon://alphabetical-order">
<content>
<Table id="table1" width="auto" items="{path:'/ContactSet',parameters:{expand:'BusinessAddress,HomeAddress,OtherAddress,Photo'},filters:[{path:'Surname',operator:'StartsWith',value1:'A'},{path:'Surname',operator:'StartsWith',value1:'B'},{path:'Surname',operator:'StartsWith',value1:'C'}]}" noDataText=" {worklistView>/tableNoDataText}" busyIndicatorDelay="{worklistView>/tableBusyDelay}" growing="true" growingScrollToLoad="true" updateFinished="onUpdateFinished">
<headerToolbar>
<core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesHeader" type="XML"/>
</headerToolbar>
<columns>
<core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesColumns" type="XML"/>
</columns>
<items>
<core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesRows" type="XML"/>
</items>
</Table>
</content>
</IconTabFilter>
<IconTabSeparator icon="sap-icon://process"/>
<IconTabFilter text="DEF" key="2" icon="sap-icon://alphabetical-order">
<content>
<Table id="table2" width="auto" items="{path:'/ContactSet',parameters:{expand:'BusinessAddress,HomeAddress,OtherAddress,Photo'},filters:[{path:'Surname',operator:'StartsWith',value1:'D'},{path:'Surname',operator:'StartsWith',value1:'E'},{path:'Surname',operator:'StartsWith',value1:'F'}]}" noDataText="{worklistView>/tableNoDataText}" busyIndicatorDelay="{worklistView>/tableBusyDelay}" growing="true" growingScrollToLoad="true" updateFinished="onUpdateFinished">
<headerToolbar>
<core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesHeader" type="XML"/>
</headerToolbar>
<columns>
<core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesColumns" type="XML"/>
</columns>
<items>
<core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesRows" type="XML"/>
</items>
</Table>
</content>
</IconTabFilter>
I have some bindings in tablesHeader fragment file:
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<Toolbar>
<Title text="{worklistView>/worklistTableTitle}"/>
<ToolbarSpacer/>
<SearchField tooltip="{i18n>worklistSearchTooltip}" search="onSearch" width="auto"/>
</Toolbar>
</core:FragmentDefinition>
Now the question is how can I customize the binding inside the fragment based on its parent element.
For example I would like to have <Title text="{worklistView>/worklistTable1Title}"/> when it is placed inside the IconTabFilter with key="1" and also <Title text="{worklistView>/worklistTable2Title}"/> when it placed inside the IconTabFilter with key="2".
One possibility is to pass this binding to the fragment when we place it in the destination. But I don't know do we have any option for that in SAPUI5 or not.
The other possibility is to use some kinds of templating like what explained here. However, again I don't know how to make the conditions based on the parent element.
Note: I don't want to enter the codes inside the fragment file directly in the destination file, as I want to prevent repeating the code.
You need to play with the worklistView JSON model. As you mentioned it is a JSON model there will be a common property which is bind to the header text control irrespective of the selected key.
On load IconTabBar will set the default key using selectedKey property. So we can set this key value as the default value for the header text in the header section.
view.xml
<IconTabBar
id="idIconTabBar"
select="handleIconTabBarSelect"
selectedKey="1"
class="sapUiResponsiveContentPadding">
<items>
<IconTabFilter text="ABC" key="1" icon="sap-icon://alphabetical-order">
<content>
<Table id="table1" width="auto" noDataText=" {worklistView>/tableNoDataText}" busyIndicatorDelay="{worklistView>/tableBusyDelay}" growing="true" growingScrollToLoad="true" updateFinished="onUpdateFinished">
<headerToolbar>
<core:Fragment fragmentName="path/tablesHeader" type="XML"/>
</headerToolbar>
<!-- columns-->
<!-- items -->
</Table>
</content>
</IconTabFilter>
<IconTabSeparator icon="sap-icon://process"/>
<IconTabFilter text="DEF" key="2" icon="sap-icon://alphabetical-order">
<content>
<Table id="table2" width="auto" noDataText="{worklistView>/tableNoDataText}" busyIndicatorDelay="{worklistView>/tableBusyDelay}" growing="true" growingScrollToLoad="true" updateFinished="onUpdateFinished">
<headerToolbar>
<core:Fragment fragmentName="path/tablesHeader" type="XML"/>
</headerToolbar>
<!-- columns-->
<!-- items -->
</Table>
</content>
</IconTabFilter>
</items>
</IconTabBar>
Header fragment
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<Toolbar>
<Title text="{worklistView>/worklistTableHdrTitle}"/>
<ToolbarSpacer/>
<SearchField tooltip="{i18n>worklistSearchTooltip}" search="onSearch" width="auto"/>
</Toolbar>
</core:FragmentDefinition>
controller.js
worklistView model will be set with an extra property worklistTableHdrTitle with the default value as per the key which is mentioned in the IconTabBar.
setworklistViewModel: function() {
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
"worklistTableHdrTitle": "Table1 Title",//default value, as selectedKey="1" in IconTabBar
"worklistTable1Title": "Table1 Title",
"worklistTable2Title": "Table2 Title",
"tableNoDataText": "No Data"
});
this.getView().setModel(oModel, "worklistView");
},
Manipulate the worklistView model data based on the selection.
handleIconTabBarSelect: function(oEvent) {
var sSelectedKey = oEvent.getParameters("selectedKey").key;
if (sSelectedKey) {
var oModel = this.getView().getModel("worklistView");
if (oModel)
oModel.setProperty("/worklistTableHdrTitle", (sSelectedKey === "1") ? oModel.getProperty("/worklistTable1Title") : oModel.getProperty("/worklistTable2Title"));
}
},
I am using sap.m.table with mode "SingleSelectLeft" and with Aggregation ColumnListItem of type "Navigation".
On clicking of any of the items from the table, I want to show another page in split-app(detail page). I have put the routing code in the press event of ColumnListItem but this is leading to an issue as :
The selected item goes off(not appearing selected) when I click on the detail page.
Here is the snippet I am working with:
<Table inset="false" noDataText="{i18n>noDataMasterTable}" mode="SingleSelectLeft" selectionChange="onLineItemSelected" id="s2-table"
updateFinished="onListUpdateFinished" items="{mainService>/Bp}" busyIndicatorDelay="{detailView>/lineItemTableDelay}"
itemPress="handleMasterPress" width="100%" >
<headerToolbar>
<OverflowToolbar>
<SearchField id="s2-searchfield-search" tooltip="{i18n>searchToolTip}" liveChange="onSearch" width="auto"></SearchField>
<Button id="s2-table-activate" text="Activate" press="handleActivateBusinessPurpose" enabled="false"/>
<Button id="s2-table-delete" text="{i18n>delete}" press="handleDelete" enabled="false"/>
<Button id="s2-table-add" icon="sap-icon://add" press="handleCreatePress" tooltip="{i18n>addToolTip}"/>
</OverflowToolbar>
</headerToolbar>
<columns>
<Column >
<Text text="{i18n>Name}"/>
</Column>
<Column>
<Text text="{i18n>ApplicationGroupName}"/>
</Column>
<Column demandPopin="true" minScreenWidth="Tablet">
<Text text="{i18n>DataSubjectType}"/>
</Column>
<Column demandPopin="true" minScreenWidth="Tablet">
<Text text="{i18n>LegalEntity}"/>
</Column>
<Column demandPopin="true" minScreenWidth="Tablet">
<Text text="{i18n>Status}"/>
</Column>
</columns>
<items>
<ColumnListItem type="Navigation" press="handleMasterPress">
<!--<ColumnListItem >-->
<cells>
<ObjectIdentifier title="{mainService>BusinessPurposeName}"/>
<ObjectIdentifier text="{mainService>ApplicationGroupName}"/>
<ObjectIdentifier text="{mainService>DataSubjectType}"/>
<ObjectIdentifier text="{mainService>LegalEntityValue}"/>
<ObjectStatus text="{path:'mainService>Status', formatter:'.formatPurposeStatus'}"
state="{path:'mainService>Status', formatter:'.formatStatusColor'}"/>
</cells>
</ColumnListItem>
</items>
</Table>
Please let me know how can I show the selected item highlighted in the table.
First, you are firing 2 event on pressing and handling them with the same function. So, delete itemPress="handleMasterPress" or use another funtion.
Then, handleMasterPress() will be executed by the <ColumnListItem type="Navigation" press="handleMasterPress">
So in the handler, get the source from the event object and pass it to the table in the setSelectedItem() function
handleMasterPress: function(oEvent){
var oColumnListItem = oEvent.getSource();
var oTable = oColumnListItem.getParent();
oTable.setSelectedItem(oColumnListItem);
}
Here a working snippet
// define a new (simple) Controller type
sap.ui.controller("my.own.controller", {
handleMasterPress: function(oEvent){
var oColumnListItem = oEvent.getSource();
console.log(oColumnListItem.getMetadata())
var oTable = oColumnListItem.getParent();
oTable.setSelectedItem(oColumnListItem);
}
});
// instantiate the View
var myView = sap.ui.xmlview({viewContent:jQuery('#view1').html()}); // accessing the HTML inside the script tag above
// create some dummy JSON data
var data = {
WaybillsPlaces: [{
CoNumber: "Item 1",
},{
CoNumber: "Item 2",
},{
CoNumber: "Item 3",
}]
};
// create a Model and assign it to the View
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(data);
myView.setModel(oModel, "mainService");
// put the View onto the screen
myView.placeAt('content');
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta charset="utf-8">
<title>MVC with XmlView</title>
<!-- Load UI5, select "blue crystal" theme and the "sap.m" control library -->
<script id='sap-ui-bootstrap'
src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m'
data-sap-ui-xx-bindingSyntax='complex'></script>
<!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES -->
<!-- define a new (simple) View type as an XmlView
- using data binding for the Button text
- binding a controller method to the Button's "press" event
- also mixing in some plain HTML
note: typically this would be a standalone file -->
<script id="view1" type="sapui5/xmlview">
<mvc:View
controllerName="my.own.controller"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Panel headerText="Table Panel">
<Table inset="false" noDataText="{i18n>noDataMasterTable}" mode="SingleSelectLeft" selectionChange="onLineItemSelected" id="s2-table"
updateFinished="onListUpdateFinished" items="{mainService>/WaybillsPlaces}" busyIndicatorDelay="{detailView>/lineItemTableDelay}"
width="100%" >
<headerToolbar>
<OverflowToolbar>
<SearchField id="s2-searchfield-search" tooltip="{i18n>searchToolTip}" liveChange="onSearch" width="auto"></SearchField>
<Button id="s2-table-activate" text="Activate" press="handleActivateBusinessPurpose" enabled="false"/>
<Button id="s2-table-delete" text="{i18n>delete}" press="handleDelete" enabled="false"/>
<Button id="s2-table-add" icon="sap-icon://add" press="handleCreatePress" tooltip="{i18n>addToolTip}"/>
</OverflowToolbar>
</headerToolbar>
<columns>
<Column >
<Text text="{i18n>Name}"/>
</Column>
<Column>
<Text text="{i18n>ApplicationGroupName}"/>
</Column>
<Column demandPopin="true" minScreenWidth="Tablet">
<Text text="{i18n>DataSubjectType}"/>
</Column>
<Column demandPopin="true" minScreenWidth="Tablet">
<Text text="{i18n>LegalEntity}"/>
</Column>
<Column demandPopin="true" minScreenWidth="Tablet">
<Text text="{i18n>Status}"/>
</Column>
</columns>
<items>
<ColumnListItem type="Active" press="handleMasterPress">
<!--<ColumnListItem >-->
<cells>
<ObjectIdentifier title="{mainService>CoNumber}"/>
<ObjectIdentifier text="{mainService>CoNumber}"/>
<ObjectIdentifier text="{mainService>CoNumber}"/>
<ObjectIdentifier text="{mainService>CoNumber}"/>
<ObjectStatus text="{path:'mainService>Status', formatter:'.formatPurposeStatus'}"
state="{path:'mainService>Status', formatter:'.formatStatusColor'}"/>
</cells>
</ColumnListItem>
</items>
</Table>
</Panel>
</mvc:View>
</script>
</head>
<body id='content' class='sapUiBody'>
</body>
</html>
Add the following attribute to the items element within the Table element:
items="{
path: '{mainService>/Bp}',
type : 'sap.m.ListType.Active'
}"
Refer
sap.m.ListType.Active
Indicates that the item is clickable via active feedback when item is pressed.
Source: https://openui5.hana.ondemand.com/#/api/sap.m.ListType/overview
I can't find the problem in my code. The number of rows is always correct, but it only shows the values of the last object in the array of the binding. I'm using the correct aggregation <items> so that's not the issue. Maybe (I hope) I'm just overlooking something.
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<Dialog title="{i18n>selectionTitle}" horizontalScrolling="false">
<beginButton>
<Button text="{i18n>closeSelectionButton}" press="handleCloseSelectedTrainings"/>
</beginButton>
<endButton>
<Button type="Accept" text="{i18n>submitSelectionButton}" press="handleSubmitSelectedTrainings"/>
</endButton>
<content>
<List noDataText="Empty" items="{selectedTrainings>/}" mode="Delete" delete="handleDeleteSelectionItem">
<items>
<CustomListItem >
<HBox>
<core:Icon size="2rem" src="{icon}" class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom"/>
<VBox class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom">
<Text text="{Title}" />
<Label text="{Type} {= ${Begda} ? ${Begda}.toLocaleDateString() : '' }"/>
<HBox>
<CheckBox text="{i18n>selectionMgrApproved}" selected="{Approved}" />
</HBox>
</VBox>
</HBox>
</CustomListItem>
</items>
</List>
</content>
</Dialog>
You are using named model selectedTrainings for items bindings and you forgot to put a model name into CustomListItem elements. Put a model name into bindings like this:
<Text text="{selectedTrainings>Title}" />
I have this table component (sap.m.Table):
<Table
inset="false"
items="{
path: '/SelectExpenseDetails'
}" >
<headerToolbar>
<Toolbar>
<Button icon="sap-icon://cause" press="onBack" ariaLabelledBy="Atrás" />
<Button icon="sap-icon://message-information" press="showInfoExpenseItem" ariaLabelledBy="Atrás" />
<Title text="{i18n>GV.APROB.EXPENSES.detail.title}" level="H2"/>
</Toolbar>
</headerToolbar>
<columns>
<Column width="7em" >
<Text text="{i18n>GV.APROB.EXPENSES.detail.concepto.pago}" />
</Column>
<Column
width="4em"
demandPopin="true"
hAlign="Center">
<Text text="{i18n>GV.APROB.EXPENSES.detail.monto}" />
</Column>
<Column width="1.5em"
demandPopin="true"
hAlign="Center">
</Column>
</columns>
<items>
<ColumnListItem>
<ObjectAttribute text="{ExpensesCategory}" />
<ObjectNumber
number="{PlanAmount}"
unit="{masterExpense>/CurrencySymbol}" />
<Button icon="sap-icon://comment" press="showCommentsExpenseDetailItem" class="sapUiTinyMarginBegin"/>
</ColumnListItem>
</items>
</Table>
Function showCommentsExpenseDetailItem display the popover. Popover component is opened but it doen's display data:
Here is code:
showCommentsExpenseDetailItem: function(event){
var popover = sap.ui.xmlfragment("la.incloud.rva.aprobaciones.view.components.popover-comment-item-detail", this);
this.getView().addDependent(popover);
popover.openBy(event.getSource());
}
And this the XML fragment:
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core">
<Popover
showHeader="false"
placement="Bottom">
<TextArea value="{Comments}" growing="true" growingMaxLines="4" width="100%"/>
</Popover>
</core:FragmentDefinition>
I supposed that "{Comments}" is the right way of calling poperty of list items.
It seems that I'm wrong...
I assume that the Comments property belongs to an entity of the SelectExpenseDetails entity set. The problem that you are facing is in fact because of an incorrect binding path.
You have attached your popup as a dependent of the view itself. This means that all its relative bindings (like the one for the text area's value) will be resolved based on the binding context of the view. If the view is not bound to anything, the binding will not be resolved.
To go around this, you should bind the popup itself to the correct path, obtained from the item which was pressed. So you should adjust your event handler like so:
showCommentsExpenseDetailItem: function(event){
var popover = sap.ui.xmlfragment("la.incloud.rva.aprobaciones.view.components.popover-comment-item-detail", this);
this.getView().addDependent(popover);
popover.bindElement(event.getSource().getBindingContext().getPath());
popover.openBy(event.getSource());
}
Also, you are creating a new popup each time you press the button, you might want to reuse the popup instead (either create it declaratively in the view or store it as a property of the controller).
I´ve started with my first SAPUI5 application and build a responsive table.
Now I have the requirement to color specific rows depends on a value in the model.
I´m using a XML-View.
Could I define a method in my controller for that? (How it should be working?)
Home.view.xml
<Table id="idMachineTable"
inset="false"
items="{
path: 'machinemodel>/collection'
}">
<headerToolbar>
<Toolbar>
<Title text="Header" level="H2"/>
</Toolbar>
</headerToolbar>
<columns>
<Column
width="12em">
<Text text="Product" />
</Column>
<Column
hAlign="Right">
<Text text="Price" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier
title="{machinemodel>test}"
text="{machinemodel>test}"/>
<Text
text="{machinemodel>test}" />
</cells>
</ColumnListItem>
</items>
</Table>
You can do that with a customdata attribute that creates a dom attribute. Then you can select the rows you want to color via css.
<ColumnListItem>
<customData>
<core:CustomData key="mydata" value="{machinemodel>status}" writeToDom="true" />
</customData>
<cells>
...
<html:style type="text/css">
tr[data-mydata="B"] {
background-color: #faa !important;
}
</html:style>
Full example on jsbin.
I like the answer #schnoebel provided
here is an alternate way (jsbin), in the Items binding define a change handler
items="{
path: 'machinemodel>/collection',
events: {
change: '.onItemsChange'
}
}"
then in the handler add your style class
onItemsChange: function(oEvent){
var oTable = this.byId("idMachineTable");
oTable.getItems().forEach(function(oItem){
var oContext = oItem.getBindingContext("machinemodel");
if (oContext && oContext.getObject().status === 'A'){
oItem.addStyleClass("overdue");
}
});
}