Discovering the Browser Console command line with SAPUI5 / OpenUI5

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:

• Javascript for Abap developers : http://scn.sap.com/community/abap/blog/2014/02/18/javascript-for-abap-developers
• Top 10 things abap dev should know when learning javascript: http://scn.sap.com/community/abap/blog/2014/02/10/top-10-things-abap-developers-should-know-when-learning-javascript

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

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

What is the current SAPUI5 version?

sap.ui.version

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

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

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");

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

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

oInputField.getModel().getJSON();

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");

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”

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);

that’s all!

of course possibilites are endless…

As always all feedbacks , comments and suggestions are welcome