Create custom hybrid app tiles with embedded forms

Table of Contents

Overview

Create a custom hybrid app tile

Tile builder enhancements & Form blocks

Form behavior settings

Loop containers and embedded forms

API response handling & tile preview

Single-click action (No input fields)

Publishing hybrid tiles

Dynamic and static data binding

Dynamic data formatting

Overview

Custom hybrid app tiles enhance the functionality of standard display tiles by enabling direct user interaction through integrated form components. This also extends the capabilities of existing Tile builder and Bring Your Own Integration (BYOI) framework. These tiles show data clearly, like a chart or list, and also let users do things like approve requests, change statuses, or update records in other apps or systems, all without leaving the tile.

This capability allows app managers to design a combination of both display-based and form-based tiles that enable employees to submit information directly from the dashboard to any third-party application.

Create a custom hybrid app tile

Only users with Manage access will see the options below.

To create a custom hybrid app tile, make sure you're signed in with app manager access. Only app managers can set up and publish these tiles using the tile builder.

Here’s how to get started:

1. From the left menu, go to Manage > Custom app tiles.
2. Click Create custom app tile.
3. A setup window will open. Fill in the required details:
   • Tile name: Give your tile a clear name, such as "Submit IT Ticket".
   • Tile description: Write a short description, like "Create Zendesk ticket".
   • Tile type: Choose one of the available tile types. To create a form, select Form from the dropdown options.
4. In the API section:
   • Choose the app you want to connect. It should appear in the dropdown menu.
   • If it’s not there, click Add custom app to connect it through the Integrations menu.
5. Once the basic setup is done, you can either Save the tile as a draft or click Next to start building it using the tile builder.
6. Before designing the tile, you need to set up the API action. Click Configure API action.

• • From the list, pick the action you want the tile to perform. For example, it could submit a request or create a task.
  • Enter the necessary details such as:
    • Description
    • Priority
    • Subject

Note:

For each value the tile author has to select from 'Add here' and 'Get from user'. Add here value has to be entered by the tile author but it won't be visible to the end user in tile when published to the dashboards. While the Get from user value will be entered by the end user on the dashboard.

• If the action you need isn’t listed, you can create a new one by clicking Create API Action and setting it up based on the app you’re connecting.

From the Create custom app tile section, input the same required values as in the display tiles:

• Tile name: Name of the tile.
• Tile description: Describe the intent (e.g., "This tile shows tasks and allows marking them complete").
• App: Select the application this tile connects to.
• API action selection: Choose the primary (display) API action for data fetch.
• Connection type: Choose the appropriate connection type (user-level or app-level, depending on connector support).

Once all values are set, click Next to enter the Tile Builder.

Tile builder enhancements

Hybrid tiles support all blocks available in display tiles (e.g., text, image, container, etc.), with the addition of the Form block.

Form block

The Form block allows you to embed interactive forms inside your tile, enabling users to perform API operations directly from the dashboard. It can be used:

• Independently: E.g., A display of remaining balance and a "Submit Time Off" form
• Within loop containers: E.g., per-item form for actions like "Approve Leave", “Update Status” or "Mark Complete" in list views

Configuring a form block

When you drop a Form block into the tile:

1. Choose a Submit API Action: Select a relevant API action that will be triggered when the form is submitted.
2. Configure Parameters: For each configurable parameter of the API action:
   • Get from user: The field will be rendered as an input component inside the form for end-user input.
   • Defined here:
     • Get from API action definition: Use predefined static values, or values from select/multi-select definitions.
     • Define static + dynamic: Create expressions using static values combined with dynamic keys from the tile’s primary API response. Example: Bind task_id from each task in a loop container using {{$.task.id}}.

Form behavior settings

After configuring form fields, define how the form behaves on render and submission:

Display options

• Display in tile: Renders the form inline within the tile.
• Display overlay: Shows a button; form is rendered in a pop-up overlay on button click.

Button customization

• Label the button (e.g., "Submit", "Approve", "Send Request").

Success settings

Choose what happens on successful submission (HTTP 2xx response codes):

• Show message:
  • In-tile or as toast
  • Enter a static or dynamic success message
  • An optional link can be added in the success message
• Post-submission behavior (if tile reload is disabled):
  • Remove line item: Removes the container (e.g., from the loop) that triggered the form
  • Replace button with text: Replace the form's submit button with a confirmation message (can be static or from the API response)
    • You can bind the success text to a dynamic response key
    • Sample API response for the form submission can be pasted here to allow key binding

Error settings

Define what happens for non-2xx responses:

• Show an error message in-tile or as a toast
• Use static or dynamic error messages based on the API error response

Loop containers and embedded forms

Custom hybrid tiles excel at supporting loop-based use cases with embedded forms per item:

• Use a loop container bound to an array in the API response
• Inside the loop, drop a form container per item
• Each form can:
  • Use display-bound dynamic values for ID fields (e.g., task.id)
  • Allow inline updates (like status change or commenting) at the item level

Example: A tile that shows a list of employee expense claims with an "Approve" button next to each, powered by embedded form blocks.

API response handling & tile preview

As with display tiles, hybrid tiles support the Get API response feature for the Display API action to bind display blocks using dynamic data.

For the Form Submit API action, however, you must manually paste a sample API response. This allows you to:

• Bind dynamic success messages or error messages using keys from the submission response.
• Reference response data when using features like “Replace button with text” or other post-submission behaviors.

Single-click action (No input fields)

If none of the parameters in the form are marked as "Get from user", the form behaves as a single-click action. In this case:

• A standalone button is rendered within the tile.
• Clicking the button immediately triggers the associated API action using the preconfigured parameter values.
• This is ideal for simple actions like “Mark Complete” or “Approve Request” where no user input is required.

Publishing hybrid tiles

Once a hybrid tile is published, it's live across dashboards and can be used like any other widget. The tile can either be:

• Locked: The display and submit API actions cannot be changed.
• Editable: Visual layout, styling, and success/error behaviors can still be updated.

Dynamic and static data binding

As in display tiles, hybrid tiles support hybrid value composition:

• Bind URL/text/input values using a mix of:
  • Static strings
  • Dynamic keys from the display API response
• This helps in creating contextual post actions (e.g., linking to external resources after a form submission)

Dynamic data formatting

Transformations supported include:

• Date format conversion
• Change case: Lowercase, uppercase, sentence case
• Fallback to original values if formatting fails
• Multiple transformations can be chained on a single dynamic field