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