As part of my SAPUI5 application i have a list which can be used to navigate to detail pages for the selected item. Now for every list item there is also a choice for a "mode" which can be selected from a list aswell (=> nested list).
This is how the view looks like:
<List id="competitionList" items="{
path: 'competitions>/results'
}">
<items>
<CustomListItem
type="Navigation"
press="onPress">
<VBox>
<Text text="{
path: 'competitions>time',
formatter: '.getDescription'
}"/>
<SelectList id="mode-select">
<items>
<core:Item key="full" text="Full"/>
<core:Item key="one" text="Short"/>
</items>
</SelectList>
</VBox>
</CustomListItem>
</items>
</List>
As you can see there is a SelectList inside the standard List. That SelectList will be filled according to some values inside the bound competition.
Now my question is: How can i determine which item got selected in the SelectList inside the onPress function for the pressed item of the parent List?
My onPress function currently looks like this:
onPress: function(oEvent) {
var oItem = oEvent.getSource();
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("startlist", {
showId: showId,
competitionId: oItem.getBindingContext("competitions").getProperty("number")
});
}
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'm using TableSelectDialog to view some Carrier details. All I need is: If I select any item (row), then all the values from that row should get automatically populated to the form input fields.
In the attached image, if Carrier Name is selected from TableSelectDialog, then the remaining fields should be populated based on that value.
You can achieve the required functionality using the Binding context that you receive from the TableSelcect Dialog.
But for binding context to work properly, both form and the table select dialog should refer to the same Model.
Below is the working code:
VIEW.XML:
Has a Button to trigger the table select dialog.
Has a form.
<l:VerticalLayout class="sapUiContentPadding" width="100%">
<l:content>
<Button class="sapUiSmallMarginBottom" text="Show Table Select Dialog"
press="handleTableSelectDialogPress">
</Button>
<VBox class="sapUiSmallMargin">
<f:SimpleForm id="SimpleFormDisplay354">
<f:content>
<Label text="Supplier Name" />
<Text id="nameText" text="{SupplierName}" />
<Label text="Description" />
<Text text="{Description}" />
<Label text="ProductId" />
<Text text="{ProductId}" />
<Label text="Quantity" />
<Text id="countryText" text="{Quantity}" />
</f:content>
</f:SimpleForm>
</VBox>
</l:content>
</l:VerticalLayout>
Controller:
onInit: function () {
// set explored app's demo model on this sample
var oModel = new JSONModel(jQuery.sap.getModulePath("sap.ui.demo.mock", "/products.json"));
this.getView().setModel(oModel);
},
handleTableSelectDialogPress: function (oEvent) {
if (!this._oDialog) {
this._oDialog = sap.ui.xmlfragment("sap.m.sample.TableSelectDialog.Dialog", this);
}
this.getView().addDependent(this._oDialog);
// toggle compact style
this._oDialog.open();
},
handleClose: function (oEvent) {
var aContexts = oEvent.getParameter("selectedContexts");
if (aContexts && aContexts.length) {
// MessageToast.show("You have chosen " + aContexts.map(function(oContext) { return oContext.getObject().Name; }).join(", "));
this.byId('SimpleFormDisplay354').setBindingContext(aContexts[0]);
}
oEvent.getSource().getBinding("items").filter([]);
}
Now, we also have a Select dialog and on click of any Item we call method : handleClose
In handleClose, we obtain the clicked Item binding context and then tell the form : hey! refer to this context ( which is present in the model). Binding context has a path which tells the form from where to do the relative binding.
Please feel free to contact for more information.
I'm a beginner to SAP Fiori (UI5) and trying to retrieve a value from a table made with sap.m.Table in SAP Web IDE. But I don't succeed. Anybody hints on how to get there?
<Table id="table0" items="{/Entity1_Set}">
<ColumnListItem detailPress=".onShowHello" type="DetailAndActive">
<Text id="text5" maxLines="0" text="{Id}" />
<Text id="text6" maxLines="0" text="{field1}" />
<Text id="text7" maxLines="0" text="{field2}" />
<Text id="text8" maxLines="0" text="Euro"/>
</ColumnListItem>
<columns>
<Column id="column0">
<Label id="label0" text="Floor"/>
</Column>
</columns>
</Table>
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageToast",
], function(Controller, MessageToast) {
"use strict";
return Controller.extend("QuickStartApplication.controller.View1", {
onShowHello: function(){
MessageToast.show("Hello World!");
},
});
});
In the "hello world"-MessageToast, I would like to display values of the fields in my table.
You can pass parameters in the function, which is called during an event.
Please see also https://sapui5.hana.ondemand.com/#docs/api/symbols/sap.m.ListItemBase.html#event:detailPress
Using these parameters, you can access the bound data.
Please see the following code on how to read the binding context of the ColumnListItem:
detailPress : function(oEventParams){
var oListItem = oEventParams.getSource();
var oBindingContext = oListItem.getBindingContext(); var sSomePropertyValue = oBindingContext.getProperty("<nameOfProperty>"); }
Using .getProperty, you can access your field values.
How to push the data in XML view into the newly created JSON model? I have created the comboBox and retrieved the data from JSON model and also created the text area when I select the item in combo box and insert data into the text area and submit a button both the data should be pushed to newly created JSON model in sapweb ide ui5
page.view.xml:
<mvc:View height="100%" controllerName="pro.controller.Page" xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<Page title="{i18n>title}">
<content>
<l:VerticalLayout>
<ComboBox items="{ path: '/ProductCollection', sorter: { path: 'Name' } }">
<core:Item text="{Name}" /> </ComboBox>
<TextArea value="" rows="8" />
<Button type="Accept" text="Submit" press="onPress" /> </l:VerticalLayout>
</content>
</Page>
</mvc:View>
page.controller.js
sap.ui.define([
'jquery.sap.global',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel'
], function(jQuery, Controller, JSONModel) {
"use strict";
var PageController = Controller.extend("pro.controller.Page", {
onInit: function() {
// set explored app's demo model on this sample
var oModel = new JSONModel(jQuery.sap.getModulePath("pro", "/model/model.json"));
this.getView().setModel(oModel);
}
});
return PageController;
});
add a 'key' attribute to the combobox item. Also give the combobox and teaxarea some IDs.
<ComboBox id="selectBox" items="{ path: '/ProductCollection', sorter: { path: 'Name' } }">
<core:Item key="{Naame}" text="{Name}" /> </ComboBox>
<TextArea id="textArea" value="" rows="8" />
On click of submit, get the selected values from the combobox and text area and push them into the model. I assume that you wanted to push this new data to the existing model and also your existing model is an array of objects.
sap.ui.define([
'jquery.sap.global',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel'
],function(jQuery, Controller, JSONModel) {
"use strict";
var PageController = Controller.extend("pro.controller.Page", {
onInit: function() {
var oModel = new JSONModel(jQuery.sap.getModulePath("pro", "/model/model.json"));
this.getView().setModel(oModel);
},
onPress: function() {
//get the value of the selected item in the combobox
var selectedVal = this.getView().byId("selectBox").getSelectedKey();
//get the textarea value
var textAreaVal = this.getView().byId("textArea").getValue();
this.getView().getModel().oData.push({
key: selectedVal,
value: textAreaVal
});
}
});
return PageController;
});