Maximize and Hide components

[Former Member]

Hello guys,

I'm developing an interactive Dashboard with Design Studio 1.4 and I'm facing issues when triying to implement the maximize and minimize functions.

I have a 3 row grid in the center of my dashboard with the height and wide with auto, so it gets addapted to any screen resolution. Every row inside the grid has a component, like a chart or a crosstab:

The idea, for example, when clicking the first maximizing button, is to make the chart expand to occupy all the grid space and make to dissapear the 2 crosstabs.

I have been researching but I couldn't find any method to change the grid proportions with the script.

On the other hand, I have tried to change the margins to negative values like setBottomMargin(-300), but although I archieve a nice effect, I cannot interact with the portion of the chart that it is over the crosstabs and I think it is because, in the outline of the Design Studio, the crosstabs are in the GRID_2 and GRID_3, whose layers are higher than the GRID_1.

Anyone have experience with this?

Thank you in advance

[Former Member · Accepted solution]

Hi Alex

I hope the following logic helps you to solve the requirement

Use four main Gridlayout -

1.Min_Grid ( contains 3 rows - each contains a maximise button)

2.Max_Grid_1 ( maximize view for first row for Min_Grid)

3.Max_Grid_2 ( maximize view for second row for Min_Grid)

4.Max_Grid_3 ( maximize view for third row for Min_Grid)

make the following visibility changes -

on click of Maximize option of component 1

Min_Grid ->false

Max_Grid_1->true

Max_Grid_2->false

Max_Grid_3->false

Similarly change the necessary for Maximize option of component 2 and 3.

On click of minimize of Max_Grid_1,Max_Grid_2,Max_Grid_2

Min_Grid ->true

Max_Grid_1->false

Max_Grid_2->false

Max_Grid_3->false

Thanks

Karthik Swaminathan

[Former Member · Accepted solution]

Hello Karthik,

I've thought something similar but with panels, but I've discarted it as I have to duplicate the chart and the 2 tables and duplicate all the scripting with the measure swapings and filters that afect all of them so the performance falls drastically.

But thank you for your help.

[Former Member · Accepted solution]

Hi Alex,

You are right that approach has an effect on the performance.

You can try this idea too

Use three Grids- Grid1, Grid2,Grid3 with height and width as auto and the following Margins

Grid 1-

Top Margin 0

Left &Right->0

Botton ->320 (approx)

Grid 2-

Top Margin->150(approx)

Left &Right->0

Botton ->150 (approx)

Grid 2-

Top Margin->320(approx)

Left &Right->0

Botton ->0 (approx)

In the maximise and minimise buttons control the visibility and set the margins accordingly in Positive Margin

Setting negative margins may overlap and stop interactivity with the components.

Foe eg-

On click of maximie of component1

Grid 1- set the following in script

Top Margin 0

Left &Right->0

Botton ->0

Grid 2 and Grid 3 visibility false.

On click of minimie restore the default margins set in the begining.

Thanks

Karthik Swaminathan

[Karol-K · Accepted solution]

Hi Maxim,

the only solution (which I could find today) is by use of the "Client Information" component from SDK Package and the app which you can find here applications/SCN_MAXIMIZE

basically, due to the grid layout, you cannot visualize components in a bigger size than the cell, and you cannot change also the cell definition in scripts.

What I have done, I read the browser window size and calculate absolute sizes for the parts:

var height = CLIENTINFORMATION_1.getWindowHeight() - CLIENTINFORMATION_1.getTopMargin();

var dividedSize = height / 3;

PANEL_1.setTopMargin(CLIENTINFORMATION_1.getTopMargin());
PANEL_2.setTopMargin(CLIENTINFORMATION_1.getTopMargin() + (dividedSize*1));
PANEL_3.setTopMargin(CLIENTINFORMATION_1.getTopMargin() + (dividedSize*2));

PANEL_1.setHeight(dividedSize);
PANEL_2.setHeight(dividedSize);
PANEL_3.setHeight(dividedSize);

PANEL_1.setVisible(true);
PANEL_2.setVisible(true);
PANEL_3.setVisible(true);

GLOBAL_MAXIMIZED = false;

and maximize function like this one:

BUTTON_RESET.onClick();

PANEL_1.setHeight(CLIENTINFORMATION_1.getOwnHeight());
PANEL_1.setTopMargin(CLIENTINFORMATION_1.getTopMargin());

PANEL_2.setVisible(false);
PANEL_3.setVisible(false);

GLOBAL_MAXIMIZED = true;

do not know if this makes you happy, as this solution requires SDK extension.

Help: Client Information - SCN Design Studio Community

Community SDK:

Karol

[Former Member · Accepted solution]

Hello Karol,

I've been testing your proposal with the SDK component but when I execute the Dashboard I have this error:

Do you know what could be happening? I've more or less reproduced the functionality of your Maximize application, so I don't know where, exactly, is the problem

Thank you very much

[Former Member · Accepted solution]

Moreover, if I execute the Dashboard on the BI Platform, I get this error:

I think it has something to do with the relationship between the SDK component and my BI Platform.

[Karol-K · Accepted solution]

for this, you have to set the size of the component in pixels (remove the "auto" value on height).

[Karol-K · Accepted solution]

and here, you need to apply the sdk components on the BI platform, there is a menu point -> install SDK Components, you need to have permissions for this and the platform must be restarted, more in the Admin guide:

http://help.sap.com/boad 

[Former Member · Accepted solution]

Hello Karol,

Thank you very much for your help!