Editar formulários

Visão geral

Os profissionais de marketing e operadores usam formulários de entrada para criar, modificar e visualizar registros. O Forms mostra uma representação visual de informações.

É possível criar e modificar formulários de entrada:

  • Você pode modificar os formulários de entrada de fábrica que são entregues por padrão. Os formulários de entrada de fábrica são baseados nos esquemas de dados de fábrica.
  • É possível criar formulários de entrada personalizados, com base em esquemas de dados definidos por você.

Forms são entidades de xtk:form tipo . É possível exibir a estrutura do formulário de entrada na variável xtk:form esquema. Para exibir esse esquema, escolha Administration > Configuration > Data schemas no menu . Leia mais sobre estrutura do formulário.

Para acessar formulários de entrada, escolha Administration> Configuration >Input forms no menu:

Para criar formulários, edite o conteúdo XML no editor XML:

Leia mais.

Para visualizar um formulário, clique no botão Preview guia :

Tipos de formulário

É possível criar diferentes tipos de formulários de entrada. O tipo de formulário determina como os usuários navegam no formulário:

  • Tela do console

    Esse é o tipo de formulário padrão. O formulário inclui uma única página.

  • Gerenciamento de conteúdo

    Use esse tipo de formulário para gerenciamento de conteúdo. Veja isso caso de uso.

  • Assistente

    Esse formulário inclui várias telas flutuantes ordenadas em sequências específicas. Os usuários navegam de uma tela para outra. Leia mais.

  • Iconbox

    Esse formulário inclui várias páginas. Para navegar no formulário, os usuários selecionam ícones à esquerda do formulário.

  • Notebook

    Esse formulário inclui várias páginas. Para navegar no formulário, os usuários selecionam guias na parte superior do formulário.

  • Painel vertical

    Este formulário mostra uma árvore de navegação.

  • Painel horizontal

    Este formulário mostra uma lista de itens.

Containers

Nos formulários, é possível usar contêineres para vários fins:

  • Organizar o conteúdo nos formulários
  • Definir o acesso aos campos de entrada
  • Aninhar formulários em outros formulários

Leia mais.

Organizar o conteúdo

Use contêineres para organizar o conteúdo em formulários:

  • É possível agrupar campos em seções.
  • É possível adicionar páginas a formulários de várias páginas.

Para inserir um contêiner, use o <container> elemento. Leia mais.

Campos de grupo

Use contêineres para agrupar campos de entrada em seções organizadas.

Para inserir uma seção em um formulário, use este elemento: <container type="frame">. Como opção, para adicionar um título de seção, use a variável label atributo.

Sintaxe: <container type="frame" label="section_title"> […] </container>

Neste exemplo, um contêiner define a variável Criação , que compreende a Created by e Name campos de entrada:

<form _cs="Coupons (nms)" entitySchema="xtk:form" img="xtk:form.png" label="Coupons"
      name="coupon" namespace="nms" type="default" xtkschema="xtk:form">
  <input xpath="@code"/>
  <input xpath="@type"/>
  <container label="Creation" type="frame">
    <input xpath="createdBy"/>
    <input xpath="createdBy/@name"/>
  </container>
</form>

Adicionar páginas a formulários de várias páginas

Para formulários multipáginas, use um contêiner para criar uma página de formulário.

Este exemplo mostra contêineres para a variável Geral e Detalhes páginas de um formulário:

<container img="ncm:book.png" label="General">
[…]
</container>
<container img="ncm:detail.png" label="Details">
[…]
</container>

Definir acesso aos campos

Use containers para definir o que é visível e definir o acesso aos campos. Você pode ativar ou desativar grupos de campos.

Aninhar formulários

Use contêineres para aninhar formulários em outros formulários. Leia mais.

Referências a imagens

Para localizar imagens, escolha Administration > Configuration > Images no menu .

Para associar uma imagem a um elemento no formulário, por exemplo, um ícone, é possível adicionar uma referência a uma imagem. Use o img , por exemplo, no <container> elemento.

Sintaxe: img="namespace:filename.extension"

Este exemplo mostra referências ao book.png e detail.png imagens da ncm namespace:

<container img="ncm:book.png" label="General">
[…]
</container>
<container img="ncm:detail.png" label="Details">
[…]
</container>

Essas imagens são usadas para ícones em que os usuários clicam para navegar em um formulário de várias páginas:

Criar um formulário simples

Para criar um formulário, siga estas etapas:

  1. No menu , escolha Administration > Configuration > Input forms.

  2. Clique no botão New na parte superior direita da lista.

  3. Especifique as propriedades do formulário:

    • Especifique o nome e o namespace do formulário.

      O nome do formulário e o namespace podem corresponder ao schema de dados relacionado. Este exemplo mostra um formulário para a variável cus:order schema de dados:

      <form entitySchema="xtk:form" img="xtk:form.png" label="Order" name="order" namespace="cus" type="iconbox" xtkschema="xtk:form">
  […]
</form>

      Como alternativa, você pode especificar explicitamente o schema de dados no entity-schema atributo.

      <form entity-schema="cus:stockLine" entitySchema="xtk:form" img="xtk:form.png" label="Stock order" name="stockOrder" namespace="cus" xtkschema="xtk:form">
  […]
</form>

    • Especifique o rótulo a ser exibido no formulário.

    • Como opção, especifique o tipo de formulário. Se um tipo de formulário não for especificado, o tipo de tela do console será usado por padrão.

      Ao projetar um formulário multipáginas, é possível omitir o tipo de formulário no <form> e especifique o tipo em um contêiner.

  4. Clique em Save.

  5. Insira os elementos do formulário.

    Por exemplo, para inserir um campo de entrada, use a variável <input> elemento. Defina as xpath à referência de campo como uma expressão XPath. Leia mais.

    Este exemplo mostra campos de entrada com base na variável nms:recipient esquema.

    <input xpath="@firstName"/>
<input xpath="@lastName"/>

  6. Se o formulário for baseado em um tipo de schema específico, você poderá pesquisar os campos desse schema:

    1. Clique em Insert > Document fields.

    2. Selecione o campo e clique em OK.

  7. Como opção, especifique o editor de campos.

    Um editor de campo padrão está associado a cada tipo de dados:

    • Para um campo do tipo data, o formulário mostra um calendário de entrada.
    • Para um campo do tipo enumeração, o formulário mostra uma lista de seleção.

    Você pode usar esses tipos de editor de campo:

    Editor de campos Atributo do formulário
    Botão de opção type="radiobutton"
    Caixa de seleção type="checkbox"
    Editar árvore type="tree"

    Leia mais sobre controles da lista de memória.

  8. Opcionalmente, defina o acesso aos campos:

    Elemento Atributo Descrição
    <input> read-only:"true" Fornece acesso somente leitura a um campo
    <container> type="visibleGroup" visibleIf="edit-expr" Exibe condicionalmente um grupo de campos
    <container> type="enabledGroup" enabledIf="edit-expr" Habilita condicionalmente um grupo de campos

    Exemplo:

    <container type="enabledGroup" enabledIf="@gender=1">
  […]
</container>
<container type="enabledGroup" enabledIf="@gender=2">
  […]
</container>

  9. Como opção, use contêineres para agrupar campos em seções.

    <container type="frame" label="Name">
   <input xpath="@firstName"/>
   <input xpath="@lastName"/>
</container>
<container type="frame" label="Contact details">
   <input xpath="@email"/>
   <input xpath="@phone"/>
</container>

Criar um formulário multipáginas

Você pode criar formulários multipáginas. Também é possível aninhar formulários em outros formulários.

Crie um iconbox formulário

Use o iconbox tipo de formulário para mostrar ícones à esquerda do formulário, que levam os usuários para páginas diferentes no formulário.

Para alterar o tipo de formulário existente para iconboxsiga estas etapas:

  1. Altere o type do <form> elemento para iconbox:

    <form […] type="iconbox">

  2. Defina um contêiner para cada página de formulário:

    1. Adicione um <container> como filho do <form> elemento.

    2. Para definir um rótulo e uma imagem para o ícone, use o label e img atributos.

      <form entitySchema="xtk:form" name="Service provider" namespace="nms" type="iconbox" xtkschema="xtk:form">
    <container img="xtk:properties.png" label="General">
        <input xpath="@label"/>
        <input xpath="@name"/>
        […]
    </container>
    <container img="nms:msgfolder.png" label="Details">
        <input xpath="@address"/>
        […]
    </container>
    <container img="nms:supplier.png" label="Services">
        […]
    </container>
</form>

    Como alternativa, remova o type="frame" do atributo existente <container> elementos.

Criar um formulário de bloco de notas

Use o notebook tipo de formulário para mostrar guias na parte superior do formulário, que levam os usuários para páginas diferentes.

Para alterar o tipo de formulário existente para notebooksiga estas etapas:

  1. Altere o type do <form> elemento para notebook:

    <form […] type="notebook">

  2. Adicione um contêiner para cada página de formulário:

    1. Adicione um <container> como filho do <form> elemento.
    2. Para definir o rótulo e a imagem para o ícone, use o label e img atributos.
      <form entitySchema="xtk:form" name="Service provider" namespace="nms" type="notebook" xtkschema="xtk:form">
      <container label="General">
          <input xpath="@label"/>
          <input xpath="@name"/>
          […]
      </container>
      <container label="Details">
          <input xpath="@address"/>
          […]
      </container>
      <container label="Services">
          […]
      </container>
  </form>

    Como alternativa, remova o type="frame" do atributo existente <container> elementos.

Aninhar formulários

É possível aninhar formulários em outros formulários. Por exemplo, é possível aninhar formulários de notebook em formulários de caixa de ícones.

O nível de aninhamento controla a navegação. Os usuários podem detalhar os subformulários.

Para aninhar um formulário em outro formulário, insira um <container> e defina o type para o tipo de formulário. Para o formulário de nível superior, é possível definir o tipo de formulário em um contêiner externo ou no <form> elemento.

Exemplo

Este exemplo mostra um formulário complexo:

  • O formulário de nível superior é um formulário iconbox. Este formulário consiste em dois contêineres rotulados Geral e Detalhes.

    Como resultado, o formulário externo mostra a variável Geral e Detalhes páginas no nível superior. Para acessar essas páginas, os usuários clicam nos ícones à esquerda do formulário.

  • O subformulário é um formulário de bloco de aninhado dentro do Geral contêiner. O subformulário consiste em dois contêineres rotulados Nome e Contato.

<form _cs="Profile (nms)" entitySchema="xtk:form" img="xtk:form.png" label="Profile" name="profile" namespace="nms" xtkschema="xtk:form">
  <container type="iconbox">
    <container img="ncm:general.png" label="General">
      <container type="notebook">
        <container label="Name">
          <input xpath="@firstName"/>
          <input xpath="@lastName"/>
        </container>
        <container label="Contact">
          <input xpath="@email"/>
        </container>
      </container>
    </container>
    <container img="ncm:detail.png" label="Details">
      <input xpath="@birthDate"/>
    </container>
  </container>
</form>

Como resultado, a variável Geral a página do formulário externo mostra a variável Nome e Contato guias.

Para aninhar um formulário em outro formulário, insira um <container> e defina o type para o tipo de formulário. Para o formulário de nível superior, é possível definir o tipo de formulário em um contêiner externo ou no <form> elemento.

Exemplo

Este exemplo mostra um formulário complexo:

  • O formulário de nível superior é um formulário iconbox. Este formulário consiste em dois contêineres rotulados Geral e Detalhes.

    Como resultado, o formulário externo mostra a variável Geral e Detalhes páginas no nível superior. Para acessar essas páginas, os usuários clicam nos ícones à esquerda do formulário.

  • O subformulário é um formulário de bloco de aninhado dentro do Geral contêiner. O subformulário consiste em dois contêineres rotulados Nome e Contato.

<form _cs="Profile (nms)" entitySchema="xtk:form" img="xtk:form.png" label="Profile" name="profile" namespace="nms" xtkschema="xtk:form">
  <container type="iconbox">
    <container img="ncm:general.png" label="General">
      <container type="notebook">
        <container label="Name">
          <input xpath="@firstName"/>
          <input xpath="@lastName"/>
        </container>
        <container label="Contact">
          <input xpath="@email"/>
        </container>
      </container>
    </container>
    <container img="ncm:detail.png" label="Details">
      <input xpath="@birthDate"/>
    </container>
  </container>
</form>

Como resultado, a variável Geral a página do formulário externo mostra a variável Nome e Contato guias.

Modificar um formulário de entrada de fábrica

Para modificar um formulário de fábrica, siga estas etapas:

  1. Modifique o formulário de entrada de fábrica:

    1. No menu , escolha Administration > Configuration > Input forms.
    2. Selecione um formulário de entrada e o modifique.

    Você pode estender esquemas de dados de fábrica, mas não pode estender formulários de entrada de fábrica. Recomendamos que você modifique os formulários de entrada de fábrica diretamente sem recriá-los. Durante as atualizações de software, suas modificações nos formulários de entrada de fábrica são combinadas com as atualizações. Se a mesclagem automática falhar, você poderá resolver os conflitos. Leia mais.

    Por exemplo, se você estender um schema de fábrica com um campo adicional, poderá adicionar esse campo ao formulário de fábrica relacionado.

Validar formulários

É possível incluir controles de validação em formulários.

Conceder acesso somente leitura a campos

Para conceder acesso somente leitura a um campo, use o readOnly="true" atributo. Por exemplo, talvez você queira mostrar a chave primária de um registro, mas com acesso somente leitura. Leia mais.

Neste exemplo, a chave primária (iRecipientIddo nms:recipient O schema é exibido no acesso somente leitura:

<value xpath="@iRecipientId" readOnly="true"/>

Verificar campos obrigatórios

Você pode verificar as informações obrigatórias:

  • Use o required="true" para os campos obrigatórios.
  • Use o <leave> para verificar esses campos e mostrar mensagens de erro.

Neste exemplo, o endereço de email é obrigatório e uma mensagem de erro é exibida se o usuário não tiver fornecido essas informações:

<input xpath="@email" required="true"/>
<leave>
  <check expr="@email!=''">
    <error>The email address is required.</error>
  </check>
</leave>

Leia mais sobre campos de expressão e contexto do formulário.

Validar valores

Você pode usar chamadas SOAP JavaScript para validar dados de formulário no Console. Use essas chamadas para validação complexa, por exemplo, para verificar um valor em relação a uma lista de valores autorizados. Leia mais.

  1. Crie uma função de validação em um arquivo JS.

    Exemplo:

    function nms_recipient_checkValue(value)
{
  logInfo("checking value " + value)
  if (…)
  {
    logError("Value " + value + " is not valid")
  }
  return 1
}

    Neste exemplo, a função é nomeada checkValue. Essa função é usada para verificar a variável recipient tipo de dados na nms namespace. O valor que está sendo verificado é registrado. Se o valor não for válido, uma mensagem de erro será registrada. Se o valor for válido, então o valor 1 será retornado.

    Você pode usar o valor retornado para modificar o formulário.

  2. No formulário, adicione o <soapCall> para <leave> elemento.

    Neste exemplo, uma chamada SOAP é usada para validar o @valueToCheck sequência de caracteres:

    <form name="recipient" (…)>
(…)
  <leave>
    <soapCall name="checkValue" service="nms:recipient">
      <param exprIn="@valueToCheck" type="string"/>
    </soapCall>
  </leave>
</form>

    Neste exemplo, a variável checkValue e o método nms:recipient são usados:

    • O serviço é o namespace e o tipo de dados.
    • O método é o nome da função. O nome diferencia maiúsculas de minúsculas.

    A chamada é executada de forma síncrona.

    Todas as exceções são exibidas. Se você usar a variável <leave> , os usuários não poderão salvar o formulário até que as informações inseridas sejam validadas.

Este exemplo mostra como você pode fazer chamadas de serviço a partir dos formulários:

<enter>
  <soapCall name="client" service="c4:ybClient">
    <param exprIn="@id" type="string"/>
    <param type="boolean" xpathOut="/tmp/@count"/>
  </soapCall>
</enter>

Neste exemplo, a entrada é uma ID, que é uma chave primária. Quando os usuários preenchem o formulário dessa ID, uma chamada SOAP é feita com essa ID como parâmetro de entrada. A saída é um booleano gravado neste campo: /tmp/@count. Você pode usar esse booleano dentro do formulário. Leia mais sobre contexto do formulário.

Nesta página