How to Navigate from One Screen to Another using Table Property using Component

How to Navigate from one screen to another screen using table property of component.

Scenario

I have three screens: Home Page, Item Consumption Screen, and Purchase Requisition. I am creating a component using the table property that allows navigation between screens and can also be reused if I add more screens to my app.

High level resolution steps

1. Create a Component and add Custom property to it.

2. Insert Gallery control in Component and modify its properties

3. Add Controls in Gallery and Modify Their properties

Detailed resolution steps

1. Create a Component and add Custom property to it.

Step 1: I have created a Component and Named it as “Navigation Component”, Adjust the Height and Width of the component, here I have taken height same as screen and width as 150

Step 2: Add New Property in the Component by clicking the “+New Custom Property”, a dialogue box will get open like this

There Modify the properties as:

1. Display Name: Navigation

2. Name: Navigation (Name of the Property By default it will come based on Display Name)

3. Description: This Property is for the Navigation Menu

4. Property Type: Select “Input”

5. Data type: Select “Table

Click On Create and new Custom Property is get added

Step 3: Now New Property is get added, when you can check the properties of the Component you can see the property that you just created, that is “Navigation”

Click on the Navigation Property that you just created, when you click on the formula bar by default you can see the Code as shown in the below figure

Step 4: In that Navigation Property Modify the by default code as shown below

Table( 
    { 
        ScreenName: "Home", 
        NavigatetoScreen: Home_Screen 
    },{ 
        ScreenName: "Item consumption", 
        NavigatetoScreen: Item_consumption_Screen 
    },{ 
        ScreenName: "Purchase requisition", 
        NavigatetoScreen: Purchase_Requisition_Screen 
    } 
)

Explanation of Code:

Here Table is the Datatype we selected:

1. ScreenName: The display name of the screen (e.g., “Home”).

2. NavigatetoScreen: The actual screen object to navigate to (e.g., Home_Screen).

The component can display these names and navigate to the respective screens, making it reusable and easy to extend for more screens.

Step 5: Add Color to Fill property of the component ,i have added Black (Hex#000000)

2. Insert Gallery control in Component and modify its properties:

Step 1: Now Add Vertical Gallery (Change its layout as Blank) to the Component and Adjust its properties as shown Below

1. Height: Parent.Height

2. Width: Parent.Width

3. X: 0

4. Y: 0

5. Show Scrollbar: false

6. Template Size: 90

7. Template fill: (Add the b

Explanation of Code: This formula changes an item’s color based on whether its NavigatetoScreen matches the currently active screen. If it matches, it uses RGBA(25,33,43,1) (highlight color), otherwise, it uses RGBA(10,12,16,1) (default color)

8. Items: We have to give the component name. Property name

9. On Select: We have to give Navigate “ThisItem” . object that we have given for Screen navigation.

3. Add Controls in Gallery and Modify Their properties:

Step 1: Inside the Gallery Add Rectangle, Label, Button

Step 2: Now Select the Rectangle_Gallery and modify its properties as shown below with the formula

1. Fill:

2. Height:

3. Visible:

Explanation of the Code: The rectangle will visible if screen navigation object is equal to active screen, otherwise it will be invisible

4. Width: 4

5. X: Parent.X

6. Y: Parent.Y

Step 3: Now Select the Label_Gallery and Modify its Properties as Shown below with the formula

1. Color:

2. Height: 90 (Same as Gallery Template Size)

3. Width: Parent.width

4. Text: This Item. Screenname is the display name that we have given in the Navigation property while creating

Step 4: Now Select the Btn_Gallery and Modify its properties as shown below with the formula

1. Fill:

2. Height: 90 (Same as Gallery Template Size)

3. Text: Empty(Dont Give any Text)

4. Width: Parent.Width

After Modifying all properties of Control, the component will look like this:

Output

Now Insert the component to the Home Screen, and it will be look like below figure

Here the Home button is Highlighted and Rectangle_Gallery is visible because navigatetoscreen object is equal to the active screen.

In this way we can create component and if we add more screens into the app, we can modify the component navigation property and reuse this component for further

AmsuMadhuDeepika KiranKumar