Layout

What is a layout?

A layout in ArcGIS Experience Builder defines how content, such as widgets, sections, or screen groups, is arranged in a layout container. Layout containers can include pages, views, windows, or even widgets themselves. Layouts determine the structure and visual organization of the content in your app.

Why use layouts?

Layouts allow you to create structured designs that enhance the user experience by providing clear navigation and interaction patterns. You use layouts to:

• Organize content visually making applications user-friendly.
• Support responsive design by accommodating for different size modes (Large, Medium, Small).
• Enable reuse and consistency by defining how widgets and other elements should be placed across multiple containers or screens.
• Allow widgets to serve as layout containers which enables users to drag and drop other widgets inside.

Key concepts

A layout in Experience Builder is a container that holds other content, such as widgets or sections. Here are some key concepts related to layouts:

• Framework elements, such as pages, views, and windows, have layouts. The layout of a page can be fixed, flow, or grid, but the layout of a view and window is always fixed.
• There are layout widgets (such as Row, Column, Grid, and Fixed) which provide more advanced layout options for creating structured layouts.
• Each layout has three size modes: Large, Medium, and Small. Medium and Small modes are optional - if they're not defined, the Large mode will be used.
• Each size mode layout contains layout items, which are used to hold content such as widgets, sections, and screen groups. Layout items have configurable style options.
• Developers can extend layouts in two ways:
  1. Create a layout widget by setting widgetType=LAYOUT in the manifest (like Row and Column widgets)
  2. Create a normal widget with layout capability by defining the layouts property in the manifest (like List and Card widgets) and using the LayoutEntry component

How to use layouts

Here are the general steps to use a layout in ArcGIS Experience Builder:

1. Add a layout

To add a layout to your experience, follow these steps:

1. Navigate to the Page panel or Window panel, and select the area where you want to add a layout.
2. Click Add layout and choose a layout type (such as Row, Column, Grid, or Fixed).
3. The layout will be added to your experience, ready for further configuration.

2. Configure layout settings

To configure the properties of the layout, consider the following settings:

1. Layout type and structure

   • Choose from available layout types (Row, Column, Grid, Fixed, etc.).
   • Adjust the number of sections, columns, or rows as needed.
   • Set alignment, spacing, and padding for the layout.

2. Responsive behavior

   • Enable or adjust responsive settings so your layout adapts to different screen sizes.
   • Preview and fine-tune the layout for desktop, tablet, and mobile views.

3. Add and arrange widgets

After configuring your layout, you can add widgets and arrange them as needed:

1. Add widgets

   • Drag and drop widgets into the layout sections.
   • Place widgets in the desired order and location within the layout.

2. Arrange and resize

   • Adjust the size and position of widgets within the layout.
   • Use alignment and distribution tools to organize widgets for optimal appearance and usability.

Widget types with layout capability

There are two types of widgets that can have layout capability:

1. Layout widgets (like the Fix Panel widget) - These are widgets specifically designed for layout purposes
2. Widgets with layout capability (like the Card widget) - These are regular widgets that include layout functionality

Code examples

For complete, working code examples of layout widgets and widgets with layout capability, see the ArcGIS Experience Builder SDK Resources repository.

Specific examples include:

• Dock layout widget: Complete example of a custom layout widget with drag, resize, and interactive features
• Widget with layout: Example of a regular widget that includes layout functionality

These examples provide:

• Working code: Tested implementations that follow current best practices
• Documentation: Detailed README files explaining each example
• Best practices: Recommended patterns for layout implementation