Binding Items in a Dialog ...

[former_member603132]

Hi, i'm trying to bind items in my fragment..

the table in my main view is like this and its working...

_loadContent: function(context) {
        let tbGenerations = this.getView().byId("tbGenerations");
        let template = tbGenerations.getBindingInfo("items").template;

        let path =
          "gia_es_odata>/CONTROLE_TELA_PARAM(P_MANDT='" +
          context.MANDT +
          "',P_ORGSTR='" +
          context.ORGSTR +
          "',P_PERIODO='" +
          context.PERIODO +
          "',P_ANO='" +
          context.ANO +
          "')/Results";

        return new Promise((resolve, reject) => {
          tbGenerations.bindItems(path, template);

          tbGenerations.getBinding("items").attachChange(() => {
            resolve();
          });
        });

this is my event on the main view to open the fragment... but on the second line throws me an error

Cannot read property 'getBindingInfo' of undefined...

Why is that?

 _onHistory: function(context) {
        let tbHistory= this.getView().byId("tbHistory");
        let template = tbHistory.getBindingInfo("items").template;

        let path =
          "gia_es_odata>/CONTROLE_TELA_PARAM(P_MANDT='" +
          context.MANDT +
          "',P_ORGSTR='" +
          context.ORGSTR +
          "',P_PERIODO='" +
          context.PERIODO +
          "',P_ANO='" +
          context.ANO +
          "')/Results";

        if (!this._oHistoryDialog) {
          this._oHistoryDialog = sap.ui.xmlfragment(
            "tax4b.gia_es.ui.view.HistoricoGeracao",
            this
          );
          this.getView().addDependent(this._oHistoryDialog);
        }

        // Open Dialog
        this._oHistoryDialog.open(context.getSource());


        return new Promise((resolve, reject) => {
          tbHistory.bindItems(path, template);

          tbHistory.getBinding("items").attachChange(() => {
            resolve();
          });
        });
      },

Sorry for my english..

[boghyon]

Please replace the title of the question with something descriptive. It's currently same as your former question Binding Items in a Dialog and I almost clicked on "Alert Moderator" for duplicating the question.

[boghyon]

https://answers.sap.com/comments/755261/view.html

[boghyon · Accepted solution]

Ok, so here is a full answer:

_onHistory: function(context) {
  if (!this._oHistoryDialog) {
    this._oHistoryDialog = sap.ui.xmlfragment(this.getView().getId(), "tax4b.gia_es.ui.view.HistoricoGeracao", this);
    this.getView().addDependent(this._oHistoryDialog);
  }
  this._oHistoryDialog.open(context.getSource());
  const tbHistory = this.byId("tbHistory");
  const model = this.getOwnerComponent().getModel("gia_es_odata");
  const path = model.createKey("gia_es_odata>/CONTROLE_HISTORICO_PARAM", {
    P_MANDT: context.MANDT,
    P_ORGSTR: context.ORGSTR,
    P_PERIODO: context.PERIODO,
    P_ANO: context.ANO,
  });
  return new Promise((resolve, reject) => {
    tbHistory.bindElement(path, {
      events: {
        dataReceived: e => e.getParameter("data") ? resolve(e) : reject()
        // if e.getParameter("data") returns nothing, it's an error.
      }
    });
  });
},

<Table id="tbHistory" items="{gia_es_odata>Results}">
  <columns>
    <!-- ... -->
  </columns>
  <items>
    <ColumnListItem> <!-- item template -->
      <Text text="{gia_es_odata>myRelativeProperty}" />
      <!-- ... -->
    </ColumnListItem>
  </items>
</Table>

• About ODataModel#createKey()

[former_member603132 · Accepted solution]

Thanks for the help, I use some of your tips and I did it

This works for me ..

obs: I'm new at the development world, I started working as a intern a month ago.. thanks for your patience.

 _onHistory: function(oEvent) {

        if (!this._oHistoryDialog) {
          this._oHistoryDialog = sap.ui.xmlfragment(this.getView().getId(),"tax4b.gia_es.ui.view.HistoricoGeracao",this);
          this.getView().addDependent(this._oHistoryDialog);
        }
        this._oHistoryDialog.open();

        let tbHistory = this.byId("tbHistory");
        let context = this.getView().getModel("context").getObject("/");
        
        let path =
          "gia_es_odata>/CONTROLE_HISTORICO_PARAM(P_MANDT='" +
          context.MANDT +
          "',P_ORGSTR='" +
          context.ORGSTR +
          "',P_PERIODO='" +
          context.PERIODO +
          "',P_ANO='" +
          context.ANO +
          "')/Results";
        
        let template = tbHistory.getBindingInfo("items").template;
        
        return new Promise((resolve, reject) => {
            tbHistory.bindItems(path, template);
  
            tbHistory.getBinding("items").attachChange(() => {
              resolve();
            });
        });

[boghyon]

Looks like you're trying to access sap.m.Table that is part of the History Dialog fragment. If that assumption is right, you'll have to create that fragment first, and then try to access the table defined inside the fragment.

_onHistory: function(context) {
  if (!this._oHistoryDialog) { // create the fragment first
    this._oHistoryDialog = sap.ui.xmlfragment("tax4b.gia_es.ui.view.HistoricoGeracao", this);
    this.getView().addDependent(this._oHistoryDialog);
  }
  let tbHistory = /* try to access the table after that */
  // ...
},

Accessing controls defined in a fragment is a bit tricky, however, as it depends on how the fragment was created. Here is a list of APIs to use: https://stackoverflow.com/a/47872515/5846045

In your case, the fragment was created with the following factory function

sap.ui.xmlfragment("tax4b.gia_es.ui.view.HistoricoGeracao", this);

This leads to instantiating fragment controls without any prefixes in the global ID.

Therefore try to access the table with the following API:

let tbHistory = sap.ui.getCore().byId("tbHistory");

_______________

Alternatively, just add the view ID as the fragment ID:

sap.ui.xmlfragment(this.getView().getId(), "tax4b.gia_es.ui.view.HistoricoGeracao", this);

or asynchronously since 1.58

sap.ui.require([
  "sap/ui/core/Fragment"
], Fragment => Fragment.load({ // replaces sap.ui.xmlfragment as of 1.58
  id: this.getView().getId(),
  name: "tax4b.gia_es.ui.view.HistoricoGeracao",
  controller: this,
}).then(control => { /* ... */ })); 

Then you can assess the table as usual with

this.byId("tbHistory");

[former_member603132]

I still cant access the data from the Fragment ...

Now doesn't show any errors, but no data as well

_onHistory: function(context) {

        if (!this._oHistoryDialog) {
          this._oHistoryDialog = sap.ui.xmlfragment(this.getView().getId(),"tax4b.gia_es.ui.view.HistoricoGeracao",this);
          this.getView().addDependent(this._oHistoryDialog);
        }

        // Abre o dialogo
        this._oHistoryDialog.open(context.getSource());

        let tbHistory = this.byId("tbHistory");
        let template = tbHistory.getBindingInfo("items").template;

        let path =
          "gia_es_odata>/CONTROLE_HISTORICO_PARAM(P_MANDT='" +
          context.MANDT +
          "',P_ORGSTR='" +
          context.ORGSTR +
          "',P_PERIODO='" +
          context.PERIODO +
          "',P_ANO='" +
          context.ANO +
          "')/Results";

        return new Promise((resolve, reject) => {
          tbHistory.bindItems(path, template);

          tbHistory.getBinding("items").attachChange(() => {
            resolve();
          });
        });

<br>

[boghyon]

Hi Carlos. In order to fix the binding problem, we need more information, especially on how the fragment is defined and with which binding syntax. Since the original issue is resolved here (table not being accessible), please open a new question with all the information.