Creating a Kiosk Graphic

Owned by Andrew Tuma
Last updated: Jun 01, 2023 by Ricky Villa
3 min read

This page goes over the process on how to create a graphic that will act as a kiosk that acts as a slide show, cycling through specified graphics.

1. Create a kioskConfig Record

Navigate to the Folio App to create a new kioskConfig record in the database with the following properties: 

  • kioskConfig: marker tag

  • config: an array of JSON Objects with the following properties 

    • projectRef: the id of the graphic to be displayed, in string format ("p:demo:r:1eed9ac6-2c8e8a1c")

    • targetRef: the id of the graphic's target (must be a result of the graphic's graphicOn property ran as a query), in string format ("p:demo:r:1eeb1a33-428d9ac1")

    • timeout: how long the graphic should be displayed before showing the next graphic in milliseconds

This example query will create the above record for you, just replace the id’s with that of your records and add as many as you want. Each graphic is comma separated and inside {} brackets.

diff(null, {kioskConfig, config: toJSON([{projectRef: "p:demo:r:1eed9ac6-2c8e8a1c", targetRef: "p:demo:r:1eeb1a33-428d9ac1", timeout: 15000}, {projectRef: "p:demo:r:1eec77a9-1f7a7be5", targetRef: "p:demo:r:1eeaff69-30d84ee5", timeout: 10000}])}, {add}).commit

Once created, copy the id of the new kioskConfig record for the last step below.
To check and edit an existing kioskConfig record, query for kioskConfig. Then it can be selected to edit.

config Property Must Be JSON Formatted

This can done by using the Axon function toJSON().

Graphic Order

The order in which the graphics cycle is determined by the order in which they are listed in the JSON object assigned to the config property.

2. Create a New Graphic

Now create a new graphic to act as the kiosk graphic. This can be done by following the Create New Graphic guide and selecting the blank template option or by opening the Graphics Builder App and creating a new graphic.

3. Add Components to New Graphic

If the new graphic was created using the Create New Graphic guide, it may be useful to delete any unwanted components in the work-space at this time. In order to set up the graphic to act like a kiosk, two components will need to be added to the graphic:

1. The include component: This component will be the where the cycling graphics from the kioskConfig record will show.

The include Component

2.The kiosk component: This component will act as a button that a user can press to go to full screen and start the kiosk slide show.

4. Set the kiosk Component's Properties

Now that the components necessary to make kiosk have been added, the next step will be to set the kiosk component's properties. Click on the kiosk component in the work-space navigate to the properties view on the left side of the screen and switch to the "Basic" view if needed:

The following should be set:

  • Configuration Filter: This should be a query to link the kioskConfig record created in step #1. Paste the id of the kioskConfig record in the filter as well.

    kioskConfig and id==@p:demo:r:2c0b9dc5-2e3d591f

  • Disable User Input: Toggle this on to prevent users from interacting with the graphics within the slide show. For instance, hyperlink buttons in a graphic that is a part of a kiosk will not be clickable when this is toggled on.

  • Viewport Ref: This should be the id of the include component added to the kiosk graphic. This can be found by selecting the query tool in the top row and searching for include or by selecting the include component and going to Advanced view in the Properties to find the id.

Once these properties have been set, save the graphic and it will be ready to view.