Skip to main content

Using Extension Components

Creating Extension Components using the Platform's Online Features​

Image Documentation​

  1. Drag and drop an Extension component. Edit "To create an extension component" on the right.

extension-1

  1. In the automatically opened browser tab, wait for resources to load, and for npm install and npm run dev to complete automatically. No intervention is needed until the application's trial run interface appears. If it's your first time, you'll need to log in. The username and password are the same as those used for the application's trial run.

extension-2

  1. Switch to the Code tab, or use the AI tool on the left to modify the code. Click the "Save" button in the upper right corner, or press cmd + s (mac) / ctrl + s (windows) to save.

extension-3

  1. Wait a few seconds for automatic build, then switch to the Preview tab to check if the code changes have taken effect.

extension-4

  1. After modifying the code, press ctrl + c in the console to stop development mode. Then run npm run build to compile the production mode code. After successful execution, click "Export" in the upper right corner to export the generated artifacts locally.

extension-5

  1. Finally, go back to the form editor, change the Extension Type of the Extension component to JS component (remote CETA hosted), upload the exported Extension code (unzip the file, find bundle.js and bundle.css in the dist directory), and save. At this point, the project's trial run address can be used.

extension-6

extension-7

Video Documentation​

The video below demonstrates the entire process from creating a new Extension component from scratch to building it in production mode and uploading it to the application.

Local Custom Development of Extension Components​

View local development documentation here