open-scanner
This action is used to scan a QR code. The open-scanner can be used in a list of actions, such as the swipe action and the right element, or with another action where the open-scanner action is invoked after the main action is performed, opening access to the camera.
An open-scanner action can be set up in various ways:
- As a swipeable action in the left or right direction
- As a rightElement in the list
- As an associated action in the action list
Open-scanner action


This is an example of using the open-scanner as a stand-alone action. In this case, the button appears at the bottom, and when pressed, it accesses the camera and allows us to scan the QR code. Examples: See the full example in GitHub.
children: - type: component.form options: children: - type: component.text-field instanceId: qr-value options: label: "QR Response" initialValue: =@ctx.components.scanner-action.state.value actions: - children: - type: action.open-scanner instanceId: scanner-action options: title: "Scan QR code" modal: title: Scan complete onSuccess: type: action.go-back
Open-scanner swipeable left/right

This example uses the open-scanner action as a swipeable property. We can choose the swipe direction left or right. After pressing the button, it accesses the camera and allows us to scan the QR code.
Examples: See the full example in GitHub.
data: =@ctx.datasources.employees-static item: type: component.list-item options: title: =@ctx.current.item.lastname subtitle: =@ctx.current.item.firstname leftElement: element: avatar text: " " uri: =@ctx.current.item.img swipeable: left: - label: Scan QR code onPress: type: action.open-scanner instanceId: scanner-swipeable-left options: modal: title: Scan complete onSuccess: type: action.go-back right: - label: Scan QR code onPress: type: action.open-scanner instanceId: scanner-swipeable-right options: modal: title: Scan complete onSuccess: type: action.go-back
Open-scanner rightElement

In this example, we use the open-scanner action as the rightElement in the list-item component. There is a button for each item.
Examples: See the full example in GitHub.
data: =@ctx.datasources.employees-static item: type: component.list-item options: title: =@ctx.current.item.lastname subtitle: =@ctx.current.item.firstname leftElement: element: avatar text: " " uri: =@ctx.current.item.img rightElement: element: button title: Scan QR code onPress: type: action.open-scanner instanceId: scanner-rightElement options: modal: title: Scan complete onSuccess: type: action.go-back
Open-scanner onSuccess

In this example, the open-scanner action is associated with the submit-form action. After we enter the signature and press the "Sign" button, the submit-form action is performed and the action for open-scanner is shown. Access to the camera is not shown automatically. You have to click on "Scan QR code".
Examples: See the full example in GitHub.
actions: - children: - type: action.submit-form options: formId: send-signature-scan provider: DATA_PROVIDER_DYNAMIC title: Sign and proceed with the payment entity: default/form goBack: previous method: create onSuccess: title: Succesfully signed description: Please scan the product code to proceed with the payment actions: - type: action.open-scanner instanceId: scanner-onsuccess options: title: "Scan QR code" modal: title: Scan complete onSuccess: type: action.go-back children: - type: component.form instanceId: send-signature-scan options: isDiscardChangesAlertEnabled: false children: - type: component.signature-field instanceId: signature options: label: Signature required