UI5 – Reading the context on the detail page

Home / Blog / UI5 – Reading the context on the detail page

I wanted to share this breakthrough I finally made.  I hope that maybe you won’t struggle with it as long as I did.  I spent a few hours digging and banging my head against the wall before I finally figured out what was going on.

If you haven’t been reading all my posts, I’ll give you the highlights of my UI5.  I’m following the split app, using XML for my views.  I have a master view, that contains a list of orders, and a detail view that shows the full order details.  My latest hurdle was that I had a list of notes associated with each order.  The challenge is that the entityset for the notes is separate from the orders, so that meant I needed a different service call.  The note entityset contains all notes for all orders, so I needed to filter it down before I display it on the detail view.

My challenge was that I didn’t realize that the context isn’t passed until after the onInit, onBeforeRender, and onAfterRender.  I finally found a post that gave me an idea to try.  So, let me walk you through it.

master.controller.js

I had a method called handleListSelect that is called when an order is clicked.

handleListSelect : function (evt) {
var context = evt.getParameter(“listItem”).getBindingContext(“orders”);
this.nav.to(“Detail”, context);
var detController = this.nav.getView().app.getPage(“Detail”).getController();
detController.updateNoteTableBinding();
},

I needed to add the last 2 lines, first to get the detail controller, then to call a method from the detail controller.

detail.controller.js

I added the following method

updateNoteTableBinding: function(){
var oContext = this.getView().getBindingContext(“orders”);
var property = oContext.getProperty(“OrderNumber”);

var filters = new Array();
var filterOrder = new sap.ui.model.Filter(“OrderNumber”, sap.ui.model.FilterOperator.EQ,property);
filters.push(filterOrder);
// update list binding
var list = this.getView().byId(“Notes”);
var binding = list.getBinding(“items”);
binding.filter(filters);
}

This was the first time that getBindingContext didn’t return undefined.  From there, I was able to add a simple filter to my list to show only the notes that I needed.

detail.view.xml

this part worked fine, but it’ll help you put it in context.  I used a simple table, and you can see that I define the items in the xml, hence the reason I am filtering the results.

<Table
id=”Notes”
headerText=”{i18n>NotesTableHeader}”
items=”{orders>/notes}” >
<columns>
<Column
width=”4em”
hAlign=”Center” >
<header><Label text=”Num” /></header>
</Column>
<Column
minScreenWidth=”Tablet”
demandPopin=”true”
hAlign=”Center” >
<header><Label text=”Create Date” /></header>
</Column>
<Column>
<header><Label text=”Title” /></header>
</Column>
<Column>
<header><Label text=”Note Text” /></header>
</Column>
</columns>
<ColumnListItem
type=”Navigation”
press=”handleLineItemPress” >
<cells>
<Text
text=”{orders>NoteNum}” />
<Text
text=”{
path:’orders>Crdat’, formatter:’sap.ui.jvs.ProxProdSup.util.Formatter.date’
}”/>
<Text
text=”{orders>Title}” />
<Text
text=”{orders>Line}” />
</cells>
</ColumnListItem>
</Table>

Thanks for reading,

As always, thanks for reading and don't forget to check out our SAP Service Management Products at my other company JaveLLin Solutions,
Mike

Leave a Reply

Your email address will not be published. Required fields are marked *