Theme elements

A ArcGIS Web AppBuilder theme is a collection of user interface (UI) items that define an app's look and feel, layout, and navigation, as well as on-screen functional UI items such as the scale bar, overview map, and so on. By creating a theme, you can configure your app's interface, interactive user experience, and branding style.

Theme elements include widget panels, style sheets, layout definitions, and theme widgets. One app can include more than one theme, but it 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. You can configure a panel to have its own distinct behavior and style for a specific theme. For example, you can configure a panel that can be dragged around the screen and has a purple color style that matches your overall theme style.

With the Panel them element, you can focus on developing a widget's function and content without worrying about how the widget appears, which simplifies the widget development task.

A theme can contain multiple panels.

Theme Widget

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

Using the Theme Widget element ensures the entire theme can be shared.

Style

A style is a CSS file where you can define your CSS rules. One theme can contain multiple styles.

Layout

The Layout theme element is essentially an app configuration that places 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.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.