用例:创建概述页

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

创建单页Web 应用程序

  1. 创建单个​Page Web 应用程序,并禁用到下一页的出站过渡和过渡。

  2. 更改页面标题。

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

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

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

  5. 在列表的​Data​选项卡中,选择​Web applications​文档的类型以及​LabelCreation 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​选项卡中创建的变量。 必须使用文件夹链接所关注元素的名称,即​folder

    注意

    在此阶段,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 keyInternal name​和​Description​列,并为每个列选择​Hidden field​选项。

    这样,此信息将仅在每个条目的详细信息中可见。

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

    <div class="detailBox">
      <div class="actionBox">
        <span class="action"><img src="/xtk/img/fileEdit.png?lang=zh-Hans"/><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?lang=zh-Hans"/><a target="_blank" title="Reports" class="linkAction" href="/xtk/report.jssp?_context=selection&+++++++++_schema=nms%3AwebApp&_selection=%3C%25%3DwebApp.%40id%25%3E+++++++++&__sessiontoken=%3C%25%3Ddocument.controller.getSessionToken%28&lang=zh-Hans)%>">Reports</a></span>
        <% 
        } 
        %>
      </div>
      <div>
        Internal name: <%= webApp.@internalName %>
      </div>
      <%
      if( webApp.desc != "" )
      {
      %>
      <div>
        Description: <%= webApp.desc %>
      </div>
      <% 
      } 
      %>
    </div>
    
注意

在服务器上刷新JavaScript库需要五分钟。 您可以重新启动服务器以避免等待此延迟。

过滤和更新列表

在本节中,您将创建一个过滤器,用于显示由特定运算符创建的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)'!="

注意

Web 应用程序用户必须是已标识的具有相应Adobe Campaign权限的操作员才能访问信息。 此类配置对匿名Web 应用程序无效。

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

  2. 修改标签。

  3. 选择 Refresh data in a list

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

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

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

Web 应用程序现已配置。 可以单击​Preview​选项卡来预览它。

在此页面上

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now