Customizable card view for widget

[rahuldhomane]

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

[rahuldhomane]

Hi @harikm007 ,

Would appreciate any help on this. Thanks

[harikm007 · Accepted solution]

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:

-Hari