Question Re: Dynamically adding UI controls after oModel read call completes in Technology Q&A

Dynamically adding UI controls after oModel read call completes

former_member718482 — Mon, 12 Jul 2021 07:25:46 GMT

Hello Community experts,

I have a sap.ui.table.Table that is bound to JSONModel retrieved from an odata read call. One of the columns in the table needs to be dynamically generated after the oModel read call completes so that I can traverse through the array returned from it, build a VBox of sap.m.Text controls and fill it with data received in the array. (I can't this do this with binding because I need to fetch data from multiple different arrays returned in the odata call). The issue is, I can't use methods like onBefore or onAfterRendering because of the asynchronous nature of the odata call as the data is undefined still when those get executed. I have tried using the attachRequestCompleted method to try to do it there, but it doesn't render the content I am adding. Here is the method code in the onInit() method of the controller.

this._oModel.attachRequestCompleted(function(oEvent) {
                var oView = this.getView();                
                var oData = this._oData; // from the oModel.read() call
                var commentsSection = oView.byId("commentsVBox");            
                    commentsSection.insertItem(new sap.m.Text({
                        text: oData.results[0].comment
                }));     
            }, this);

I've tried the above code in all 3 methods; onInit(), onBeforeRendering() and onAfterRendering(). None of these worked. So far for testing i just inserted on Text item, but the plan was to iterate an array and inserts as many per line item as needed. Does anyone know how I may achieve this? Is this the wrong way to go about it?

Thanks,

Re: Dynamically adding UI controls after oModel read call completes

ThorstenHoefer — Mon, 12 Jul 2021 12:03:40 GMT

Hi dngo,

try to use the model to bind text elements like this:

<VBox items="{/MyItems}">

 <items>
  <Text text="{mytext}"/> 
<items>
</VBox>

Re: Dynamically adding UI controls after oModel read call completes

junwu — Mon, 12 Jul 2021 14:56:57 GMT

if you are using jsonmodel for the table, then it is more than possible that you can do it through binding.

do the binding like other column, after odata call, just put the data into the correct place of the jsonmodel

Re: Dynamically adding UI controls after oModel read call completes

former_member718482 — Mon, 12 Jul 2021 16:06:47 GMT

Hello Thorsten,

Thanks for the response. I cannot use binding (or can't think of a way it would work in my scenario), because the data comes from multiple nested arrays that I need to iterate through first. What I am trying is then adding the sap.m.Text ui controls to the ui after the odata call is made depending on the amount of line items returned in the nested arrays.

Re: Dynamically adding UI controls after oModel read call completes

former_member718482 — Mon, 12 Jul 2021 16:09:29 GMT

Jun,

The column won't have just one ui control to bind the data to. The amount of sap.m.Text controls I want to insert into the column depends on the data retrieved after the odata call. If the array returned has 3 items for example. I am trying to insert 3 sap.m.Text's into the column for that specific row in the table.

Re: Dynamically adding UI controls after oModel read call completes

junwu — Mon, 12 Jul 2021 17:35:08 GMT

It is still can be done by binding......just follow Thorsten's example

<VBox items="{ColumnDynamic}"><items><Text text="{mytext}"/> <items>
</VBox>

compose this kind of structure in your jsonmodel

ColumnA,

ColumnB

ColumnC

ColumnDynamic:[{mytext:"yourtext"}............]

Re: Dynamically adding UI controls after oModel read call completes

former_member718482 — Mon, 12 Jul 2021 17:48:33 GMT

Sorry Jun, none of what you typed above is making any sense to me. What is ColumnDynamic? And did you insert a Text control into the items property of the VBox? Is that possible? Would you be able to post a working example?

Re: Dynamically adding UI controls after oModel read call completes

junwu — Mon, 12 Jul 2021 17:50:52 GMT

those are just attribute name in your jsonmodel....

ColumnA,

ColumnB

ColumnC

ColumnDynamic

Re: Dynamically adding UI controls after oModel read call completes

junwu — Mon, 12 Jul 2021 18:49:32 GMT

dude,

ColumnDynamic:[{mytext:"yourtext"}............] it is array, it will rendner multiple text for you.

Re: Dynamically adding UI controls after oModel read call completes

former_member718482 — Mon, 12 Jul 2021 21:57:19 GMT

Jun,

the odata received from the read call get bound to the view as so

this.getView().setModel(new JSONModel(odata), "myModel");

Then in the table I have this:

<Table rows="{ path: 'myModel>/results'}">

in the odata itself i have nested arrays like this:

odata: {
    results: [
        {
            data1: value,

            data2: value,

            results: [

                data1: value,
                data2: value,

                results: [
                    // more data could have more nesting
                ]
            ]
        },

        {
            results: [

                data1: value,
                data2: value
            ]
        },
    ]
}

Are you saying that I can get the nested array data and push that data into a custom array and then push that custom array into the first level of the odata structure and then bind that array to the UI control in the table?

Re: Dynamically adding UI controls after oModel read call completes

junwu — Mon, 12 Jul 2021 22:14:40 GMT

yes........

Re: Dynamically adding UI controls after oModel read call completes

former_member718482 — Mon, 12 Jul 2021 22:18:19 GMT

Do you have any examples of how to push the custom array into the odata model? So lets say I have created my custom array:

var arrCustom = [{data: val, data: val}, {data: val, data: val}, {data: val, data: val} ];

Once I have that I can push this into the oModel?

var myData = this.getView().getModel("myModel");
myData.results[25].push(arrCustom); // this is allowed?

Re: Dynamically adding UI controls after oModel read call completes

junwu — Mon, 12 Jul 2021 22:21:21 GMT

youfirstlevelobject.yourattributename=yourdataarray

Re: Dynamically adding UI controls after oModel read call completes

former_member718482 — Mon, 12 Jul 2021 22:53:00 GMT

didn't work.

myData.results=arrCustom;

Re: Dynamically adding UI controls after oModel read call completes

junwu — Mon, 12 Jul 2021 22:58:58 GMT

can't you debug.....

myData.results[25] what is this pointing to? doesn't look like array, why you use push?????

Re: Dynamically adding UI controls after oModel read call completes

former_member718482 — Mon, 12 Jul 2021 23:11:10 GMT

myData.results[25]

is the 24th element of the array AKA the 25th row of the table. Each element of the results array is a row in the table. Nested deep inside each element are additional arrays which contain data that needs to be bound to a specific column. From what I understand you're saying, is that I can fetch the data from these nested arrays and collect them in a custom array. Then I can attach this custom array to the first level results array which is bound to the table and columns using the above syntax (which doesn't work).

Re: Dynamically adding UI controls after oModel read call completes

junwu — Mon, 12 Jul 2021 23:15:12 GMT

if I understand you correctly

myData.results[25].columnDynamic=arrCustom

if you keep writing wrong code, how can it be working.......