Exercice : écrire les détails de note de frais

Effectué

L’ajout de détails de dépense (ou des transactions individuelles s’ajoutant à la note de frais) est plus complexe, car vous écrivez plusieurs lignes différentes simultanément.

Au lieu de vous connecter directement à la source de données, comme vous le feriez avec Gal_ExpenseReports_AllExpenses, vous allez stocker les informations dans une collection. Une collection est un type spécial de variable stockant une table de données au lieu d’un seul enregistrement ou d’une seule valeur. Elle stocke cette table pour utilisation ultérieure dans l’application.

Pour implémenter cette fonctionnalité, procédez comme suit :

  1. Dans l’Arborescence, accédez à l’écran Scr_EditExpense, puis sélectionnez la propriété OnVisible.

  2. Ajoutez le code suivant au code existant :

    ; ClearCollect(
        ColExpenseDetails,
        Filter(
            'Expense Report Details',
            'Expense Report'.'Expense Report' = VarExpense.'Expense Report'
        )
    )
    

    ClearCollect() est une fonction permettant d’effacer des enregistrements précédents et de commencer une nouvelle collection. Cette fonction est importante, car elle vous permet d’éviter d’ajouter de nouveaux détails de dépense à partir d’autres notes de frais.

    ColExpenseDetails est le nom de votre collection. Comme pour les variables, il peut s’agir de tout nom de votre choix. Cependant, il est judicieux de disposer d’un modèle et de lui donner un nom dont vous vous souviendrez facilement.

    La dernière partie illustre l’élément recueilli : une version filtrée d’Expense Report Details. La logique de filtrage utilise le champ de recherche Note de frais dans la table des détails et étudie plus en détail l’identificateur global unique (GUID), également appelé Note de frais.

    Le champ de recherche Note de frais est comparé à la note de frais contenue dans la variable VarExpense, qui vous permet de découvrir le GUID ou le champ Note de frais. Le fait que le GUID porte le même nom que la table dans Dataverse peut prêter à confusion. En cas de doute, examinez vos colonnes dans Dataverse.

    Une fois terminé, votre code OnVisible devrait ressembler à l’image suivante :

    Capture d’écran du code OnVisible dans Power Apps, qui examine la valeur de la variable VarExpense.

    Cette collection que vous avez créée vous permet de renseigner votre galerie Gal_ExpenseDetails_EditExpense.

  3. Redéfinissez la propriété Items de Gal_ExpenseDetails_EditExpense sur ColExpenseDetails.

    Capture d’écran de Power Apps avec la galerie sélectionnée et la propriété Items définie.

    Bien que vous n’ayez pas encore de détails, vous pouvez en ajouter avec Icn_Add_EditExpense.

  4. Définissez la propriété OnSelect de l’icône Ajouter sur Collect(ColExpenseDetails, {}).

    Comme mentionné précédemment, Collect() permet d’effectuer un ajout à une collection existante, donc ce paramètre va ajouter une nouvelle ligne. Les accolades {} indiquent un élément vide.

    Capture d’écran de Power Apps avec l’icône Ajouter sélectionnée et la propriété OnSelect définie.

  5. Maintenez la touche Alt enfoncée ou ouvrez l’application en mode Lecture pour ajouter quelques lignes vides à votre collection.

    À présent, vous devez pointer vers les champs adéquats dans la galerie, comme vous l’avez fait dans la galerie de l’écran Toutes les dépenses.

  6. Commencez par Txt_Expense_EditExpense et définissez la propriété Default sur ThisItem.Expense.

  7. Définissez la propriété Items de Ddn_Category_EditExpense sur ["Meals","Lodging","Transportation","Other"].

    Comme mentionné dans l’unité précédente, les crochets [] indiquent une table. Cette approche vous permet de coder en dur les choix, un autre moyen de gérer les options dans une application canevas avec Dataverse comme base de données. Ce champ a été défini en tant que texte et non en tant que champ de choix, donc vous allez écrire la valeur sélectionnée dans la liste déroulante.

  8. Définissez la propriété Default de Ddn_Category_EditExpense sur ThisItem.Category.

  9. Définissez la propriété DefaultDate de Dte_TransactionDate_EditExpense sur ThisItem.'Transaction Date'.

  10. Définissez la propriété Default de Txt_Amount_EditExpense sur ThisItem.Amount.

  11. Définissez la propriété OnSelect de Icn_Trash_EditExpense sur Remove(ColExpenseDetails, ThisItem).

    La fonction Remove() permet de supprimer des éléments de collections ou sources de données. Veillez à indiquer l’enregistrement adéquat si vous utilisez Remove() avec une source de données.

    Après avoir terminé la logique de la galerie, prenez quelques minutes pour tester la fonctionnalité en ajoutant, supprimant et modifiant les lignes de votre galerie.

    Après avoir testé les mises à jour et fonctionnalités les plus récentes, vous devez effectuer quelques tâches supplémentaires avant de déployer cette application auprès de vos utilisateurs.

    Vous allez maintenant explorer et configurer le champ Total.

  12. Dans Lbl_Total_EditExpense, effectuez un ajout à la propriété Text de sorte qu’elle affiche ce qui suit : "Total: " & Text(Sum(Gal_ExpenseDetails_EditExpense.AllItems, Value(Txt_Amount_EditExpense.Text)), "$#,###.00").

    Capture d’écran de Power Apps avec le libellé Total sélectionné et la propriété Text définie.

    Notez comment Text() permet de nouveau de formater votre champ comme vous souhaitez qu’il s’affiche. La nouvelle fonction que vous utiliseriez est Sum().

    La fonction Sum() capture plusieurs nombres (ou une table de données) et un champ spécifique de cette table, puis additionne (ou ajoute) toutes les lignes du champ ensemble. Sum() accepte uniquement un nombre, donc vous devez envelopper le champ de texte dans la fonction Value(), qui permet de convertir un format texte en valeur numérique.

    Tant que votre collection n’est pas vide, une nouvelle valeur Total devrait s’afficher dans le libellé Lbl_Total_EditExpense. Lorsque vous ajoutez, modifiez ou supprimez des éléments de la collection, la valeur Total est recalculée en temps réel.

    Votre tâche suivante consiste à écrire dans la source de données. Vous pouvez commencer par votre bouton Enregistrer en tant que brouillon.

  13. Dans le bouton Btn_SaveAsDraft_EditExpense, ajoutez le code suivant à la propriété OnSelect (après le code existant) :

    ; RemoveIf(
        'Expense Report Details',
        'Expense Report'.'Expense Report' = VarExpense.'Expense Report'
    );
    ForAll(
        Gal_ExpenseDetails_EditExpense.AllItems,
        Patch(
            'Expense Report Details',
            Defaults('Expense Report Details'),
            {
                Expense: Txt_Expense_EditExpense.Text,
                Category: Ddn_Category_EditExpense.Selected.Value,
                'Transaction Date': Dte_TransactionDate_EditExpense.SelectedDate,
                Amount: Value(Txt_Amount_EditExpense.Text),
                'Expense Report': LookUp(
                    'Expense Reports',
                    'Expense Report' = VarExpense.'Expense Report'
                )
            }
        )
    )
    

Les captures d’écran suivantes illustrent l’intégralité du code de la barre de la formule. Prenez le temps d’examiner et de vérifier que votre code correspond.

Capture d’écran de Power Apps illustrant la partie Set Patch de la formule.

Capture d’écran de Power Apps illustrant les parties Remove If et For All de la formule.

La nouvelle fonction RemoveIf() est similaire à la fonction Remove(), sauf qu’elle supprime tous les enregistrements remplissant une condition au lieu d’un seul enregistrement.

Veillez à indiquer une condition ou vous risquez de supprimer involontairement tous les enregistrements d’une table. Dans ce scénario, vous supprimez et recréez tous les détails de dépense, donc vous n’avez pas besoin d’ajouter une logique distinguant les lignes modifiées des nouvelles. Vous allez peut-être noter que cette condition est similaire au filtre vous ayant permis de créer la collection des détails de dépense.

La fonction ForAll() parcourt une table de données, dans ce cas Gal_ExpenseDetails_EditExpense.AllItems, puis exécute le code sur chaque ligne de la table. Le code exécuté pour cette table est l’instruction Patch().

L’exemple suivant illustre l’instruction Patch() isolée du reste du code :

Patch(
        'Expense Report Details',
        Defaults('Expense Report Details'),
        {
            Expense: Txt_Expense_EditExpense.Text,
            Category: Ddn_Category_EditExpense.Selected.Value,
            'Transaction Date': Dte_TransactionDate_EditExpense.SelectedDate,
            Amount: Value(Txt_Amount_EditExpense.Text),
            'Expense Report': LookUp(
                'Expense Reports',
                'Expense Report' = VarExpense.'Expense Report'
            )
        }
    )

La fonction Patch() écrit directement dans une source de données. Par conséquent, la première entité à définir est la source de données que vous souhaitez modifier, dans ce cas Expense Report Details.

La ligne suivante définit l’enregistrement spécifique dans la source de données que vous modifiez. Si vous créez une ligne, ce que vous faites dans cet exercice, vous allez utiliser la fonction Defaults() et le nom de la source de données.

Tout élément entre accolades {} indique les champs que vous modifiez et ce que vous y écrivez. L’exemple suivant montre que le champ en cours de modification est Dépense et que vous écrivez Txt_Expense_EditExpense.Text, à savoir le texte de l’entrée de texte nommée Txt_Expense_EditExpense.

Expense: Txt_Expense_EditExpense.Text

Le scénario est le même sur les trois lignes suivantes, avec des modifications mineures en fonction du contrôle référencé. Sur la ligne Quantité, le texte est enveloppé dans une fonction Value() convertissant le texte en nombre pour Dataverse.

Le dernier champ en cours de modification est Note de frais. Il s’agit d’un champ de recherche permettant de gérer la relation entre les tables Expense Report et Expense Report Details. Comme pour la table Utilisateurs, vous devez trouver l’enregistrement adéquat dans la table parente (Expense Reports). Pour accomplir cette tâche, utilisez la fonction LookUp().

Capture d’écran de Power Apps illustrant l’intégralité de la formule du bouton Enregistrer en tant que brouillon.

Maintenant que nous avons créé la possibilité d’enregistrer en tant que brouillon, nous allons travailler sur notre bouton Envoyer dans l’unité suivante.