Skip to Content
Technical Articles
Author's profile photo Fay Fei

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

Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Roopa Puranik
      Roopa Puranik

      Hi:

      I have 2 fixed panels top and bottom and the one in the middle is the Tab panel inside a flow panel. When I run the application to view the story there is a lot of space between the flow panel and the bottom fixed box. How do I set the bottom box relative to the flow panel? There is absolutely no documentation on this.

      Thank you