Design a template

This section will demonstrate some UI components on the Template page.

Static Label

1. You can set up a static label by dragging the Static Label icon to a specific position.

1. In the Property setting on the right panel, you can decide the following:

   • Position and Size

   • Value, which is the static text you want to show permanently

   • Font family, Font size, Alignment, Font color, and so on.

After setting these, please save it by clicking the save button.

Image

1. You can set up an image by dragging the Image icon to a specific position.

1. In the Property setting on the right panel, you can decide the following:

• Position and Size

• Value, which have two kinds of situations:

  • When you choose == User Defined ==, you can upload a Static Image as a logo.

  • When you choose others, you assign a column from your item data as the filename of a dynamic image source. This name should match with the filename from one of the pictures in the gallery. (Dynamic Image)

• Brightness Enhancement:

• Dithering Enhancement: Dithering is a technique used in computer graphics, digital imaging, and signal processing to mitigate visual artifacts or distortions that may arise during the conversion of a high-resolution image or signal to a lower resolution.

After setting these please save it by clicking the save button.

Shape

1. You can set up a Shape by dragging the Shape icon to a specific position.

1. In the Property setting on the right panel, you can decide the following:

• Position and Size

• Value, where you can choose Rectangle, Triangle, and Circle

• Line Width

• Line Color

• Fill Color

• Background Color

After setting these please save it by clicking the save icon.

Text

1. You can set up a Text by dragging the Text icon to a specific position.

1. In the Property setting on the right panel, you can decide the following:

• Position and Size

• Value, which you can choose the column of your item (storage) data

• Font family, Font size, Alignment, Font color, and so on.

After setting these please save it by clicking the save icon.

Line

1. You can set up a Line by dragging the line icon to a specific position.

1. In the Property setting on the right panel, you can decide the following:

• Position and Size

• Direction, which is Horizontal or Vertical

• Line color

• Line Width

After setting these please save it by clicking the save button.

QR Code

1. You can set up a QR Code by dragging the QR Code icon to a specific position.

1. In the Property setting on the right panel, you can decide the following:

• Position and Size

• Value, which have two kinds of situations.

  • When you choose == User Defined ==, you can assign it as Static Data by filling in the data in the Sample field.

  • When you choose others, you assign the column of your item data as Dynamic Data.

After setting these please save it by clicking the save button.

Barcode

1. You can set up a barcode by dragging the Barcode icon to a specific position.

1. In the Property setting on the right panel, you can decide the following:

• Position and Size

• Value, which have two kinds of situations.

  • When you choose == User Defined ==, you can assign it as Static Data by filling in the data in the Sample field.

  • When you choose others, you assign the column of your item data as Dynamic Data.

After setting these please save it by clicking the save button.

Time

This component is only used in Deploy Template function in the Partial Update section. Please reference it in the following link.

Partial Image Update

1. You can set up a Time by dragging the Time icon to a specific position.

1. In the Property setting on the right panel, you can decide the following:

• Position and Size

• Value, where data should be in the boolean format.

After setting these please save it by clicking the save button.

Carousel

This component is only used in Deploy Template function in the Partial Update section. Please reference it in the following link.

Partial Image Update

1. You can set up a Carousel by dragging the Carousel icon to a specific position.

1. In the Property setting on the right panel, you can decide the following:

• Position and Size

• Value, where data should be in the json format.

After setting these please save it by clicking the save button.

Region

This component is only used in the Partial Update function in the Partial Image Update section. Please reference it in the following link.

Partial Image Update

1. You can set up a Region by dragging the Region icon to a specific position.

1. In the Property setting on the right panel, you can decide the following:

• Position and Size

• Name, where you can assign a region name (cannot be duplicated).

After setting these please save it by clicking the save button.