Use cases: create overview pages use-cases-creating-overviews

Create a single Page Web application and disable outbound transitions and transitions to the next page.

Changing the page title.

This title will appear in the overview header and in the Web application overview.

In the Web application properties, modify the rendering of your application by selecting the Single-page Web application template.

Open the Page activity of your Web application and open a list (Static element > List).

In the Data tab of your list, select the type of Web applications document and the Label , Creation date and Type of application output columns.

In the Filter sub-tab, create the following filter as shown below in order to display Web applications only and exclude templates from your view.

Close the configuration window of your page and click Preview.

The list of Web applications available in your database is displayed.

Place your cursor on the Page node of your Web application and add a Select folder element (Advanced controls > Select folder).

In the Storage window which comes up, click the Edit variables link.

Change the variable label to suit your needs.

Change the variable name with the folder value.

Apply the XML type to the variable.

Select the Refresh page interaction.

Place your cursor on your list, and in the Advanced tab, reference the variable previously created in the Folder filter XPath tab of the list. You must use the name of the element concerned by the folder link, i.e. folder.

Place your cursor on the Page element and add a link (Static elements > Link).

Modify the link label since it will appear on the button in the overview.

In our example, the label is New.

Insert the following URL in the URL field: xtk://open/?schema=nms:webApp&form=nms:newWebApp.

Choose to display the URL in the same window.

Add the Web application icon in the image field: /nms/img/webApp.png.

This icon will appear on the New button.

Enter button in the Style field.

This style is referred to in the Single-page Web application template selected previously.

Place your cursor on the previously created list element.

In the General tab, select the Columns and additional detail display mode in the drop-down list.

In the Data tab, add the Primary key , Internal name and Description column and select the Hidden field option for each one.

This way, this information will only be visible in the detail of each entry.

In the Additional detail tab, add the following code:

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

Place your cursor on the Page element and select Container > Standard.

Set the number of columns to 2, so that the link editor and the link are next to each other.

For information on element layout, refer to this section.

Apply dottedFilter.

This style is referred to in the Single-page Web application template selected previously.

Place your cursor on the container created during the previous stage and insert a link editor via the Advanced controls menu.

In the storage window which opens automatically, select the Variables option, then click the Edit variables link and create an XML variable for filtering data.

Modify the label.

It will appear next to the Filter field in the overview.

Choose the Operator table as an application schema.

Place your cursor on the list element and create a filter via the Data > Filter tab:

• Expression: Foreign key of the ‘Created by’ link
• Operator: equals to
• Value: Variables (variables)
• Taken into account if: ‘$(var2/@id)’!=‘’

Place the cursor on the container and insert a Link via the Static elements menu.

Modify the label.

Select Refresh data in a list.

Add the previously created list.

Add the refresh icon on the Image field: /xtk/img/refresh.png.

Using the sort-order arrows, reorganize the various elements of your Web application as shown below.