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

• Customize App tiles using text & link components

• Show or hide blocks dynamically in Tiles
• Get API response
• Combination of dynamic and static values
• Dynamic data formatting
• Component Validations
• Saving Your Work
• Conditional visibility
• Previewing tiles
• Publishing tiles
• Duplicate custom app 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 to 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

Customize App tiles using text & link components

We have enhanced Custom App Tiles with expanded customization options, giving you greater flexibility and control to create dashboards that are visually appealing, consistent with your brand, and easier for users to navigate. These enhancements improve both the appearance and accessibility of your app tiles across all devices.

Key Enhancements

1. Font Size Flexibility
You can now select from a wider range of text sizes for headings, body text, and data fields within your app tiles. This allows you to highlight key information, improve readability, and ensure your dashboards better reflect the hierarchy of content.

2. Color Control
Customize text and link colors using system colors, brand-specific colors, or fully custom hex values. This feature enables greater visual alignment with your brand guidelines while still maintaining flexibility for creative design choices.

3. Theme Support
With support for both light and dark themes on mobile devices, you can configure colors independently for each theme. This ensures that app tiles remain visually consistent and legible regardless of the user’s theme preference.

4. Validation & Accessibility
Built-in contrast checks help you ensure that your chosen colors meet accessibility standards. This provides confidence that your content is readable for all users, including those with visual impairments.

5. Consistency Warnings
When using non-system colors (brand or custom), the system now displays a visual notice. This helps designers and app managers maintain alignment with overall app aesthetics and ensures a consistent user experience across dashboards.

Show or hide blocks dynamically in Tiles

You can now control which parts of a tile appear for your users—based on live data or settings—without needing to write any backend code. This means you can create smart tiles that change depending on the user's situation. For example, you might want to hide a button if a task is already complete or show a message only when a user’s subscription has expired.

What Is conditional visibility?

Conditional visibility lets you decide whether a section (called a block) in your tile should be shown or hidden. The decision is based on things like:

• Data coming from an API

• Settings you’ve added in the tile

• Who the user is, or what they're doing

How to set up conditional visibility

Follow these steps to hide or show a block in your tile:

1. Open the Tile builder and click on the block you want to control (like a button or a section).

2. In the right-hand Data pane, go to Advanced settings.

3. Click on Set visibility rule.

4. A small code editor will pop up. This is where you can write a simple rule that decides if the block should be shown or hidden.

5. Use the Preview button or Get API response to test how your tile looks with real data.

Built‑In Helper Functions

Use these helpers for concise, safe logic:

Comparison Helpers

• helpers.equals(a, b) → returns true if a === b
• helpers.notEquals(a, b) → returns true if a !== b
• helpers.inList(value, list) → returns true if list.includes(value)
• helpers.notInList(value, list) → returns true if !list.includes(value)
  
  

Path Navigation

• helpers.get(path, obj) → safely retrieves a nested value via JSON‑path path (uses lodash.get), returns the value or undefined
  
  

Type & Existence Checks

• helpers.isEmpty(val) → returns true if val is null, undefined, an empty array, empty object, or empty string
• helpers.isDefined(val) → returns true if val is neither null nor undefined
• helpers.isBoolean(val) → returns true if typeof val === 'boolean'
  
  

Logical Combinators

• helpers.and(...args) → returns true if all arguments are truthy
• helpers.or(...args) → returns true if any argument is truthy
• helpers.not(val) → returns the logical negation of val
  
  

Date Utilities

• helpers.date.now() → returns the current Date object
• helpers.date.parse(value) → parses an ISO‑formatted or timestamp string into a Date object
• helpers.date.diffInDays(a, b) → returns the number of days between a and b
• helpers.date.diffInHours(a, b) → returns the number of hours between a and b
• helpers.date.diffInMinutes(a, b) → returns the number of minutes between a and b
• helpers.date.isBefore(a, b) → returns true if date a is before date b
• helpers.date.isAfter(a, b) → returns true if date a is after date b
• helpers.date.format(date, formatStr) → formats date according to formatStr (e.g., 'YYYY-MM-DD')

Example Use‑Cases

1. Hide a “Renew” button if subscription is already active

apiData.subscription.status === 'active'

2. Show only the first three items in a loop

context.index < 3

3. Display a “Trial Expired” banner if last login > 30 days ago

const now = helpers.date.now();

const lastLogin = helpers.date.parse(apiData.user.lastLogin);

return helpers.date.diffInDays(now, lastLogin) > 30;

4. Require “Resolution Note” only when Incident State = Closed

apiData.incident.state === 'closed'

5. Show block only for admins or owners

helpers.or(

  helpers.equals(apiData.user.role, 'admin'),

  helpers.equals(apiData.user.role, 'owner')

)

6. Hide section if customer address is missing

!helpers.isDefined(helpers.get('customer.address.street', apiData))

7. Show promo banner if today is before promo end date and user is in allowed segment

const now    = helpers.date.now();

const end    = helpers.date.parse(apiData.promo.endDate);

return helpers.and(

  helpers.date.isBefore(now, end),

  helpers.inList(apiData.user.segment, configData.allowedSegments)

);

8. Render section when feature flag is on and user has valid role

helpers.and(

  helpers.isDefined(configData.featureToggle),

  helpers.equals(configData.featureToggle, true),

  helpers.inList(apiData.user.role, configData.permittedRoles)

)

Tips & Limitations

• Synchronous, Time‑Bounded
  Your function runs in a Web Worker with a strict timeout (e.g., ⪅50 ms). If it errors or times out, the block falls back to your defaultVisibility or to visible if unset.
• No Side Effects
  Only return true or false. Async/await, DOM access, or external calls aren’t allowed.
• Pure Logic Only
  Avoid long loops or heavy computation. Use helpers for all comparisons.

With this new feature, you can make your tiles much smarter. You’ll be able to tailor the content each user sees, depending on who they are and what they need—without writing any backend code. This makes your intranet experience more helpful, dynamic, and personal.

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.
  

Combination of dynamic and static values

Users can define bindings for text and properties like URLs that mix dynamic and static values.

• • Example: For a Zendesk "List Tickets" app tile, where ticket numbers are available in the API response but not direct links:
    • Static Information: Base URL
    • Dynamic Information: Ticket ID
    • Example: https://myzendesk1729079501.zendesk.com/agent/tickets/{{$.results_element.id}}
      
      

Duplicate custom app tiles

With the ability to duplicate any custom app tiles, users can easily create a copy and edit the app tile based on their use-case, simplifying the custom app tile action creation process. 

To duplicate a tile, head to the tile in question from the main Manage tile menu, click the three dots and choose Duplicate.

Dynamic data formatting

App tiles can support transformations like date format and change case.

• Date format: Users can select from various available date formats
• Change case: Options include "All lower," "All upper," and "Sentence case"

If a transformation fails, the system falls back to the original input. Users can add more than one transformation to a dynamic reference.

Note that users cannot add more than one instance of a particular transformation type to a single dynamic reference.