Exemples de filtres interactifs personnalisés

En tant qu’administrateur, vous pouvez créer des widgets de filtres interactifs personnalisés pour fournir des options de filtrage avancées sur les tableaux de bord.

Cas d'utilisation

Cet exemple explique comment créer un filtre personnalisé pour filtrer les rapports sur la table de tâches ou ses tables enfants. Le filtre affiche uniquement les enregistrements où l’utilisateur actuel est l’appelant. Le filtre expose deux boutons à l’utilisateur, un bouton pour ajouter le filtre et un bouton pour supprimer le filtre.

Concepts associés

• Tableau de bord MessageHandler

Information associée

• Configurer un bloc de contenu
• Scripts d'interface utilisateur
• Balises Jelly

Créer un widget de filtre interactif personnalisé

Créez des widgets de filtres interactifs personnalisés pour fournir des options de filtrage avancées sur les tableaux de bord.

Avant de commencer

Rôle requis : administrateur

Procédure

1. Ouvrez un tableau de bord auquel vous souhaitez ajouter le filtre interactif personnalisé.
2. Cliquez sur l’icône Ajouter du contenu ().
3. Dans la liste Catégorie de widget , sélectionnez Blocs de contenu.
   
4. Dans la liste des blocs de contenu, sélectionnez Nouveau contenu dynamique.
5. Dans le panneau Nouveau contenu dynamique, cliquez sur Ajouter.
   
   Un nouveau bloc de contenu dynamique est ajouté au tableau de bord.
6. Dans le tableau de bord, cliquez sur le lien Cliquez ici pour configurer ce bloc de contenu dynamique réutilisable.
   
7. Définissez la logique de filtrage dans le champ Contenu dynamique .
   

Que faire ensuite

Définissez la logique de filtrage.

Créer une option de filtre de date/heure personnalisée

Lorsque la sélection standard des options de filtre de date/heure ne répond pas à vos besoins, vous pouvez créer une option personnalisée.

Avant de commencer

Suivez ces étapes pour créer une option de filtre de date/heure personnalisée qui peut ensuite être incluse dans n’importe quel filtre interactif basé sur la date/l’heure à utiliser sur un tableau de bord. Dans cet exemple, vous créez une option de filtre pour une période de deux semaines, une quinzaine.

Rôle requis : admin.

Procédure

1. Accédez à la Tout > Définition du système > Règles métier.
2. Ouvrir la règle métier Obtenir les options de filtre de date pour les filtres de date.
   Cette règle remplit la liste des options sélectionnables dans les formulaires pour les filtres interactifs de type date nouveaux ou existants.
3. Dans l’onglet Avancé , modifiez le champ Script pour inclure le JavaScript nécessaire pour ajouter la nouvelle option.
   Ajoutez la ligne suivante :

   answer.add('<Time_Period_Name>@javascript:<Beginning_Time_Period>@javascript:<Ending_Time_Period>', gs.getMessage('<Textual_Representation_Of_Time_Period>'));

4. Dans la ligne que vous avez ajoutée, effectuez les substitutions suivantes.

   Option	Description
   <Time_Period_Name>	Un nom unique pour la période sélectionnée. Cette chaîne est utilisée en interne par le système pour identifier l’option et est définie sur un élément qui peut décrire la période décrite. Saisissez la valeur 112_Last une quinzaine.
   <Beginning_Time_Period>	Date et heure spécifiques auxquelles ce filtre commence. Cette valeur peut utiliser des valeurs absolues ou relatives. Il est beaucoup plus courant d’utiliser une valeur relative qui utilise la syntaxe URL JavaScript. Entrez la valeur gs.daysAgoStart(14) pour indiquer que l’intervalle de temps pour cette sélection doit être exactement deux semaines plus tôt.
   <Ending_Time_Period>	Date et heure spécifiques auxquelles la période de cette option de filtre doit prendre fin. Cette valeur peut aussi utiliser des valeurs absolues ou relatives. Similaire à Beginning_Time_Period cette valeur est généralement une période de temps relative pour utiliser la syntaxe URL JavaScript. Entrez la valeur gs.daysAgoStart(0) pour indiquer que la période se termine à la date et à l’heure actuelles.
   <Textual_Representation_Of_Time_Period>	Chaîne de texte courte qui s’affiche dans la liste des options de filtre Date/Heure, qui apparaissent par ordre alphabétique croissant. Entrez Dernière quinzaine pour indiquer que cette sélection spécifie une période allant d’une quinzaine de jours avant la date et l’heure actuelles.

   La déclaration complète se lit maintenant comme suit :

   answer.add('112_Last Fortnight@javascript:gs.daysAgoStart(14)@javascript:gs.daysAgoEnd(0)', gs.getMessage('Last fortnight'));

5. Sélectionnez Mettre à jour pour enregistrer les changements que vous avez apportés à la règle métier.
6. Vérifiez que la nouvelle option est disponible lorsque vous modifiez ou créez un filtre Date/Heure.
   1. Accédez à la Tout > Rapports > Administration > Filtres interactifs.
   2. Sélectionnez un filtre de date.
      Les filtres disponibles incluent La dernière quinzaine.
      
      
7. Modifiez un filtre de date pour inclure la nouvelle valeur et ajoutez le filtre à un tableau de bord.
   
   

Définir la logique de filtrage : exemple

Après avoir créé le filtre interactif, ajoutez la logique de filtrage.

Avant de commencer

Rôle requis : administrateur

Les filtres utilisent la classe DashboardMessageHandler pour gérer les filtres actifs. Instanciez DashboardMessageHandler avec une valeur unique.

Remarque :

L’ID du filtre interactif personnalisé doit être unique. S’il a le même ID qu’un autre filtre interactif ou un filtre interactif personnalisé, la logique de filtrage fonctionne correctement.

Procédure

1. Dans l’enregistrement de contenu dynamique, ajoutez la logique de filtrage au bloc XML de contenu dynamique.
2. Le bouton Explorer uniquement publie un filtre sur les rapports de table de tâches à l’aide de l’caller_idDYNAMIC90d1921e5f510100a9ad2572f2b477fe de requête codée.
   Le bouton Toutes les tâches supprime le filtre.
3. Vous pouvez ensuite ajouter des boutons ou d’autres éléments d’interface au contenu dynamique. Dans cet exemple, le code de la fonction clearFilter() et les boutons du filtre sont ajoutés sous la fonction publishFilter().

   <?xml version="1.0" encoding="utf-8" ?>
   <j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
    <script>
        var my_dashboardMessageHandler = new DashboardMessageHandler("my_unique_id");
       
       function publishFilter () {
           var filter_message = {};
           filter_message.id = "my_unique_id";
           filter_message.table = "task";
       
       <!--     Add your own filter query logic here -->
           filter_message.filter = "assigned_toDYNAMIC90d1921e5f510100a9ad2572f2b477fe";
           SNC.canvas.interactiveFilters.setDefaultValue({
                   id: filter_message.id,
                   filters: [filter_message]
               }, false);
           my_dashboardMessageHandler.publishFilter(filter_message.table, filter_message.filter);
       }
       
       function clearFilter() {
           var filter_message = {};
           filter_message.id = "my_unique_id";
           filter_message.table = "task";
           filter_message.filter = "";
           SNC.canvas.interactiveFilters.setDefaultValue({
                   id: filter_message.id,
                   filters: [filter_message]
               }, false);
           my_dashboardMessageHandler.removeFilter();
       }
    </script>   
    
   Example of a filter that generates a static filter on 'task' table reports, or removes it <br/>
       <input id="allTasks" type="button" value="All tasks" onclick="clearFilter();" />
       <input id="onlyMine" type="button" value="Only mine" onclick="publishFilter();" />
       
   </j:jelly>

4. Sélectionnez Soumettre.

Résultats

Le filtre interactif personnalisé apparaît sur le tableau de bord auquel vous avez ajouté le bloc de contenu dynamique. Il se trouve également dans la liste des blocs de contenu du panneau Ajouter des widgets .

Exemple de filtre interactif personnalisé : rapports multiples

Vous pouvez utiliser un filtre interactif personnalisé pour filtrer plusieurs rapports à l’aide de différentes tables. Il existe deux API différentes pour publier un filtre interactif pour une ou plusieurs tables. Cet exemple filtre un rapport sur les tables d’incidents et de problèmes par groupe d’affectation à l’aide d’un filtre interactif personnalisé.

A propos des filtres interactifs personnalisés sur plusieurs tables

Gardez à l’esprit les points suivants lorsque vous créez un filtre interactif personnalisé :

• Les filtres interactifs personnalisés qui s’appliquent à une seule table utilisent la fonction DashboardMessageHandler.publishFilter().
• Les filtres interactifs personnalisés qui s’appliquent à plusieurs tables utilisent la fonction DashboardMessageHandler.publishMessage().
• Avant de publier, un appel de filtre interactif à la fonction SNC.canvas.interactiveFilters.setDefaultValue() est requis.
• Un appel à la fonction SNC.canvas.interactiveFilters.removeDefaultValue() ou à la fonction DashboardMessageHandler.removeFilter() est requis avant de réinitialiser le filtre.

Un filtre interactif personnalisé qui appelle la méthode publishFilter() plusieurs fois actualise le rapport associé le même nombre de fois. Des appels répétés à cette méthode peuvent entraîner des problèmes de performances.

Comment appliquer un filtre interactif personnalisé à plusieurs tables

L’exemple suivant filtre le rapport par groupe d’affectation dans les tables Incident [incident] et Problème [problem].

DashboardMessageHandler.publishMessage() accepte plusieurs filtres sous forme de tableau. Construisez le tableau de filtres, puis créez une instance unique de DashboardMessageHandler qui appelle DashboardMessageHandler.publishMessage([filters]). Cette méthode actualise le widget une seule fois.

<?xml version="1.0" encoding="UTF-8"?>
<j:jelly xmlns:j="jelly:core" xmlns:g="glide" xmlns:g2="null" xmlns:j2="null" trim="false">
   <script>
      var my_dashboardMessageHandler = new DashboardMessageHandler("my_unique_id");

function publishMultipleFilter() {
      <!-- Mutliple filters can be passed as an array -->
      var finalFilter = [{"table":"incident","filter":"assignment_group=6fcd3b573b331300ad3cc9bb34efc447"}, {"table":"problem","filter":"assignment_group=6fcd3b573b331300ad3cc9bb34efc447"}];
      <!-- call setDefaultValue first -->
      SNC.canvas.interactiveFilters.setDefaultValue({
id: my_dashboardMessageHandler._unique_id,
filters: finalFilter,
}, false);
      <!-- then call Publishmessage to publish filters-->
      my_dashboardMessageHandler.publishMessage(finalFilter);
}

function clearFilter() {
SNC.canvas.interactiveFilters.removeDefaultValue(my_dashboardMessageHandler._unique_id, false);
my_dashboardMessageHandler.removeFilter();
}
   </script>
   
Example of a filter that filters incident and problem table where the assignment group is Problem solving
   <input id="allTasks" type="button" value="All" onclick="clearFilter();" />
   <input id="onlyMine" type="button" value="Assignment group is [Problem solving]" onclick="publishMultipleFilter();" />
</j:jelly>