How to use Google Tables
-
Create a new RMP user interface
-
Include this as a
.js
in the header of your webform (this is a google library with table chart package)
https://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22visualization%22%2C%22version%22%3A%221%22%2C%22packages%22%3A%5B%22table%22%5D%7D%5D%7D
-
Add an html widget with the following code :
Code
1 | <div id="table_div"><div> |
- Add a javascript gadget in your RMP webform with this script :
Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | function drawTable (html_id,array_data,array_column,table_width,table_height,html_allow,showNumber) { google.load('visualization', '1', {packages:['table']}); var data = new google.visualization.DataTable(); for(i=0;i<array_column.length;i++) { data.addColumn(array_column[i].type, array_column[i].title); } var array_array_data = new Array(); for(i=0;i<array_data.length;i++) { array_array_data.push([array_data[i].day,array_data[i].day_label,array_data[i].am,array_data[i].pm]); } data.addRows(array_array_data); var my_index1 = data.getFilteredRows([{column: 1, value: "Sat"}]); var my_index2 = data.getFilteredRows([{column: 1, value: "Sun"}]); var my_index = my_index1.concat(my_index2); for (i=0;i< my_index.length;i++) { for(j=0;j<4;j++) { data.setProperties(my_index[i],j,{'style': 'background-color: red;'}); } } var table = new google.visualization.Table(document.getElementById(html_id)); table.draw(data, {allowHtml: html_allow , showRowNumber: false,width: table_width, height: table_height}); } var array_data = [{"day":1,"day_label":"Mon","am":"P","pm":"P"},{"day":2,"day_label":"Tue","am":"P","pm":"P"},{"day":3,"day_label":"Wed","am":"P","pm":"P"},{"day":4,"day_label":"Thu","am":"P","pm":"P"},{"day":5,"day_label":"Fri","am":"P","pm":"P"},{"day":6,"day_label":"Sat","am":"Abs","pm":"Abs"},{"day":7,"day_label":"Sun","am":"Abs","pm":"Abs"}]; var array_column = [{"type":"number","title":"Day"},{"type":"string","title":"Day Label"},{"type":"string","title":"AM"},{"type":"string","title":"PM"}]; var showNumber = "false"; var html_allow = "true"; var html_id = "table_div"; var table_width = 600; var table_height = 600; drawTable(html_id,array_data,array_column,table_width,table_height,html_allow,showNumber); |
- Save your webform, switch to test mode and preview
You can now adapt this feature to your own data source : you just have to compute array_column and array_data (from RunMyProcess Collections for example) and call this js function.
To highlight table rows according to your criteria, you have to modify the column and its value in getFilteredRows([{column: "column_number", value: "criteria_value"}])
function.
NB : This feature doesn't require working in a google environment as this is not a google gadget
For more information/properties about Google tables:https://developers.google.com/chart/interactive/docs/gallery/table
Please give details of the problem