Skip to main content

​
Intro

This article covers how to create and customize app components in App Studio, allowing you to visualize complex DataSets in configurable templates, such as galleries, lists, and banners. See App Studio | Overview to learn how to create standard App Studio pages and other App Studio content.

​
Required Grants

To access App Components, the following grants must be enabled for your role:
  • **Edit App (App Studio)
—** Allows you to edit App Studio pages within App Studio.
  • **Edit Cards
—** Allows you to edit Cards in Domo. Learn more about grants .

​
Access App Components

Access app components in the left navigation in the App Studio app editor. Learn how to edit an app .

​
Create a New App Component

To create a new app component, drag and drop a component template onto your App Studio page. Then, power that component from a DataSet and configure widgets within the component.

​
Select and Place a Component Template

  1. Inside the App Studio app editor, select the Components icon from the left navigation to open the Components menu.
You can choose from Galleries, Lists, Grids, Filter Lists, Details, and Banners. Each component type offers numerous templates, each with a distinct layout and a range of functionality options. 2. Drag and drop your desired component type onto your App Studio page to choose a template and start building.
  1. Choose a template.
The Edit App Component modal opens.
  1. Save your app component.

​
Power a Component from a DataSet

  1. After you have placed a component into an app page, select Power from DataSet to link to your desired DataSet.
The component automatically populates with the first six columns of the DataSet.

​
Configure Widgets and Layout Based on Your DataSet Columns

Use widgets to display specific information from your DataSet columns inside the layout of the components themselves. Follow these instructions to add widgets to your app components layout:
  1. Inside the App Studio app editor, select the desired app component to open the App Component configuration panel on the right.
  1. In the configuration panel, navigate to Styles (tab) > Content > Edit App Component to open the component edit modal—or select the pop-up next to the component in the layout.
  2. Select your desired widget under the Add layouts and widgets tab in the left navigation.
  1. Drag your desired widget onto one of the app components within the layout.
The widget applies to all components within the layout. 5. Save your widget layout. Follow these instructions to configure widgets based on your DataSet columns:
  1. In the Edit App Component modal, select the desired widget within the app component layout to open the configuration panel on the right.
  2. In the Settings (tab), configure the widget’s DataSet columns.
Additionally, configure widget behavior and formatting, image display (fit, fill), set dimensions (fixed, flex), and add styles (rounded edges, spacing) to control the aesthetic appeal of your components as representations of your data. 3. Save your configuration.
Note: If a widget is set to fixed , you define its pixel height and width. If it is set to flex , the widget automatically takes a percentage of the full height or width of the app component.

​
Change the DataSet Powering Your Component

To change the DataSet powering your component, follow these steps:
  1. Navigate to the Edit App Component modal.
  2. Select the Component configuration icon.
  3. Scroll to the bottom of your component configuration settings and select Change DataSet .
  1. Save your new DataSet selection.

​
Style Your App Component

You can customize the global style and appearance of your app component, including its border color, background color, dropdown shadows, and font styles.

​
Select a Theme for Your App Component

You can select a theme for your app component by following these steps:
  1. Navigate to the App Studio app editor.
  2. Select your app component to open the App Component editor panel on the right.
  3. Go to Style > Choose from App theme (dropdown).
  1. Choose your style.
  2. Save your style.

​
Customize Your App Component

Through the styling panel, you can customize the appearance of your app component’s container and item styles, as well as modify any buttons, banners, or texts. Follow these steps to customize your app component:
  1. Navigate to Edit App Component modal > Component configuration (tab).
  2. Edit your app component’s content, appearance, spacing, and DataSet—or modify its buttons, banners, and text type.
  1. Save your app component’s new appearance settings.

​
Leverage Sort, Filter, and Search in Your App Component

You can leverage sorting, filters, and search capabilities in your app component to drill down on specific DataSet columns you want visualized. You can use sorting, filtering, and searching as you do throughout App Studio .

​
Enable Search and Sort

  1. Navigate to the Edit App Component modal.
  2. Select the Component configuration icon.
  3. In the Component configuration panel > Content section, toggle Show search and Show sort .
  1. Save the enabled search and sort.

​
Add a Sort or Filter

  1. Navigate to the Edit App Component modal.
  2. Select the Filters icon to open your filters and sort options.
  3. In the Add Sort section, use the dropdown to select which DataSet columns you want to sort by.
  1. Select Add Filter to choose a DataSet column to filter your app component by.
  1. Save your sort and filter options.
Tip:Edit the style of a button by changing the border/fill at the style level of the component.

​
Enable Actions in App Components

Component-level and widget-level actions—such as opening content or initiating a workflow—make your app components interactive. See Add Actions and Elements to learn more about actions in App Studio.
Tip: Use component-level actions for broad, consistent interactions and widget-level actions for specific, targeted behavior.

​
Set Component-Level Actions

Actions at the component level define actions that apply to the entire component. This is useful when you want consistent behavior regardless of which part of the component is clicked. To set component-level actions, follow these steps:
  1. Select the component in the app editor.
  2. Go to the App Component right configuration panel > Actions (tab) to select the interaction type.
  1. Configure the desired behavior:
    1. View details on a specific page
    2. Pass filters by column values
    3. Open external URLs with optional prefix/suffix
    4. Interact as a page-level filter

​
Set Widget-Level Actions

For more granular control, you can also configure actions on individual widgets within a component. To set widget-level actions, follow these steps:
  1. Add a Button or Hyperlink widget to your component.
  2. Use the widget’s Action Settings to configure specific behavior:
    1. Drill down to a specific page
    2. Pass filters by column values
    3. Open external URLs with optional prefix/suffix
    4. Interact as a page-level filter
You can also configure hover and select options for your app component.

​
Other Info

Widgets and layout are responsive and fully customizable. App Components support conditional logic for visual emphasis and sorting behavior.
Image Rendering in App Components
  • Images used within App Components are subject to Cross-Origin Resource Sharing (CORS) restrictions, which are browser-level security settings. This means that the server hosting the image must be configured to allow access from domo.com domains.
  • To use images within App Components, you have two options:
  1. Use images that permit any origin to request them (though this is not guaranteed and must be tested first)
  2. Configure your own images to be accessible by domo.com domains
  • Alternatively, you can upload images directly from domo.com and access them from there.

​
FAQ

No, each App Component is powered by a single DataSet. To use multiple DataSets, consider using multiple components on the same page.
No, App Components are designed for use in an interactive dashboard only.
Although both DataSet PDP policies and page-level App Studio filters apply to app components,you can’t directly control the visibility of certain fields based on user roles.Learn how to apply filters to an App Studio page .
Yes, Personalized Data Permissions (PDP) policies from the DataSet are applied to the App Components.To learn how to apply a PDP policy to a DataSet, see Personalized Data Permissions (PDP) .