I have an XML view with TreeTable. The binding is with an oData which returns something like results--> then in every result something called as "ABC" which is in itself an array.
In my table I want to display the results--> fields for parent and for the row ( which does not have child). For the child rows, need to display, results--> ABC --> then the property binding. But, the way I did coding, it works fine for rows that have children (parent and child binding is fine) but for rows without children also some controls are being made visible. I am not sure how to set visible syntax.
XML View:
<table:TreeTable rows="{path:'List>/results', parameters:{arrayNames:['ABC']}}" >
<table:Column id="t1" width="200px">
<Label text="Column1"/>
<table:template>
<HBox>
//want to make visible only for parent and the row which does not have child
<Text text="{path: 'List>', formatter: '.formatCoumn1'}" visible="{= !${List>?????}}"/>
//want to make visible only for child row
<DatePicker value="{List>ExpiryDate}" visible="{List>?????}"/>
</HBox>
</table:template>
</table:Column>
<Text text="{path: 'List>ABC'}" visible="{= ${List>switch} !== undefined}"/>
<DatePicker value="{List>ExpiryDate}" visible="{= ${List>switch} === undefined}" />
The Expression Binding in the Demo Kit has some additional examples, that might work for you:
enabled="{= ${/orderStatus} !== null }"
enabled="{= ${/items}.length > 0 }"
Related
I am trying to build an application that has table#1 with clickable items and display data in another view with table#2 depending on which item you clicked in the first table.
This is some weird behaviour and I'll try to explain the problem the best I can:
The application works fine the first time you use it - I click an Item in table#1 -> it navigates to the view with table#2 and displays the dependent data. Everything works perfectly fine.
Now if i navigate back to table#1 and click another item, it loads table#2 but without any data.
The third time (and every time after that) I navigate back and click an item in table #1 and table#2 is supposed to load I get the error message :
"Error: Missing template or factory function for aggregation items of Element sap.m.Table"
I have tried reloading the item aggregation, destroying the template on navigation, reloading model data and setting the templateSharable flag to true / false but nothing helped in any way.
I'm posting the relevant code for the view with table #2 below
My XML Code:
<f:SimpleForm id="simpleform" editable="true" layout="ResponsiveGridLayout">
<f:content>
<semantic:SemanticPage id="page" headerPinnable="false" toggleHeaderOnTitleClick="false" >
<semantic:content id="posContent">
<Table
id="rkDetailTable"
noDataText="{i18n>tableNoDataText}"
>
<columns>
<Column>
<Text text="Pos ID"/>
</Column>
<Column>
<Text text="{i18n>Art_RkDetail}" />
</Column>
<Column>
<Text text="{i18n>Betrag_RkDetail}"/>
</Column>
</columns>
<items>
<ColumnListItem id="rkDetailTableTemplate" type="Navigation" press="onDetail">
<cells>
<ObjectIdentifier title="{RkposId}" />
<Text text="{RksatzId}" />
<ObjectNumber number="{RkposBetrag}" unit="EUR" />
</cells>
</ColumnListItem>
</items>
</Table>
</semantic:content>
</semantic:SemanticPage>
</f:content>
</f:SimpleForm>
The corresponding controller:
onInit: function () {
this.getRouter().getRoute("RkItemDetail").attachMatched(this.onRouteMatched, this);
},
onRouteMatched: function (oEvent) {
var oArguments = oEvent.getParameter("arguments");
var RkId = oArguments.RkId;
var sBindingPathAbrechnung = "/AbrechnungSet(" + RkId + (")");
this.getView().byId("simpleform").bindElement(sBindingPathAbrechnung);
var sBindingPathPosition = "/AbrechnungSet(" + RkId + (")/ToPos");
this.byId("rkDetailTable").bindItems({
path: sBindingPathPosition,
template: this.byId("rkDetailTableTemplate"),
templateShareable: true
});
}
Disregard the element binding, it is used for something else in that view.
Thank you!
In you table change the <items> aggregation to <dependents>.
<Table
id="rkDetailTable"
noDataText="{i18n>tableNoDataText}"
>
<columns>
...
</columns>
<dependents>
<ColumnListItem id="rkDetailTableTemplate" type="Navigation" press="onDetail">
...
</ColumnListItem>
</dependents>
</Table>
I want to add buttons to each row in my sap.m.List. On that button I want to open a popup to display further details without navigating to another page.
Any code snippet or examples out there how I can add buttons to each row and bind them to fetch data from another model.
Instead of the StandardListItem you need a CustomListItem. There you can add any control you like:
<List headerText="Custom Content" items="{path: '/ProductSet'}" >
<CustomListItem>
<HBox>
<Label text="{ProductName}"/>
<Button text="More Infos" click="onPressMoreInfos" />
</HBox>
</CustomListItem>
</List>
I think the tricky part here is the binding. One CustomListItem is bound to a single entity of your set. If you add a Button to your CustomListItem (or any other control) they are also automatically bound to the specific entity.
So in your click handler you can do the following:
onPressMoreInfos: function(oEvent) {
var oButton = oEvent.getSource();
// if your model has a name, don't forget to pass it as a parameter
var oContext = oButton.getBindingContext();
// create the popover, either here or in a new method
var oPopover = this.getTheInfoPopover();
// if your model has a name, don't forget to pass it as the second parameter
oPopover.setBindingContext(oContext);
}
Then your Popover has the same binding information as the list item and you can access every property of the specific entity.
Try below code to add a button to each row, in your XML view:
<columns>
<Column id="userNameColumn">
<Text text="userNameLabelText" />
</Column>
<Column id="buttonColumn">
<Text text="Button" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Input value="{UserName}"/>
</cells>
<Button id="buttonId" icon="sap-icon://add" press="handleResponsivePopoverPress"></Button>
</ColumnListItem>
</items>
Controller to handle button press, see example here
https://sapui5.hana.ondemand.com/#/sample/sap.m.sample.ResponsivePopover/preview
You can use sap.m.CustomListItem as a template for items aggregation. There is a sample here. You can add any control to the item.
I have a column in a sap.ui.table.Table. In this column, I want to display my template control depending on the value. If I have a typeof DateTime, I want to use the DatePicker, typeof DateTime a DateTimePicker, and so on.
Now I want to differ it in my XMLView / Fragment but it only checks my last control (DateTimePicker):
<table:template>
<Input id="masterDataValueInput"
value="{thingDetail>value}"
placeholder="{path:'thingDetail>type', formatter:'.formatter.placeHolderFormatter'}"
visible="{= ! ${path: 'thingDetail>properties'} && ${path: 'thingDetail>type', formatter: '.formatter.inputVisibility'}}"
enabled="{appView>/isCurrentTenant}"
type="{path:'thingDetail>type', formatter:'.formatter.inputTypeFormatter'}"
/>
<DatePicker id="masterDataValueDate"
value="{thingDetail>value}"
displayFormat="short"
visible="{= ! ${path: 'thingDetail>properties'} && ${path: 'thingDetail>type', formatter: '.formatter.dateVisibility'}}"
enabled="{appView>/isCurrentTenant}"
change="handleChange"
/>
<DateTimePicker id="masterDataValueDateTime"
value="{thingDetail>value}"
displayFormat="short"
visible="{= ! ${path: 'thingDetail>properties'} && ${path: 'thingDetail>type', formatter: '.formatter.datetimeVisibility'}}"
enabled="{appView>/isCurrentTenant}"
change="handleChange"
/>
</table:template>
So the <Input> and the <DatePicker> controls are never displayed..
The methods in my formatter are never called either.
The reason why only the last control (DateTimePicker) is taken into account is because the template aggregation of sap.ui.table.Column awaits only a single control (0..1).
In order to make use of all three controls, you'll have to wrap them together in another container / layout control such as HorizontalLayout:
<table:template>
<layout:HorizontalLayout>
<!-- your controls -->
</layout:HorizontalLayout>
<table:template>
About the expression binding..
Try with parts:
visible="{= !${thingDetail>properties} && ${parts: [{path: 'thingDetail>type'}], formatter: '.formatter.inputVisibility'}}"
If that didn't call the formatter, toss that expression binding (as it's become hard to read anyway) and go for the usual property binding with the appropriate formatter:
visible="{
parts: [
'thingDetail>properties',
'thingDetail>type'
],
formatter: '.formatter.myFormatter'
}"
My REST service send me a lot of data. Every property contains the value and a help-attribute that contains a long description of the field property.
Ok, I have data (a list of property with value and help) in a JSONModel and I use data-binding XML https://openui5.hana.ondemand.com/#docs/guide/91f0f3cd6f4d1014b6dd926db0e91070.html to map data value in forms and tables.
Now I want show somehow help message for each property.
My idea is show a message dialog when the user double-click on the Label or on the Text of the column header in a table
Both Label and Text have attachBrowserEvent method but I don't know how use the function to attach the event wrinting only in the XML-views
I would like something like this:
In XML-View:
<Label text="Language"
attachBrowserEvent:"function("click",showMessageHelp({model>/language/help}))">
<Input value="{model>/language/value}"/>
In the controller:
showMessageHelp:function(sMessage){
//show message dialog with sMessage
...........
}
You can achieve this using onAfterRendering method.
Have CustomData in the XML:
<Label id="label" text="Language">
<customData>
<core:CustomData key="type" value="{/language/help}" />
</customData>
</Label>
Then in controller use this customData:
onAfterRendering: function () {
var showValueHelp = function () {
var text = this.getCustomData()[0].getValue();
sap.m.MessageToast.show(text);
event.preventDefault();
event.stopPropagation();
return false;
};
this.byId("label").attachBrowserEvent("click", showValueHelp);
}
JS fiddle is here
PS:I am not sure this is viable solution for you.
This is the best I could come up with, currently.
Attach a browser event for each label is possible but I can't find a way to do it without repeat each label id.
I have found an alternative solution: my data are shown in forms and tables.
I have added on the right of each form couple of label: value a Text element with the help info:
<Label text="Field duck"/>
<Text text="{model>/elements/mainFields1/duck/value}"/>
<Text text="{model>/elements/mainFields1/duck/ATTR/help/description}" visible="{ui>/bShowHelp}" />
In tables I have divided each column title in two group: header and footer; in the footer I have placed the help info:
<Column>
<header>
<Text text="Name"/>
</header>
<footer>
<Text text="{model>/elements/airports/templateNewRow/name/ATTR/help/description}" visible="{ui>/bShowHelp}"/>
</footer>
</Column>
I change the value of bShowHelp showing and hiding all help infos
In SAP UI5, I try to get the data object (in my controller) that is bound to a table row when the user presses it. My view is defined in XML, and my controller is in JS of course.
I have checked How to get content of a row in sap.m.table already but it doesn't work for me, or something is missing.
My view (the relevant part):
<Panel>
<Table id="lineItemList" items="{
path: 'statusJobs>/jobs',
sorter: {
path: 'start',
descending: true
}
}">
<headerToolbar>
<!-- ... -->
</headerToolbar>
<columns>
<Column hAlign="Left" vAlign="Middle">
<Label text="Job" />
</Column>
<Column hAlign="Center" vAlign="Middle">
<Label text="Start" />
</Column>
<Column hAlign="Center" vAlign="Middle">
<Label text="End" />
</Column>
<Column hAlign="Right" vAlign="Middle">
<Label text="Success" />
</Column>
</columns>
<ColumnListItem
type="Navigation"
press=".handleLineItemPress"
>
<Text text="{statusJobs>job}" />
<Text text="{
path: 'statusJobs>start',
formatter:'util.Formatter.Date'}"
/>
<Text text="{
path: 'statusJobs>end',
formatter: 'util.Formatter.Date'}"
/>
<Text text="{statusJobs>status}"/>
</ColumnListItem>
</Table>
The relevant part here is obviously:
<ColumnListItem
type="Navigation"
press=".handleLineItemPress"
>
And in my controller, I have this:
handleLineItemPress: function(evt) {
console.log('evt.getSource: ' + evt.getSource());
console.log('evt.getBindingContext: ' + evt.getSource().getBindingContext());
}
which logs as follows:
evt.getSource: Element sap.m.ColumnListItem#__item11-StatusJobs--lineItemList-0
evt.getBindingContext: undefined
evt.getSource returns the ColumnListItem, so of course from there, I could use the object hierarchy and fetch the text of a cell, like:
evt.getSource().getCells()[0].getText();
But this does not seem to be the right way and especially does not give the the entire object nor its unique ID, which I happen to not display in the table.
I am somehow missing the connection back to my data model, that I had bound earlier in the code, in the <Table> item, as follows:
items="{
path: 'statusJobs>/jobs',
sorter: {
path: 'start',
descending: true
}
}"
I hate to say it, but I have had the same issue, and it took me quite some time to find the cause...
It's all related to the use of named models, in your case statusJobs.
If you want to retrieve the binding context for items bound to a named attribute, for some reason (honestly, I can't think of any) you also have to specify the named model:
evt.getSource().getBindingContext("statusJobs");
will return the correct binding context.
Thus, to retrieve the actual object bound to the pressed line item, you could then use:
var obj = evt.getSource().getBindingContext("statusJobs").getObject();
Since a context can't be bound to more than one model (to my knowledge) I really don't understand why you need to specifically give the named model name as a parameter, but for now I guess we have to live with this behavior