Show Menu
SUJETS×

Cas pratiques : création de vues 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 .
    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 .
    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 .
    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"/><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"/><a target="_blank" title="Reports" class="linkAction" href="/xtk/report.jssp?_context=selection&
          _schema=nms:webApp&_selection=<%=webApp.@id%>
          &__sessiontoken=<%=document.controller.getSessionToken()%>">Reports</a></span>
        <% 
        } 
        %>
      </div>
      <div>
        Internal name: <%= webApp.@internalName %>
      </div>
      <%
      if( webApp.desc != "" )
      {
      %>
      <div>
        Description: <%= webApp.desc %>
      </div>
      <% 
      } 
      %>
    </div>
    
    
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.