Skip to Content

In this blog I want to show you how can be useful the Javascript Console when we are working with SAPUI5  / OpenUI5.

Of course for an experienced Javascript developer it can be an obvious consideration but for all ABAPers which are trying to learn Javascript and SAPUI5  the javascript command line could be a useful discovery.

On a similar topic (“Javascript for Abapers”) I want to suggest 2 interesting blogs:

In every web-page we can run Javascript and in every browser there is a Console to play with it!

So using the console I can execute Javascript statements to explore objects , overwrite them,  adding functionalities to the JS project and so on.

How can I open the javascript console?

I really like Firebug console (http://getfirebug.com) and I’m going to use it for all my examples but you can try to open the Console with your favorite browser :

  • Chrome : CTRL + SHIFT + J
  • Firefox : CTRL + SHIFT + K
  • Firebug (a Firefox add-on) : F12
  • IE : F12
Now I can execute javascript expressions with an autocomplete feature of all objects! (and using TAB we can accept the suggestions);

Let’s start opening the following url from the official openUI5 doc and opening your browser console,now we are ready to execute Javascript statements.

https://openui5.hana.ondemand.com/content/Examples/databinding.html

01_Intro.JPG

What is the current SAPUI5 version?


sap.ui.version





/wp-content/uploads/2014/04/02_sapui_version_01_427652.jpg

/wp-content/uploads/2014/04/02_sapui_version_02_427653.jpg

The current SAPUI5 version is 1.18.11

(you noticed how it can be useful the autocomplete feature of the console)

Getting the value of the Input Element with id “txtField”

we can explore the same input element in different ways:

  • as a standard DOM Object (without using frameworks)
  • as a jQuery object (SAPUI5 core contains jQuery )
  • a a SAPUI5 object instance

DOM Object

document.getElementById("txtField").value

03_DOM_value_01.jpg

03_DOM_value_02.jpg

and of course we get the value “John”

jQuery Object

we can get the same value using jQuery , the global jquery variable is the dollar sign ($) : with the $( “#id” ) statement we can select a single element with the given id attribute.

$("#txtField").val();

We used val() and not val because it’s a jQuery function and not an attribute

04_jQuery_value.JPG


SAPUI5 Object

Finally we can try to use SAPUI5 to get the “John” value: we can define a new variable “oInputField” to get the instance by the ID and then exploring the instance;



 var oInputField = sap.ui.getCore().byId("txtField");
//we can use getValue() or getProperty("value") it's the same
oInputField.getValue();
oInputField.getProperty("value");











05_SAPUI5_value_01.jpg

05_SAPUI5_value_02.jpg


Getting the model data

Using the “oInputField” of the previous example we can get the current model bound to the object with:


oInputField.getModel().getData();

The method returns an object with the model data that we can easily exploring with a click

06_Model_01.JPG

06_Model_02.JPG

If I want to get the model data as JSON string I have to use another method:

oInputField.getModel().getJSON();

06_Model_03.JPG

Getting the binding path of the property “value”

We got the model data but I want to know if the value “John” is bound to the model (Ok , I read the JSON property firstName:”John” but I’ want to check if the value of the input field is bound to the property “firstname”)

I can use the method getBindingPath

oInputField.getBindingPath("value");

06_Model_04.JPG

The property “value” of the input field is bound to the “firstname” attribute of the model data, now we can try to overwrite the model 🙂

Overwriting the data model

we can try to overwrite “firstName” property and check if the value is correctly updated to the input field value using the “setData” method.

oInputField.getModel().setData({"firstName":"Alessandro"},true);

We replaced the data! the value was correctly updated with the new value “Alessandro”

06_Model_05.JPG

I passed a second additional parameter “true” because I don’t want to overwrite the whole object but just merging the data

from the documentation:

setData(oData, bMerge?)

Sets the JSON encoded data to the model.

Parameters:

{object}    oData    the data to set on the model

{boolean}    bMerge?, Default: false    whether to merge the data instead of replacing it

Define a new object and overwrite the model (without merging)

we can use the default “no merging” option for overwriting the model defining a new object.

I’ll try to overwrite the property “enabled” of the model bound to the property “enabled” of the input field and to the property “checked” of the checkbox , so If I set the data model property”enabled” to false both the controls will change from “editable” to a “non editable” state


var newDataModel = oInputField.getModel().getData();
newDataModel.enabled = false;
oInputField.getModel().setData(newDataModel);






06_Model_06.JPG

that’s all!

of course possibilites are endless…

As always all feedbacks , comments and suggestions are welcome

To report this post you need to login first.

3 Comments

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

Leave a Reply