Délégation des paramètres d’URL du tableau de bord

La propriété des paramètres d’URL déléguée active les UIB pages contenant des composants de tableau de bord afin de contrôler la façon dont les mises à jour des paramètres d’URL sont gérées. Cela permet d’utiliser une logique de navigation personnalisée pour les scénarios incorporés ou d’espace de travail.

Remarque :

Cette fonction nécessite la dernière Expérience Platform Analytics application du ServiceNow® Store.

Par défaut, les composants de tableau de bord mettent automatiquement à jour l’URL du navigateur lorsque les utilisateurs changent de tableau de bord, modifient des onglets ou basculent en mode d’édition. Ce comportement fonctionne bien pour les pages de tableau de bord standard, mais peut ne pas convenir à tous les scénarios d’implémentation.

La propriété des paramètres d’URL déléguée fournit une approche alternative où le composant de tableau de bord répartit les événements au lieu de mettre à jour directement les URL. Ce mécanisme de délégation permet aux pages parentes d’implémenter une logique de navigation personnalisée.

Pour en savoir plus sur cette propriété dans le contexte du panneau de configuration du composant Tableau de bord, reportez-vous à la section Propriétés des composants du tableau de bord.

Quand utiliser la délégation de paramètres d’URL

La délégation de paramètres d’URL est utile dans les cas suivants :

• La structure de l’URL de la page n’inclut pas les paramètres de l’URL du tableau de bord, par exemple, aucun ID système dans le chemin de l’URL
• La page nécessite une logique de navigation personnalisée pour les changements apportés au tableau de bord
• Le tableau de bord est intégré à un espace de travail où la gestion des URL est gérée par le composant parent
• Plusieurs composants de tableau de bord existent sur la même page et nécessitent une gestion coordonnée des URL

Fonctionnement de la délégation

Lorsque les paramètres d’URL du délégué sont désactivés (comportement par défaut) :

1. L’utilisateur effectue une action, comme changer de tableau de bord, modifier l’onglet ou basculer en mode d’édition
2. Le composant de tableau de bord distribue une action CONTENT_UPDATED interne
3. UIB cadre de travail traite l’action et met à jour automatiquement les paramètres d’URL

Lorsque les paramètres de l’URL du délégué sont activés :

1. L’utilisateur effectue une action
2. Le composant de tableau de bord supprime la répartition de CONTENT_UPDATED
3. Le composant de tableau de bord distribue DASHBOARD#URL_PARAMS_UPDATE_REQUESTED avec des données de paramètres structurés
4. Le script client sur la page reçoit l’événement et implémente la logique de navigation personnalisée

Structure de charge utile de l’événement

L’événement DASHBOARD#URL_PARAMS_UPDATE_REQUESTED contient un objet avec des urlParams informations de paramètres structurées. Chaque paramètre comprend la valeur, la description et des métadonnées supplémentaires telles que les noms de tableau de bord et les indicateurs de nouvel onglet.

Cette approche structurée fournit aux scripts clients suffisamment de contexte pour prendre des décisions de navigation éclairées, notamment pour gérer des cas spéciaux tels que l’ouverture de tableaux de bord dans de nouveaux onglets de navigateur.

Pour plus d’informations sur cet événement, reportez-vous à la section Événements de composant de tableau de bord.

Concepts associés

• Créer un Platform Analytics espace de travail à partir de App Engine Studio

Tâches associées

• Ajouter Platform Analytics des pages à un espace de travail configurable
• Ajouter un tableau de bord à une page Tableaux de bord
• Configurer la redirection personnalisée à partir d’un composant de tableau de bord
• Transmettre les filtres globaux au modèle de page de tableau de bord
• Configurer le courtier en données du tableau de bord

Configurer la délégation des paramètres d’URL du tableau de bord

Activez la délégation de paramètres d’URL pour les composants de tableau de bord afin d’implémenter une logique de navigation personnalisée dans les UIB pages.

Avant de commencer

Rôle requis : ui_builder_admin

Pourquoi et quand exécuter cette tâche

Configurez la délégation de paramètres d’URL lorsque vous avez besoin d’un contrôle personnalisé sur la façon dont la navigation dans le tableau de bord met à jour les URL du navigateur. Ceci est utile pour les tableaux de bord incorporés, les scénarios d’espace de travail ou les pages avec des structures d’URL non standard.

Procédure

1. Accédez à la UIB page contenant le composant de tableau de bord.
2. Sélectionnez le composant de tableau de bord dans le canevas de conception.
3. Ouvrez l’onglet Configurer dans le panneau des propriétés du composant.
4. Cochez la case Paramètres de l’URL du délégué .
   Lorsque cette option est activée, le composant de tableau de bord distribue les événements DASHBOARD#URL_PARAMS_UPDATE_REQUESTED au lieu de mettre à jour directement les URL.
5. Passez à l’onglet Événements .
6. Sélectionnez Ajouter un mappage d’événements.
7. Sélectionnez l’événement de mise à jour des paramètres d’URL demandé dans la liste.
8. Ajoutez un gestionnaire d’événements qui exécute un script client.
   Le script client recevra les données de paramètre d’URL et implémentera votre logique de navigation personnalisée.
9. Créez un script client pour gérer les mises à jour des paramètres d’URL.
   Le script reçoit une charge utile structurée urlParams contenant des valeurs de paramètres, des descriptions et des métadonnées telles que les noms de tableau de bord et les indicateurs de nouvel onglet.
   Le composant de tableau de bord délègue désormais la gestion des paramètres d’URL à votre script client personnalisé au lieu de mettre à jour directement l’URL du navigateur.

Résultats

Lorsque les utilisateurs interagissent avec le tableau de bord (changer de tableau de bord, changer d’onglet, basculer en mode d’édition), le composant répartit les événements que votre script client peut gérer avec une logique de navigation personnalisée.

Script client de délégation de base

Cet exemple de script reproduit le comportement de mise à jour d’URL par défaut :

function handler({api, event}) {
    const {urlParams} = event.payload;
    
    for (const [key, paramInfo] of Object.entries(urlParams)) {
        if (key === 'sysId' && paramInfo.isNewTab === true) {
            // Handle new tab navigation
            api.emit('NAV_ITEM_SELECTED', {
                route: 'dashboards',
                title: paramInfo.dashboardName || paramInfo.value,
                params: {sysId: paramInfo.value},
                navigationOptions: {
                    navigateExternal: true,
                    target: '_blank'
                }
            });
            return;
        }
        
        // Handle normal navigation
        api.emit('CONTENT_UPDATED', {
            route: 'dashboards',
            params: {[key]: paramInfo.value}
        });
    }
}