cancel
Showing results for 
Search instead for 
Did you mean: 

Binding JSON model to Dialog

Former Member
0 Kudos

Hi all,

I have a problem trying to set a BindingContext from a JSON model to my dialog control.

I have already successfully used a BindingContext from an OData model to this control setup, but need to get it working from a JSON model for a create operation.

Upon my event trigger, I create a new JSON model, set the model to the View, add the Dialog control as a dependent of the View so it has access to view models, and finally I set the bindingContext of the Dialog control to my new JSON model.  But no values from my JSON model appear. Values from another view JSON model appear (with absolute paths), but the relative paths show empty.

Note my dialog is composed of two fragments, a generic container that is the dialog control, and then contents of the dialog - an edit fragment (I also have a view fragment).

Thanks in advance for any help, if someone has done this before.

Jason

JS:


onAddEventPress: function(oEvent) {

            var oDialog = sap.ui.xmlfragment("mynamespace.view.fragment.AppDialog", this);  //generic dialog fragment

           

            var oModel = new JSONModel({

                EventCode: "TRACKING",

                EventDateTime: new Date()

            });

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

  

            this.getView().addDependent(oDialog);

     

            //Dialog contents fragment

            var oLayout = sap.ui.getCore().byId("gridDialog"),

                oFragment = sap.ui.xmlfragment("freightexecution.view.fragment.EMEdit", this);

            oLayout.addContent(oFragment);

           

            oDialog.setBindingContext(new sap.ui.model.Context(

                this.getView().getModel("event"),

                "/"

            ));

           

            oDialog.open();

        },

Dialog Container XML fragment:


<Dialog

    id="dlgApp"

    xmlns:c="sap.ui.core"

    xmlns:l="sap.ui.layout"

    xmlns="sap.m">

    <content>

        <l:Grid id="gridDialog" defaultSpan="L12 M12 S12" hSpacing="0" />

    </content>

    <endButton>

        <Button icon="sap-icon://add" text="{i18n>emDialog.SaveEM}" press="onEMSavePress" type="Emphasized" />

    </endButton>

</Dialog>

Dialog Contents XML fragment:


<c:FragmentDefinition

  xmlns="sap.m"

  xmlns:l="sap.ui.layout"

  xmlns:f="sap.ui.layout.form"

  xmlns:c="sap.ui.core">

    <f:SimpleForm id="frmEvent" editable="true" hSpacing="0" vSpacing="0" maxContainerCols="2" layout="ResponsiveGridLayout">

        <f:content>

            <Text text="working? {EventCode}"><!--This should say 'TRACKING', but it's empty-->

                <layoutData>

                    <l:GridData span="L12 M12 S12" />

                </layoutData>

            </Text>

            <Text text="{path:'local>/DateTimeTicker', formatter:'.formatter.dateTimeDetailString'}">

                <layoutData>

                    <l:GridData span="L12 M12 S12" />

                </layoutData>

            </Text>

        </f:content>

    </f:SimpleForm>

</c:FragmentDefinition>

Accepted Solutions (1)

Accepted Solutions (1)

jmattfeld
Participant
0 Kudos

Hi Jason,

attributes of a JSON model can be accessed in XML views like this, notice the additional / in the path:


<Text text="{/EventCode}">

Also, to set the model it should be enough to just call


oDialog.setModel(

this.getView().getModel("event")

);

Regards,

Jan

Edit: To check the correct model binding of the dialog, I used my JavaScript console while running the app:


sap.ui.getCore().byId("dlgApp").getModel()

justin_kemp
Participant
0 Kudos

try

<Text text="{event>/EventCode}">  after giving name to model

Former Member
0 Kudos

Hi Jan,

Thanks, you found the missing link. The view does not need editing, only this was needed:

oDialog.setModel( 

      this.getView().getModel("event") 

);

The view must remain with relative paths, not use absolute paths, otherwise the fragment can't be re-used in the OData model context.

It seems that oDialog.setModel() is only needed, when the JSON model is being set as the BindingContext for the dialog control (in this case, context is the root of the JSON model).

Proof of this exists where the second JSON model is accessible without needing to be explicitly set with oDialog.setModel(). But this model is referenced via a model name with an absolute path:

<Text text="{path:'local>/DateTimeTicker', formatter:'.formatter.dateTimeDetailString'}">

So it seems that, although the Dialog is added to the parent view as a dependent using this.getView().addDependent(oDialog);

This only worked for one JSON model and not both.

Also thanks for the tip on checking the model binding at runtime, will keep that in my cookbook

JB

Answers (1)

Answers (1)

junwu
Active Contributor
0 Kudos
  1.    oDialog.setBindingContext(new sap.ui.model.Context( 
  2.                 this.getView().getModel("event"),  
  3.                 "/"  
  4.             ),"event"); 
  5. how about giving it a name?
Former Member
0 Kudos

Sorry Jun Wu, no change.

junwu
Active Contributor
0 Kudos

in binding, did u use that name?