Card View Customization

[intapiuser]

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');
})

[Wantti]

Hi there,

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

Would be great to receive some assistance 🙂

Thank you

[mguidone]

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. 

[rvickersevotix]

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

[DRay]

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.