UI5 Binding to Dialog

[gary_king2]

How does one bind to a Dialog that has not yet been opened?.

[junwu · Accepted solution]

 this.oDialog.bindElement(oTableData[index]);  the parameter should be the path to the data, not the data directly.

[gary_king2 · Accepted solution]

Much appreciated Jun Wu.

[junwu]

 this.oDialog = this.byId("idDialog");

you already store the dialog in the controller(this), why bother to get it again?

[gary_king2]

What I can't find ANYWHERE, is a single example of a binding to a Dialog (XML).

I can use

sap.ui.getCore().byId('inputId').setValue("Smith");

and also getValue as well to retrieve the values entered, but what I can't seem to do is bind a single record (in my case) model to the Dialog. Then reference that model/field from within the Dialog (XML) within <Input/> as an example.

[junwu]

you can define the binding in the fragment if the binding is static, just like your view, do you need to open the view then define the binding??

[former_member227918]

1. Create a fragment file for dialog

2. add fragment to your view

<l:VerticalLayout>
    <l:content></l:content>
    <l:dependents>
        <core:Fragment fragmentName="demo.dialogFragment" type="XML"></core:Fragment>
    </l:dependents>
</l:VerticalLayout>

3. bind dialog

in onInit function of view, get dialog id which is defined in fragment ( this.oDialog = this.byId("dialogId") ),

//bind dialog in oninit or patterenroutmatch function
this.oDialog.bindElement(bindingPath);

4. open dialog

this.oDialog.open();

hope this help.

[gary_king2]

Ah, so you can get the Dialog ID even though have not opened the Dialog yet. That was my initial issue. Will try this now. Thanks. I'll post the results shortly.

[former_member227918]

yes please check, you can get the dialog by this.getView().byId() or this.byId().

[gary_king2]

Okay, I don't create a dialog like you do as I already have a controller and view, with a table displayed. The table has a button to say Insert new record or edit record (as not all the data can be displayed in the table) and whereupon the dialog is opened and either the new record or existing record can be edited via the Dialog.

I have code like so:

  
  if(!this.oDialog) {
    this.oDialog = sap.ui.xmlfragment("view.MyDialog", this );
    this.getView().addDependent(this.oDialog);
   }
  var newRecord = {};
  //Get existing 
  var oTableData = this.getView().byId("idTblMyTable").getModel("MyModel").getData();
  oTableData.push(newRecord);
  this.getView().byId("idTblMyTable").getModel("MyModel").setData(oTableData);
  //Just in case, refresh.
  this.getView().byId("idTblMyTable").getModel("MyModel").refresh();
  //Get index of new row, hopefully
  var index = oTableData.length -1;
  //Get Dialog ID
  this.oDialog = this.byId("idDialog");
  this.oDialog.bindElement(oTableData[index]);
  //Now Open Dialog
  this.oDialog.open();

If I comment out all code except the IF statement and the last statement to open the Dialog everything works, in that my Dialog opens and displays, except of course there is no bound data.

My onInit function sets up some data and binds this to my View table, and this seems to work.

What is not working is the statement this.oDialog = this.byId("idDialog");

My Dialog XML starts off with <Dialog id="idDialog ....

But, I also have a <SimpleForm id = "idSfrDialog> as well, and if I use this.oDialog = this.byId("idSfrDialog"); that also does not work either. So, it seems to the setting of this.oDialog that is failing, and that's perhaps why the bindElement is failing.

I have also tried missing out the setting this.oDialg as well as it's defined above in the IF statement, but of course it's not using .byId to retrieve the ID, so does not work.

Can anyone identify why I can't get the id from my Dialog view.

[former_member227918]

first of all, if you are adding fragment dynamically I am not sure you can get dialog as this.oDialog = this.byId("idDialog");, because if you are defining fragment into xml then only it will be rendered and above line of code will work.

and, if you have already dialog in oninit / IF statement, why you are trying to get it again, (as Jun also said).

just bind it.

[gary_king2]

I have found a rather good example (

https://openui5.hana.ondemand.com/#docs/guide/4da72985139b4b83b5f1c1e0c0d2ed5a.html )

The Dialog XML has a line like this:

<Dialogid="helloDialog" title="Hello {/recipient/name}"></Dialog>

My question is, how is /recipient/name being bound to this Dialog.

Why do all the examples I read miss this bit out. Either it's just so simple it does not need to be mentioned, which I suspect, or they just miss this out.

Anyone care to comment?

[former_member227918]

thats what i told you in my very first comment, like,

get ready your fragment with bindding path and all ( like view xml binding )

add fragment in your view xml

in views controller get dialog by id and bindelemnt with binding path or by any model.

for your example, you can refer this link where data (/recipient/name) is getting binded from a model defined in component.js file

[junwu]

they didn't miss anything, you just don't understand binding fully.....

[gary_king2]

I like to think that I have reasonable understanding of binding nowadays Jun.

However, in the example I mentioned, NOWHERE is 'recipient' used as a binding value in the js code, and hence my comment. It is ONLY mentioned in the XML.

This was my point, there are countless Dialog examples that skirt over the issue, and the linked article I mentioned is one of them, I believe. 😉

In the meanwhile, I'm testing my binding using a bindingpath.

[junwu]

don't know what u are talking......

[gary_king2]

It's okay Jun, I have found this issue. The link I had only shows some of the source code. I have found another link that shows all of the code, and can see from that how it is working.

[vamsixk]

Hi Akhilesh,

thanks for this. your comment gave me the missing clarity that was required to populate the binding in the fragment.

i was using an array and wanted to update the binding everytime i changed a particular selection.

Thank you.