Panel holder display types

The following display types are available for panels in a panel holder.

Tabbed

In a tabbed display, only one panel in the container is visible at a time. To view each panel, users click its tab or press the Tab key.

Only the horizontal orientation is available for tabbed panel holders. Tabbed panel holders do not have Border Thickness or Border Color properties.

Related topic

Panel-layout-styles

Tabbed panel holder 

pages-tabbed.gif

If a tabbed panel holder has more tabs than fit in one row, Developer Studio hides the remaining tabs. However, you can scroll the tabs to see them. 

In browsers, multiple rows of tabs are not supported. Instead, if the number of tabs exceeds the width of the panel holder, left and right arrows appear. Users click the arrows to scroll to the tabs that extend beyond the width of the holder. The focus remains on the current panel when scrolling occurs.

Best practice
A performance impact might occur if the tabbed panel contains a table that is populated with large amount of data. We recommend using collapsible, or Accordion style panel.

Collapsible (stacked)

In a collapsible display, multiple panels in a panel holder can be viewed at the same time, either horizontally or vertically.

By default, if a collapsible panel holder contains space that is not allocated to a panel, the extra space is added to the bottom or right-most expanded panel in the holder. This prevents white space from appearing in the holder itself. In addition, you can control the allocation of extra space by assigning priorities to panels and by using the Fit to Content property. For more information, see Avoiding-scroll-bars-in-panels).

At design time, collapsible panels appear to have a fixed size. But at runtime, as various panels in the holder are expanded and collapsed by users or hidden and unhidden by workflow, the other panels in the holder shrink and expand to accommodate the changing space in the holder. This can create visual differences between panels at design time and runtime.

Collapsible (stacked) panel holder

panels-collapsible.gif

Splitter

In a splitter display, multiple panels in a container can be viewed at the same time, either vertically or horizontally, and can be dynamically resized by dragging a splitter control on either side.

By default, if a splitter panel holder has two panels, the first panel gets all the extra space. (For information about allocating space among panels, see Avoiding-scroll-bars-in-panels.)

By default, the splitter state of the splitter panel holder is Visible, which enables you to see the splitter and drag it to resize the panels.

Splitter panel holder with splitter state set to Visible

panels-splitter-visible.gif

To create a splitter that can be dragged to resize the panels but is not visible, set the splitter state to Invisible. To create a splitter that cannot be dragged and is not visible, set the state to Disabled.

Splitter panel holder with splitter state set to Invisible

panels-splitter-hidden.gif

Accordion

In an accordion display, the content of only one panel in the panel holder visible at a time. Only the headers for the remaining panels are visible. Headers cannot be hidden in accordion displays.

At runtime, when you click a panel header, that panel is expanded to display its contents. If another panel was open, it is automatically collapsed and only its header is visible.

Accordion panel holder

panels-accordion.gif

Flow panel holder for Progressive Web Applications

A Flow panel holder is available when you enable a Progressive view for your form. For more information, see Progressive-web-application-screens.

The Flow panel holder supports the properties required to enable a progressive view. Use a Flow Panel holder for aligning fields on a form. You can also group the fields to ensure correct alignment of fields on a form. This panel does not have a panel header, and supports Container panel holder (Default), Sub Panel holder, and Section Panel holder types.

The following video (4:52) demonstrates creating Fixed panels in Developer Studio when you enable progressive views for a form:

icon-play.png https://youtu.be/m33BWG-mEoI

The following video (13:03) demonstrates creating complex layouts with flow panels:

icon-play.png https://youtu.be/TnwUS2RF28Q

Panel arrangement sequence

The panels are arranged in the following sequence or hierarchy:
Flow Panel holder > Container Panel Holder > Container Panel> Sub Panel Holder > Sub Panel > Section Panel Holder > Section Panel > Section Panel Holder > Section Panel > fields

Flow-panel.png

  • A progressive view can hold only a Container type Flow panel holder and a Fixed panel holder. 
  • By default, a Flow panel holder has one panel as a child panel.
  • You can change the read-only property type of any panel only when you change the property type of Flow panel holder.

Tip

When you add Flow Panel Holder to the Progressive View from the palette in Developer Studio, the flow panel holder is represented by a panel holder in the Outline pane.

In the following example figure, the flow panel holder is represented by Panel Holder_c enclosing a panel named Panel_c:

image-2024-6-19_14-41-5.png

Container Flow panel holder

  • By default, a Container type Flow panel is added to a Flow panel holder.
  • You can delete a Container Flow panel only if you remove all progressive views.
  • A Container Flow panel holder can have one or more Sub panels. 

Section Flow panel holder

  • You can add a Section Flow panel holder only under a Sub panel or Section panel. 
  • A Section panel can either have a Section type Flow panel holder or non-panel fields.
  • The Section Flow panel holder added by framework contains only Section panel as children. 

Sub panel holder

The Sub panel holder behaves as a Section panel on the desktop client. However, it is displayed as a tab on a mobile client.

  • You can add a sub panel holder only under the container panel.
  • A sub panel holder can have one or more sub panels.

For more information about developing PWA, see Developing-Progressive-Web-Applications.