Card View Customization

Knowledge Base Docs

Widget & Dashboard Scripts

Before:

After:

Dashboard script for creating card view:

dashboard.on('widgetready',function(d) {
   $('.dashboard-layout-column').css('background-color', '#f0f0f0');
   $('.dashboard-layout').css('background-color', '#f0f0f0');
   $('.dashboard-layout-cell-horizontal-divider').remove();
   
   //For Edit Mode
   //$('.ui-resizable-handle.ui-resizable-e').css('width','0.5px'); //to make the vertical dividers invisible but still accessible - same row between widgets
   //$('.ui-resizable-handle.ui-resizable-s').css('height','0.5px'); //to make the vertical dividers invisible but still accessible- between rows    

   $('.dashboard-layout-subcell-vertical').css('background-color', 'white').css('box-shadow', '4px 5px 12px #00000078')

   $('.dashboard-layout-subcell-host').css('padding', '10');
   $('.dashboard-layout').css('padding-right', '20px');
   $('.dashboard-layout').css('padding-left', '20px');
});

Widget script for rounding corners:

widget.on('ready', ()=> {
   $(element).parent().css('border-radius', '20px');
   $(element).parent().parent().css('border-radius', '20px');
})

intapiuser

Posted 3 years ago·Last reply 1 year ago

5 comments

HQ_Dev_Prod

·1 year ago

Is there a way to exclude a widget from this? I am trying to exclude this from the heard title.

DRay

·1 year ago

Hi rvickersevotix ,

Yes, that is possible, if a widget script can add the functionality it is possible to nest the widget script within a dashboard script to run within every widget.
An example of running a widget script for every widget in a dashboard is:

dashboard.on('initialized', function (dash_ev,dash_se) {
dashboard.widgets.$$widgets.forEach((widget, index) => {
console.log(widget.title);
widget.on('ready', function (ev, se) {
console.log(ev.title, ' in event function');
})

})
})

dashboard.on('widgetinitialized', function (dash_se, dash_ev) {
dash_ev.widget.on('ready', function (ev, se) {
console.log(ev.title);
})
})

If it only applies to a certain widget type, a conditional can be used based on the widget.type value to only run on that widget type.

rvickersevotix

·1 year ago

Does anyone have the code to apply this corner radius to all widgets at once?

mguidone

·3 years ago

The script will work in any environment. This is javascript and runs in the browser. What's running on the server doesn't matter in this case.

Wantti

·3 years ago

Hi there,

how does the script look like to use it in the Linux environment?

Would be great to receive some assistance 🙂

Thank you