This guide will walk you through adding and designing a component and its route in SmartUX. Follow the precise instructions to seamlessly navigate the application and complete the required tasks.
Upon successful completion of the specified steps, the result will reflect the desired outcome as shown in the image below:
1. Click on Add Component
Click on Add Component, this will open a list of programs from Magic xpa.
2. Select the program to add as a component
Select the Program you wish to Add as a component in SmartUX.
3. Click “Next”
Select the program and click Next.
4. Select the Component Template
Select the Component Template and then click on the Finish button. Here we select a Blank template.
5. Switch to Expanded View on Canvas
To see the canvas in design mode click on Expanded View.
6. Open Widgets Pane
From the left pane select the UX Widgets. This will open a widgets pane showing the set of widgets to drag and drop on canvas.
7. Select the Container Widget
Select the Container Widget dropped on the Canvas.
8. Click on the gear icon to open the Model list for mapping
On the Container widget property sheet map the Form Name using the gear icon to the container.
9. Click “TestProgram” form to do the mapping and save
Choose the “TestProgram” form model to Map it with the Container widget Form Name property.
10. Click “Save”
Click on the “Save” button
11. Drag and drop the Input widget inside the container
Drag and drop the input widget inside the Container widget on Canvas.
12. Data Mapping for the Input widget
On the Input widget property sheet map the Data using the gear icon.
13. Click “V_firstName”
Select the Edit control name from the model list here the “V_firstName”.
14. Save the selected Model
Click Save to Save the selected model.
15. Type in the label for the Input Widget
Type in the label for the Input Widget.
16. Fill “FirstName”
Here we Fill in the label as “FirstName”.
17. Changing the Appearance property to “Outline”
Changing the Appearance property to “Outline”.
18. Click “Save” to save the changes
To save the changes Click on the Save button on the top right corner.
19. Switch to Components pane
Now switch to the Components pane.
20. Click on Configure Route
Click on Configure Route to add the route for the components.
21. Click “MagicRoutingModule”
The Configure Route opens a Route Editor, Navigate to the “MagicRoutingModule” and expand it.
22. Click on the Add Route
Click on the Add Route button.
23. Provide the Route name in the Path field
Provide the Route name in the Path field.
24. Click “Select Program”
Click on the Select Program button.
25. Select the Route Program from the Route Module list
Select the Route Program from the Route Module list
26. Click “Save” to save the Route Module
Click “Save” to save the Route Module.
27. Click on the “Save Route” button
Click on the “Save Route” button to save the added route.
28. Close the Route Editor
Click on the Close button to Close the Route Editor.
29. Enter in Live Preview
Now we are all set to enter in Live Preview.
30. The Live Preview
Once you enter in Live Preview, The Live Preview will look like this. Here we see the Test Program is added to the Sidebar navigation of Full Menu Application Template. Click on the Test Program.
31. Test Program Live Preview
Here you can see the Test Program we created by following the previous lesson.
32. Click “Live Components”
Navigate to the “Live Components” section.
33. To get out of Live Preview Click “TestProgram”
To get out of Live Preview Click on the “TestProgram” from the Live components tree.
The guide covered adding components, designing routes, and saving changes in SmartUX.
By following the engaging instructions provided, users can efficiently navigate the application and enhance their training experience.
