Bind Element/Association/Aggregation in JS view using JSON notations

[SandipAgarwalla]

This is with reference to a comment I put on DJ's excellent blog on how to mock up Payroll Control App inline with Fiori Apps, here is a link

I was looking on how do you bind Element/Associations to UI Controls in JS views, using JSON Notation, then DJ suggested I put this question as a separate thread so that it might benefit others if they are trying something similar

Here is a snapshot of how DJ has done in XML views

<IconTabFilter
                                    binding="{/cities/0}"
                                    text="{name} ({id})"
                                    icon="sap-icon://group"
                                    design="Horizontal">

</IconTabFilter>

I was trying to do the same in JS views but couldnot get it to work

new sap.m.IconTabFilter({
              bindElement:'{/cities/1}',
                  icon: "sap-icon://notes",
                  text:"{/name}",
                  //text:
                  count: "12",
                  color:sap.ui.core.IconColor.Critical,
                  content: new sap.m.Text({
                    text: "Notes go here ..."
                  })
                }),

I have specified ComplexBinding in the index.html, also tried various options e.g.

association:'{/cities/1}',

aBindings:'{/cities/1}',

Regards

Sandip

[former_member182372 · Accepted solution]

1. var IconTabFilter = new sap.m.IconTabFilter({ 
2.                
3.                   icon: "sap-icon://notes", 
4.                   text:"{/name}", 
5.                   //text: 
6.                   count: "12", 
7.                   color:sap.ui.core.IconColor.Critical, 
8.                   content: new sap.m.Text({ 
9.                     text: "Notes go here ..." 
10.                   }) 
11.                 });
12. 
    
13. IconTabFilter.bindElement('{/cities/1}');
14. 
    
15. or
    
16. new sap.m.IconTabFilter({
17.              
18.                   icon: "sap-icon://notes",
19.                   text:"{/name}",
20.                   //text:
21.                   count: "12",
22.                   color:sap.ui.core.IconColor.Critical,
23.                   content: new sap.m.Text({
24.                     text: "Notes go here ..."
25.                   })
26.                 }).bindElement('{/cities/1}')
27. 
    
28. in case you use i t in aggregation
    
29. 
    
30. SAPUI5 SDK - Demo Kit
31. 
    

bindElement(sPath, mParameters?) : sap.ui.base.ManagedObject

Bind the object to the referenced entity in the model, which is used as the binding context to resolve bound properties or aggregations of the object itself and all of its children relatively to the given path. If a relative binding path is used, this will be applied whenever the parent context changes.

Parameters:

{string}	sPath	the binding path
{object}	mParameters?, Default:	map of additional parameters for this binding

Returns:

{sap.ui.base.ManagedObject}

reference to the instance itself

[SandipAgarwalla · Accepted solution]

Thanks Maksim

Yes that is one option, .bindElement()

or you can use extended syntax for the text property

text:"{/cities/1/name}",  >>>even this will work

I was looking if we have any JSON notation to bind Element, just like Items

Sandip

[former_member182372 · Accepted solution]

maybe

1. var IconTabFilter = new sap.m.IconTabFilter({
2.                  binding : '{/cities/1}',
3.                   icon: "sap-icon://notes",
4.                   text:"{/name}",
5.                   //text:
6.                   count: "12",
7.                   color:sap.ui.core.IconColor.Critical,
8.                   content: new sap.m.Text({
9.                     text: "Notes go here ..."
10.                   })
11.                 });
12. 
    

?? 😉

[former_member182372 · Accepted solution]

Sorry, found it

1. var IconTabFilter = new sap.m.IconTabFilter({
2.                  objectBindings : '{/cities/1}',
3.                   icon: "sap-icon://notes",
4.                   text:"{/name}",
5.                   //text:
6.                   count: "12",
7.                   color:sap.ui.core.IconColor.Critical,
8.                   content: new sap.m.Text({
9.                     text: "Notes go here ..."
10.                   })
11.                 });

[SandipAgarwalla · Accepted solution]

Maksim

Did you test it on your side? I coudlnt get it to work.

Thanks

Sandip

[former_member182372 · Accepted solution]

1. var IconTabFilter = new sap.m.IconTabFilter("IconTabFilter", {
2.                  objectBindings : '/cities/1',
3.                   icon: "sap-icon://notes",
4.                   text:"{name}",
5.                   //text:
6.                   count: "12",
7.                   color:sap.ui.core.IconColor.Critical,
8.                   content: new sap.m.Text({
9.                     text: "Notes go here ..."
10.                   })
11.                 });

works for me