Cas d’utilisation : création de pages de vue d’ensemble use-cases-creating-overviews

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

Modifiez le titre de votre page.

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

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.

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

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.

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.

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.

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).

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

Modifiez le libellé de la variable à votre convenance.

Modifiez le nom de la variable avec la valeur folder.

Appliquez le type XML à la variable.

Sélectionnez l’interaction Actualiser la page.

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.

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

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

Dans notre exemple, le libellé est Nouveau.

Insérez l’URL suivante dans le champ URL : xtk://open/?schema=nms:webApp&form=nms:newWebApp.

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

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

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

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.

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

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

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.

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>

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

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

Pour la disposition des éléments, reportez-vous à cette section.

Appliquez dottedFilter.

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

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.

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.

Modifiez le libellé.

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

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

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)’!=‘’

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

Modifiez le libellé.

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

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

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

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.