Login / Sign Up

IoT In-App Data Setup and Rendering

A look at how the app renders IoT data and how it can be setup and customised

JC Holidaymaker

HXP Admin

IoT rendering is available on iOS and Android Apps version 2026.1.1+

Overview

IoT data is configured through your CMS and displayed in various places within the app. Currently, it can be seen on the home screen, the place/welcome pack item list and the place/welcome pack detail. This information is powered by an IoT service on the device that periodically updates and refreshes it throughout the app.

 

IoT In-App Data Setup and Rendering

Home Screen

You can choose which IoT information to display on your home screen. This information can be configured through the CMS and will appear in its own box just below the weather information.

There are two places this can be setup depending if are a single site install, or a group site install:

  • Single site : Core Setup -> General and App Setup -> Holidaymaker General Group -> Home IoT Items Tab
  • Group sites : Group Sites -> Select Individual Group Site -> Holidaymaker General Group -> Home IoT Items Tab

Home IoT Items

Once you have found the Home IoT Items, then setup is the same. Here you can add multiple items to show on the apps home screen. Click on the Add IoT Item button to add a row. These will be rendered in the app in the order of the rows presented here.

  • IoT Item – Select one of your currently defined IoT items
  • Icon – Select one of our default IoT icons – or select Custom
  • Custom Icon – Only shows if icon is set to Custom – Upload your own image.This should be a transparent PNG or WebP less that 512px square
  • Title / Subtitle – The title and subtitle are rendered on top of each other in the item in the app. Both of these can use the place holders #VALUE# and #DATE# which are then replaced in the app with the current reading value and last reading date/time
  • Examples Outdoor Pool Temperature: #VALUE# and Last Updated: #DATE#
IoT In-App Data Setup and Rendering

Example of two items setup for indoor and outdoor pool temperatures, with a test custom icon.

IoT In-App Data Setup and Rendering

Place and Welcome Pack Records

Item List

You can configure whether an IoT data item appears in the list view within the app. Currently, you can choose a background colour for the IoT item and the app will use this to render it. The text colour is generated on-device using an algorithm to ensure it’s readable.

Detail View

The place/welcome pack detail renders IoT data in two different locations and in different layouts and designs.

IoT In-App Data Setup and Rendering

Overview

The overview section of the place/welcome pack detail page displays IoT data in an auto-scrolling carousel. This carousel uses the background colour of the IoT items and the on-device generated text colour, also optimised for readability, similar to list items.

IoT In-App Data Setup and Rendering

‘Recent Information’ Tab

The “Recent Information” section of the place/welcome pack detail page presents IoT data in a list view. This accentuates the image with the IoT item colour. You can also rename the section title through your CMS.

IoT Data Service

The IoT data service manages data fetching, refreshing storage and display within the app. It’s a background service running on a five-minute check timer and a twenty-minute API check. This combination aims to keep IoT data as current as possible without overloading server or device resources.

The service also monitors background and foreground activity to determine if an update is needed after the user returns the app to the foreground. API data is de-coupled from its users and stored only in memory. This ensures data no longer needed is removed from availability once cleared. Items requiring IoT data query this in-memory list for valid data.

 

Adding IoT data to a Place and Welcome Pack Records

When the IoT module is enabled, you will see a “Linked to IoT” section within a Place and Welcome Pack Record, to enable you to render your IoT data. The details page for this record will add an extra tab to display the IoT data, which you can label as you wish within these settings.

Here you can also confirm if you want the IoT data to show on the list view. You can add multiple readings to a place record, simply by adding more IoT items, however only the first reading in your list will show on the List view.

Click “Add IoT Item” and select the reading you want to add from the drop down. This will show a list of all the readings that have been set up with Definitions. This setup will be similar to setting up your home screen items.

  • IoT Item – Select one of your currently defined IoT items
  • Icon – Select one of our default IoT icons – or select Custom
  • Custom Icon – Only shows if icon is set to Custom – Upload your own image.This should be a transparent PNG or WebP less that 512px square
  • Background Color – Choose from one of your defined brand colors, or select Custom (Note that we can add commonly used colors as brand item in your system – contact our support to do this)
  • Custom Color – Only shows if background color is set to Custom – Select a color from the picker, or add your own RGB hex code.
  • Title / Subtitle – The title and subtitle are rendered on top of each other in the item in the app. Both of these can use the place holders #VALUE# and #DATE# which are then replaced in the app with the current reading value and last reading date/time
  • Examples Outdoor Pool Temperature: #VALUE# and Last Updated: #DATE#
IoT In-App Data Setup and Rendering

Add your IoT data to a Place Record

IoT In-App Data Setup and Rendering

From the options you selected, your IoT data will show on the list view, the main Overview page, as well as the separate tab you named yourself.

The icon will show to the side of the IoT data, with your chosen background colour on the overview page.

The date/time the reading was last updated will show below the main IoT information. This won’t show on the list view due to the amount of space available.