Modify a Layout

The Components panel displays components in a tree-like hierarchy as they appear in the layout. You can modify a layout in the following ways:

If your app has more than one layout, click the layout tab of the layout you want to edit before continuing with any of the following procedures.

Add a Component

You can add a new component to your layout with the + Add Component button. A Toolbox panel will appear with three categories of components you can drag to your layout:

The following example demonstrates adding an Image component to the top of the app.

To add a component:

  1. While editing your app in Designer, in the Components panel, click + Add Component.

    If the + Add Component button is not visible, you are likely viewing your app's Services; click Components to view the components of your layout.

    The Toolbox panel appears.

  2. In the Toolbox panel, click the Other tab.

  3. In the Toolbox panel, drag beside the Image component to where you want to place it in the Components panel.

    The Image component is added to your layout.

Copy a Component

You can copy an existing component in your app. If the component contains other components, they will also be copied. A Copy From Current App panel will appear where you can drag components to your current layout in the Components panel.

The following example demonstrates copying the Panel component.

To copy a component:

  1. While editing your app in Designer, in the Components panel, click beside + Add Component and then click Copy from current app.

    If the + Add Component button is not visible, you are likely viewing your app's Services; click Components to view the components of your layout.

    The Copy From Current App panel appears.

  2. If your app contains more than one layout, in the Copy From Current App panel, click the layout tab that contains the component you want to copy.

  3. In the Copy From Current App panel, drag beside the Panel component to where you want to place it in the Components panel.

    The Panel component is copied to your layout.

Import a Component

You can import a component from another app or template into your app as a new component. If the component contains other components, they will also be imported. A window will appear where you can select the app or template that contains the component you want to import, and then a Get From panel will appear that allows you to drag components to your current layout in the Components panel.

If you want to replace the configuration of existing components, see Get Configuration.

The following example demonstrates importing the Panel component from the Web GIS - Default template.

To import a component:

  1. While editing your app in Designer, in the Components panel, click beside + Add Component and then click Import from another app.

    If the + Add Component button is not visible, you are likely viewing your app's Services; click Components to view the components of your layout.

    The Get From panel appears.

  2. If your app contains more than one layout, in the Get From panel, click the layout tab that contains the component you want to import.

  3. In the Get From panel, drag beside the Panel component to where you want to place it in the Components panel.

    The Panel component is imported to your layout.

Remove a Component

You can remove a component in two ways:

To remove a component from the root of the Components panel:

  1. While editing your app in Designer, in the Components panel, begin to drag the beside the component you want to remove downwards.

    The Remove Component section appears.

  2. Drag the beside the component you want to remove into the Remove Component section.

    If the component contains other components, you are asked to confirm whether you want to remove the component and all the components it contains, if so, click Yes, delete.

    The component is removed from your layout.

To remove a component while viewing its settings:

  1. While editing your app in Designer, in the Components panel, click the component you want to remove.

    The settings for that component appears.

  2. At the top right of the component panel, click .

    The component's configuration options menu appears.

  3. Click Remove Component.

    If the component contains other components, you are asked to confirm whether you want to remove the component and all the components it contains, if so, click Yes, delete.

    The component is removed from your layout.

Move a Component

You can move a component by dragging its drag handle to a different position.

The following procedure moves the Home component from the first tab to the third tab.

To move a component:

  1. While editing your app in Designer, in the Components panel, find the Tabs component.

    The Tabs component contains the Home component and several other components.

  2. Click and drag beside the Home component to the position below the Legend component.

    The live preview shows the Home component is moved from the first tab to the third tab.

  3. Click FileSave.