Content components

This article describes components in Components Library > Content.

Picture

The Picture component displays an image on the page. It supports a URL or Base64-encoded source, alternative text for accessibility, and a title attribute. In the App Designer, select a Picture on the canvas to configure it through three tab pages in the Settings panel: Props, Styles, and Advanced.

Props

The Props tab contains the visual and accessibility properties of the Picture.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Image	Switch Setter (String setter / Image setter / Variable input)	/editor/lowcode-assets/tps/TB16TQvOXXXXXbiaFXXXXXXXXXX-120-120.svg	Sets the source of the image. Accepts a URL string or a Base64-encoded image. You can also use the image picker to select an uploaded asset.
Title	i18n setter	-	Sets the title attribute on the image element, displayed as a tooltip on hover. Supports internationalisation.
Alt	i18n setter	-	Sets the alternative text for the image, used by screen readers and displayed when the image cannot be loaded. Supports internationalisation.

Events (Props sub-section)

Within the Props tab, an Events collapsible section (visible when the Picture is not inside a Slider) provides Function Bindings for:

Property	UI Control	Default	Description
onClick	Function Binding	-	Binds a function called when the image is clicked.
onLoad	Function Binding	-	Binds a function called when the image has successfully loaded.
onError	Function Binding	-	Binds a function called when the image fails to load.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Advanced

For more information, refer to Advanced.

Camera

The Camera component provides media capture capabilities, supporting both image capture (photo mode) and video recording. It includes device selection, fullscreen mode, mirror mode for front-facing cameras, and mute controls. In the App Designer, select a Camera on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the configuration properties of the Camera.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Disabled	Toggle switch	Off	Disables the camera component, preventing any interaction.
Mirrored	Toggle switch	Off	Mirrors the camera feed horizontally. Useful for front-facing cameras. Only available when Mode is Image.
Mode	Radio group (Image | Video)	Image	Sets the capture mode. Image enables image capture (photo mode). Video enables video recording.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the Camera without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Camera's supported events:

   • onImageCapture — Triggered when an image is captured in CAMERA mode
   • onImageSave — Triggered when a captured image is saved
   • onRecordingStart — Triggered when video recording begins
   • onRecordingStop — Triggered when video recording stops
   • onVideoSave — Triggered when a recorded video is saved

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Event Binding window

Click the settings (gear) icon on an existing event to open the Event Binding window. This window contains:

• Select event — A left panel with two tabs:

  • Built-in function — Built-in event handlers provided by the platform
  • Event — A searchable list of all available event handlers in the current page, including custom ones. Click New Event at the top to create a new handler. Select an existing handler to bind it to this event.

• Event name — A text input displaying the name of the selected handler. You can rename it here.

• Advanced params settings — A toggle switch (default: Disable). The extended parameters are appended as a separate input parameter in JSON format after the original transparent transmission parameters. When enabled, a JSON code editor appears where you can define the extra parameters.

• Click Confirm to save the binding, or Cancel to discard changes.

Handler signatures

The onImageCapture handler receives the captured image data:

onImageCapture(image) {
  // image: base64 string of the captured image, or null
}

The onImageSave handler is called when the image is saved:

onImageSave() {
  // Handle image save
}

The onRecordingStart handler is called when video recording begins:

onRecordingStart() {
  // Handle recording start
}

The onRecordingStop handler receives the recorded video data:

onRecordingStop(video) {
  // video: Blob of the recorded video, or null
}

The onVideoSave handler is called when the video is saved:

onVideoSave() {
  // Handle video save
}

Advanced

For more information, refer to Advanced.

Document Viewer

The Document Viewer component renders a document from a URL directly on the page. It supports multiple file formats including PDF, DOCX, XLSX, and common image formats, with automatic format detection from the URL. In the App Designer, select a Document Viewer on the canvas to configure it through three tab pages in the Settings panel: Props, Styles, and Advanced.

Props

The Props tab contains the configuration properties of the Document Viewer.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Document link	Text input	https://www.learningcontainer.com/wp-content/uploads/2019/09/sample-pdf-file.pdf	Sets the URL or file path of the document to display. Supported formats: PDF, DOCX, XLSX, TXT, PNG, JPG, GIF, WEBP, BMP. Also supports Base64-encoded content.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Advanced

For more information, refer to Advanced.

Dynamic Component

The Dynamic Component renders a custom component from a JavaScript code string at runtime. It is intended for advanced scenarios where standard components do not meet requirements and a custom rendered output is needed. In the App Designer, select a Dynamic Component on the canvas to configure it through three tab pages in the Settings panel: Props, Styles, and Advanced.

Props

The Props tab contains the code and parameter properties of the Dynamic Component.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Code	Code setter	-	Sets the JavaScript or TypeScript/JSX source code to compile and render. The code must export a default component.
Props	Array setter (Object items)	-	Defines key-value pairs passed as props to the rendered component. Each item has a Prop name (text input) and a Value (i18n setter).

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Advanced

For more information, refer to Advanced.

OneMap

The OneMap component displays an interactive map pre-configured with the OneMap Singapore base layer. It supports rendering location markers from a data array, with support for custom marker colors and images. In the App Designer, select a OneMap on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the data properties of the OneMap.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Locations	JSON setter	-	Sets the array of location objects to render as markers on the map. Each item should include latitude, longitude, an optional color for the marker, and an optional img array for a custom marker image.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the OneMap without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the OneMap's supported events:

   • onClick — Triggered when the map area is clicked
   • onMarkerClick — Triggered when a location marker is clicked

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onClick handler receives the map click event:

onClick(event) {
  // Handle map click
}

The onMarkerClick handler receives the clicked marker data:

onMarkerClick(marker) {
  // marker: the location object of the clicked marker
}

Advanced

For more information, refer to Advanced.

PageReference

The PageReference component embeds another application page within the current page using the low-code renderer. It dynamically loads the referenced page's schema and assets at runtime. In the App Designer, select a PageReference on the canvas to configure it through three tab pages in the Settings panel: Props, Styles, and Advanced.

Props

The Props tab contains the reference and visibility properties of the PageReference.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Page	Page reference setter	-	Selects the application and page to embed. The format is appId/pageId. Only available when dynamic mode is not active. With the reload data option.
Show Page	Toggle switch	On	Controls the visibility of the referenced page in Design mode only. When off, the page is hidden in the App Designer and a prompt is displayed in its place. In Preview mode, the referenced page always displays correctly regardless of this setting.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Advanced

For more information, refer to Advanced.

QR Code

The QR Code component generates and displays a QR code from a given text or URL value. It supports configurable error correction levels, foreground and background colors, margin control, and an optional overlay image. In the App Designer, select a QR Code on the canvas to configure it through three tab pages in the Settings panel: Props, Styles, and Advanced.

Props

The Props tab contains the data and appearance properties of the QR Code.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Value	Text input	https://reactjs.org/	Sets the text or URL to encode in the QR code. Required.
Size	Number input	128	Sets the width and height of the QR code (in pixels).
Level	Dropdown (L | M | Q | H)	L	Sets the error correction level. Higher levels allow the QR code to remain scannable even if partially obscured, at the cost of increased density.
Background color	Color picker	#FFFFFF	Sets the background color of the QR code.
Foreground color	Color picker	#000000	Sets the color of the QR code data modules.
Include margin	Toggle switch	Off	Adds a four-module quiet zone margin around the QR code.

Image settings (overlay)

The Image settings section allows you to configure an optional image overlaid at the centre of the QR code:

Property	UI Control	Default	Description
Src	Text input or Image setter	-	Sets the URL or uploaded asset for the overlay image.
Height	Number input	-	Sets the height (in pixels) of the overlay image.
Width	Number input	-	Sets the width (in pixels) of the overlay image.
Excavate	Toggle switch	Off	Removes the QR code modules behind the overlay image to improve contrast and scannability.
X	Number input	-	Sets the horizontal position of the overlay image relative to the QR code canvas.
Y	Number input	-	Sets the vertical position of the overlay image relative to the QR code canvas.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Advanced

For more information, refer to Advanced.

Best practices

1. Choose the Right Error Correction Level

   • Use M (medium) as a general default, which balances data density and fault tolerance
   • Use H (high) when the QR code will be printed on materials that may be partially damaged or when an overlay image is used

2. Enable Excavate with Overlay Images

   • When using an overlay image, enable Excavate so the QR code modules behind the image are removed, ensuring the code remains scannable

3. Set a Sufficient Size

   • Use a minimum Size of 128 pixels for screen display and 300 pixels or more for print, to ensure scanners can reliably read the code

Last updated on 20 May 2026