Skip to main content

Components in App Builder

Note

App Builder is a new and evolving product available with the Alteryx Analytics Cloud Platform. Functionality is subject to change without notice as we continue to refine and enhance your experience. We appreciate your understanding and welcome your feedback on Alteryx Community as we continue to improve App Builder!

Add content to the app using Component elements.

Add and Remove Component Elements

To add a component element to the canvas, drag and drop the element from the Building Blocks palette inside a container on the canvas.

To remove a component element, select the element to highlight it, and then select the trash icon.

Divider

Use Divider to add visual division between components of the app.

Configure the Element

  1. Select the Stroke Width. This determines the width of the divider.

  2. Select the Stroke Style:

    • Solid 

    • Dashed 

  3. Select the divider Color.

  4. To resize the divider on the canvas, select the corner of the divider element and drag to resize.

  5. Select Save.

Image

Use Image to display an image in the app.

Configure the Element

  1. Enter the Image URL that links to the image you want to display.

  2. Enter an Image Title.

  3. Select Save.

Spacer

Use Spacer to create space between other elements in the app.

Configure the Element

  1. Select the Color for the background of the spacer element. The default color is transparent.

  2. To resize the spacer on the canvas, select the corner of the spacer element and drag to resize.

  3. Select Save.

Color

Customize your Building Blocks with color options available in the configuration panel. To customize the colors of your components, select a Building Block, then select your color options in the Color dropdown. For more information on the color choices and how to change your theme colors, see Themes in App Builder.

Spacing

Set custom spacing for your Building Blocks in App Builder. Enter the number of pixels to add a margin to the Top, Bottom, Left, and Right sides of your element.

Conditional Logic

Add conditional logic for elements, which determines whether the element is displayed:

  1. Select a variable for OnlyDisplay If.

  2. Select an Operator.

  3. Select a Value, which is the value stored by the variable until changed by a Set Variables tool.