Custom App Tiles Setup

Table of Contents

Overview

How to access custom app tiles

How to create custom app tiles

Tile builder and tile blocks

Get API response

Previewing tiles

Publishing tiles

Overview

Custom app tiles allow users to fetch data from third-party applications using API actions configured in Custom apps. This data is displayed in tiles on the home and site dashboards, where users can customize the look, feel, and content of these tiles to suit their needs. With custom app tiles, users create tiles using dynamic UI components with custom styling, enabling a personalized representation of third-party application data.

How to access custom app tiles

To open the custom app tiles modal, as the app manager:

• 1. From your user menu, click Manage > Custom app tiles.
  2. Click on Create custom app tile.

How to create custom app tiles

From the Create custom app tile modal, input the following required values to the fields:

• • Tile name: Specify the name of the tile.
  • Tile description: Enter a detailed description of the intent of your tile (e.g., "This tile will display Lattice tasks.")
  • App: Choose the application you want to pull into the intranet. If you do not see the app you want in this list, choose Add custom app. This will redirect you to the Integrations setup menu, where you can add your new integration (more on this below).
  • API action selection: Select a custom app from the dropdown, then choose an API action from that app to base this tile on. Again, if you do not see the action displayed in the dropdown, you can add a custom API action.
  • Connection type: If the selected custom app supports both user-level and app-level connections, choose which connection type this tile will use.

Once you've input all the required values, click Next to access the tile builder.

Adding a new custom app integration

If you're adding a new application not already available in your intranet instance, you'll need to fetch some information from the application in question. The information Simpplr will request will depend on the type of connection you want to set up. Refer the instructions here to set up a custom app.

Tile builder and tile blocks

In the tile builder, users can construct tiles by adding blocks from various options available by dragging and dropping different blocks or using pre defined templates. This section includes a preview feature to preview the tile’s final appearance and functionality as it would display on the dashboards and a Get API response option to fetch sample data for the API response to to associate dynamic data inputs easily to JSON keys within the response of the chosen API action.

Custom app tiles provide a range of blocks to create customized layouts that meet a variety of data display needs. Each block has Appearance and Data settings, which allow users to adjust both the visual style and the dynamic content they want displayed within the block.

• Container block: This is used as a flexible layout holder, allowing users to nest other blocks within it. It’s useful for grouping related data elements and organizing sections within a tile. For example, a container can be used to hold product information such as an image, name, and price, displayed together within a single box.
  • Appearance settings:
    • Size: Choose from pre-set sizes or enter a custom width/height in pixels or percentage.
    • Alignment: Configure container direction, alignment, and spacing.
  • Data settings:
    • Looping property: Bind the container to an array/list in the API response, causing it to repeat automatically for each element in the array. This feature is essential for rendering multiple items dynamically, such as a list of recent orders, products, or notifications.
    • Initial and maximum display count: Control how many items display initially and set a cap on the maximum number shown, useful for managing large data sets with a “Show More” option if needed.

• Image block: This enables the display of visual content within the tile, such as product images, profile pictures, or other graphics relevant to the data being shown. Images provide visual context and make information more engaging and easier to understand.
  • Appearance: Configure size (small, medium, large, or custom), aspect ratio, and image fit (contain or cover).
  • Data: Upload an image, provide a static URL, or dynamically bind the image to a URL within the API response.

• Text block: This is used to display text within the tile, such as headings, descriptions, or dynamic data fields. This block can be customized to differentiate between various types of information, such as main titles versus secondary details.
  • Appearance Settings:
    • Text style: Choose from predefined text styles (heading, body, or secondary) to quickly apply consistent typography across the tile.
    • Alignment: Adjust the alignment (left, center, right) to best suit the tile’s layout.
    • Line limit: Specify the maximum number of visible lines (1, 2, or 3), useful for handling longer text by truncating it when space is limited.
  • Data settings:
    • Static or dynamic content: Insert static text or bind the text dynamically to a JSON key from the API response. Dynamic binding is ideal for displaying data such as usernames, product names, or recent activity descriptions based on live data.

• Link block: This provides a way to include clickable links in the tile, directing users to external resources, additional information, or relevant actions outside the tile.
  • Appearance: Configure text style and choose color options (default or brand link color).
  • Data: Provide static or dynamic text and URL.
• Divider block: This is a simple, horizontal line used to separate sections of content within the tile. This helps improve readability by creating visual distinctions between groups of information. Choose optional top and bottom margins to control spacing around the divider, creating better separation between blocks.

Tile templates

Choose from a set of 4 pre-built tile-templates to get started with designing your custom app tile:

• Image and text rows
• Image and text columns
• Showcase image and rows
• Text-only rows

Get API response

The Get API response feature allows users to fetch a sample response from the chosen API action. This is critical for two main functions:

1. Data binding: This operation provides access to the API response structure, enabling users to bind specific fields in the tile to JSON keys within the response by converting response to JSON schema.
2. Preview: By accessing the actual data from the API response, users can preview how the tile will look with live data, ensuring the final design reflects the intended look and feel on the dashboards.

Previewing custom app tiles

The Preview functionality allows you to visualize the completed tile before it goes live for different dashboard layouts. Using a sample API response, the tile can be viewed with actual data from the chosen API action, ensuring alignment with the desired look, feel, and information display.

 

Displaying lists with Loop containers

Loop containers enable a repeating display of data from an array (or list) in the API response. Binding a loop container to an array allows it to render multiple times, once per array item. 

• Nested element binding: Elements inside a looped container inherit data-binding options, either directly to API response JSON keys or to objects (a generic array item) within the array. By binding to the general object (rather than specific indexes), each repeated instance of the container will automatically pull data corresponding to the array index, allowing for a seamless, dynamic display of each data element.
• Indexed display: Each instance of a looped container will reference sequential indexes in the array/list. Binding to general object keys, rather than specific indexes, ensures data is correctly displayed for each repeated instance.

Publishing custom app tiles

Once a custom app tile is published:

• Locked settings: You can no longer edit the API action associated with the tile.
• Allowed edits: You can still change the look and feel, including styling and display configurations.
• Finalization: Publishing marks the tile as ready for use across dashboards and in other parts of the application.