Use dynamic text to create INFORMATION kiosk screen design
  • 18 Nov 2024
  • 2 Minutes to read
  • Dark
    Light
  • PDF

Use dynamic text to create INFORMATION kiosk screen design

  • Dark
    Light
  • PDF

Article summary

Now that we know how to create basic display content templates, we can make data-driven content. A good example is an information desk displays where the number of the information desk can be dynamically changed. Our goal is to create a screen design that will include a desk number stored as part of the display configuration.

To achieve that, we will utilize the assets functionality. We will configure the information desk asset for the desk numbers in the Custom fields tab prior to creating the template content. 


Topics covered:
Templates tab - Designer:
  • Dynamic text-driven by display asset values, 
  • Date & time feature

Sample screen:



TUTORIAL STEPS:

A) To categorize your screens or add any other attributes, use Custom fields. We will now create a new custom field "Info-desk" with custom values for displays.

  1. Open the Custom fields tab.
  2. Click the New Custom Field button in the lower right-hand corner.

B) Configure your new Custom Field.

  1. Fill in the name of the new custom field, e.g., ''Info-desk''.
  2. Create a list of values for the new custom field. After entering a value, click the check mark to add it to the list.
  3. Once done, confirm your settings by clicking the Save button in the lower right-hand corner.


NoteAll new custom fields are automatically displayed in the display configurations under Custom fields, on the Displays tab.
C) Assign an information desk number to your display using the predefined custom field values on the Displays tab.

  1. Edit your display configuration on the Displays tab.
  2. Select a value from the Info-desk custom field.
  3. Save the settings.


D) Design new content in the Templates tab - see how to do this in the Create basic STATIC content tutorial.

E) Add Dynamic text to your canvas.

  1. Click on the Text icon in the top menu and choose Dynamic Text.
  2. Place the element on the canvas.
  3. On the right-hand menu, click on the blue Data Source Editor button to edit the Dynamic Text.

F) Dynamic Text Editor will allow you to compose text from data & custom fields using the list on the right side of the editor. You can also include any static text.

  1. In Text mode, drag & drop a previously created custom field from the list of custom fields into the editor.
  2. Click the OK button to confirm the settings.
Note: in the data source editor, you can write any static text to be displayed before or after the dynamic text.
G) Stylize and customize dynamic text using the right sidebar to suit your requirements.

Note: If you need to use different fonts or colors for different text parts, you must create multiple static/dynamic text elements. 
H) Add a Date & Time element.

  1. Click the Widgets icon in the top menu and select Date & Time.
  2. Place the element on the canvas.
  3. Configure the Date & Time element using the right sidebar to suit your requirements.
I) Preview the designed content template. 
You can click Select display configuration to see how the final design looks with the dynamic text loaded from the information desk custom value assigned to the display.

  1. Click the Preview icon in the top menu.
  2. Click the Select display configuration button to select the display to which the value of the Info-desk custom field has been assigned.

    After selecting a display, the preview window will show the assigned custom field value.

  3. Click the OK button to close the window.

    Note: The correct information desk number will be visible in preview only if the selected display has the Info-desk custom field value assigned (see tutorial step C).

J) Click the Save & Publish button in the lower right-hand corner when your content is final. Now it is ready to be assigned and shown on your display.

K) Further design ideas to enhance your ticketing display content:

  • Add a logo or other media from the Media library, 
  • Add static text information, 
  • Change the background color.



Was this article helpful?