用例：创建概述页面

在以下示例中，我们将创建概述类型的Web应用程序，以显示数据库中的所有Web应用程序。 配置以下元素：

• 文件夹上的过滤器（请参阅在文件夹上添加过滤器），
• 用于创建新Web应用程序的按钮（请参阅添加按钮以配置新Web应用程序），
• 列表中每个条目的详细显示（请参阅向列表添加详细信息），
• 每个链接编辑工具一个过滤器（请参阅使用链接编辑器创建过滤器），
• 刷新链接（请参阅创建刷新链接）。

创建单页Web应用程序

1. 创建一个​Page Web应用程序，并禁用叫客过渡和过渡到下一页。

   

2. 更改页面标题。

   此标题将显示在概述标题和Web应用程序概述中。

3. 在Web应用程序属性中，通过选择​Single-page Web application​模板来修改应用程序的呈现。

   

4. 打开Web应用程序的​Page​活动并打开列表(Static element > List)。

5. 在列表的​Data​选项卡中，选择​Web applications​文档的类型以及​Label 、 Creation date​和​Type of application​输出列。

6. 在​Filter​子选项卡中，创建如下所示的以下过滤器，以便仅显示Web应用程序并从视图中排除模板。

   

7. 关闭页面的配置窗口，然后单击​Preview。

   将显示数据库中可用的Web应用程序列表。

   

在文件夹中添加过滤器

在概述中，您可以根据数据在Adobe Campaign树中的位置来选择访问数据。 这是文件夹上的过滤器。 应用以下流程将其添加到概述中。

1. 将光标放在Web应用程序的​Page​节点上，并添加​Select folder​元素(Advanced controls > Select folder)。

2. 在出现的​Storage​窗口中，单击​Edit variables​链接。

3. 根据需要更改变量标签。

4. 使用​folder​值更改变量名称。

   注意

   变量的名称必须与链接到文件夹（在架构中定义）的元素的名称匹配，即在此例中，为​folder。 引用表时必须重新使用此名称。

5. 将​XML​类型应用到变量。

   

6. 选择​Refresh page​交互。

   

7. 将光标放在列表上，并在​Advanced​选项卡中，引用之前在列表的​Folder filter XPath​选项卡中创建的变量。 您必须使用文件夹链接所关联元素的名称，即​文件夹。

   

   注意

   此时，Web应用程序不在其应用程序上下文中，因此无法在文件夹上测试过滤器。

添加按钮以配置新的Web应用程序

1. 将光标放在​Page​元素上并添加链接(Static elements > Link)。

2. 修改链接标签，因为它将显示在概述的按钮上。

   在本例中，标签为​New。

3. 在URL字段中插入以下URL:xtk://open/?schema=nms:webApp&form=nms:newWebApp。

   注意

   nms: webApp与Web应用程序模式一致。

   nms: newWebApp与新的Web应用程序创建向导重合在一起。

4. 选择在同一窗口中显示URL。

5. 在图像字段中添加Web应用程序图标：/nms/img/webApp.png。

   此图标将显示在​New​按钮上。

6. 在​Style​字段中输入​button。

   此样式在以前选择的​Single-page Web application​模板中引用。

   

向列表添加详细信息

在概述中配置列表时，您可以选择显示列表中每个条目的其他详细信息。

1. 将光标放在之前创建的列表元素上。

2. 在​General​选项卡的下拉列表中，选择​Columns and additional detail​显示模式。

   

3. 在​Data​选项卡中，添加​Primary key 、 Internal name​和​Description​列，并为每个列选择​Hidden field​选项。

   

   这样，此信息将只显示在每个条目的详细信息中。

4. 在​Additional detail​选项卡中，添加以下代码：

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

筛选和更新列表

在此部分中，您将创建一个过滤器，用于显示由特定运算符创建的Web应用程序的概述。 此过滤器使用链接编辑器创建。 选择运算符后，刷新列表以应用过滤器；这需要创建刷新链接。

这两个元素将分组到同一个容器中，以便以图形方式在概述中分组。

1. 将光标放在​Page​元素上，然后选择​Container > Standard。

2. 将列数设置为​2，以便链接编辑器和链接彼此相邻。

   

   有关元素布局的信息，请参阅此部分。

3. 应用​dottedFilter。

   此样式在以前选择的​Single-page Web applicatio n模板中引用。

   

使用链接编辑器创建过滤器

1. 将光标放在上一阶段创建的容器上，并通过​Advanced controls​菜单插入链接编辑器。

2. 在自动打开的存储窗口中，选择​Variables​选项，然后单击​Edit variables​链接并创建用于筛选数据的XML变量。

   

3. 修改标签。

   它将显示在概述的​Filter​字段旁边。

4. 选择运算符表作为应用程序架构。

   

5. 将光标放在列表元素上，并通过​Data > Filter​选项卡创建过滤器：

   • 表达式： “创建者”链接的外键
   • 运算符： 等于
   • 值： 变量（变量）
   • 考虑if: '$(var2/@id)'!="

   

创建刷新链接

1. 将光标放在容器上，并通过​Static elements​菜单插入​Link。

2. 修改标签。

3. 选择 Refresh data in a list。

4. 添加之前创建的列表。

   

5. 在​Image​字段中添加刷新图标：/xtk/img/refresh.png。

6. 使用排序箭头重新组织Web应用程序的各个元素，如下所示。

   

Web应用程序现已配置完成。 您可以单击​Preview​选项卡进行预览。