Vfrdtyky

hope I can explain my situation correctly.. so i am working on a Recipes App with help of OpenUI5 for internal purposes at home.

I have a list of several receipts which all have a unique ID. So if I want to look at the details:

http://##URL##/myreceipts/#/detail/0

In the details section I would like to add a new list with the required things for this receipt.

So my JSON Model looks currently as follows:

 {

  "ReceiptCollection": [

    {

      "ID": 1,

      "Name": "Spaghetti Bolognese",

      "Category": "Kochen",

      "Difficulty": "einfach",

      "Description": "Schnell und Einfach",

      "Preparation": "Das Hackfleisch würzen nach Geschmack (Salz, Pfeffer, Knoblauch, Paprika) und in etwas Öl anbraten. Tomatenmark, die Kräuter und gehackte Zwiebel unterrühren und mitbraten. Tomaten mit Saft dazugeben und ca. 45 Minuten köcheln lassen. Mit Salz, Pfeffer und etwas Zucker abschmecken. Milch dazugeben. Soße evtl mit etwas Speisestärke andicken. nn Spaghetti wie gewohnt in Salzwasser gar kochen.",

      "Ingredients": [

        {

          "IngID": 1,

          "IngName": "Hackfleisch",

          "UnitNumber": 300,

          "UnitOfMeasure": "Gramm"

        }

      ]

    },



    [...]

In the Details.view I tried it this way:

            <m:Table id="ingredientsTable"

                   inset="false"

                   noDataText="{i18n>general.NoDataTextIngredients}"

                   items="{

                      path: 'receipts>/ReceiptCollection/0/Ingredients',

                      sorter: {

                        path: 'IngName'

                      }

                   }"

                   class="sapFDynamicPageAlignContent"

                   width="auto">

            <m:columns>

              <m:Column width="auto">

                <m:Text text="{i18n>detail.Ingredient}" />

              </m:Column>

              <m:Column width="auto">

                <m:Text text="{i18n>detail.Amount}" />

              </m:Column>

              <m:Column width="auto">

                <m:Text text="{i18n>detail.UoM}" />

              </m:Column>

            </m:columns>

            <m:items>

              <m:ColumnListItem>

                <m:cells>

                  <m:ObjectIdentifier title="{receipts>IngName}" />

                  <m:Text text="{receipts>UnitNumber}" />

                  <m:Text text="{receipts>UnitOfMeasure}" />

                </m:cells>

              </m:ColumnListItem>

            </m:items>

          </m:Table>

This is obviously wrong, because of the following snippet: "path: 'receipts>/ReceiptCollection/0/Ingredients'"

Is there any way to replace the ID 0 with the one currently presented in the URL?

Do I need to load the table content within the Controller? Or is there just a simple way to do it in the view? (So while writing these lines it seems this is somehow wrong).

But if I fill the table in the Controller - how should the View look like?

I am still a beginner and I am trying to learn a bit more about this so please dont kill me. :D

Thanks for your help & best regards

I assume that you have managed the navigation and have the index of the data in the model.
Here's what you do:

1. Remove the items aggregation from table in the view so that it looks like this:

<m:Table id="ingredientsTable"

                   inset="false"

                   noDataText="{i18n>general.NoDataTextIngredients}"

                   class="sapFDynamicPageAlignContent"

                   width="auto">

2. Then, do the bindings from the controller. I have put it in the onInit event:

onInit: function () {

      /*Ignore if model is set in manifest*/

			var oModel = new sap.ui.model.json.JSONModel("./model/recipes.json");

			this.getView().setModel(oModel, "receipts");

      /*get the index from rourer using 0 for explanation */

      var index=0;

			var oTable = this.getView().byId("ingredientsTable");

      /*Give the path you want to bind to items aggregation*/

			var oItems = "receipts>/ReceiptCollection/" + index + "/Ingredients";

			var oSorter = new sap.ui.model.Sorter('IngName');

      /*Bind it to the items aggregation of the table */

			oTable.bindItems(oItems, oTable.getItems()[0].clone(),oSorter);

		}

Hope this helps

Your question is not very clear and assuming you are looking at showing details of the Receipts when it is selected,
you want to check something called Element Binding/Context Binding

So, here's what you would have to do:

• Bind the detail view to the context of the receipt which is selected(or the context of receipt which had ID - you can filter the json).


• Working example of binding context of an array to a View

Let me know if this helps and also try to edit the question to make it more clear by attaching related expectations and issues you face.