Is there a way to hide blocks on a dashboard?

Help
1

Hello,

I have a dashboard, and I want to hide some block depending on the value of some tags, is there some way to do that ?

2

We do not have a method for hiding blocks depending on some condition, though this has been requested by other users. I will add your +1 to the request.

If you are trying to hide a block within an Experience Dashboard Page, you may be able to hide the block with CSS. But doing so will leave a gap within the middle of the dashboard; the other blocks will not collapse to fill the empty space.

3

@Dylan_Schuster and if we change the translation of the block that is below ? With some javascript ? Thats is wrong ?

4

Hi, Dylan!

Regarding what you have said:
“If you are trying to hide a block within an Experience Dashboard Page, you may be able to hide the block with CSS.”
We successfully develop a function to hide specific blocks of an Experience Dashboard Page and to automatically move the other blocks to fill the gap left by the hidden blocks.
This function is triggered when the page is first loaded and is working fine, but we are having some trouble with the screen resize function/page zoom.
It appears that you are using React Resizable and when the user resizes the screen it ‘reloads’ the positioning of the blocks and will make the gap of the hidden blocks appear again.

If I only could detect this ‘react resize trigger’, I could rerun my hidding function and that would solve the issue. However, that only function that I found to detect screen resize is this one:
window.addEventListener(‘resize’, function(event) {}, true) or in jQuery:
window.onresize = function(event) {}

And this function is not enough, because that are some screen resize events that will not trigger the react resize and will not reload the positioning of the blocks (a vertical screen resize is an example that will not trigger react resize).

Is there any way to specifically detect this react resize event?

Thanks in advance for your help.

5

The way I would approach this is to store the window’s width and height in local variables and, in the resize event, you could compare the current width / height to the previously stored values. Something like the following (this is untested …)

let width = window.innerWidth;
let height = window.innerHeight;
window.addEventListener('resize', () => {
  if (window.innerWidth !== width) {
    // width changed!
    // take action here
    width = window.innerWidth; // set the local variable to the new width
  }
  if (window.innerHeight !== height) {
    // height changed!
    // take action here
    height = window.innerHeight; // set the local variable to the new height
  }
});

You should probably also throttle this event as it will fire quickly and frequently as the user resizes their browser.

I also want to add that what we’re discussing here is not officially supported by Losant. In other words, I cannot guarantee that a future product update won’t break the function you wrote to hide and reconfigure your block layouts.

Side note: The dashboard layouts are actually powered by react-grid-layout, which has react-resizable as a dependency. (The same developer wrote both modules.) You may want to dig into those modules to see if they emit any events that would be useful to you.

6

Hi, @Dylan_Schuster. Thanks for your reply and suggestions!

After further investigation of the code, I was able to make the ‘resize screen’ event do not affect my block’s repositioning and then, monitoring this event is not necessary anymore, because I don’t need to rerun my function. But, in the meantime I indeed implemented your suggestion and it also worked, besides the fact that it was still hard to detect when the ‘react resizing’ ends.

Regarding the support of this, I understand that future updates could break this feature, but it was done in a way that, if it stops working, it will only display the dashboard as it should originally be displayed (without any blocks hidden). So, it wouldn’t be a problem.

The one thing that I would like to confirm with you is that future product updates will never automatically change a dashboard ID (e.g. 6123a456b789c123d) or dashboard blocks IDs (e.g. V12A34b56c). Is that true?

Thanks for your attention.

7

I can confidently guarantee that a dashboard ID will never change, as each is a unique ObjectId applied when storing the dashboard configuration in our database.

It is possible - though unlikely - for a dashboard block’s ID to change, however. There is no way to change the block ID in the user interface at this time, and there is no code in place that would ever change the block ID through some other user interaction, but we have no enforcement in place to keep an ID the same after a block is created. For example, it is possible to change a block’s ID using Losant’s API directly - specifically the Dashboard: Patch endpoint.

1 Like