Afficher les icônes personnalisées avec des valeurs dans les vues de listes

Les administrateurs et les personnalisateurs de l’environnement Power Apps peuvent ajouter des graphiques à une vue et établir la logique utilisée pour sélectionner un graphique basé sur la valeurs de la colonne à l’aide de Javascript. La fonctionnalité vous permet de personnaliser les vues de listes comportant les icônes avec du texte ou des valeurs numériques.

Cet exemple affiche des icônes personnalisées dans une vue de la table d’opportunités, disponible avec certaines applications, telles que Dynamics 365 Sales. Vous pouvez afficher des icônes personnalisées dans des vues avec d’autres tables standard, telles que la table des comptes ou des contacts, ainsi que des tables personnalisées.

Les icônes personnalisées dans les vues de liste peuvent s’afficher dans Unified Interface, le client web hérité, l’application mobile et App for Outlook.

Ajouter des graphiques personnalisés et JavaScript en tant que ressources Web

1. Créer les nouveaux fichiers graphiques requis pour votre personnalisation. Nous vous recommandons une taille d’icône de 16 x 16 pixels (les images plus grandes seront réduites).

2. Entrez une ou plusieurs fonctions JavaScript qui établissent les icônes à afficher selon les valeurs (généralement vous aurez besoin d’une fonction pour chaque colonne que vous souhaitez personnaliser.) Chaque fonction doit accepter un objet de données de ligne et un code de langue (LCID) comme entré et renvoyer un tableau contenant un nom d’image et du texte d’info-bulle. Pour obtenir un exemple la fonction, voir Exemple de fonction JavaScript, plus loin dans cet article.

3. Connectez-vous à votre environnement en tant qu’administrateur et ouvrez l’explorateur de solutions.

4. La fenêtre contextuelle Solution par défaut s’ouvre. Accédez à Composants > Ressources Web ici.

5. Ensuite, vous téléchargerez vos graphiques personnalisés, un par un, en tant que ressources Web. Sélectionnez le bouton Nouveau de la barre d’outils pour créer une ressource Web. Une autre fenêtre contextuelle s’ouvre pour vous aider à créer la ressource. Procédez comme suit :

   1. Donnez à la nouvelle ressource un Nom explicite. Il s’agit du nom que vous souhaitez utiliser pour faire référence à chaque graphique de votre code JavaScript.

   2. Définissez le Type sur le format graphique dans lequel vous avez enregistré votre fichier graphique (PNG, JPEG ou GIF).

   3. Sélectionnez Choisir le fichier pour ouvrir une fenêtre de l’explorateur de fichiers. Utilisez-le pour rechercher et sélectionner le fichier graphique.

   4. Ajoutez Nom complet et/ou Description si vous souhaitez.

   5. Sélectionnez Enregistrer et fermez ensuite la fenêtre Ressource Web.

6. Répétez l’étape précédente pour chaque fichier graphique dont vous disposez.

7. Ensuite, vous ajouterez votre JavaScript en tant que ressource Web finale. Sélectionnez Nouveau sur la barre d’outils pour créer une ressource Web. Une autre fenêtre contextuelle s’ouvre pour vous aider à créer la ressource. Procédez comme suit :

   1. Donnez à la nouvelle ressource un Nom explicite.

   2. Définissez le Type sur Script (JScript).

   3. Sélectionnez Éditeur de texte (en regard du paramètre Type ) pour ouvrir une fenêtre d’éditeur de texte. Collez votre code JavaScript ici et sélectionnez OK pour l’enregistrer.

   4. Ajoutez Nom complet et/ou Description si vous souhaitez.

   5. Sélectionnez Enregistrer et fermez ensuite la fenêtre Ressource Web.

8. Avec la fenêtre contextuelle Solution par défaut toujours ouverte, développez l’arborescence Composants > Tables et recherchez la table que vous souhaitez personnaliser.

9. Développez votre table et sélectionnez son icône Vues.

10. Une liste des vues de votre table sélectionnée est à présent affichée. Sélectionnez une vue dans la liste. Puis ouvrez la liste déroulante Autres actions dans la barre d’outils et sélectionnez Modifier.

11. Une fenêtre contextuelle s’ouvre avec des contrôles pour modifier la vue sélectionnée. Elle présente chaque colonne faisant partie de la vue. Sélectionnez la colonne cible, puis Modifier les propriétés dans la zone Tâches courantes. La boîte de dialogue Modifier les propriétés de la colonne s’ouvre ; définissez les paramètres suivants ici :

    • Ressource Web : Indiquez le nom de la ressource Web que vous avez créée pour sélectionner vos fonctions JavaScript (sélectionnez Parcourir pour choisir à partir d’une liste).

    • Nom de fonction : Entrez le nom de la fonction entré pour modifier la colonne et la vue sélectionnées.

12. Sélectionnez OK pour fermer la boîte de dialogue Modifier propriétés de colonne.

13. Sélectionnez Enregistrer et fermer pour enregistrer la vue.

14. Répétez ces étapes pour chaque table, vue et colonne au besoin.

15. Lorsque vous êtes prêt, sélectionnez Publier toutes les personnalisations pour publier les modifications. Ensuite, fermez la fenêtre Solution par défaut.

Exemple de fonction JavaScript

La fonction JavaScript permettant d’afficher des images personnalisées et des info-bulles prévoit les deux arguments suivants : l’objet de ligne entier spécifié dans layoutxml et l’ID de paramètres régionaux (LCID) de l’utilisateur appelant. Le paramètre de LCID vous permet de spécifier le texte de l’info-bulle dans plusieurs langues. Pour plus d’informations sur les langues prises en charge par l’environnement, voir Activation des langues et Installation ou mise à niveau de modules linguistiques. Pour obtenir la liste des valeurs de l’ID de paramètres régionaux (LCID) que vous pouvez utiliser dans votre code, voir ID de paramètres régionaux assignés par Microsoft .

Si vous ajoutez des icônes personnalisées pour un type d’attribut défini par une option, qui possède un ensemble limité d’options prédéfinies, vérifiez que vous utilisez la valeur d’entier des options plutôt que le libellé afin d’éviter des problèmes de localisation.

Remarque : s’il est nécessaire de récupérer des données pour déterminer l’icône, Unified Interface prend en charge le renvoi d’un objet JavaScript Promise qui se résout en une valeur booléenne (similaire aux règles du ruban). N’utilisez pas de XMLHttpRequest (XHR) synchrone dans votre fonction personnalisée.

L’exemple de code suivant illustre des icônes et des info-bulles basées l’une des trois valeurs (1 : Très intéressé, 2 : Intéressé, 3 : Peu intéressé) dans l’attribut opportunityratingcode (Évaluation) . Cet exemple de code explique également comment afficher le texte d’info-bulle localisé. Pour que cet exemple fonctionne, vous devez créer trois ressources Web d’images avec des images 16 x 16 avec les noms suivants : new_Hot, new_Warm et new_Cold.

function displayIconTooltip(rowData, userLCID) {      
    var str = JSON.parse(rowData);  
    var coldata = str.opportunityratingcode_Value;  
    var imgName = "";  
    var tooltip = "";  
    switch (parseInt(coldata,10)) { 
        case 1:  
            imgName = "new_Hot";  
            switch (userLCID) {  
                case 1036:  
                    tooltip = "French: Opportunity is Hot";  
                    break;  
                default:  
                    tooltip = "Opportunity is Hot";  
                    break;  
            }  
            break;  
        case 2:  
            imgName = "new_Warm";  
            switch (userLCID) {  
                case 1036:  
                    tooltip = "French: Opportunity is Warm";  
                    break;  
                default:  
                    tooltip = "Opportunity is Warm";  
                    break;  
            }  
            break;  
        case 3:  
            imgName = "new_Cold";  
            switch (userLCID) {  
                case 1036:  
                    tooltip = "French: Opportunity is Cold";  
                    break;  
                default:  
                    tooltip = "Opportunity is Cold";  
                    break;  
            }  
            break;  
        default:  
            imgName = "";  
            tooltip = "";  
            break;  
    }  
    var resultarray = [imgName, tooltip];  
    return resultarray;  
}  

Comportement d’affichage de la vue des icônes personnalisées

Colonnes principales

Dans la vue de liste de grille, les icônes personnalisées appliquées à la colonne principale du tableau remplacent l’icône par défaut générée par le système.

Autres colonnes

Dans la vue de liste de grille, les icônes personnalisées appliquées à une colonne qui n’est pas la colonne principale du tableau s’affichent en tant qu’icône secondaire en plus de l’icône par défaut générée par le système.

Formulaires Carte

Les icônes personnalisées remplacent l’icône générée par défaut par le système lorsque la vue est configurée pour utiliser un formulaire de carte.

Voir aussi

Comprendre les vues d’application pilotée par modèle