Test Program to elaborate Route and Build Sidebar Menu in Magic xpa

1116 views

This guide will walk you through a series of interactions within Magic xpa and SmartUX Studio. From creating a new program and adding it as a component in SmartUX. This also contains Adding Route and Component to SmartUX in the Sidebar navigation. Shows required modification in Start Program in Magic xpa. Follow the engaging instructions to navigate effectively.

1. Create a Test Program

Create a Test Program.

2. Change Task type to Web Client

Open the created Test Program and Change the Task type to Web Client. Now switch to the Interface tab.

3. Provide a Route Name

In the Interface tab Route section, provide a route name for the created Web Client task and click OK.

4. Add a few variables

Now create a few variables to add controls on the Magic xpa form.

5. Open the Forms tab

Switch to the Forms tab and open the Test Program form to add controls to the form.

6. Drag and drop controls/variables on the Magic xpa form

Drag and drop the variables or controls on the Magic xpa form. Press escape, save the changes and move to the Program repository.

7. Open the Start Program

To add the the created Web Client Task in the route we have the Start Program which contains a route event for programs to call.

8. Add Call Program for Test Program

In Start Program switch to Logic Tab. – In Logic Tab, expand Event Route, Park on the Call Program, Line 6. – Press F4 to add a new entry.

Select Call Program on the new entry and select the Test Program.
After adding a call to the Test Program, in the property sheet you will see the Route name for the Test Program which was provided earlier.
Now Switch to the BuildMenuData Subtask.

9. Switch to BuildMenuData batch Sub Task

Now Switch to BuildMenuData batch Sub Task.
Goto Data view tab.
Park on the first virtual variable and press F4 to create a new entry.
Provide a name in a similar pattern as the first variable which is M-TestProgram and provide a picture.

This BuildMenuData Sub task is created in such a way that it will automatically add a Menu entry to the Sidebar navigation with hassle-free steps.

10. New Virtual Variable M-TestProgram

Goto “Init” of that variable and double click or press F5 to open the expression editor.

11. Provide initial value as an expression to created M-TestProgram

Now park on Line 2 and Press F4 to create a new line. Add an expression in a similar pattern but with Test program values as shown on the screen. The expression contains:

The “n” is for the Name you wish to display in the Sidebar navigation.
The “u” is for the Route Path of the program you wish to add in the Sidebar navigation.
The “i” is an icon, it is optional. Now Select the expression.

Save the changes and move out to the Program Repository.

12. Adding the Component in SmartUX Studio

Now we are set to open the SmartUX studio. Here are the step-by-step instructions:

You can open SmartUX Studio from the Web Menu and click on Open in SmartUX Studio. OR
Click on the SmartUX studio icon. OR
You can use a keyboard shortcut CTRL+Shift+X.

The guide covered various tasks and comprehensive steps to navigating Magic xpa. Also shown how to create a test program in Magic xpa. Please continue to Lesson 4 to understand the required changes on the SmartUX side.