Cas d’utilisation : création de pages de vue d’ensemble

Dans l'exemple qui suit, vous allez créer des applications web de type vue d'ensemble permettant d'afficher l'ensemble des applications web contenues dans votre base. Vous allez paramétrer les éléments suivants :

Créer une application Web mono-page

  1. Créez une application Web constituée d'une seule activité Page et désactivez les transitions sortantes et le passage à la page suivante.

  2. Modifiez le titre de votre page.

    C'est ce titre qui apparaîtra en tête de la vue d'ensemble, ainsi que dans l'aperçu de l'application web.

  3. Dans les propriétés de l'application web, modifiez le rendu de votre application web en sélectionnant le modèle Application web Mono-page.

  4. Ouvrez l'activité Page de votre application web et créez une liste (Elément statique > Liste).

  5. Dans l'onglet Données de votre liste, sélectionnez le type de document Applications Web et les colonnes de sortie Libellé, Créé le et Type d'application.

  6. Dans le sous-onglet Filtre, créez le filtre suivant comme illustré ci-dessous pour n'afficher que les applications web et exclure les modèles de votre vue.

  7. Fermez la fenêtre de paramétrage de votre page et cliquez sur Prévisualisation.

    La liste des applications Web disponibles dans votre base de données s'affiche.

Ajouter un filtre sur dossier

Dans une vue d'ensemble, vous pouvez choisir d'accéder à certaines données en fonction de leur emplacement dans l'arborescence Adobe Campaign. Il s'agit d'un filtre sur dossier. Procédez comme suit pour l'ajouter dans votre vue d'ensemble.

  1. Positionnez-vous sur le noeud Page de votre application Web et ajoutez un élément Choix de dossier (Contrôle avancés > Choix de dossier).

  2. Dans la fenêtre Stockage qui s'affiche, cliquez sur le lien Editer les variables.

  3. Modifiez le libellé de la variable à votre convenance.

  4. Modifiez le nom de la variable avec la valeur folder.

    REMARQUE

    Le nom de la variable doit correspondre au nom de l’élément lié au dossier (défini dans le schéma), c’est-à-dire le dossier dans ce cas. Vous devez réutiliser ce nom pour faire référence à la table.

  5. Appliquez le type XML à la variable.

  6. Sélectionnez l'interaction Actualiser la page.

  7. Placez le curseur sur votre liste et, dans l’onglet Avancé, faites référence à la variable précédemment créée dans l’onglet XPath de filtrage par dossier de la liste. Vous devez utiliser le nom de l’élément concerné par le lien du dossier, c’est-à-dire le dossier.

    REMARQUE

    A ce stade, l'application Web n'est pas dans son contexte d'application, il n'est donc pas possible de tester le filtre sur dossier.

Ajouter un bouton pour paramétrer une nouvelle application web

  1. Positionnez-vous sur l'élément Page et ajoutez un lien (Eléments statiques > Lien).

  2. Modifiez le libellé du lien car il apparaîtra sur le bouton dans la vue d'ensemble.

    Dans notre exemple, le libellé est Nouveau.

  3. Dans le champ URL, insérez l’URL suivante : xtk://open/?schema=nms:webApp&form=nms:newWebApp.

    REMARQUE

    nms:webApp correspond au schéma des applications web.

    nms:newWebApp correspond à l’assistant de création de la nouvelle application web.

  4. Choisissez d'afficher l'URL dans la même fenêtre.

  5. Ajoutez l’icône des applications web dans le champ image : /nms/img/webApp.png.

    Cette icône apparaîtra sur le bouton Nouveau.

  6. Entrez button dans le champ Style.

    Ce style est référencé dans le modèle Application Web Mono-page sélectionné précédemment.

Ajouter un détail à une liste

Lorsque vous paramétrez une liste dans votre vue d'ensemble, vous pouvez choisir d'afficher des détails supplémentaires pour chaque entrée de votre liste.

  1. Positionnez-vous sur votre élément liste créé précédemment.

  2. Dans l'onglet Général, sélectionnez le mode d'affichage Colonnes et détail additionnel dans la liste déroulante.

  3. Dans l'onglet Données, ajoutez les colonnes Clé primaire, Nom interne et Description et cochez l'option Champ non visible pour chacune d'elles.

    De cette façon, ces informations ne seront visibles qu'au niveau du détail de chaque entrée.

  4. Dans l'onglet Détail additionnel, ajoutez le code suivant :

    <div class="detailBox">
      <div class="actionBox">
        <span class="action"><img src="/xtk/img/fileEdit.png?lang=fr"/><a title="Open" class="linkAction" href="xtk://open/?schema=nms:webApp&form=nms:webApp&pk=
        <%=webApp.id%>">Open...</a></span>
        <% 
        if( webApp.@appType == 1 ) { //survey
        %>
        <span class="action"><img src="/xtk/img/report.png?lang=fr"/><a target="_blank" title="Reports" class="linkAction" href="/xtk/report.jssp?_context=selection&+++++++++_schema=nms%3AwebApp&_selection=%3C%25%3DwebApp.%40id%25%3E+++++++++&__sessiontoken=%3C%25%3Ddocument.controller.getSessionToken%28&lang=fr)%>">Reports</a></span>
        <% 
        } 
        %>
      </div>
      <div>
        Internal name: <%= webApp.@internalName %>
      </div>
      <%
      if( webApp.desc != "" )
      {
      %>
      <div>
        Description: <%= webApp.desc %>
      </div>
      <% 
      } 
      %>
    </div>
    
REMARQUE

Les librairies Javascript mettent cinq minutes à se rafraîchir sur le serveur. Vous pouvez redémarrer le serveur pour ne pas attendre ce délai.

Filtrer et actualiser la liste

Dans cette section, vous allez créer un filtre afin d'afficher dans la vue d'ensemble les applications Web créées par un opérateur spécifique. Ce filtre se fait à l'aide d'un éditeur de liens. D'autre part, une fois l'opérateur choisi, il vous faudra actualiser la liste pour appliquer votre filtre, d'où la nécessité de créer un lien d'actualisation.

Ces deux éléments seront rassemblés dans un même conteneur afin de les regrouper graphiquement dans la vue d'ensemble.

  1. Positionnez-vous au niveau de l'élément Page et sélectionnez les menus Conteneur > Standard.

  2. Paramétrez le nombre de colonnes à 2, afin que l'éditeur de lien et le lien soient côte à côte.

    Pour la mise en page des éléments, reportez-vous à cette section.

  3. Appliquez dottedFilter.

    Ce style est référencé dans le modèle Application Web Mono-page sélectionné précédemment.

  1. Positionnez-vous sur le conteneur créé à l'étape précédente et insérez un éditeur de lien depuis le menu Contrôles avancés.

  2. Dans la fenêtre de stockage qui s'ouvre automatiquement, sélectionnez l'option Variable puis cliquez sur le lien Editer les variables et créez une variable de type XML qui servira à filtrer les données.

  3. Modifiez le libellé.

    Il apparaîtra à côté du champ Filtre dans la vue d'ensemble.

  4. Choisissez la table des Opérateurs comme schéma d'application.

  5. Positionnez-vous sur l'élément liste et créez un filtre depuis l'onglet Données > Filtre :

    • Expression : clé étrangère du lien 'Créé par'
    • Opérateur : égal à
    • Valeur : variables (variables)
    • Pris en compte si : '$(var2/@id)'!=''

ATTENTION

L'utilisateur de l'application Web doit être un opérateur identifié et avec les droits adéquats dans Adobe Campaign pour avoir accès aux informations. Ce type de paramétrage ne fonctionnera pas dans le cas d'une application Web anonyme.

  1. Positionnez-vous au niveau du conteneur et insérez un Lien depuis le menu Elément statique.

  2. Modifiez le libellé.

  3. Choisissez l'action Actualiser les données d'une liste.

  4. Ajoutez la liste créée précédemment.

  5. Ajoutez l'icône d'actualisation dans le champ Image : /xtk/img/refresh.png.

  6. Positionnez les différents éléments de votre application web dans l'ordre comme illustré ci-dessous à l'aide des flèches de déplacement.

L'application Web est maintenant paramétrée. Vous pouvez cliquer sur l'onglet Prévisualisation pour en avoir un aperçu.

Sur cette page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now