Developing a Walkthrough Component in PowerApps

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.

Control: 5 Point Star, Control Name: For 5_Point_Star, Width:100, Height: 100
X

Switch(
    varWalkthroughItem.ArrowPosition,
    "BottomLeft",//Check ArrowPosition 
    SubContainer.X,//Keep X Position 
    "TopLeft",
    SubContainer.X,
    "Left",
    SubContainer.X-20,
    "BottomRight",
    SubContainer.X + SubContainer.Width - Self.Width - 5,
    "TopRight",
    SubContainer.X + SubContainer.Width - Self.Width - 5,
    "Right",
    SubContainer.X+SubContainer.Width-Self.Width+20
)

Switch(
    varWalkthroughItem.ArrowPosition,
    "BottomLeft",
    SubContainer.Y+SubContainer.Height-Self.Height+20,
    "TopLeft",
    SubContainer.Y-15,
    "Left",
    SubContainer.Y,
    "BottomRight",
    SubContainer.Y+SubContainer.Height-Self.Height+20,
    "TopRight",
    SubContainer.Y-18,
    "Right",
    SubContainer.Y
)

Visible

varWalkthroughItem.ArrowPosition="Left"||varWalkthroughItem.ArrowPosition="Right"

Control: 6 Point Star, Control Name: For 6_Point_Star, Width:80, Height: '5_Point_Star'.Height
X
```
'5_Point_Star'.X
```
Y
```
'5_Point_Star'.Y
```
Visible
```
!'5_Point_Star'.Visible
```

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

Control: IconControl, Name: Icon_Close,Width: 18, Height:24
X

Parent.Width-Self.Width-10

Parent.Y-Self.Height+10

OnSelect

Set(varShowHideWalkthrough, false )

Control: LabelControl, Name: lbl_Heading, X: 10, Y: 5
Width
```
Parent.Width-Self.X*2-Close.Width
```
Auto Height: true
Text
```
varWalkthroughItem.Heading
```

Control: LabelControl, Name: lbl_Description
X

lbl_Heading.X

lbl_Heading.Y+lbl_Heading.Height

Width

lbl_Heading.Width

Auto Height: true
Text

varWalkthroughItem.Description

Control: ButtonControl, Name: btn_Next, Text: "Next"
X

Parent.Width-Self.Width-10

If(lbl_Description.Height>=54,lbl_Description.Y+lbl_Description.Height,105)

Width

If(Self.Visible,80,0)

Height: 25 OnSelect:

Set(varStepIndex, If(varStepIndex = CountRows(Walkthrough_Component.NavigationItems), 1, varStepIndex+1)); // Increment varStepIndex if it's not at the end, otherwise reset to the beginning
Set(varWalkthroughItem, LookUp(Walkthrough_Component.NavigationItems,Index = varStepIndex));// Set varWalkthroughItem to the record in Walkthrough_Component.NavigationItems at index varStepIndex

Visible

varStepIndex<>CountRows(Walkthrough_Component.NavigationItems)// If varStepIndex is at the last record, hide the Next Button

Control: ButtonControl, Name: btn_Previous, Width: 80, Height: 25, Text: "Previous"
X

btn_Next.X-Self.Width-10

btn_Next.Y

OnSelect

Set(varStepIndex, If(varStepIndex = 0, CountRows(Walkthrough_Component.NavigationItems), varStepIndex-1));// Decrease varStepIndex by 1 if it's not at the beginning, otherwise set it to the index of the last item
Set(varWalkthroughItem, LookUp(Walkthrough_Component.NavigationItems,Index = varStepIndex));// Set varWalkthroughItem to the record in Walkthrough_Component.NavigationItems at index varStepIndex

Visible

varStepIndex<>1

Control: LabelControl, Name: lbl_SerialNumbers, Width: 150, Height: 25
X

lbl_Heading.X

btn_Next.Y

Text

varStepIndexV2 & "/" & CountRows(Walkthrough_Component.NavigationItems)

Control: ContainerControl, Name: SubContainer, X: 20, Y: 20, Width: 450
Height
```
btn_Previous.Y+btn_Previous.Height+15
```

Control: ContainerControl, Name: MainContainer

varWalkthroughItem.X

varWalkthroughItem.Y

Width

SubContainer.X+SubContainer.Width+SubContainer.X

Height

SubContainer.Y+SubContainer.Height+20

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

ArrowPosition is case-sensitive, so add the correct text in that parameter in NavigationItems.
Make sure where you are adding the walkthrough, the X and Y Positions should be correct so the walkthrough will change position correctly.
Star shapes are used here because it is not possible to rotate a triangle shape in PowerApps. If you find another way, you can use it instead of the Star shapes, just ensure that we can configure the colors as required.
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.

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