Concepts

An ArcGIS Web AppBuilder theme is a collection of user interface elements that define an app's look-and-feel, layout, app navigation, and on screen functional UI items such as scale bar, overview map, and so on. By developing a theme, you can create your application's interface, interactive user experience, and branding style.

The theme elements includes widget panels, style sheets, and layout definitions and theme widgets. One app can include more than one theme, but can only use one theme while running.

The following are the UI element definitions:

Theme elementDefinition

Panel

A Panel is a UI window that displays a widget's content. A Panel can be developed to have its own distinct behavior and style for a specific theme. For example, you can develop a Panel that can be dragged around the screen and have purple color style that matches your overall theme style.

With the theme Panel, widget developers can focus on developing a widget's function and content without worrying about how the widget displays, which further simplifies the widget development task.

A theme can contain multiple Panels.

Theme Widget

A Theme widget is no more than a regular Web AppBuilder widget in terms of coding. However, without this widget as part of the theme, the theme is not complete. For example, the Header Controller widget is part of the out-of-the-box theme, called Foldable theme. Header Controller is developed to navigate all the widgets configured into an app.

Creating the Theme widget is also a mechanism to ensure a theme can be shared as whole.

Style

A Style is a CSS file that you can define your CSS rules in. One theme can contain multiple styles.

Layout

A Layout theme is essentially an app configuration placing all the UI elements (widgets) on the screen. It also includes predefined position holders (placeholders) on the screen that can be configured with widgets in the GUI AppBuilder. A theme can have multiple layouts.