Flow Panel- Enable your Analytics Applications to auto-fit to all screens (Mobile, iPad etc.)

Analytics Designer brings customers more possibilities of building customized and advanced dashboards. In the mean time, a lot of effort has been spent on adapting the layout to different screen sizes. In this blogs, we will introduce a convenient and powerful capability in creating responsive layout without any codes.

Flow panel is a container widget which allows elements automatically flow to the proper position. For example if the screen is too small to fit two widgets in a same row, then the widget on the right will move to a new row automatically.  On the other hand, users still have the flexibility to keep some elements fixed in a certain positions in some certain cases, like they are header-content, lift-right structures that need to be fixed.

Five Steps to build Flow Panel and make it responsive in other screens

Step 1 Add a Flow Panel in Analytics Designer

Step 2 Set the size and position of the flow panel in Application

Step 3 Define the responsive rule of flow panel and adding break point in order to set the behave of widgets in different screen sizes.

Step 4 add other content and set their relations in Flow panel. Also add content out of flow panel (which will be in fixed area)

Step 5 open the analytics application on mobile and review the content. You could see the fixed area is on the top as displayed and content in flow panel has been listed as responsive layout.

Finally let’s review advantages of using Flow Panel.

1. Enable responsive layout in Analytics Designer. In the mean time, keep some elements fixed in a certain positions in some certain cases.
2. Support mixed usage of Flow Panel and existing Canvas Layout Panel
3. Coding free via new break point concept to fit for different screens
4. Design time preview