Creating a Wizard Page in AL for Business Central

In today’s post we will learn to create Wizards.

First Let us understand why we use wizards.

We can define wizard as series of user input screens or steps.
You can show/hide options for each step based on previous step selection that is relevant to complete any setup process.
User can navigate between steps with Next and Previous buttons.
In Web Client it shows buttons with specific styling.
We define Page with type NavigatePage.
Plays crucial part in Assisted Setup.

Without going into much theory let’s start creating a Wizard Page.

Step: 1 –

Create a New Page of type NavigatePage.

Create *.al file in your VSCode Project, you can use tpage snippet.

Set the Unique available ID in your database and Extension.

Give meaningful name to your file.

Set the PageType property to NavigatePage.

Set SourceTable property to the base table in my case “Company Information”

Step: 2 –

Add a Group for each Step you wish for your Setup, in my case I am using 3 Step.

Create Global variable CurrentStep of type Integer, this will help making decision on which step you are currently and act accordingly.

On each Group, Set the Visible property with an expression:

Visible – CurrentStep = 1;

And so on.

Step: 3 –

Create a sub-group inside the steps and set the suitable Caption.

Set InstructionalText to provide guidance

Add fields to the sub-group

And similarly to other groups.

Step: 4 –

Add three actions to facilitate navigation.

For each action, set the InFooterBar property to true.

When this is used in combination of PageType NavigatePage, it will show action as navigation buttons.

Step: 5 –

Create 3 global variables as Boolean, say ActionBackAllowed, ActionNextAllowed, ActionFinishAllowed

On each action, set the Enabled property to the appropriate global variable.

Set the Image property of your actions:

Back : PreviousRecord

Next : NextRecord

Finish : Approve

Step: 6 –

Create function/procedure to SetControls, TakeStep and Set starting values in the OnOpenPage trigger.

Step: 7 –

Now we will add OnAction trigger to the navigation actions.

Step: 8 –

Now we will create 2 global record variables for Media Repository table and for the Media Resources table.

Step: 9 –

Now add 2 new groups above Step 1 Group.

Add field to each group.

Set source expression to the Image field of the Media Resources variables.

Set ShowCaption property to false.

You see error for TopBannerVisible let’s define a global variable of type Boolean.

Step: 10 –

Now we will Add a function to Load the top banner images.

Call this function from OnInit trigger.

We are done with our base design of Wizard.

Now time to deploy and Test.

For testing purpose let’s hook it to some page and see the result.

Although it is not correct place but for testing purpose let’s add to our existing page created in earlier post “Loadout List” page and test the output.