How Do I Add a Custom Module to Canvas

1638 views

This guide will show you how to add a Custom Module to Canvas.

Inside Magic xpa installation folder, you can find SmartUX folder. Inside the SmartUX > SmartUXDesigner > canvas > custom-dependencies folder, you can find the custom dependencies. You can make any custom-dependencies-related changes here.

We assume that your application is using custom dependencies such as Chartjs. Let us see how you can add this module to canvas.

1. Opening custom-package.json File

Open custom-package.json file.

2. Adding ngx-charts

Add ngx-charts dependency into it.

3. Opening custom.module.ts File

Open custom.module.ts file.

4. Adding NgxChartsModule

Add ngx-charts module named NgxChartsModule in import section.

5. Adding Module Entries

Add the Module entry in import and export sections of the module decorator.

6. Saving File

Save the file.

7. Opening Project

Now open the project in SmartUX Studio.

8. Refreshing Canvas

Click on Refresh Canvas.

Canvas refreshing goes on for a while.

Once Canvas refresh process is complete, the SmartUX Studio UI is ready.

9. Adding HTML Contents for Charts

Now add the HTML contents for the charts.

You can then see the chart on canvas as shown below.