Casos de uso: Creación de páginas de información general use-cases-creating-overviews

Cree una aplicación web Page y deshabilite las transiciones salientes y las transiciones a la página siguiente.

Modificación del título de la página.

Este título aparece en el encabezado de la descripción general y en la descripción general de la aplicación web.

En las propiedades de la aplicación web, modifique la renderización de la aplicación seleccionando la plantilla Single-page Web application.

Abra la actividad Page de la aplicación web y abra una lista (Static element > List).

En la pestaña Data de la lista, seleccione el tipo de documento Web applications y las columnas de salida Creation date ​ Label, y Type of application.

En la subpestaña Filter, cree el siguiente filtro, tal y como se muestra a continuación, para visualizar las aplicaciones web y excluir las plantillas de la vista.

Cierre la ventana de configuración de la página y haga clic en Preview.

Se muestra la lista de aplicaciones web disponibles en la base de datos.

Coloque el cursor en el nodo Page de la aplicación web y añada un elemento Select folder (Advanced controls > Select folder).

En la ventana Storage que aparece, haga clic en el vínculo Edit variables.

Cambie la etiqueta de variables según sus necesidades.

Cambie el nombre de la variable con el valor folder.

Aplicar el tipo XML a la variable.

Seleccione la interacción Refresh page.

Coloque el cursor en la lista y en la pestaña Advanced haga referencia a la variable creada previamente en la pestaña Folder filter XPath de la lista. Debe utilizar el nombre del elemento al que hace referencia el vínculo de carpeta, por ejemplo folder.

Coloque el cursor en el elemento Page y añada un vínculo (Static elements > Link).

Modifique la etiqueta del vínculo, ya que esta aparece en el botón de la descripción general.

En el ejemplo, la etiqueta es New.

Inserte la siguiente URL en el campo URL: xtk://open/?schema=nms:webApp&form=nms:newWebApp.

Seleccione esta opción para visualizar la URL en la misma ventana.

Agregue el icono de la aplicación Web en el campo de imagen: /nms/img/webApp.png.

Este icono aparece en el botón New.

Introduzca button en el campo Style.

Se hace referencia a este estilo en la plantilla Single-page Web application seleccionada previamente.

Coloque el cursor en el elemento de lista creado previamente.

En la pestaña General, seleccione el modo de visualización Columns and additional detail en la lista desplegable.

En la pestaña Data, añada las columnas Internal name ​ Primary key, y Description y seleccione la opción Hidden field para cada una de ellas.

De este modo, esta información solo se puede ver en el detalle de cada entrada.

En la pestaña Additional detail, añada el siguiente código:

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

Coloque el cursor en el elemento Page y seleccione Container > Standard.

Especifique el número de columnas en 2, de modo que el editor de vínculos y el vínculo estén uno junto al otro.

Para obtener más información sobre la disposición de elementos, consulte esta sección.

Aplicar dottedFilter.

Se hace referencia a este estilo en la plantilla Single-page Web application seleccionada previamente.

Coloque el cursor en el contenedor creado durante la fase anterior e inserte un editor de vínculos mediante el menú Advanced controls.

En la ventana de almacenamiento que se abre automáticamente, seleccione la opción Variables y, a continuación, haga clic en el vínculo Edit variables y cree una variable XML para filtrar los datos.

Modifique la etiqueta.

Esta aparece junto al campo Filter en la descripción general.

Seleccione la tabla Operador como esquema de aplicación.

Coloque el cursor en el elemento de la lista y cree un filtro a través de la pestaña Data > Filter:

• Expression: Clave externa del vínculo “Creado por”
• Operador: es igual a
• Value: Variables (variables)
• Taken into account if: '$(var2/@id)'!='''

Sitúe el cursor sobre el contenedor e inserte un Link mediante el menú Static elements.

Modifique la etiqueta.

Seleccione Refresh data in a list.

Añada la lista creada previamente.

Agregue el icono de actualización en el campo Image: /xtk/img/refresh.png.

Con las flechas de selección, reorganice los distintos elementos de la aplicación web como se muestra a continuación.