cancel
Showing results for 
Search instead for 
Did you mean: 

Customizable card view for widget

rahuldhomane
9 - Travel Pro
9 - Travel Pro

Hi,

Can I manipulate card view for individual widgets and also easily make changes to set the card view type border only for certain sides of the (Top, Bottom, Left, Right)  widget?

Thanks

1 ACCEPTED SOLUTION

harikm007
12 - Data Integration
12 - Data Integration

Hi @rahuldhomane ,

Try this script to apply card style to one widget (and apply border on left side):

dashboard.on('widgetready',function(d) {
	
	widgetId = '62735c8aa77683002ea7d679'
	
	$(`widget[widgetid=${widgetId}]`).closest('.dashboard-layout-column').css('background-color', '#f0f0f0');
	$(`widget[widgetid=${widgetId}]`).closest('.dashboard-layout').css('background-color', '#f0f0f0');
	$(`widget[widgetid=${widgetId}]`).closest('.dashboard-layout-cell-horizontal-divider').remove();
	$(`widget[widgetid=${widgetId}]`).closest('.dashboard-layout-subcell-vertical').css('background-color', 'white').css('box-shadow', '4px 5px 12px #00000078')
	$(`widget[widgetid=${widgetId}]`).closest('.dashboard-layout-subcell-host').css('padding', '10');
	$(`widget[widgetid=${widgetId}]`).closest('.dashboard-layout').css('padding-right', '20px');
	$(`widget[widgetid=${widgetId}]`).closest('.dashboard-layout').css('padding-left', '20px');
	
	$(`widget[widgetid=${widgetId}]`).css('border-left', 'solid 15px blue')
	$(`widget[widgetid=${widgetId}]`).css('border-radius', '10px')
})

 

Result:

harikm007_0-1655830860069.png

-Hari

 

 

View solution in original post

2 REPLIES 2

rahuldhomane
9 - Travel Pro
9 - Travel Pro

Hi @harikm007 ,

Would appreciate any help on this. Thanks

 

harikm007
12 - Data Integration
12 - Data Integration

Hi @rahuldhomane ,

Try this script to apply card style to one widget (and apply border on left side):

dashboard.on('widgetready',function(d) {
	
	widgetId = '62735c8aa77683002ea7d679'
	
	$(`widget[widgetid=${widgetId}]`).closest('.dashboard-layout-column').css('background-color', '#f0f0f0');
	$(`widget[widgetid=${widgetId}]`).closest('.dashboard-layout').css('background-color', '#f0f0f0');
	$(`widget[widgetid=${widgetId}]`).closest('.dashboard-layout-cell-horizontal-divider').remove();
	$(`widget[widgetid=${widgetId}]`).closest('.dashboard-layout-subcell-vertical').css('background-color', 'white').css('box-shadow', '4px 5px 12px #00000078')
	$(`widget[widgetid=${widgetId}]`).closest('.dashboard-layout-subcell-host').css('padding', '10');
	$(`widget[widgetid=${widgetId}]`).closest('.dashboard-layout').css('padding-right', '20px');
	$(`widget[widgetid=${widgetId}]`).closest('.dashboard-layout').css('padding-left', '20px');
	
	$(`widget[widgetid=${widgetId}]`).css('border-left', 'solid 15px blue')
	$(`widget[widgetid=${widgetId}]`).css('border-radius', '10px')
})

 

Result:

harikm007_0-1655830860069.png

-Hari