Lukasz Kokoszkiewicz. Allow to additionally filter main table content All of them can be added by...

13
NEW FEATURES OF HBROWSE FRAMEWORK Lukasz Kokoszkiewicz

Transcript of Lukasz Kokoszkiewicz. Allow to additionally filter main table content All of them can be added by...

Page 1: Lukasz Kokoszkiewicz. Allow to additionally filter main table content All of them can be added by simply in a settings file Right now we have 4 kinds.

NEW FEATURES OF HBROWSE FRAMEWORK

Lukasz Kokoszkiewicz

Page 2: Lukasz Kokoszkiewicz. Allow to additionally filter main table content All of them can be added by simply in a settings file Right now we have 4 kinds.

MAIN TABLE FILTERS

Allow to additionally filter main table contentAll of them can be added by simply in a settings fileRight now we have 4 kinds of filters: Text Select Date Datetime

When specified, all of them are added into model and url so filter values can be used in different server requests and for bookmarkingOn and Off functions can be setup to run on filter empty of filled events (for example disable some other controls)Select filters can load list items from ajax requests or use static ones

Page 3: Lukasz Kokoszkiewicz. Allow to additionally filter main table content All of them can be added by simply in a settings file Right now we have 4 kinds.

MAIN TABLE FILTERS

Type: text Type: select Type: datetime

Page 4: Lukasz Kokoszkiewicz. Allow to additionally filter main table content All of them can be added by simply in a settings file Right now we have 4 kinds.

MAIN TABLE FILTERS OBJECT{    'label':'Not modified since',  // String    'urlVariable':'notmodsince',  // String - lower cased, no spaces, no special characters    'fieldType':'datetime', // String (text|select|date)    'value':'',    'options':{        // On and Off functions are executed when filters submit is clicked        // On is executed when field has value other then empty string ("")        // Otherwise Off is executed        'On':function(Data) {  // Data is a Controller.Data object            $('#from,#till,#timeRange').attr('disabled',true);        },        'Off':function(Data) {  // Data is a Controller.Data object            $('#from,#till,#timeRange').attr('disabled',false);        }    }}

Page 5: Lukasz Kokoszkiewicz. Allow to additionally filter main table content All of them can be added by simply in a settings file Right now we have 4 kinds.

MAIN TABLE FILTERS OBJECT{    'label':'Site',  // String    'urlVariable':'site',  // String - lower cased, no spaces, no special characters    'fieldType':'select',  // String (text|select|date)    'value':'',    'options':{        'dataURL':'/dashboard/request.py/inittaskprod?data=sites',  // (optional) String (url|false)        // Function translates model or ajax data onto simple elements array        // Input: data - data represents Data.mem object or ajax response // depending on whether dataURL exists or not        // Output: [['el1','el1 label'],['el2','el2 label'], ...] // - Can also be defined as a static list (when you don't want to        // load the data from url nor using Data.mem object)        'translateData': function(data) {            var sitesArr = data.basicData;            var output = [['','Off']];                        for (var i=0;i<sitesArr.length;i++) {                output.push([sitesArr[i].SITENAME,sitesArr[i].SITENAME]);            }                        return output;         }    }}

Page 6: Lukasz Kokoszkiewicz. Allow to additionally filter main table content All of them can be added by simply in a settings file Right now we have 4 kinds.

NEW CHARTS

In addition to google charts Highcharts library was added (www.highcharts.com)New library seems to work fine with IEThe new charts type can be used along side with previous google chartsIn the newest version chart object was introduced and can be used in adding charts into charts tab and/or to add them into expanded row.On demand option can be added to each chartEach chart can load the data for it’s own purpose

Page 7: Lukasz Kokoszkiewicz. Allow to additionally filter main table content All of them can be added by simply in a settings file Right now we have 4 kinds.

NEW CHARTS

On demand chart load the data and draws a chart after clicking Loach chart button

Highcharts library adds a certain interactivity level with tooltips

and clickable content

Page 8: Lukasz Kokoszkiewicz. Allow to additionally filter main table content All of them can be added by simply in a settings file Right now we have 4 kinds.

NEW CHARTS

Charts inside expanded row also can be setup as

onDemand and can also load the data from the server

Page 9: Lukasz Kokoszkiewicz. Allow to additionally filter main table content All of them can be added by simply in a settings file Right now we have 4 kinds.

NEW CHARTS

Each chart can be printed directly or be exported to one of this four formats

Page 10: Lukasz Kokoszkiewicz. Allow to additionally filter main table content All of them can be added by simply in a settings file Right now we have 4 kinds.

NEW CHARTS OBJECT{    'name':'Status Overview',    'type':'gchart', // (gchart|hchart),    'onDemand':true,    'dataURL': 'http://pcadc01.cern.ch/client/chartdata',    'dataURL_params': function(Data) { return {}; },    // translates data onto requires format:    // {"chd":"t:60,40","chl":"Hello|World"} or highcharts options object (http://www.highcharts.com/)    'translateData':function(dataJSON) {        var output = {            'chtt':'Example Chart',            'cht':'p3',            'chs':'600x350',            'chd':dataJSON.chd,            'chl':dataJSON.chl        };        return output;    }}

Page 11: Lukasz Kokoszkiewicz. Allow to additionally filter main table content All of them can be added by simply in a settings file Right now we have 4 kinds.

SETTINGS DIFFERENCES

Because of implementation of new features there was some changes in a settings structure that includes: Slightly changed charts object Slightly changed expandedData object Added optional Application.filters object

All of the new settings can be found on a twiki documentation page.

Page 12: Lukasz Kokoszkiewicz. Allow to additionally filter main table content All of them can be added by simply in a settings file Right now we have 4 kinds.

PLEASE CHECK IT OUT

All of the new features are in beta stage so a little testing would be appreciatedFilters can be found here: http://pcadc01.cern.ch/prodopui/index.html

New charts example here: http://pcadc01.cern.ch/client/index.html

Page 13: Lukasz Kokoszkiewicz. Allow to additionally filter main table content All of them can be added by simply in a settings file Right now we have 4 kinds.

THANK YOU