Building a Basic Responsive Portal

How to:

A responsive portal allows you to create layouts that resize dynamically to any width based on screen size, device, and orientation, thus eliminating the need to design for a specific device preference. This approach takes your content beyond the desktop and delivers a quality experience to users, on any display. The Portal Designer offers you a series of versatile presets, that make the task of creating a responsive portal a quick and straightforward process.

There are two methods for building a responsive portal: percentage-based and pixel-based. Both methods produce responsive behavior. The percentage-based responsive portal uses percentages to scale columns and panels to any width, while the pixel-based responsive portal relies on the developer to set a range within which the content will fluctuate in size. Follow the procedures below to see how these methods create a basic responsive portal in the Portal Designer.

A user must have the privileges of a developer or administrator to be able to build a basic responsive portal.

Procedure: How to Build a Basic Responsive Portal Using Percentages

  1. Sign in to WebFOCUS as a developer or an administrator.
  2. Create a new basic portal or open an existing basic portal.

    See Creating a Portal for more information on creating a new basic portal.

  3. In the Portal Designer, right-click the page canvas, and then click Page Layout. You can also click the Layout button on the Layout tab, in the Page & Banner group.

    The Choose a Layout menu opens.

  4. Click One Column.

    All responsive layouts are created in a one column page layout.

  5. Click inside the column that you just created. On the Properties panel, set the Top Container Padding to 5px and select the Same for All check box.
  6. On the Insert tab, in the Containers group, click Responsive.

    The Responsive container is inserted, taking up the full width of the page.

  7. On the Insert tab, in the Content group, click WebFOCUS Resources.
  8. Populate the responsive container with content from the folder of your choice, by dragging them to the container.

    When you drag items sequentially, you can choose the order in which they display, using the shaded placement indicator as a guide. When you drag items simultaneously, using the multiselect option (Ctrl key), they display in the order in which they are selected.

    Note: Your portal page can also contain a responsive filter panel that was created in WebFOCUS App Studio. For more information on how to create responsive filter panels that you can add to a BI Portal, see the App Studio technical content.

  9. Multi-select the panels to which you want to assign the Custom CSS Classes by holding the Ctrl key and clicking a title bar of each panel.

    For example, if you were going to create a responsive portal that contained four items in the first row, and two items in the second row, you would select the first four panels.

    Note: You can only multi-select panels by clicking its title bars. If the title bars are hidden, you cannot multi-select these panels.

  10. On the Properties tab of the Properties panel, click the Responsive Properties button.

    The Advanced Responsive Item Properties dialog box opens.

  11. In the Custom CSS Classes field, type bip-responsive-n, where n is the responsive folding behavior that you want to apply the content on your page.

    For example, bip-responsive-4-2-1 means that the content will display four items across on wide screens, two items across on medium screens, and one item across on narrow screens. If you use bip-responsive-3-2-1, the content will display three items across, then two items across, then one item across. If you use bip-responsive-2-1, content will display two items across, then one item across. If you choose bip-responsive-1, the item will fill the entire row.

    In the following image, we have updated the Custom CSS Classes field for a page that uses the 4-2-1 responsive folding behavior for the first four items on the page.

    Advanced Responsive Item Properties dialog box

    Note: When one of the built-in responsive classes is used in the Custom CSS Classes field, it sets the width of the panel as a percentage of the page width, based on media queries. The percentage width setting made in these built-in responsive classes overrides any width settings defined on the panel.

  12. Click OK to close the Advanced Responsive Properties dialog box.

    The first row of panels are now stretched evenly across the Responsive container.

  13. Multiselect the remaining panels by holding the Ctrl key and clicking each panel.
  14. On the Properties panel, click the Responsive Properties button.

    The Advanced Responsive Item Properties dialog box opens.

  15. In the Custom CSS Classes field, type bip-responsive-2-1, as shown in the following image. This will enable the remaining two panels to go from two across to one across on a smaller screen.
    Advanced Responsive Item Properties dialog box
  16. Set Minimum Height to 440px.
  17. Click OK to save the properties.

    The remaining panels now stretch across the Responsive container, in the second row.

    Note: You can create multiple layouts using this principle and varying the CSS classes to reflect the desired percentage.

  18. With the Responsive container selected, make the following changes:
    • On the Properties tab of the Properties panel, set Height to Dynamic.
    • On the Title tab of the Properties panel, select the Hide Title Bar check box.
    • On the Style tab of the ribbon, in the Border group, click Style, and then select None.

    Note: These changes render the Responsive container invisible on the page at runtime, and in Portal Designer. To edit the content in your Responsive container or access its properties, you can use the breadcrumb trail below the Property sheet to select it.

  19. Click the Save button and close the Portal Designer.
  20. Run your portal.
  21. Change the size of your browser window to observe the responsive behavior.

    All items rearrange perfectly to fill the portal page.

Procedure: How to Build a Basic Responsive Portal Using Pixels

  1. Sign in to WebFOCUS as a developer or an administrator.
  2. Create a new basic portal or open an existing basic portal.

    See Creating a Portal for more information on creating a new basic portal.

  3. In the Portal Designer, in the portal Properties panel, set the Width to Responsive, as shown in the following image.
    Panel Width setting

    Keep the default values for the Alignment and Page Height Mode options.

    The banner width changes in live preview to match the closest preset width.

  4. Right-click the page canvas, and then click Page Layout. You can also click the Layout button on the Layout tab, in the Page & Banner group.

    The Choose a Layout menu opens.

  5. Click One Column.

    All responsive layouts are created in a one column page layout.

  6. Click inside the column that you just created. On the Properties panel, set the Top Container Padding to 5px and select the Same for All check box.
  7. On the Insert tab, in the Containers group, click Responsive.

    The Responsive container is inserted, taking up the full width of the page.

  8. On the Insert tab, in the Content group, click WebFOCUS Resources.
  9. Populate the responsive container with six content items from the folder of your choice, by dragging them to the container.
  10. Multiselect the last two panels by holding the Ctrl key and click the Responsive Properties button.

    The Advanced Responsive Item Properties dialog box opens.

    Note: The range of minimum and maximum width and height is already filled by default for a small panel. You can change these values to adjust panel size and to create different layout. Keep in mind that in a responsive portal, setting fixed dimensions for items is not recommended. For this reason, you must only set a range between minimum and maximum width and height, defining the amplitude with which the item can vary in size.

  11. Set the responsive item properties, as follows:
    1. Set Minimum Width to 380px.
    2. Set Maximum Width to 710px.
    3. Set Minimum Height to 440px.

    An example of the completed configuration is displayed in the following image.

    Responsive Properties dialog box
  12. Keep the default values for all other properties, and click OK.

    The two bottom panels change size simultaneously. The layout now features two even lines of panels, four small and two large ones.

  13. With the Responsive container selected, make the following changes:
    • On the Properties tab of the Properties panel, click the Responsive Properties button, and then set Height to Dynamic.
    • On the Title tab of the Properties panel, select the Hide Title Bar check box.
    • On the Style tab of the ribbon, in the Border group, click Style, and then select None.

    Note: These changes render the Responsive container invisible on the page at runtime, and in Portal Designer. To edit the content in your Responsive container or access its properties, you can use the breadcrumb trail below the Property sheet to select it.

  14. Click the Save button and close the Portal Designer.

    Your new responsive portal now appears in the Repository.