Forum Discussion

rahuldhomane's avatar
rahuldhomane
ETL
06-16-2022
Solved

Customizable card view for widget

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

Dashboards & Reporting
  • harikm007's avatar
    harikm007
    06-21-2022

    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

     

     

2 Replies

Replies have been turned off for this discussion
    • harikm007's avatar
      harikm007
      Data Warehouse
      06-21-2022

      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