Show Menu
TOPICS×

Use cases: creating overviews

In the following example, we will create overview-type Web applications to display all the Web applications in your database. Configure the following elements:

Creating a single-page Web application

  1. Create a single Page Web application and disable outbound transitions and transitions to the next page.
  2. Changing the page title.
    This title will appear in the overview header and in the Web application overview.
  3. In the Web application properties, modify the rendering of your application by selecting the Single-page Web application template.
  4. Open the Page activity of your Web application and open a list ( Static element > List ).
  5. 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.
  6. 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.
  7. Close the configuration window of your page and click Preview .
    The list of Web applications available in your database is displayed.

Adding a filter on a folder

In an overview, you can choose to access data depending on its location in the Adobe Campaign tree. This is a filter on a folder. Apply the following process to add it to your overview.
  1. Place your cursor on the Page node of your Web application and add a Select folder element ( Advanced controls > Select folder ).
  2. In the Storage window which comes up, click the Edit variables link.
  3. Change the variable label to suit your needs.
  4. Change the variable name with the folder value.
    The name of the variable must match the name of the element linked to the folder (defined in the schema), i.e. folder in this case. You must re-use this name when you reference the table.
  5. Apply the XML type to the variable.
  6. Select the Refresh page interaction.
  7. 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 .
    At this stage, the Web application is not within its application context, the filter can therefore not be tested on the folder.

Adding a button to configure a new Web application

  1. Place your cursor on the Page element and add a link ( Static elements > Link ).
  2. Modify the link label since it will appear on the button in the overview.
    In our example, the label is New .
  3. Insert the following URL in the URL field: xtk://open/?schema=nms:webApp&form=nms:newWebApp .
    nms:webApp coincides with the Web application schema.
    nms:newWebApp coincides with the new Web application creation wizard.
  4. Choose to display the URL in the same window.
  5. Add the Web application icon in the image field: /nms/img/webApp.png .
    This icon will appear on the New button.
  6. Enter button in the Style field.
    This style is referred to in the Single-page Web application template selected previously.

Adding detail to a list

When you configure a list in your overview, you can choose to display additional details for each entry on your list.
  1. Place your cursor on the previously created list element.
  2. In the General tab, select the Columns and additional detail display mode in the drop-down list.
  3. 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.
  4. 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>
    
    
JavaScript libraries take five minutes to refresh on the server. You can restart the server to avoid waiting for this delay.

Filtering and updating the list

In this section, you will create a filter for displaying the overview of Web applications created by a specific operator. This filter is created with a link editor. Once you have selected an operator, refresh the list to apply your filter; this requires creating a refresh link.
These two elements will be grouped in the same container in order to be graphically grouped in the overview.
  1. Place your cursor on the Page element and select Container > Standard .
  2. 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 .
  3. Apply dottedFilter .
    This style is referred to in the Single-page Web applicatio n template selected previously.