How to use Subway Nav Creator Kit in Canvas apps – Power apps

Introduction:

• The Subway Nav control allows you to visualize the steps required for a given wizard. The Wizard is a component that guides users to complete predefined steps to achieve a setup or creation task.
• A control used to guide users through a process.

Steps to add Subway Nav Component

1. Go to Power Apps >> Select Solution >> Click New to add Canvas App >> Provide App name >> Click on Create

• Click on Insert button >> Get more component.  

• Navigate to Code tab >> Search subway Nav control or select subway nav from the list.

• Once Component is added, the user can see the component into a code component which is present in ‘Insert’.

• Now User can leverage component to the canvas app.

Properties of Subway Nav Component

1. Key property:
   1. Items: Bind with table.
   1. State: State of current Step.
2. Addition property:
   1. ItemLable: Lable of step.
   1. ItemKey : It should be unique key.
   1. ParentItemKey: Optional, ItemKey of the parent, used to render substep

Implementation:

1. Add component into your canvas app screen.

• Bind to Table.

ClearCollect(col_Modules,AddColumns(‘Master Deliverables’,”Checked”, false ));ClearCollect(col_SubNav,Table({ItemKey:1,ItemLabel:”Basic Information”,ItemState:”CurrentWithSubSteps”},{ItemKey:2,ItemLabel:”Basic Details”,ParentItemKey:1,ItemState:”Current”},{ItemKey:3,ItemLabel:”Questionnaire”,ParentItemKey:1,ItemState:”NotStarted”},{ItemKey:4,ItemLabel:”Area/Module”,ItemState:”NotStarted”},{ItemKey:5,ItemLabel:”Summary”,ItemState:”NotStarted”}))

[Put above code in On Start of Canvas App]

• On Change property will switch the steps and navigate to the next stage.

Switch(Self.Selected.ItemLabel,”Basic Details”,Set(var_BasicDetails, true );Set(var_Questionery, false );Set(var_AreaModule, false );Set(var_Summary, false ),”Questionnaire”,Set(var_BasicDetails, false );Set(var_Questionery, true );Set(var_AreaModule, false );Set(var_Summary, false ),”Area/Module”,Set(var_BasicDetails, false );Set(var_Questionery, false );Set(var_AreaModule, true );Set(var_Summary, false ),”Summary”,Set(var_BasicDetails, false );Set(var_Questionery, false );Set(var_AreaModule, false );Set(var_Summary, true ),””)