v7 v8

Casos de uso: Creación de páginas de información general

En el siguiente ejemplo, se crean aplicaciones web de tipo “descripción general” para visualizar todas las que se encuentren en la base de datos. Configure los siguientes elementos:

• un filtro en la carpeta (consulte Añadir un filtro en una carpeta),
• un botón para crear una nueva aplicación Web (consulte Añadir un botón para configurar una nueva aplicación Web),
• visualización de detalles para cada entrada de la lista (consulte Añadir detalles a una lista),
• un filtro por herramienta de edición de vínculos (consulte Crear un filtro con un editor de vínculos),
• un vínculo de actualización (consulte Crear un vínculo de actualización).

Creación de una aplicación web de una sola página

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

   

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

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

   

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

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

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

   

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

   

Adición de un filtro a una carpeta

En una descripción general, tiene la opción de acceder a los datos según su ubicación en el directorio de Adobe Campaign. Esto es un filtro en una carpeta. Siga el siguiente proceso para añadirlo a su descripción general.

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

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

3. Cambie la etiqueta de variables según sus necesidades.

4. Cambie el nombre de la variable con el valor folder.

   NOTA

   El nombre de la variable debe coincidir con el nombre del elemento relacionado con la carpeta (definido en el esquema), por ejemplo folder en este caso. Debe volver a utilizar este nombre cuando haga referencia a la tabla.

5. Aplicar el tipo XML a la variable.

   

6. Seleccione la interacción Refresh page.

   

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

   

   NOTA

   En esta fase, la aplicación web no está dentro del contexto de la aplicación; por lo que el filtro no se puede probar en la carpeta.

Adición de un botón para configurar una nueva aplicación web

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

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

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

   NOTA

   nms:webApp coincide con el esquema de la aplicación web.

   nms:newWebApp coincide con el nuevo asistente de creación de aplicaciones web.

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

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

6. Introduzca button en el campo Style.

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

   

Adición de detalles a una lista

Al configurar una lista en la descripción general, puede elegir visualizar detalles adicionales para cada entrada en la lista.

1. Coloque el cursor en el elemento de lista creado previamente.

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

   

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

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

Filtrado y actualización de la lista

En esta sección, se crea un filtro para mostrar la descripción general de las aplicaciones web creadas por un operador específico. Este filtro se crea con un editor de vínculos. Una vez seleccionado un operador, actualice la lista para aplicar el filtro; esto requiere la creación de un vínculo de actualización.

Estos dos elementos se agrupan en el mismo contenedor para que se clasifiquen gráficamente en la descripción general.

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

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

3. Aplicar dottedFilter.

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

   

Creación de un filtro mediante un editor de vínculos

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

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

   

3. Modifique la etiqueta.

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

4. Seleccione la tabla Operador como esquema de aplicación.

   

5. 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)'!='''

   

Creación de un vínculo de actualización

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

2. Modifique la etiqueta.

3. Seleccione Refresh data in a list.

4. Añada la lista creada previamente.

   

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

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

   

La aplicación web ya está configurada. Se puede hacer clic en la pestaña Preview para previsualizarla.