Forum Discussion

abhinavt's avatar
abhinavt
Cloud Apps
05-28-2024
Solved

Merge borders for multiple widgets

Hello,  I'm trying to merge borders for multiple widgets. Lets say if I have two widgets I know I can customize each widget's border style using the below script ,but is there a way to only have 4 b...
Code-first Analytics
dashboards & reporting
  • TriAnthony's avatar
    TriAnthony
    05-30-2024

    Hi abhinavt,

    You can modify the top/bottom/left/right border configurations to achieve that.

    Here's the updated script for one border surrounding two widgets:

     

    dashboard.on('widgetready', function(sender, ev){

	widgetlist = ['5sd2c75601eafb7y02d4bce89', '61r4d1fb65c615646ee3t523']

	//widget border configurations
	$.each(widgetlist, function(index, value){
		
		widgetelement = $('[widgetid = "' + value + '"]', element)
		widgetelement.css('border-top', '10px solid #000')
		widgetelement.css('border-bottom', '10px solid #000')
		
		//left widget
		if(index == 0) {
			widgetelement.css('border-left', '10px solid #000')
			widgetelement.css('border-top-left-radius', '15px')
			widgetelement.css('border-bottom-left-radius', '15px')
		}

		//right widget
		else if(index == 1) {
			widgetelement.css('border-right', '10px solid #000')
			widgetelement.css('border-top-right-radius', '15px')
			widgetelement.css('border-bottom-right-radius', '15px')
		}

	})
})

     

TriAnthony's avatar
TriAnthony
Admin
05-30-2024

Hi abhinavt,

You can modify the top/bottom/left/right border configurations to achieve that.

Here's the updated script for one border surrounding two widgets:

 

dashboard.on('widgetready', function(sender, ev){

	widgetlist = ['5sd2c75601eafb7y02d4bce89', '61r4d1fb65c615646ee3t523']

	//widget border configurations
	$.each(widgetlist, function(index, value){
		
		widgetelement = $('[widgetid = "' + value + '"]', element)
		widgetelement.css('border-top', '10px solid #000')
		widgetelement.css('border-bottom', '10px solid #000')
		
		//left widget
		if(index == 0) {
			widgetelement.css('border-left', '10px solid #000')
			widgetelement.css('border-top-left-radius', '15px')
			widgetelement.css('border-bottom-left-radius', '15px')
		}

		//right widget
		else if(index == 1) {
			widgetelement.css('border-right', '10px solid #000')
			widgetelement.css('border-top-right-radius', '15px')
			widgetelement.css('border-bottom-right-radius', '15px')
		}

	})
})

 

dami1's avatar
dami1
Data Storage
12-09-2024

Hi TriAnthony , thanks for this recommendation. Do you know if there is a way to connect multiple widgets with a border if the Spacing Between Widgets is set to Medium in the Sisense look and feel settings? 

 

This recommendation doesn't work if the widgets are set to have medium spacing in the look and feel.

Thanks,

Dami

  • TriAnthony's avatar
    TriAnthony
    Admin
    12-12-2024

    Hi dami1, I'm sorry for the delay.

    You can override the widget styles (including spacing and corner radius) in each individual widget's settings (under the Design tab). In this case, you can set both Space Around and Corner Radius to none for the two widgets you are merging. See screenshot below for reference.

    This is how the two widgets look like after making those changes. You can see that even though there are spaces between the bottom three widgets, there isn't any for the two widgets at the top.