SAPUI5 Binding

[Former Member]

Hi all,

First of all i have just started development in SAPUI5.

I have some basic question.

I have done binding to elements such as sap.m.Lable, sap.m.List etc.

In UI5 we declare string like follow :

var variable1 = "Hello World";

Follwing is binding eg. which i have done:

        var lblPRNo= new sap.m.Label("lblWorkItem");

        lblPRNo.setWidth("50%");

        lblPRNo.bindProperty("text","BODetails>/Instid");

        PRBasicPage.addContent(lblPRNo);

BODetails is a name of JSONModel.

What i want to achieve is binding "BODetails>/Instid" value to var variable1.

Thanks and regards

Harshal

[former_member293602 · Accepted solution]

Hi Harshal,

just in case you haven't seen this already, I would like to point you to the developer guide, section Data Binding. This will give you a good overview what you can do and how it works. In addition you will find many code snippets to play with. In the Controls section you will find many examples using data binding too.

Regards, Frank

[Former Member · Accepted solution]

hey Frank,

Thanks for pointing out controls section.

But i want some help here.

What m doing is to hit a service and converting the response in JSONModel.

In that model m getting one ID.

Using that ID i  want to hit another service.

M not showing that ID on my UI.

I need that id to call another service.

So for that i will need some variable holder to which i can assign that id. So i need the approach to achieve this thing.

May be m thinking in a wrong way to achieve it.

Please guide.

[Former Member · Accepted solution]

get the value from the respective model first and assign to the variable1

var variable1 = oModel.getProperty('/id');

Using the variable1 do call to respective service

[Former Member · Accepted solution]

Hi ajain,

Thank for your help

I have one more question.

M trying to add decision command for workflow ACCEPT and REJECT.

var data = {results:[

                      {dec_text:"Accept", dec_key:"0001"},

{dec_text:"Reject", lastName:"0002"}

]                     }

           ]};

dicisionModel= new sap.ui.model.json.JSONModel();

dicisionModel.setData(data);

I want to create buttons during runtime using this model.

Is there anyway by which i can count number of elements in Jsonmodel and then take those values in array and then create buttons in dynamic way?

[Former Member · Accepted solution]

Hi Harshal,

Your Welcome

As per my understanding you need to construct dynamic buttons from the model Array items

Here goes your solution :

//Model
var data = {
     results: [ {dec_text:"Accept", dec_key:"0001"}, {dec_text:"Reject", lastName:"0002"} ]
}; 
dicisionModel= new sap.ui.model.json.JSONModel(); dicisionModel.setData(data);
var btn;
for (var i = 0; i < dicisionModel.getProperty('/results').length; i++) {
      btn = new sap.ui.commons.Button({text:dicisionModel.getProperty('/results')[i].dec_text}); // Construct the btn & populate text 
      btn.placeAt('content'); // Append the Button in your respective content view
}

Hope this helps

Regards,

Ajain

[former_member293602 · Accepted solution]

Hi Harshal,

I would like to add another approach. Instead creating the controls yourself, you can make use of Aggregation Binding.

Here is a small example using aggregation binding, which produces a similar result:

//Model  
var data = {
 results : [ {
  dec_text : "Accept",
  dec_key : "0001"
 }, {
  dec_text : "Reject",
  lastName : "0002"
 } ]
};
dicisionModel = new sap.ui.model.json.JSONModel();
dicisionModel.setData(data);
sap.ui.getCore().setModel(dicisionModel);
var oButtonTemplate =  new sap.ui.commons.Button({
  text: "{dec_text}"
 });
var oLayout = new sap.ui.commons.layout.HorizontalLayout({
 content: {path: "/results",
     template: oButtonTemplate}
});
oLayout.placeAt("content");

Regards, Frank

[agentry_src]

Locked by Moderator.  Too many necromancers visiting.

Regards, Mike (Moderator)

[irfan_gokak]

This message was moderated.

[Former Member]

This message was moderated.

[Former Member]

This message was moderated.

[Former Member]

Hey hi frank and ajain,

Both of your answers are working fine.
I know this are basic things. But as a beginner i m struggling with them.

Thanks for your help

I have one more query.

In application like Facebook and Google+ they have used sliding drawer which is a android component.

As m developing UI5 app for mobile platform, want to ask is it possible to create component like Sliding drawer in sapui5 ?

Thanks and Regards

Harhal

[Former Member]

Hi Harshal,

     It's indeed possible to create your custom component or widget by extending SAPUI5 or plain vanilla javascript.

Regards,

Ajain

[former_member293602]

Hi Harshal,

as Ajain said, yes it is possible to extend the SAPUI5 library by creating you own controls. You can find more information on how to do this here. The mobile library contains a slider control. Some simple examples can be found on this page.

Regards, Frank

[Former Member]

ok got it..thanks

have some queries.

I want to set background image for my app. Code in index page:

var app = new sap.m.App("mainApp",{initialPage:"idLogin"});

                    app.setBackgroundImage("images/background.jpg");

but its not working.

and another thing:

I want to add custom text before bind text on lable :

var lblPRNO=new sap.m.Label();

        lblPRNO.bindProperty("text","PRHeaderItems>Material");

        lblPRNO.addStyleClass("myLabel");

        MaterialDetailsBox.addItem(lblPRNO);

I want to add text like PR Number : and then binded text from dataModel.

is it possible ?

[former_member293602]

Hi Harshal,

concerning the background image, I experience the same behavior as you do. When you inspect the DOM, you will find that the image is there but with the height=0. In addition, the background image is "covered" by the page... . In this aspect, I don't have any experience.

concerning the other question, I would recommend to either make use of a formatter function to add the additional text or to use "calculated fields". A good overview on Data Binding can be found here.

Regards, Frank

P.S:: As your original question is solved, you might want to create a new question with an appropriate title. This will have the effect, that more people look at "new unsolved" questions than on "old solved" ones

[Former Member]

Hi Harshal & Frank,

Setting Background Image Seems to be working for me ...

pls do refer the jsbin example -> http://jsbin.com/ulifun/2/edit

Regards,

Ajain

[former_member293602]

Hi Ajain and Harshal,

when I use the CDN

src ="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"

  together with the data-sap-ui-theme ="sap_bluecrystal"

  it works on my side too. So it looks like a matter of the UI Theme used and if you are working with local resources, you need to make sure that the Blue Crystal UI Theme is available.

Regards, Frank

[Former Member]

Hi ajain and frank,

Yes frank i will make new thread from now

As frank said i have noticed same issue.

Background image is working on "sap_bluecrystal" theme.

Regards,

Harshal

[Former Member]

Hi Harshal,

     To define a property binding on a control its preferable to set the path of your associated model. You can assign the path to the var variable1 to an object literal later set it to the global model and notice the changes to the object literal.

var variable1 = {

     "value" : "hello world!"

}

var oModel = new sap.ui.model.json.JSONModel();

oModel.setData(variable1);

sap.ui.getCore().setModel(oModel); //Global Context

As model can only listen for changes I believe you cannot assign to random variable and listen to changes.

Regards,

Ajain