How to work with Grid Widget in Savvion
Savvion Business Manager form designer comes with a Built in grid widget. Built using Ext JS it is a good way to depict tabular data on your page. The problem is how do you configure it. This short article explains how to do it.
Step 1: Design your widget service
To do this, once you are in form designer click on tools > Service Designer. Choose Grid and click on next. You will be prompted to provide your column headings and row data. Use the Buttons to add the columns and just add one row.
Once the service is ready. Save it. By default savvion saves it as a sjs file. You should be able to see this file in the process directory (left pane). Right click and rename the file to have a JSP extension.
Step 2: Drag the grid widget into your designer
Go to the advanced control and drag the grid widget to your page. You can also do it by right click > insert > advanced control > Grid.
In the grid properties, see where the data binding is available. Under it, there should be a BROWSE button to choose the service. Select the service you just created in step 1
Step 3: Make the Service Dynamic
Now lets make the service dynamic. If you open the JSP file you will see that it has json data, typically columns and rows. You can use any JSON parser online to check out the contents in a more comprehendible manner.
Typically you will need to define a class which returns this JSON String. For example if you want to pull this data from a database table, you can write JDBC Code and keep on populating a JSONObject. Remember JSON is either key/value or an array.
JSONObject root=new JSONObject();
JSONArray column = new JSONArray();
JSONArray rows = new JSONArray();
Then in the column and rows object keep on adding your data. For Example
JSONObject data1=new JSONObject();
At the end of it do a toString on the root and render back the result.
Hope this is helpful.