Show Menu
TÓPICOS×

Casos de uso: criação de visões gerais

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 uma aplicação 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 sua página e clique em Preview .
    A lista de aplicações web disponíveis no seu banco de dados é exibida.

Adição de um filtro em 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 sua 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 .
    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 .
    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.

Adição de um botão para configurar uma nova aplicação 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 .
    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 button no campo Style .
    Esse estilo é mencionado no template Single-page Web application selecionado anteriormente.

Adição de 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>
    
    
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.