Card View Customization
Before:
After:
Live demo in Facebook Industry Template
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');
})
-
Hi Toby,
If you'd like to ignore certain widgets you can use the following syntax:
This is the original method to create the card effect.
$('.dashboard-layout-subcell-host').css('padding', '10');
Instead, you can use the following script where the widget ids defined are not modified.
$('widget').not('[widgetid="5da0983d1d3cb956980f33fa"]').not('[widgetid="5da0983b1d3cb956980f33f8"]').parent().parent().css('padding', '10'); -
Artem Yevtushenko Is there any possibility to remove 'box-shadow' to a specific widget and by that you will get the illusion of two widgets combined into one. (or even remove it from one side only)
-
Hey Benjamin Nissim,
We got around it by using the .not() method in the dashboard script
$('widget').not('[widgetid="WidgetID"]').css('box-shadow', 'rgba(58, 67, 86, 0.1) 0px 1px 3px 1px');
Hope that works for you,
t
-
Toby De Lorenzo Thank u, it helps!
-
Hi Nicholas Arend,
BloX widgets requires special not trivial treatment with coding. A good chance that his is something that will require rapid attention as most odds that this would continue to change in upcoming releases.
We have develoepd a new plugin that will be launched to the marketplace soon that is called "Dashboard Styler" which lets you define many different styling options to your dashboard.
The plugin supports all widget types and also enables you to define "Themes" and easily apply different themes at a dashboard/folder/user group levels.
Here are few screenshots of the plugin. I'll followup later with more details after the plugin would be officialy out.
Feel free to reach out if you want to trial this plugin before hand
Cheers,
Ravid
Paldi Solutions - Sisense Gold Partner
-
Hi Everyone,
The plugin is officually launched to the marketplace:
We're getting great feedbacks, keep'm coming. On our roadmap for this year:
- Different Style per user group
- Integration with Sisense's native Look & Feel
- Control over in-widget styling like legends and axis accross all your charts
- Fixed size for Pie Charts along side some other enhancments
- Abilty to hide/show widget titles.
Feel free to reach out if you'de like to trial out the plugin or to get notified when new features are out.
Cheers,
Ravid
Please sign in to leave a comment.
Comments
17 comments