In this article, you will learn how to create a custom activity that generates a QR code image as a data URL using a third party library.
Follow the instructions in the Web Applications SDK page to set up your development environment.
A working knowledge of TypeScript is recommended before extending Workflow for web-based hosts.
Implementing a QR code activity for web applications using a third party library consists of the following steps:
- Adding third party library dependencies to your project.
- Creating the custom activity.
- Implementing the custom activity using the third party library.
npm install qrcodein the terminal to install the third party qrcode library that generates QR codes.
npm install @types/qrcodein the terminal to install type information for the third party library. This is optional, but it provides an improved developer experience.
To create a new activity:
- Open the Workflow activity SDK in Visual Studio Code
npm run generatein the terminal.
- When prompted enter the name of the activity you would like to create and press
Enter. For example,
- Open the newly created
Modify the skeleton activity implementation in
src/activities/CreateQrCodeImage.ts to match the following example which provides a minimal QR code implementation.
Follow the instructions to build and deploy the activity pack.
Once your activity pack is hosted and registered, your custom activity should appear in the activity toolbox in Geocortex Workflow Designer alongside the built-in activities, and can be used in the graphical interface like any other activity.
result output of the activity is a data URL. You can use the Set Form Element Property activity to assign the URL to the
value property of an Image form element.
Now you can build a workflow that uses your new custom activity!
Once you've seen your activity in action you may want to take advantage of the many different options offered by the qrcode library. To do this you can add additional inputs to the activity that correspond to options on the
QRCode.toDataURL(text: string, options?: QRCodeToDataURLOptions) method.
Modify the previous activity implementation in
src/activities/CreateQrCodeImage.ts to match the following more complete example.
Learn how to create a QR Code form element
Learn how to to use this same third party library to create a form element that generates and displays QR codes