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](https://d3ab6ve1niai1p.cloudfront.net/product/app-new-images/component/custom-component/1.jpg)
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](https://d3ab6ve1niai1p.cloudfront.net/product/app-new-images/component/custom-component/2.jpg)
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](https://d3ab6ve1niai1p.cloudfront.net/product/app-new-images/component/custom-component/3.png)
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](https://d3ab6ve1niai1p.cloudfront.net/product/app-new-images/component/custom-component/4.jpg)
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](https://d3ab6ve1niai1p.cloudfront.net/product/app-new-images/component/custom-component/5.png)
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](https://d3ab6ve1niai1p.cloudfront.net/product/app-new-images/component/custom-component/6.png)
7. Test the Changes
Go to Preview and you would find the charts and the table here.
![DrapCode Builder Collection Constructor](https://d3ab6ve1niai1p.cloudfront.net/product/app-new-images/component/custom-component/7.png)