A view on the data binding scenario. Good to know to save much code – use of property binders will allow you generic update of a component based on the data source changes. This is a blog of the series “Design Studio 1.5, View on...” – here the function “Data Binding“. For more topics see Design Studio 1.5: What’s New in? A (technical) View.


The starting point.

If you have a text field in your application, and you place there some value by “getData” function, you can see this option with Data Binding to reduce your script.


What is the New Function?

In release 1.5 every property can be bound to a data cell. You can start similar as in the blog Design Studio 1.5: View on Data Binding (for List). But in this case, we will look at the other binding option. The scenario is on example of a simple text field:

tf1.PNG

The text will be bound to a cell – therefore I select now the “Data Cell Binding” option.

tf2.PNG

Once selected, I can chose the cell in the data cell selection dialog.

tf3.PNG

In my example I have only one data source (DS_1), but having more in the application, you can change the data source as well.


After the selection the text field will be immediately updated with this value.

tf4.PNG


Special Case – Formatting Function on Input Binding

So, connecting the data cell by binding I can see the value, but what to do in case you wan to place here a real text?

Just use the “formatting function”. Assure first, you have a global script object created in the application.

tf5.PNG

Now, you can create a new function.

tf6.PNG

and then you need to fill in the content of this function:

tf7.PNG

This function is requiring following content:

  • you need to return here a string, as the property is of type string.
  • you will get the formattedValue and the real “value”
  • you can make whatever you need here, also access other components and global functions.

The executed output is:

tf8.PNG

More funny stuff!

Here a small example for other property to show you the power of this feature. You can bind also the “style” property of the same text. Here is example script:

tf10.PNG

or in text for copy & paste:

var style = “”;

if(value < 50) {

  style = “background-color: red;”;

} else {

  style = “background-color: green;”;

}

return style;

and the result:

tf9.PNG

As you see, there is a lot of freedom on this function.


Execution Point

Perhaps some words on “when this function will be executed?”. The execution point of time is same as DS.onResultSetChanged(). The difference is, you can better structure (or differently) structure the code.


Summary

By this example you can learn how to use data binding to avoid some scripting for text values. You can also experiment with other properties to see more binding options.


Questions?

If something is missing or unclear, feel free to comment.

To report this post you need to login first.

32 Comments

You must be Logged on to comment or reply to a post.

  1. Jonatan Rodriguez Vicente

    Many thanks Karol, it’s very usefull.

    I have problems with last step (change the background color). I’m using the dashboard template and I fill some text fields using the binding functionality but I don’t know how to bind the “style” property with my script because only the default options are available (Standard, Header1…).

    Can you help me on it?

    Best regards,

    Jónatan.

    (0) 
    1. Karol Kalisz Post author

      Hi Jonatan,

      I have checked this – it is not possible to bind properties into “Drop-Down” properties. What you can make to achieve the functionality is:

      * bind the “CSS Style” property and set the style on the Text. Using CSS you can achieve probably the visualization you need.

      Does this help?

      Karol

      (0) 
      1. Jonatan Rodriguez Vicente

        Hi Karol,

        I would like to apply a conditional formatting to the text component. I followed your example but my code returns “background-color: green;”. Where is my mistake?

        I copied your script code in my global script and after that I selected it in the “Formatter Function”.

        Thanks in advance,

        Jónatan.

        (0) 
        1. Karol Kalisz Post author

          what is the value of the property “value” in your case? Perhaps there is some scaling factor and it is always bigger than 50?

          (0) 
          1. Jonatan Rodriguez Vicente

            I tried in two cases: a percentage (82,3 %) and a counter (8). As the script code is the same, for the firts case the result is “background-color: green;” and for the second one “background-color: red;”.

            (0) 
            1. Karol Kalisz Post author

              so, it does work for you? I cannot see now any issue in your description. you can correctly set the CSS style on the component based on the value. what do you need to change more? in case the text size or other css, you need to fint the corresponding css and add into the “return” statement.

              (0) 
                1. Markus Maisch

                  Hi Mathivanan,

                  you are trying to format the style, not the text.

                  What you need to do is to bind the “CSS Style” property and set it’s value with your string.

                  It seems to me, that you are binding the “Text” property with your style value, so just take your formatting and use it with the “CSS Style” property and you should be fine.

                  Regards

                   

                  (0) 
      1. Daniel Klein

        Hi Karol,

        the first one.

        I am using Text components for showing variable values to the user (which have to be updated via script each time prompts are changed).

        Do you know a better method?

        What I am searching for is a prompt screen that is not shown via popup but as a “normal” component, so the user can change/see the current variable values without having to bring them up via popup.

        Regards

        Daniel

        (0) 
  2. Cesar Garcia Batista

    Hi karol, I used this function in a local model and works fine, but when I uploaded to SAP NW this function doesn’t works.

    Do you know if this is a issue or there is a another way to use this function?

    Tks,

    Cesar G Batista

    (0) 
  3. Tobias Stadelmann

    Hi Karol,

    it works fine for fixed Drilldowns.

    But what we often use are scripts to manually write a sum of a certain key figure across all Drilldowns or inside one characteristic into a text field.

    On Change of drilldown, it there a possibility to Change the data binding to annother characteristic via script function?

    Is there a function like {} in script function to display the sum of the keyfigure inside the data binding not depending on a certain drilldown?

    Example script:

    TXT_TILE_2_VALUE.setText(DS_1_2.getData(“51DOSIP4L15Q40ANESU0Z3BTK”, {}).formattedValue);

    Thank you and best regards,

    Tobias Stadelmann

    (0) 
    1. Karol Kalisz Post author

      Hi Tobias,

      currently there is no direct function to change the data binding via script (topic for idea place and next release perhaps?). But, you can “work-around” your scenario via the “Formater Function”.

      Perhaps this is not too clear, but in this function you can execute any code you need to bring the value back. Eg, you can execute even the code:

      var newValue = DS_1_2.getData(“51DOSIP4L15Q40ANESU0Z3BTK”, {}).formattedValue

      return newValue;


      This means, you would use the binding only for the “triggering” of the change, not for the passing the value which was initially selected in the binding.


      Karol

      (0) 
      1. Alexander Knight

        Hi Karol,

        I’ve just discovered this tip about using the “Formatter function” to get around a data binding issue.  Thanks a lot for this.  The extra benefit to use data binding in 1.6 is that it is all run in parallel, rather than in series for Get Data.

        Cheers

        Alex

        (0) 
  4. Alfred Lee

    Hi Karol,

    Very helpful! Thanks.

    BTW, I tried to use data binding functionality with online composition. It seems to me that data binding doesn’t support online composition. Is that correct?

    Best,

    Alfred

    (0) 
      1. Alfred Lee

        Hi Karol,

        Thanks for the reply.

        Yes, I knew this from Shady. But it’s good to see the document.

        Besides this limitation, I recently found that setSelectedValue is not working for data bound components. I consider this as bug rather than limitation. So I’ve raised a ticket for this.

        Best,

        Alfred

        (0) 
      2. Daniel Merdan

        Hi Karol,

        do you know if there has been some changes withing the functionality of data binding in Design Studio 1.6? I remember that the usage of getSelectedMember and setSelectedMember have been among the limitations in 1.5, unfortunately the SAP note 2193693 you have mentioned ist not working any more.

        Thank you and best regards,

        Daniel

        (0) 
          1. Daniel Merdan

            Hi Karol,

            thanks a lot for the reply. I have been waiting for the ticket to get back online, but it still seems to be down. As this topic is still relevant to us, I will highly appreciate any further assistance!

            Best regards,

            Daniel

            (0) 
  5. Jonas Duclos

    I have a question about data binding. For now, we can bind a text to a data cell of a crosstab. When you select your data cell, it’s binded to a measure and a dimension value.

    But are we able to bind a text to a measure and to the first row of the crosstab ?

    If i sort my crosstab descending by the measure, i would like my first text will be binded to the value of dimension value ranked #1 for this measure, text_2 binded to the value #2 etc…

    For exemple, my wish would be to create a dynamic podium from a crosstab using data binding cell.

    Thank for your answers 🙂

    Regards,

    Jonas.

    (0) 
    1. Karol Kalisz Post author

      Hi Jonas,

      the binding is technically storing the logical address to the cell, dimension members and measure. So, sorting is not influencing the address.

      why you cannot use simply the crosstab for this scenario, or the UI5 Table from community package? The, sorting on measure will make the logic and display does not need to bind anything.

      Karol

      (0) 
  6. Meichun Lane

    Hi Karol,

    Is it possible to enable data binding to create conditional formatting affect on an entire corsstab column ? For example, if ACTUALS amount is greater than 0, font color is green, otherwise red.


    At this point, i believe the select data source ccan only define the logic to decide CSS, it won’t go to row level in the crosstab to change colors based on the amount.


    Could you please comment on it?

    /wp-content/uploads/2016/09/conditionalformatting_1037917.png

    HERE IS MY FORMATTER FUNCTION:

    var css = “”;

    if(value >= 0) {

      css = “green”;

    } else {

      css = “red”;

    }

    return css;

    (0) 
    1. Karol Kalisz Post author

      this would be possible. you just need to overwrite the correct css in crosstab responsible for the color and assign it depending on the value.

      have you tried to do that?

      Karol

      (0) 
  7. Ganesh B

    Hi Karol,

    Thanks for cool post, i have one question here. can we compare value with another value(my case is not >50. have to compare with plan vs target)  which is changed dynamically? and target also from same data source.. do we have way else any other approach ?

    Thanks in advance.

    (0) 
      1. Sigal Zohar

        Hello Karol,

        Thank you very much for the post.

        I need to do the same comparison as Ganesh does. For example –

        The current capacity KPI value is 87%, which is a decrease of 1.14% comparing to last year, and a decrease is bad.

        But decrease is not necessarily bad. It depends on the KPI.

        Every KPI has properties, such as Number of decimal places, scaling factor and indication that determines whether “High is good” or “High is bad”. Those properties are read from a special view by getDataAsString.

        The problem is that getDataAsString is very slow and I was advised to use binding instead.

        Is it possible to bind into variables and use them in a script to decide which color and arrow to display?

        Thanks and best regards,

        Sigal

        (0) 

Leave a Reply