Introduction

The walkthrough component will guide new users to understand the app's functionality and help existing users discover new features efficiently.

Step 1. In PowerApps, add a new component. Then, set the component's width to App. Width and height to App.Height. Within this component, add a MainContainer (Container), and within the MainContainer, add a SubContainer (Container). Finally, add two Star shapes, one 5-point Star and one 6-point Star.

MainContainer

Shapes

Step 2. Create a custom property named NavigationItems with a Table data type. Refer to the image below.

Navigation Items

Step 3. Create a table and add the parameters as below. In the NavigationItems, add the following code, where you can set the parameters as per your requirements.

/*
The ArrowPosition property is case-sensitive.
Use "TopLeft" for the top-left arrow.
Use "TopRight" for the top-right arrow.
Use "BottomLeft" for the bottom-left arrow.
Use "BottomRight" for the bottom-right arrow.
Use "Left" for the left arrow.
Use "Right" for the right arrow.
*/
Table(
    {
        Heading: "Dashboard",
        Description: "On the dashboard page, managers can view all employees' leave requests for the current month. They can also filter the requests by employee. ", 
        X: Container2_4.X+Container2_4.Width-20,//You can set the X position based on your control where you need to add.
        Y: Container2_4.Y+50,//You can set the Y position based on your control where you need to add.
        ArrowPosition: "Left",//In which side you need the arrow, add the ArrowPosition text based on that side.
        Index: 1
    },
    {
        Heading: "My Dashboard",
        Description: "On my dashboard page, the currently logged-in employee can view pending, approved, and rejected leave requests. They can also view upcoming holidays.",
        X: Container2_4.X+Container2_4.Width-20,
        Y: Container2_4.Y+150,
        ArrowPosition: "Left",
        Index: 2
    },
    {
        Heading: "Team Overview",
        Description: "On the Team Overview page, users can view the team leave summary, leave requests, team calendar, and export leave functionality.",
        X: 95,
        Y: 200,
        ArrowPosition: "Left",
        Index: 3
    },
    {
        Heading: "Employees",
        Description: "On employees page employees can request time off, view their remaining leave balances, and see their request status. Managers can approve or reject requests and view team availability. The app can also show company holidays and allow for easy scheduling and tracking of time off.",
        X: 95,
        Y: 280,
        ArrowPosition: "Left",
        Index: 4
    },
    {
        Heading: "Add Employee",
        Description: "Using the 'Add Employee' button, HR or managers can add employees to the system.",
        X: Button2_3.X-241,
        Y: 115,
        ArrowPosition: "TopRight",
        Index: 5
    },
        {
        Heading: "Search Employee",
        Description: "You can filter employees by adding their employee ID here.",
        X: TextInput1.X+TextInput1.Width,
        Y: 110,
        ArrowPosition: "TopLeft",
        Index: 6
    }
)

Step 4. Set the X and Y positions and visible properties of the stars below.

Step 5. Add the controls to the sub-container and configure their properties. Also, configure the properties for the main container and sub-container as follows.

Subcontainer

Step 6. Once the Walkthrough component is created, add the following code to the OnReset property.

OnReset property

OnReset

Set(varStepIndex, 1);
Set(varWalkthroughItem, LookUp(Walkthrough_Component.NavigationItems,Index = varStepIndex));
Set(varShowHideWalkthrough, true);

Step 7. Now add this component to your required screen and reset the Walkthrough component's OnVisible property of that screen.

Visible property

OnVisible

Reset(Walkthrough_Component_V2_4)

Note

Conclusion

The walkthrough plays a crucial role in helping both new and existing users understand and explore an app's functionality efficiently. Using this article, you can easily develop the Walkthrough component in PowerApps.

PowerApps

Employees

Properties

Previous

Serch employees