Theme

The Theme tab in Web AppBuilder provides out-of-the-box themes. A theme is a template framework representing the look and feel of an app. Content in a theme includes a collection of panels, styles, and layouts, and a set of preconfigured theme widgets. An app can include more than one theme, but it can only use one theme while running.

  • Theme gallery—You can choose from one of the following themes:

    NameDescription
    Billboard Theme

    Billboard Theme*

    For apps with simple tasks. It has the most layouts of all the themes and does not display the logo, links, and widget controller. All the widgets in the theme are on-screen widgets.

    Box Theme

    Box Theme

    Focuses on the widgets in the widget controller. By default, all on-screen widgets are turned off. There are no placeholders for widgets and no logo or links display. It is for apps that require a clean look on the map.

    Dart Theme

    Dart Theme

    Widgets in the widget controller display as placeholder widgets. You can have multiple widgets open and move them around. By default, all on-screen widgets are turned off. Similar to Box Theme, there are no placeholders for widgets and no logo or links display.

    Dashboard Theme

    Dashboard Theme*

    All the widgets in the panel open simultaneously when the app starts. It is designed to visualize widgets and their communication directly. You can modify the predefined layout by adding or removing grids, or resizing the grids in the panel. By default, most on-screen widgets are turned off except the Home, Zoom Slider, and Full Screen widgets. Optionally, you can turn on the Header widget to display the logo, the app name, and links.

    Foldable Theme

    Foldable Theme*

    The first theme created by Web AppBuilder, it supports all widget types and can be used for apps with complicated tasks.

    Jewelry Box Theme

    Jewelry Box Theme*

    Evolved from Foldable Theme with a focused widget on the left of the app. It is for apps with a workflow task.

    Launchpad Theme

    Launchpad Theme*

    For users who prefer the Apple Mac style. It allows you to open multiple widgets, and move, resize, and minimize them.

    Plateau Theme

    Plateau Theme*

    Can be used to create a modern and basic app with flat toolbars and widget containers. This theme is not available when you build 3D apps.

    Pocket Theme

    Pocket Theme*

    For apps that will be embedded in websites, story maps, or other locations with surrounding context. Only one widget is supported in a panel that can be positioned on the left or the right. This theme is not available when you build 3D apps.

    Tab Theme

    Tab Theme*

    As with Foldable Theme, it supports all widget types and can be used for apps with complicated tasks.

    *These themes support web content accessibility for end users. For more information and any associated limitations, see Accessibility support.

  • Style section—The available styles vary depending on the theme selected. Most themes have seven predefined colors from which to choose, except Launchpad Theme and Dashboard Theme. If your organization has defined the shared theme with a header color, it will be the default color when an app is created.

    Style section of Theme tab

    You can also choose your own color by clicking the last color in the color picker.

    Color picker

  • Layout section—A layout represents a preset placement of user interface items.

    Layout section of Theme tab

    • Only Dashboard Theme allows you to modify and generate your own layout.
    • When you build 2D apps, the available layouts vary depending on the theme selected. In addition, there are two styles of layout. One is for desktop and one is for mobile devices. When either the height or width of a screen display is less than 600 pixels, the mobile layout applies.
    • When you build 3D apps, each theme has two layouts for desktop only.
    Caution:

    Currently, layouts from Dashboard Theme do not support right-to-left languages.