CODEWITHSUNDEEP
sapui5
Desproposito
Desproposito

Reputation: 83

SAPUI5: How to create a control hierarchy?

I hope you can help me with this. After reading all the documentation several times, googling for days, etc I don't find the way to do what i'm going to explain in a clean way, and in think I'm missing something because it's a really basic scenario.

I'm working with oData models, in this case 2 named models, "Model1", "Model2". Now what I want is to show a "parent" ComboBox based on an oData path, and a table that changes its items depending on the selection, in other words.

Model1 { //JSON representation of the data.
 Accounts:[
  "account 1": {invoices: ["invoice1", "invoice2", "invoice3"]},
  "account 2": {invoices:["invoice4", "invoice5"]}
 ]
}

Combo Box:

<... items={Model1>/Accounts} /> -- This works and shows Account 1, and Account2.

Table

<Table... items="{Model1>Invoices}">
..
<items>
....
</items>
</Table>

What I want is the table to change it's context to the account selected on the ComboBox. The point is that this works, but the first time it loads the view, as there is no account selected, it calls the wrong odata path MYSERVICE/Invoices, instead of doing nothing, as the Account is not set yet, and the path for the invoices, once selected the account, shoud be MYSERVICE/Account('Account1')/Invoices for example.

I know I can achieve this with code, but I'm sure there must be a clean way to do this.

Seriously, this is driving me crazy.

Thanks for your help.

Upvotes: 0

Views: 664

Answers (1)

Andrew Naumovich
Andrew Naumovich

Reputation: 1450

Are you sure that 

items="{Model1>Invoices}"

triggers odata call? Because this is a relative path (without leading slash), normally it should not do the call.

What you can do:

  1. Handle ComboBox selectionChange event;
  2. In this event handler, create a path that you will bound the table to. In your case the path could look like this: "/Account(Account1)" - "/{EntitySetName}({KEY})". You can make use of createKey method of ODataModel2;

  3. Set the table's context using the path:

    oTable.bindObject({ path: sPath, model: "Model1", parameters: { $expand: "Invoices" } });

  4. Once the context is set, the relative binding will start working automatically and table will get the "Invoices"

I assume that the Account and Invoices are linked via navigation property and one-to-many cardinality, that's why the $expand parameter will load the corresponding invoices.

Upvotes: 1

Related Questions