Créer une page d’Assistant

18 minutes

Une page d’Assistant guide un utilisateur tout au long du processus d’installation. La page d’assistant est appelée depuis la configuration assistée. Pour créer une page d’Assistant, vous devez définir la propriété PageType sur NavigatePage.

Dans le client, la page NavigatePage ne comporte pas de barre d’action. Elle est conçue pour comporter des boutons en bas qui permettent aux utilisateurs de se déplacer d’une étape à l’autre en cliquant sur les boutons Précédent et Suivant, jusqu’à ce qu’ils terminent en cliquant sur le bouton Terminer.

L’objectif d’un Assistant est de permettre à un utilisateur de configurer des paramètres et de les stocker uniquement lorsque l’utilisateur clique sur le bouton Terminer. Étant donné que Business Central stocke automatiquement toutes les modifications à partir du moment où vous quittez un champ de saisie, vous devez définir la propriété SourceTableTemporary sur true. Ce paramètre garantit que les modifications sont uniquement stockées en mémoire et que, lorsque l’utilisateur clique sur le bouton Terminer, vous pouvez copier les modifications de la mémoire vers la base de données.

Créer la configuration assistée

Cette section décrit les tâches de base de la création d’une configuration assistée. Elle vous permet de comprendre la structure générale d’un guide de configuration assistée. Connaître ces informations vous permet de créer des guides de configuration assistée qui ressemblent à ceux fournis par Microsoft. Cette section comprend du code AL de base pour les différentes étapes impliquées dans la création d’un guide de configuration assistée.

L’exemple de code est fourni à titre de référence uniquement et votre implémentation peut en différer.

Créez une page pour la configuration assistée, par exemple :

page 50100 ToDoAssistedSetup
{
PageType = NavigatePage;
SourceTable = "To-do";
SourceTableTemporary = true;
Caption = 'Add a To-Do for the Team';
}

Définissez les propriétés suivantes :
- Propriété PageType : définissez-la sur NavigatePage.
- SourceTable : définissez le nom de la table qui stocke les données pour la configuration assistée.
- SourceTableTemporary : définissez cette option sur true. En effet, Business Central stocke automatiquement toutes les modifications apportées aux tables de base de données dès que les utilisateurs déplacent le focus vers un autre champ ou ferment la page. Le recours à une table temporaire permet aux utilisateurs de quitter le guide de configuration assistée à tout moment, sans enregistrer les modifications qu’ils ont apportées jusqu’à présent à la base de données. À la place, les modifications des données sont uniquement stockées en mémoire, jusqu’à ce que le code soit exécuté pour transférer les données vers la base de données.
- Caption : définissez le titre que vous souhaitez afficher en haut de chaque étape du guide de configuration assistée.
Ajoutez les étapes qui composent la configuration assistée.

Pour chaque étape que vous souhaitez dans le guide, ajoutez un contrôle group() dans le contrôle layout > area(Content) au niveau de la racine. Par exemple, le code suivant ajoute trois étapes :
```
layout
{
    area(Content)
    {
        group(Step1)
        {
            Caption = '';
            InstructionalText = '';
            Visibility = Step1Visible;
        }
        group(Step2)
        {
            Caption = '';
            InstructionalText = '';
            Visibility = Step2Visible;

            field(Field2; "Field2")
            {
                ApplicationArea = All;
                Caption = '';
            }
        }
        group(Step3)
        {
            Caption = '';
            InstructionalText = '';
            Visibility = Step3Visible;
        }
    }
}

var
    Step1Visible: Boolean;
    Step2Visible: Boolean;
    Step3Visible: Boolean;
    Step: Option Start,Fill,Finish;

local procedure EnableControls()
begin
    ResetControls();
    case Step of
        Step::Start:
            ShowStep1();
        Step::Fill:
            ShowStep2();
        Step::Finish:
            ShowStep3();
    end;
end;
```
Les contrôles group() individuels définissent le contenu à afficher pour l’étape, comme les champs de saisie de texte et de données. Par exemple, ajoutez du texte à l’aide des propriétés Caption et InstructionalText. Utilisez des contrôles field() pour les champs de la table source.

L’ordre des contrôles group() ne détermine pas nécessairement l’ordre des étapes dans la configuration assistée. Vous ajoutez du code AL pour définir la logique lorsque chaque étape s’affiche.

Vous pouvez inclure des contrôles group() dans les contrôles group() au niveau de la racine. Ces sous-groupes peuvent être utiles pour ajuster les champs de disposition d’une étape et ajouter des légendes et du texte d’instruction.

Comme une seule étape peut s’afficher à la fois, vous devez ajouter une logique pour contrôler le moment où chaque étape s’affiche. Pour contrôler la visibilité, procédez comme suit :
- Pour chaque étape, définissez une variable booléenne globale ou une condition de numéro d’étape et appliquez-lui la propriété Visible du groupe. L’exemple utilise les variables booléennes Step1Visible, Step2Visible et Step3Visible.
- Ensuite, vous devez ajouter du code AL pour modifier ces variables en fonction de l’étape sur laquelle l’utilisateur travaille.
- Définissez une variable d’option globale qui comporte une valeur pour chaque étape.
- Dans le code, cette variable vous permet de suivre l’étape active.
Les champs multilignes s’affichant dans une étape s’affichent sans fond gris. Ce comportement vous permet d’écrire une liste d’éléments ou tout texte mis en forme nécessitant de nouvelles lignes.
Ajoutez les boutons de navigation.

Les configurations assistées comportent généralement des boutons Précédent, Suivant et Terminer en bas de la page à droite. Ajoutez chaque bouton à l’aide d’un contrôle action().
```
actions
{
    area(Processing)
    {
        action(Back)
        {
            Enabled = BackEnable;
            InFooterBar = true;
            Image = PreviousRecord;

            trigger OnAction()
            begin
                NextStep(true);
            end;
        }
        action(Next)
        {
            Enabled = NextEnable;
            InFooterBar = true;
            Image = NextRecord;

            trigger OnAction()
            begin
                NextStep(false);
            end;
        }
        action(Finish)
        {
            Enabled = FinishEnable;
            InFooterBar = true;
            Image = Approve;

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

var
    BackEnable: Boolean;
    NextEnable: Boolean;
    FinishEnable: Boolean;

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

local procedure Finished()
begin
    StoreRecordVar();
    CurrPage.Close();
end;
```
- Définissez la propriété InFooterBar de chacun sur true.
- Si la propriété n’est pas définie ou est définie sur false, les actions ne s’affichent pas.
- Comme pour la propriété Visible sur les groupes, la propriété Enabled vous permet de contrôler quand les boutons sont actifs aux différentes étapes. Par exemple, Précédent n’est pas actif à la première étape et Suivant ne l’est pas à la dernière.
- Comme pour les groupes, définissez des variables booléennes globales pour chaque action, puis appliquez la variable à la propriété Enabled de l’action. Les variables globales sont ensuite contrôlées en code AL.
- Pour styliser les boutons afin qu’ils correspondent à d’autres configurations assistées dans l’application de base Microsoft, définissez la propriété Image sur PreviousRecord pour le bouton Précédent, NextRecord pour le bouton Suivant et Approve pour le bouton Terminer.

Transférez les données de la table temporaire vers la table de base de données. Par exemple :

var
     ToDoRec: Record "To-do";

 local procedure StoreRecordVar();
 begin
     ToDoRec.TransferFields(Rec, true);
     ToDoRec.Insert();
 end;

Dans cet exemple, la procédure StoreRecordVar est appelée à partir de la procédure Finished utilisée sur les actions.

Ajouter des bannières standard

Vous avez peut-être remarqué que la plupart des guides de configuration assistée dans l’application de base et dans cet article incluent deux bannières différentes sous la légende de l’étape : un engrenage et une coche. Ces bannières sont basées sur les fichiers image suivants dans la table Media Repository :

AssistedSetup-NoText-400px.png pour l’engrenage
AssistedSetupDone-NoText-400px.png pour la coche

Vous pouvez réutiliser ces images dans vos guides de configuration assistée personnalisés pour fournir un aspect homogène.

Pour afficher les bannières, ajoutez deux contrôles group() au niveau de la racine dans le contrôle area(Content), comme pour les étapes. Affichez les images d’engrenage et de coche à l’aide de contrôles field(). Les extraits de code suivants illustrent une façon d’ajouter les bannières :

...
    layout
    {
        area(Content)
        {
            ...
            group(StandardBanner)
            {
                Caption = '';
                Editable = false;
                Visible = TopBannerVisible and not FinishActionEnabled;
                field(MediaResourcesStandard; MediaResourcesStandard."Media Reference")
                {
                    ApplicationArea = All;
                    Editable = false;
                    ShowCaption = false;
                }
            }
            group(FinishedBanner)
            {
                Caption = '';
                Editable = false;
                Visible = TopBannerVisible and FinishActionEnabled;
                field(MediaResourcesDone; MediaResourcesDone."Media Reference")
                {
                    ApplicationArea = All;
                    Editable = false;
                    ShowCaption = false;
                }
            }
        }
    }
...
var
    ...
    MediaRepositoryDone: Record "Media Repository";
    MediaRepositoryStandard: Record "Media Repository";
    MediaResourcesDone: Record "Media Resources";
    MediaResourcesStandard: Record "Media Resources";

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

local procedure LoadTopBanners();
begin
    if MediaRepositoryStandard.Get('AssistedSetup-NoText-400px.png', Format(CurrentClientType())) and
        MediaRepositoryDone.Get('AssistedSetupDone-NoText-400px.png', Format(CurrentClientType()))
    then
        if MediaResourcesStandard.Get(MediaRepositoryStandard."Media Resources Ref") and
            MediaResourcesDone.Get(MediaRepositoryDone."Media Resources Ref")
    then
            TopBannerVisible := MediaResourcesDone."Media Reference".HasValue();
end;

Commentaires

Cette page a-t-elle été utile ?