Das Seitenobjekt „Customer Rewards Wizard“ erstellen

Abgeschlossen

Mit dem folgenden Code wird die Seite Assistent für Debitorenbelohnungen zugefügt, die es dem Benutzer ermöglicht, die Bedingungen für die Verwendung und Aktivierung der Erweiterung anzunehmen.

Die Seite besteht aus den folgenden Schritten:

  • Begrüßung – Der Begrüßungsschritt enthält ein Kontrollkästchen für die Nutzungsbedingungen, die aktiviert werden müssen.

  • Aktivierung – Der Aktivierungsschritt verfügt über ein Textfeld, in das der Aktivierungscode zur Validierung eingegeben werden muss. Ein gültiger Aktivierungscode für diese Beispielerweiterung ist ein beliebiger alphanumerischer Code mit 14 Zeichen.

  • Fertig stellen – Ein Schritt, mit dem die Verarbeitung auf der Seite abgeschlossen wird.

Mit einem Seitentyp „Navigieren“ können Sie einen Assistenten erstellen, der den Benutzer durch eine Reihe von Schritten zum Ausführen einer Aufgabe führt.

Das folgende Beispiel ist ein Codebeispiel, mit dem Sie die Seite Assistent für Debitorenbelohnungen erstellen können.

page 50100 "Customer Rewards Wizard"
{
    // Specifies that this page will be a navigate page. 
    PageType = NavigatePage;
    Caption = 'Customer Rewards assisted setup guide';

    layout
    {
        area(content)
        {
            group(MediaStandard)
            {
                Caption = '';
                Editable = false;
                Visible = TopBannerVisible;

                field("Media Reference"; MediaResourcesStandard."Media Reference")
                {
                    ApplicationArea = All;
                    Editable = false;
                    ShowCaption = false;
                }
            }

            group(FirstPage)
            {
                Caption = '';
                Visible = FirstPageVisible;

                group("Welcome")
                {
                    Caption = 'Welcome';
                    Visible = FirstPageVisible;

                    group(Introduction)
                    {
                        Caption = '';
                        InstructionalText = 'This Customer Rewards extension is a sample extension. It adds rewards tiers support for Customers.';
                        Visible = FirstPageVisible;

                        field(Spacer1; '')
                        {
                            ApplicationArea = All;
                            ShowCaption = false;
                            Editable = false;
                            MultiLine = true;
                        }
                    }

                    group("Terms")
                    {
                        Caption = 'Terms of Use';
                        Visible = FirstPageVisible;

                        group(Terms1)
                        {
                            Caption = '';
                            InstructionalText = 'By enabling the Customer Rewards extension...';
                            Visible = FirstPageVisible;
                        }
                    }

                    group(Terms2)
                    {
                        Caption = '';

                        field(EnableFeature; EnableCustomerRewards)
                        {
                            ApplicationArea = All;
                            MultiLine = true;
                            Editable = true;
                            Caption = 'I understand and accept these terms.';
                            ToolTip = 'Click to confirm: I understand and accept these terms.';

                            trigger OnValidate();
                            begin
                                ShowFirstPage();
                            end;
                        }
                    }
                }
            }

            group(SecondPage)
            {
                Caption = '';
                Visible = SecondPageVisible;

                group("Activation")
                {
                    Caption = 'Activation';
                    Visible = SecondPageVisible;

                    field(Spacer2; '')
                    {
                        ApplicationArea = All;
                        ShowCaption = false;
                        Editable = false;
                        MultiLine = true;
                    }

                    group(ActivationMessage)
                    {
                        Caption = '';
                        InstructionalText = 'Enter your 14 digit activation code to continue';
                        Visible = SecondPageVisible;

                        field(Activationcode; ActivationCode)
                        {
                            ApplicationArea = All;
                            ShowCaption = false;
                            Editable = true;
                        }
                    }
                }
            }

            group(FinalPage)
            {
                Caption = '';
                Visible = FinalPageVisible;

                group("ActivationDone")
                {
                    Caption = 'You''re done!';
                    Visible = FinalPageVisible;

                    group(DoneMessage)
                    {
                        Caption = '';
                        InstructionalText = 'Click Finish to set up your rewards level and start using Customer Rewards.';
                        Visible = FinalPageVisible;
                    }
                }
            }
        }
    }

    actions
    {
        area(Processing)
        {
            action(ActionBack)
            {
                ApplicationArea = All;
                Caption = 'Back';
                Enabled = BackEnabled;
                Visible = BackEnabled;
                Image = PreviousRecord;
                InFooterBar = true;

                trigger OnAction();
                begin
                    NextStep(true);
                end;
            }

            action(ActionNext)
            {
                ApplicationArea = All;
                Caption = 'Next';
                Enabled = NextEnabled;
                Visible = NextEnabled;
                Image = NextRecord;
                InFooterBar = true;

                trigger OnAction();
                begin
                    NextStep(false);
                end;
            }

            action(ActionActivate)
            {
                ApplicationArea = All;
                Caption = 'Activate';
                Enabled = ActivateEnabled;
                Visible = ActivateEnabled;
                Image = NextRecord;
                InFooterBar = true;

                trigger OnAction();
                var
                    CustomerRewardsExtMgt: Codeunit "Customer Rewards Ext Mgt";
                begin
                    if ActivationCode = '' then
                        Error('Activation code cannot be blank.');

                    if Text.StrLen(ActivationCode) <> 14 then
                        Error('Activation code must have 14 digits.');

                    if CustomerRewardsExtMgt.ActivateCustomerRewards(ActivationCode) then
                        NextStep(false)
                    else
                        Error('Activation failed. Please check the activation code you entered.');
                end;
            }

            action(ActionFinish)
            {
                ApplicationArea = All;
                Caption = 'Finish';
                Enabled = FinalPageVisible;
                Image = Approve;
                InFooterBar = true;

                trigger OnAction();
                begin
                    FinishAndEnableCustomerRewards();
                end;
            }
        }
    }

    trigger OnInit();
    begin
        LoadTopBanners();
    end;

    trigger OnOpenPage();
    begin
        Step := Step::First;
        EnableControls();
    end;

    local procedure EnableControls();
    begin
        ResetControls();

        case Step of
            Step::First:
                ShowFirstPage();

            Step::Second:
                ShowSecondPage();

            Step::Finish:
                ShowFinalPage();
        end;
    end;

    local procedure NextStep(Backwards: Boolean);
    begin
        if Backwards then
            Step := Step - 1
        ELSE
            Step := Step + 1;
        EnableControls();
    end;
    
    local procedure FinishAndEnableCustomerRewards();
    var
        CustomerRewardsExtMgt: Codeunit "Customer Rewards Ext Mgt";
        GuidedExperience: Codeunit "Guided Experience";
        Info: ModuleInfo;
    begin
        NavApp.GetCurrentModuleInfo(Info);
        GuidedExperience.CompleteAssistedSetup(ObjectType::Page,PAGE::"Customer Rewards Wizard");
        CurrPage.Close();
        CustomerRewardsExtMgt.OpenRewardsLevelPage();
    end;

    local procedure ShowFirstPage();
    begin
        FirstPageVisible := true;
        SecondPageVisible := false;
        FinishEnabled := false;
        BackEnabled := false;
        ActivateEnabled := false;
        NextEnabled := EnableCustomerRewards;
    end;

    local procedure ShowSecondPage();
    begin
        FirstPageVisible := false;
        SecondPageVisible := true;
        FinishEnabled := false;
        BackEnabled := true;
        NextEnabled := false;
        ActivateEnabled := true;
    end;

    local procedure ShowFinalPage();
    begin
        FinalPageVisible := true;
        BackEnabled := true;
        NextEnabled := false;
        ActivateEnabled := false;
    end;

    local procedure ResetControls();
    begin
        FinishEnabled := true;
        BackEnabled := true;
        NextEnabled := true;
        ActivateEnabled := true;
        FirstPageVisible := false;
        SecondPageVisible := false;
        FinalPageVisible := false;
    end;

    local procedure LoadTopBanners();
    begin
        if MediaRepositoryStandard.GET('AssistedSetup-NoText-400px.png', FORMAT(CURRENTCLIENTTYPE))
      then
            if MediaResourcesStandard.GET(MediaRepositoryStandard."Media Resources Ref")
        then
                TopBannerVisible := MediaResourcesStandard."Media Reference".HASVALUE;
    end;

    var
        MediaRepositoryStandard: Record "Media Repository";
        MediaResourcesStandard: Record "Media Resources";
        Step: Option First,Second,Finish;
        ActivationCode: Text;
        TopBannerVisible: Boolean;
        FirstPageVisible: Boolean;
        SecondPageVisible: Boolean;
        FinalPageVisible: Boolean;
        FinishEnabled: Boolean;
        BackEnabled: Boolean;
        NextEnabled: Boolean;
        ActivateEnabled: Boolean;
        EnableCustomerRewards: Boolean;
} 

Im folgenden Abschnitt wird erläutert, wie Sie normalerweise eine Assistentenseite für Business Central erstellen.

Sie können eine Assistentenseite in fünf Schritten erstellen:

  1. Erstellen Sie eine neue Seite.

  2. Fügen Sie Schritte hinzu.

  3. Fügen Sie Navigation hinzu.

  4. Fügen Sie Bildkopfzeilen hinzu.

  5. Testen Sie die Seite.

Schritt 1: Neue Seite erstellen

Erstellen Sie eine neue Datei in Ihrer Erweiterung in Visual Studio Code, und geben Sie ihr den Namen CustomerRewardsWizard.Page.al.

Fügen Sie der von Ihnen erstellten Seite den folgenden Code hinzu:

page 50100 Customer Rewards Wizard
{
    // Specifies that this page will be a navigate page. 
    PageType = NavigatePage;
    Caption = 'Customer Rewards assisted setup guide';
}     

Eine Assistentenseite verwendet den Seitentyp „Navigationsseite“.

Schritt 2: Schritte hinzufügen

Erstellen Sie das Framework für die verschiedenen Schritte im Assistenten. Fügen Sie der Seite, die vier Gruppen enthält, einen Layoutabschnitt hinzu, wie im folgenden Screenshot dargestellt.

Screenshot des Layoutbereichs der Seite

Die erste Gruppe enthält die Kopfzeilenbilder. Die Details dieses Schritts werden in einem späteren Schritt dieses Verfahrens erläutert.

Die zweite, dritte und letzte Gruppe werden wie folgt benannt:

  • Erste Seite

  • Zweite Seite

  • Letzte Seite

Sie können andere Namen verwenden, im Prinzip sollten Sie jedoch für jeden Schritt, der im Assistenten verfügbar sein soll, eine Gruppe erstellen. Es wird empfohlen, nicht zu viele Schritte zu verwenden. Drei oder vier Schritte sollten ausreichen.

Fügen Sie als Nächstes der Gruppe Erste Seite den folgenden Code hinzu.

Screenshot des Codes der Gruppe „Erste Seite“

Zum Festlegen der Sichtbarkeit dieser Gruppen wurden boolesche Variablen verwendet. Wenn der Benutzer später mithilfe der bereitgestellten Schaltflächen zum Assistenten wechselt, blenden Sie die entsprechenden Seiten oder Gruppen aus und ein.

Verwenden Sie den folgenden Code in der Gruppe Zweite Seite:

            group(SecondPage)
            {
                Caption = '';
                Visible = SecondPageVisible;

                group("Activation")
                {
                    Caption = 'Activation';
                    Visible = SecondPageVisible;

                    field(Spacer2; '')
                    {
                        ApplicationArea = All;
                        ShowCaption = false;
                        Editable = false;
                        MultiLine = true;
                    }

                    group(ActivationMessage)
                    {
                        Caption = '';
                        InstructionalText = 'Enter your 14 digit activation code to continue';
                        Visible = SecondPageVisible;

                        field(Activationcode; ActivationCode)
                        {
                            ApplicationArea = All;
                            ShowCaption = false;
                            Editable = true;
                        }
                    }
                }
            }

In dieser Gruppe ermöglichen Sie dem Benutzer die Eingabe des Aktivierungscodes für die Erweiterung „Debitorenbelohnungen“.

Verwenden Sie den folgenden Code in der Gruppe Endseite:

            group(FinalPage)
            {
                Caption = '';
                Visible = FinalPageVisible;

                group("ActivationDone")
                {
                    Caption = 'You are done!';
                    Visible = FinalPageVisible;

                    group(DoneMessage)
                    {
                        Caption = '';
                        InstructionalText = 'Click Finish to set up your rewards level and start using Customer Rewards.';
                        Visible = FinalPageVisible;
                    }
                }
            }

Mit der Eigenschaft InstructionalText wird der Text festgelegt, der für Anweisungen auf der Benutzeroberfläche verwendet wird. Der Standardwert ist eine leere Zeichenfolge. Dies bedeutet, dass keine Anweisungen bereitgestellt werden. Gemäß dem Benutzerunterstützungsmodell für Business Central wird erwartet, dass Apps Anweisungstexte auf Einrichtungsanleitungen und ähnliche Seiten anwenden.

Schritt 3: Navigation hinzufügen

Sie müssen die Aktionen Weiter, Zurück und Fertig stellen hinzufügen, damit die Assistentenseite wie ein Assistent angezeigt wird.

Alle Seiten enthalten Navigationssteuerelemente, die als Aktionen bezeichnet werden. In Business Central werden Aktionen oben auf jeder Seite im Menüband angezeigt. Der Abschnitt „Aktionen“ der Seite beschreibt, welche Aktionen der Benutzer auf einer Seite ausführen kann, und muss auf die für den Kunden notwendige Prozessunterstützung ausgelegt sein.

Mit dem folgenden Code können Sie der Assistentenseite den Abschnitt „Aktionen“ hinzufügen.

    actions
    {
        area(Processing)
        {
            action(ActionBack)
            {
                ApplicationArea = All;
                Caption = 'Back';
                Enabled = BackEnabled;
                Visible = BackEnabled;
                Image = PreviousRecord;
                InFooterBar = true;

                trigger OnAction();
                begin
                    NextStep(true);
                end;
            }

            action(ActionNext)
            {
                ApplicationArea = All;
                Caption = 'Next';
                Enabled = NextEnabled;
                Visible = NextEnabled;
                Image = NextRecord;
                InFooterBar = true;

                trigger OnAction();
                begin
                    NextStep(false);
                end;
            }

            action(ActionActivate)
            {
                ApplicationArea = All;
                Caption = 'Activate';
                Enabled = ActivateEnabled;
                Visible = ActivateEnabled;
                Image = NextRecord;
                InFooterBar = true;

                trigger OnAction();
                var
                    CustomerRewardsExtMgt: Codeunit "Customer Rewards Ext Mgt";
                begin
                    if ActivationCode = '' then
                        Error('Activation code cannot be blank.');

                    if Text.StrLen(ActivationCode) <> 14 then
                        Error('Activation code must have 14 digits.');

                    if CustomerRewardsExtMgt.ActivateCustomerRewards(ActivationCode) then
                        NextStep(false)
                    else
                        Error('Activation failed. Please check the activation code you entered.');
                end;
            }

            action(ActionFinish)
            {
                ApplicationArea = All;
                Caption = 'Finish';
                Enabled = FinalPageVisible;
                Image = Approve;
                InFooterBar = true;

                trigger OnAction();
                begin
                    FinishAndEnableCustomerRewards();
                end;
            }
        }
    } 

Die aktivierten und sichtbaren Eigenschaften dieser Aktionen werden ebenfalls auf boolesche Variablen festgelegt. Der Trigger OnAction für jede Aktion ruft die folgenden Funktionen auf:

  • NextStep(True)

  • NextStep(False)

  • FinishAndEnableCustomerRewards

Diese Funktionen oder Verfahren werden am unteren Rand des Seitenobjekts erstellt.

    local procedure NextStep(Backwards: Boolean);
    begin
        if Backwards then
            Step := Step - 1
        ELSE
            Step := Step + 1;
        EnableControls();
    end; 

    local procedure FinishAndEnableCustomerRewards();
    var
        CustomerRewardsExtMgt: Codeunit "Customer Rewards Ext Mgt";
        GuidedExperience: Codeunit "Guided Experience";
        Info: ModuleInfo;
    begin
        NavApp.GetCurrentModuleInfo(Info);
        GuidedExperience.CompleteAssistedSetup(ObjectType::Page,PAGE::"Customer Rewards Wizard");
        CurrPage.Close();
        CustomerRewardsExtMgt.OpenRewardsLevelPage();
    end;
    local procedure EnableControls();
    begin
        ResetControls();

        case Step of
            Step::First:
                ShowFirstPage();

            Step::Second:
                ShowSecondPage();

            Step::Finish:
                ShowFinalPage();
        end;
    end;

Als Nächstes fügen Sie den folgenden Code hinzu:

    trigger OnInit();
    begin
        LoadTopBanners();
    end;

    trigger OnOpenPage();
    begin
        Step := Step::First;
        EnableControls();
    end;

Durch das Hinzufügen dieses Codes wird sichergestellt, dass die Banner geladen werden und der erste Schritt sichtbar wird, wenn die Seite initialisiert und geöffnet wird.

Die folgenden Verfahren werden der Seite ebenfalls hinzugefügt.

    local procedure ShowFirstPage();
    begin
        FirstPageVisible := true;
        SecondPageVisible := false;
        FinishEnabled := false;
        BackEnabled := false;
        ActivateEnabled := false;
        NextEnabled := EnableCustomerRewards;
    end;

    local procedure ShowSecondPage();
    begin
        FirstPageVisible := false;
        SecondPageVisible := true;
        FinishEnabled := false;
        BackEnabled := true;
        NextEnabled := false;
        ActivateEnabled := true;
    end;

    local procedure ShowFinalPage();
    begin
        FinalPageVisible := true;
        BackEnabled := true;
        NextEnabled := false;
        ActivateEnabled := false;
    end;

    local procedure ResetControls();
    begin
        FinishEnabled := true;
        BackEnabled := true;
        NextEnabled := true;
        ActivateEnabled := true;
        FirstPageVisible := false;
        SecondPageVisible := false;
        FinalPageVisible := false;
    end;

Mit diesen Verfahren können Sie die booleschen Variablen festlegen. Diese bestimmen, welche Gruppen sichtbar sind und welche Aktionen aktiviert werden sollen, je nachdem, auf welcher Seite des Assistenten Sie sich gerade befinden.

Für diese Verfahren benötigen Sie außerdem den folgenden var-Abschnitt, in dem Sie einige globale Variablen deklarieren.

    var
        MediaRepositoryStandard: Record "Media Repository";
        MediaResourcesStandard: Record "Media Resources";
        Step: Option First,Second,Finish;
        ActivationCode: Text;
        TopBannerVisible: Boolean;
        FirstPageVisible: Boolean;
        SecondPageVisible: Boolean;
        FinalPageVisible: Boolean;
        FinishEnabled: Boolean;
        BackEnabled: Boolean;
        NextEnabled: Boolean;
        ActivateEnabled: Boolean;
        EnableCustomerRewards: Boolean;

Die Eigenschaft InFooterBar legt fest, ob eine Aktion im unteren Teil der Seite als „Beenden“-Aktion angezeigt werden soll. Auf einer Assistentenseite ist diese Eigenschaft auf true festgelegt, sodass die Aktionen unten auf der Assistentenseite angezeigt werden.

Schritt 4: Bildkopfzeilen hinzufügen

Die Bildkopfzeilen werden dem Layoutbereich der Seite als erste Gruppe hinzugefügt:

            group(MediaStandard)
            {
                Caption = '';
                Editable = false;
                Visible = TopBannerVisible;

                field("Media Reference"; MediaResourcesStandard."Media Reference")
                {
                    ApplicationArea = All;
                    Editable = false;
                    ShowCaption = false;
                }
            }

Beim Öffnen der Seite werden die Bilder mit der folgenden Funktion aus der Datenbank abgerufen.

    local procedure LoadTopBanners();
    begin
        if MediaRepositoryStandard.GET('AssistedSetup-NoText-400px.png', FORMAT(CURRENTCLIENTTYPE))
      then
            if MediaResourcesStandard.GET(MediaRepositoryStandard."Media Resources Ref")
        then
                TopBannerVisible := MediaResourcesStandard."Media Reference".HASVALUE;
    end;
    trigger OnInit();
    begin
        LoadTopBanners();
    end;

    trigger OnOpenPage();
    begin
        Step := Step::First;
        EnableControls();
    end; 

Schritt 5: Seite testen

Zum Testen der Assistentenseite können Sie Ihr Projekt mit der Tastenkombination STRG+F5 bereitstellen. Die meisten Assistentenseiten weisen dieselbe Struktur auf und unterscheiden sich nur durch die Anzahl der zu implementierenden Schritte und die verwendete Quelltabelle. Entsprechend wird empfohlen, dass Sie Ihre eigenen Codeausschnitte erstellen, um die Entwicklung zu beschleunigen. Nachdem Sie sich mit der AL-Sprache vertraut gemacht und einige Erfahrungen in der App-Entwicklung gesammelt haben, wäre es vorteilhaft, bewährte Methoden für die Entwicklung zu erstellen, die alle Ihre Entwickler implementieren können. Diese bewährten Methoden können in Form von benutzerdefinierten Codeausschnitten und Vorlagen vorliegen.