Switching from Single Page Layout to Page with tabs Layout

You can create a customized catalog with multiple tabs. There is a provision of adding up to 6 tabs in a catalog. The tabs can be arranged either horizontally or vertically.

To switch from single page layout to page with tabs/step layout:

  1. In the build area, from the top right corner of the screen, click (Switch Layout) icon.
  2. In the Switch Layout window that is displayed, click Multi Page.
  3. Click Yes in the Confirmation pop-up window.
    The Tab setup page will be displayed by default..

Multi Page with Tabs

  1. To flip between horizontal and vertical tabs, from the top right corner of the screen, click (Flip Right) icon.
  2. To add a tab, when tabs are horizontally oriented, click (Add) icon.
  3. To add a tab, when tabs are vertically oriented, click ADD.
  4. To modify the tab, hover your mouse over the tab and click (Edit) icon.
    A pop-up window is displayed right below the tab.

    The following options are available here:

    • Name - Allows you to change the name of the tab.
    • Info - Allows you to add a tool-tip for the tab.
    • Icons - Allows you to select an icon for the tab from the options displayed or upload a new icon.
  5. Click Save.
  6. To delete a tab, hover your mouse over the tab and click (Delete) icon.

Multi Page with Stepper

  1. To switch to the Stepper layout click the (Edit) icon on the right.
    The Layout pop-up is displayed with Properties tab.
  2. In the Select Layout Type section, click STEPPER and click Save.
    A panel with Step 1 is displayed on the left.
    Note: Once the STEPPER mode is save, you will not be able to move back to the Tab mode.
  3. Click the (Edit) icon on the panel.
    The Stepper pop-up is displayed with Properties tab for the stepper configurations.
  4. To change the 'Step 1' label, in the Properties > Stepper Configurations section, click the arrow icon.
    The details screen is displayed.
  5. Enter the desired name the Name field, and add an appropriate Description in the field given.
  6. To configure a hook for the footer action, in the Hook type section, click the dropdown to Import or Create New hook.
  7. In the Page Link section, the field provided, enter the page link from which components will be rendered within the stepper.
    Note: Pages that are used in the Page Link will not be available in the Build while adding widgets to any of the step pages.
  8. To add a new step click + Add and perform steps 4 to 7 to update the step properties.
    Note: The default Step 1 cannot be deleted. Only the added steps can be deleted. A delete option is provided for the added steps.
  9. To change the footer action labels, in the Footer action label change field, click the arrow to expand the details. Enter the new labels in the fields next to Previous, Next, and Submit.
    Note: The footer actions are only visible in the Preview and Publish modes.
  10. To add new footer action, in the Add New Footer Action field, click the arrow to expand the details. Enter the Action Name as desired. In the Redirection link section, choose Internal or External and enter the URL in the field provided.
    Note: Pages that are used in the Redirection Link will not be available in the Build while adding widgets to any of the step pages.
  11. Click Save.
    The stepper properties are saved successfully.
  12. To add widgets/reports to the steps pages, once you have configured the stepper properties, click Build in the grey left panel. Add the widgets and reports as desired.