What properties can you manipulate 

Each widget contains a set of properties that you can directly manipulate. 

  Right click on the widget and select “Edit Properties” It shows the available properties 

1. “dWidth”:200,   [change the width of the object]
2. “dHeight”:200,  [change the height]
3. “dx”:0,                [change the x location]
4. “dy”:186,           [change the y location]
5. “fillColor”:”#533813″,  [change the fill color]
6. “fontName”:”default”,  [change the font name – this is disabled]
7. “fontSize”:57,               [change the font size]
8. “fontStyle”:” “,               [change the font style – not needed, manipulate through showBold, showItalic etc]
9. “horizCellPadding”:10, [change cell padding]
10. “horizObjectPadding”:15,  [change overall padding]
11. “lineColor”:”default”,           [change line color]
12. “lineWidth”:1,                       [change line width]
13. “margin”:5,                           [change margin]
14. “opactiy”:0.4,                       [change transparency]
15. “showBackground”:true,    
16. “showBold”:false,
17. “showBorder”:false,
18. “showItalic”:false,
19. “showStrike”:false,
20. “showUnderline”:false,
21. “textBackgroundColor”:”none”,
22. “textColor”:”red”,
23. “textHorizAlign”:”center”,
24. “textX”:-10,                            [change the relative position of text X location in icons]
25. “textY”:0,
26. “vertObjectPadding”:10,
27. “zIndex”:-1,
28. “showTextShadow”:false,
29. “textShadowOffsetX”:0,
30. “textShadowOffsetY”:0,
31. “textShadowBlur”:0,
32. “textShadowColor”:”white”,
33. “showBoxShadow”:true,
34. “boxShadowOffsetX”:0,
35. “boxShadowOffsetY”:0,
36. “boxShadowBlur”:0,
37. “boxShadowColor”:”white”

You can access the widget’s properties using the “this” operator 

for e.g in the javascript if you simply say
this.textColor=”blue”; // property # 22 above 
then upon the first refresh the text will go red and stay that way until you add another logic 

Note, in the designer even though you can change the font settings and cosmetics, the difference right now is that you are doing it programmatically and at run time when the data refresh occurs.

So this is powerful stuff. When your data is refreshed and depending or independent of your data, You can do the following

• change the position of the widget
• change text color
• change text size
• change size of the widget

Heat Map Style Grid Consider this simple MySQL based Grid data 

 It is a two column grid. Let us add some javascript. Before we move further familiarize with how the data arrives and which arrays are available for reference 

 The “glb” is a global array containing the latest data for the current widget. The data arrives in separate columns. First column is data[0] and second column is data[1] Having this array gives us full control so let us try to change the colors of the data that arrives But before doing something ambitious, let us simply change the data in the first column. We will add a simple javascript 

1. var cols=glb[“_odata”].length;
2. var rows=glb[“_odata”][0].length;
3.  
4. for (var i=0; i < rows; i++)
5. {
6.   glb[“_odata”][0][i] = glb[“_odata”][0][i] +”x”;
7. }

 In the first line we collect the number of columns, remember the variable glb[“_odata”] is a 2 dimensional array, first the columns and second the elements in the column In the second line, we get the number of rows by just checking the length of the first column Next we have a for loop to go through each element and simple append a “x” to the data. So effectively we did the most dangerous thing, changed incoming data. Here is how our new grid looks

 Note the x at the end of the period column data Now let us modify a little bit to change colors only for the obj column  

 The result is 

var cols=glb["_odata"].length;
var rows=glb["_odata"][0].length;
 
for (var i=0; i < rows; i++)
{
  glb["_odata"][1][i] = "<color=blue>"+glb["_odata"][1][i] +"<color=default>";
}
 
 
Note that we change the column from 0 to 1 and we encapsulate our data with two color tags.
 
What fun is to change color for all data
 
Let us add one more condition to change the color only if it is above 50 to red
 
var cols=glb["_odata"].length;
var rows=glb["_odata"][0].length;
 
for (var i=0; i < rows; i++)
{
  if (glb["_odata"][1][i]>50)
  {
    glb["_odata"][1][i] = "<color=red>"+glb["_odata"][1][i] +"<color=default>";
  }
}

 So using same approach you can pretty much do anything with the incoming data.  

Moving objects around 

Even though you have direct access to the dx and dy properties, you should use the following methods 

Below is an example where three icons are pitted against each other for a random number race 

So when the new value arrives the position of the icon is set to  new value depending on what the value is Same for  the other two icons. The Parameters for the above icons are

Functions
setXY(x,y) : This just positions to the new position 
objectmove(x,y) : This adds to the existing postion.

For e.g if you passed objectmove(10,0) then it will move the object 10 pixels along X and keep the y position same.