Casos de uso: criar páginas de visão geral use-cases-creating-overviews

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

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.

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

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

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.

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.

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.

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

Na janela Storage que aparece, clique em Edit variables.

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

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

Aplique o tipo XML à variável.

Selecione a interação Refresh page.

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.

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

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

No nosso exemplo, o rótulo é New.

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

Escolha exibir a URL na mesma janela.

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

Esse ícone aparecerá no botão New.

Digite botão no campo Style.

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

Coloque o cursor no elemento de lista criado anteriormente.

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

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.

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>

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

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.

Aplique dotedFilter.

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

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

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.

Modifique o rótulo.

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

Escolha a tabela Operador como um esquema de aplicativo.

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)'!=''

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

Modifique o rótulo.

Selecione Refresh data in a list.

Adicione a lista criada anteriormente.

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

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