Skip to main content

Custom Component - Advanced Component

In this video tutorial you will understand how to work with custom components in your web app.

1. Create Custom Component

Go to project Settings > App Setting > Custom Component. Then click Create Custom Component and name your component and Save.

DrapCode Builder Collection Constructor

2. Add the Codes

You can add the codes/scripts/URLs such as CSS URL and so on in their respective space and save them. Always include URLs with their complete links.

DrapCode Builder Collection Constructor

3. Create the Page

Go to Pages and drop a Custom Component. Open its Settings and choose the item you want to build and Save.

DrapCode Builder Collection Constructor

4. Edit the Custom Component

To edit the custom component go back to Settings > App Setting > Custom Component. Click the Edit button and Update the codes/scripts/URLs.

DrapCode Builder Collection Constructor

5. Adding Charts

To add charts, go to project Settings > App Setting > Custom Component. Then click Create Custom Component and name your component and Save.

You can add the codes/scripts/URLs such as CSS URL and so on in their respective space and save them. Always include URLs with their complete links.

DrapCode Builder Collection Constructor

6. Create the Page

Go to Pages and drop a Custom Component. Open its Settings and choose the item you want to build and Save.

DrapCode Builder Collection Constructor

7. Test the Changes

Go to Preview and you would find the charts and the table here.

DrapCode Builder Collection Constructor