Card View Customization

July 22, 2019 14:26

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

Comments

17 comments

Ido Darnell July 22, 2019 14:51

VERY COOL! Thanks!

0

Comment actions Permalink
Ramon Lopez July 22, 2019 15:45

2

Comment actions Permalink
Nathan Giusti July 22, 2019 20:13

Super slick

0

Comment actions Permalink
Tripti Jaiswal July 23, 2019 10:26

Nice,will be very usefull.Thanks

0

Comment actions Permalink
Michael Becker July 25, 2019 13:49

Hi Artem,

great stuff but it unfortunately seems to brake e-mail reports. Would you have a chance to see if that can be somehow mitigated as this is great modification? Thanks!

Regards,

Michał

0

Comment actions Permalink
Artem Yevtushenko July 26, 2019 03:22

Hey Michael,

That is certainly a current limitation because this is a post-render CSS script, and these are not currently captured by the PDF export manager. Once the updated version of the PDF export manager is released, I will explore this functionality.

Cheers,

Artem

0

Comment actions Permalink
Toby De Lorenzo October 10, 2019 22:16 (Edited October 10, 2019 22:17)

Hey Artem,

Is it possible to ignore certain widgets i.e a header that I want to stay full width?

Thanks,

Toby

0

Comment actions Permalink
Artem Yevtushenko October 11, 2019 20:32

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

1

Comment actions Permalink
Toby De Lorenzo October 18, 2019 05:25

Thanks so much Artem.

0

Comment actions Permalink
Elvin Alvarillo February 18, 2020 14:00

This is amazing!

0

Comment actions Permalink
Marc Saunders April 17, 2020 12:44

this is a great plugin that makes pages look so much better, but can you enable it for the dashboard or whole site instead for each widget?

0

Comment actions Permalink
Benjamin Nissim June 17, 2020 12:09 (Edited June 18, 2020 09:27)

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)

1

Comment actions Permalink
Toby De Lorenzo June 18, 2020 01:54

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

0

Comment actions Permalink
Benjamin Nissim June 23, 2020 08:10

Toby De Lorenzo Thank u, it helps!

0

Comment actions Permalink
Nicholas Arend October 29, 2020 04:35

Is there a solution to implementing this for Sisense Blox? My widget has the bottom corners rounded, but the title part is not the length of the of the rest of the widget.

0

Comment actions Permalink
Ravid Paldi November 08, 2020 12:11

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

ravid@paldi.solutions

Paldi Solutions - Sisense Gold Partner

1

Comment actions Permalink
Ravid Paldi December 15, 2020 10:53

Hi Everyone,

The plugin is officually launched to the marketplace:

Dashboard Styler

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

ravid@paldi.solutions

1

Comment actions Permalink

Please sign in to leave a comment.

Comments

Didn't find what you were looking for?