Casos de uso: criar páginas de visão geral

No exemplo a seguir, criaremos aplicativos tipo visão geral para exibir todas as aplicações web no banco de dados. Configure os seguintes elementos:

Criação de um aplicativo Web de uma única página

  1. Crie uma aplicação web de uma única Page e desative as transições de saída e faça a transição para a próxima página.

  2. Alteração do título da página.

    Esse título aparecerá no cabeçalho da visão geral e na visão geral da aplicação web.

  3. Nas propriedades da aplicação web, modifique a renderização do seu aplicativo selecionando o template Single-page Web application.

  4. Abra a atividade Page da sua aplicação web e abra uma lista (Static element > List).

  5. Na guia Data da lista, selecione o tipo de documento Web applications e as colunas de saída Label , Creation date e Type of application.

  6. Na subguia Filter, crie o filtro a seguir, como mostrado abaixo, para exibir somente as aplicações web e excluir os templates da visualização.

  7. Feche a janela de configuração da página e clique em Preview.

    A lista de aplicativos Web disponíveis em seu banco de dados é exibida.

Adicionar um filtro a uma pasta

Em uma visão geral, você pode optar por acessar dados dependendo de sua localização na árvore do Adobe Campaign. Este é um filtro em uma pasta. Aplique o seguinte processo para adicioná-lo à sua visão geral.

  1. Coloque o cursor no nó Page da aplicação web e adicione um elemento Select folder (Advanced controls > Select folder).

  2. Na janela Storage que aparece, clique em Edit variables.

  3. Altere o rótulo da variável para atender às suas necessidades.

  4. Altere o nome da variável com o valor da folder .

    OBSERVAÇÃO

    O nome da variável deve corresponder ao nome do elemento vinculado à pasta (definido no schema), ou seja folder, neste caso. Você deve reutilizar esse nome quando fizer referência à tabela.

  5. Aplique o tipo XML à variável.

  6. Selecione a interação Refresh page.

  7. Coloque o cursor na lista e na guia Advanced, faça referência à variável criada anteriormente na guia Folder filter XPath da lista. É necessário usar o nome do elemento relacionado ao link da pasta, isto é folder.

    OBSERVAÇÃO

    Nessa etapa, a aplicação web não está dentro do seu contexto de aplicação, portanto, o filtro não pode ser testado na pasta.

Adicionar um botão para configurar um novo aplicativo Web

  1. Coloque o cursor no elemento Page e adicione um link (Static elements > Link).

  2. Modifique o rótulo do link já que ele aparecerá no botão da visão geral.

    No nosso exemplo, o rótulo é New.

  3. Insira o seguinte URL no campo URL: xtk://open/?schema=nms:webApp&form=nms:newWebApp.

    OBSERVAÇÃO

    nms:webApp coincide com o schema da aplicação web.

    nms:newWebApp coincide com o assistente de criação de novas aplicações web.

  4. Escolha exibir a URL na mesma janela.

  5. Adicione o ícone da aplicação web no campo de imagem: /nms/img/webApp.png.

    Esse ícone aparecerá no botão New.

  6. Digite botão no campo Style.

    Esse estilo é mencionado no template Single-page Web application selecionado anteriormente.

Adicionar detalhes a uma lista

Ao configurar uma lista na sua visão geral, você pode optar por exibir detalhes adicionais para cada entrada na lista.

  1. Coloque o cursor no elemento de lista criado anteriormente.

  2. Na guia General, selecione o modo de exibição Columns and additional detail na lista suspensa.

  3. Na guia Data, adicione as colunas Primary key, Internal name e Description e selecione a opção Hidden field para cada uma.

    Dessa forma, essas informações só serão visíveis nos detalhes de cada entrada.

  4. Na guia Additional detail, adicione o seguinte 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>
    
OBSERVAÇÃO

As bibliotecas JavaScript levam cinco minutos para ser atualizadas no servidor. Você pode reiniciar o servidor para evitar ter que aguardar por esse atraso.

Filtragem e atualização da lista

Nesta seção, você criará um filtro para exibir a visão geral de aplicações web criadas por um operador específico. Esse filtro é criado com um editor de link. Após selecionar um operador, atualize a lista para aplicar seu filtro; isto exige a criação de um link de atualização.

Esses dois elementos serão agrupados no mesmo container para ser agrupados graficamente na visão geral.

  1. Posicione o cursor no elemento Page e selecione Container > Standard.

  2. Defina o número de colunas como 2, para que o editor de link e o link estejam próximos um do outro.

    Para obter mais informações sobre layout de elementos, consulte esta seção.

  3. Aplique dotedFilter.

    Esse estilo é mencionado no template n Single-page Web applicatio selecionado anteriormente.

  1. Coloque o cursor no container criado durante a etapa anterior e insira um editor de link no menu Advanced controls.

  2. Na janela de armazenamento que abre automaticamente, selecione a opção Variables, em seguida, clique no link Edit variables e crie uma variável XML para filtrar dados.

  3. Modifique o rótulo.

    Ele aparecerá ao lado do campo Filter na visão geral.

  4. Escolha a tabela Operador como um esquema de aplicativo.

  5. Coloque o cursor no elemento da lista e crie um filtro através da guia Data > Filter:

    • Expression: Chave externa do link "Created by"
    • Operador: igual a
    • Value: Variáveis (variáveis)
    • Taken into account if: '$(var2/@id)'!=''

ATENÇÃO

O usuário da aplicação web deve ser um operador identificado com os direitos apropriados do Adobe Campaign para acessar as informações. Esse tipo de configuração não funcionará para aplicações web anônimas.

  1. Coloque o cursor no container e insira um Link no menu Static elements.

  2. Modifique o rótulo.

  3. Selecione Refresh data in a list.

  4. Adicione a lista criada anteriormente.

  5. Adicione o ícone de atualização no campo Image: /xtk/img/refresh.png.

  6. Usar as setas de organização por tipo reorganiza os vários elementos da aplicação web, conforme mostrado abaixo.

A aplicação web agora está configurada. É possível clicar na guia Preview para pré-visualizá-la.

Nesta página