Exercise - Build a wizard page with Assisted Setup

Completed

Scenario

You are a developer working for CRONUS International Ltd. You have been asked to create a wizard to set up basic company information by using the Assisted Setup feature.

Tasks

  • Create a new extension.

  • Create a Cue table.

  • Create an activity page.

  • Create a Role Center page and add the activity page to the Role Center.

  • Create a query and use it to add data in a field in the Cue table.

Steps

  1. Start Visual Studio Code.

  2. Select View > Extensions (Ctrl+Shift+X).

  3. Enter AL Language in the Search Extensions in the Marketplace search box.

  4. Select the green Install button.

  5. Create a new AL extension project. Select View > Command Palette... (Ctrl+Shift+P).

  6. Enter AL: Go! in the search box and select the command from the list.

  7. Accept the suggested path (or you can enter another path).

  8. Select the 4.0 Business Central 2019 release wave 2 target platform.

  9. Select Microsoft cloud sandbox as the development endpoint.

  10. Download the application symbols. Select View > Command Palette... (Ctrl+Shift+P).

  11. Enter AL: Download symbols in the search box and select the command from the list.

  12. If requested, provide your organizational credentials (Microsoft 365 account/Azure Active Directory account).

  13. Open the app.json file and change the Name to Wizard Example. Change the publisher to Cronus International Ltd.

  14. Remove the HelloWorld.al file.

  15. Select File > New File and then save the file by selecting File > Save. Name the file CompanyInfoWizard.Page.al.

  16. Create a new page in this file by using code snippets. Enter tpage and then press the Tab key.

  17. Change the ID to 50135 and the name to Company Info Wizard.

  18. Set the SourceTable property to Company Information and set the Caption property to Company Info Wizard.

  19. Set the PageType property to NavigatePage. Remove the UsageCategory and ApplicationArea properties.

  20. Verify that a content area is created in the layout section. If not, create an area called content.

  21. Add three different groups in the Content area. Each group represents a step. Name the groups Step 1, Step 2, and Step 3. Set the appropriate captions for each of the groups.

  22. Create a global variable CurrentStep of type Integer.

  23. Create a new subgroup with the name Company Name inside of the Step 1 group and set the caption to Company Name. Add the Name field to the subgroup.

  24. Create a new subgroup with the name Email Address inside of the Step 2 group and set the caption to Email Address. Add the Email field to the subgroup.

  25. Create a new subgroup with the name All Done inside of the Step 3 group and set the caption to All Done!

  26. Add three navigation actions in the Processing area. Add an action called ActionBack, add an action called ActionNext, and then add an action called ActionFinish to the actions section.

  27. Set the InFooterBar property to true for the three actions.

  28. Create three global Boolean variables:

    • ActionBackAllowed

    • ActionNextAllowed

    • ActionFinishAllowed

  29. Set the Enabled property for each action to the appropriate global Boolean variable.

  30. Set the Image property on each action. For the Back action, use PreviousRecord, for the Next action, use NextRecord, and for the Finish action, use Approve.

  31. Create a function called SetControls and a function called TakeStep. Add the following code:

    procedure SetControls()
    begin
        ActionBackAllowed := CurrentStep > 1;
        ActionNextAllowed := CurrentStep < 3;
        ActionFinishAllowed := CurrentStep = 3;
    end;
    
    procedure TakeStep(Step: Integer)
    begin
        CurrentStep += Step;
        SetControls();
    end;
    
  32. In the OnOpenTrigger, set the value of CurrentStep to 1 and call the function SetControls.

  33. Add code to the actions to navigate:

    • Add an OnAction trigger to the ActionBack action. Add the code "TakeStep(-1)"

    • Add an OnAction trigger to the ActionNext action. Add the code "TakeStep(1)"

    • Add an OnAction trigger to the ActionFinish action.

  34. In the OnAction trigger of the ActionFinish action, add the following code:

    trigger OnAction()
    var
        AssistedSetup: Codeunit "Assisted Setup";
        CurrentModuleInfo: ModuleInfo;
    begin
        NavApp.GetCurrentModuleInfo(CurrentModuleInfo);
        AssistedSetup.Complete(CurrentModuleInfo.Id, 
                               Page::"Company Info Wizard");
    
        CurrPage.Close();
    end;
    
  35. Select File > New File and then save this file by selecting File > Save. Use the file name CompanyInfoAssistedSetup.CodeUnit.al.

  36. Create a new codeunit in this file by using code snippets. Enter tcodeunit and then press the Tab key.

  37. Change the ID to 50135 and the name to Company Info Assisted Setup.

  38. Create an event subscriber for the OnRegister function of the Assisted Setup codeunit.

  39. Add the following code:

    [EventSubscriber(ObjectType::Codeunit, Codeunit::"Assisted Setup", 
                     'OnRegister', '', true, true)]
    local procedure OnRegisterAssistedSetup()
    var
        AssistedSetup: Codeunit "Assisted Setup";
        CurrentModuleInfo: ModuleInfo;
    begin
        NavApp.GetCurrentModuleInfo(CurrentModuleInfo);
        if not AssistedSetup.Exists(CurrentModuleInfo.Id,  
                                    Page::"Company Info Wizard") then
            AssistedSetup.Add(CurrentModuleInfo.Id, 
                              Page::"Company Info Wizard", 
                              'Set up your company', 
                              "Assisted Setup Group"::GettingStarted);
    end;
    
  40. Publish your extension to the sandbox. Select View > Command Palette... (Ctrl+Shift+P).

  41. Enter AL: Publish in the search box (or press the F5 shortcut key) and then select the command from the list.

  42. You can test the Assisted Setup by searching for Assisted setup in the search box.