Edición de formularios

Información general

Los especialistas en marketing y los operadores utilizan formularios de entrada para crear, modificar y previsualizar registros. Forms muestra una representación visual de la información.

Puede crear y modificar formularios de entrada:

  • Puede modificar los formularios de entrada de fábrica que se envían de forma predeterminada. Los formularios de entrada de fábrica se basan en los esquemas de datos de fábrica.
  • Puede crear formularios de entrada personalizados, basados en esquemas de datos definidos.

Forms son entidades de xtk:form tipo . Puede ver la estructura del formulario de entrada en el xtk:form esquema. Para ver este esquema, elija Administration > Configuration > Data schemas del menú . Más información sobre estructura de formulario.

Para acceder a los formularios de entrada, seleccione Administration> Configuration >Input forms del menú:

Para diseñar formularios, edite el contenido XML en el editor XML:

Más información.

Para obtener una vista previa de un formulario, haga clic en el botón Preview pestaña:

Tipos de formulario

Puede crear diferentes tipos de formularios de entrada. El tipo de formulario determina cómo navegan los usuarios en el formulario:

  • Pantalla de la consola

    Este es el tipo de formulario predeterminado. El formulario consta de una sola página.

  • Administración de contenido

    Utilice este tipo de formulario para la gestión de contenido. Consulte esta caso de uso.

  • Asistente

    Este formulario consta de varias pantallas flotantes que se ordenan en secuencias específicas. Los usuarios navegan de una pantalla a otra. Más información.

  • Iconbox

    Este formulario consta de varias páginas. Para desplazarse por el formulario, los usuarios seleccionan iconos a la izquierda del formulario.

  • Portátil

    Este formulario consta de varias páginas. Para desplazarse por el formulario, los usuarios seleccionan fichas en la parte superior del formulario.

  • Panel vertical

    Este formulario muestra un árbol de navegación.

  • Panel horizontal

    Este formulario muestra una lista de elementos.

Contenedores

En los formularios, puede utilizar contenedores para varios fines:

  • Organización del contenido en los formularios
  • Definición del acceso a los campos de entrada
  • Anidar formularios dentro de otros formularios

Más información.

Organizar contenido

Utilice contenedores para organizar el contenido dentro de los formularios:

  • Los campos se pueden agrupar en secciones.
  • Puede agregar páginas a formularios de varias páginas.

Para insertar un contenedor, utilice la variable <container> elemento. Más información.

Campos de grupo

Utilice contenedores para agrupar los campos de entrada en secciones organizadas.

Para insertar una sección en un formulario, utilice este elemento: <container type="frame">. De forma opcional, para agregar un título de sección, utilice la variable label atributo.

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

En este ejemplo, un contenedor define la variable Creación , que incluye el Created by y 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>

Agregar páginas a formularios de varias páginas

Para los formularios de varias páginas, utilice un contenedor para crear una página de formulario.

Este ejemplo muestra los contenedores para la variable General y Detalles páginas de un formulario:

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

Definición del acceso a los campos

Utilice contenedores para definir qué es visible y para definir el acceso a los campos. Puede activar o desactivar grupos de campos.

Anidar formularios

Utilice contenedores para anidar formularios dentro de otros formularios. Más información.

Referencias a imágenes

Para buscar imágenes, elija Administration > Configuration > Images del menú .

Para asociar una imagen a un elemento del formulario, por ejemplo, un icono, puede agregar una referencia a una imagen. Utilice la variable img , por ejemplo, en la <container> elemento.

Sintaxis: img="namespace:filename.extension"

Este ejemplo muestra referencias a la variable book.png y detail.png imágenes de ncm namespace:

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

Estas imágenes se utilizan para los iconos en los que los usuarios hacen clic para desplazarse por un formulario de varias páginas:

Crear un formulario simple

Para crear un formulario, siga estos pasos:

  1. En el menú , elija Administration > Configuration > Input forms.

  2. Haga clic en el New en la parte superior derecha de la lista.

  3. Especifique las propiedades del formulario:

    • Especifique el nombre del formulario y el área de nombres.

      El nombre del formulario y el espacio de nombres pueden coincidir con el esquema de datos relacionado. Este ejemplo muestra un formulario para la variable cus:order esquema de datos:

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

      También puede especificar explícitamente el esquema de datos en la variable 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 la etiqueta que se mostrará en el formulario.

    • De forma opcional, especifique el tipo de formulario. Si no especifica ningún tipo de formulario, se utilizará de forma predeterminada el tipo de pantalla de la consola.

      Si está diseñando un formulario de varias páginas, puede omitir el tipo de formulario en la variable <form> y especifique el tipo en un contenedor.

  4. Haga clic en Save.

  5. Inserte los elementos de formulario.

    Por ejemplo, para insertar un campo de entrada, utilice el <input> elemento. Configure las variables xpath a la referencia de campo como expresión XPath. Más información.

    Este ejemplo muestra los campos de entrada basados en la variable nms:recipient esquema.

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

  6. Si el formulario se basa en un tipo de esquema específico, puede buscar los campos de este esquema:

    1. Haga clic en Insert > Document fields.

    2. Seleccione el campo y haga clic en OK.

  7. De forma opcional, especifique el editor de campos.

    Se asocia un editor de campos predeterminado a cada tipo de datos:

    • Para un campo de tipo fecha, el formulario muestra un calendario de entrada.
    • Para un campo de tipo enumeration, el formulario muestra una lista de selección.

    Puede utilizar estos tipos de editor de campos:

    Editor de campos Atributo de formulario
    Botón de radio type="radiobutton"
    Casilla de verificación type="checkbox"
    Editar árbol type="tree"

    Más información sobre controles de lista de memoria.

  8. Opcionalmente, defina el acceso a los campos:

    Elemento Atributo Descripción
    <input> read-only:"true" Proporciona acceso de solo lectura a un campo
    <container> type="visibleGroup" visibleIf="edit-expr" Muestra condicionalmente un grupo de campos
    <container> type="enabledGroup" enabledIf="edit-expr" Habilita condicionalmente un grupo de campos

    Ejemplo:

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

  9. Opcionalmente, puede utilizar contenedores para agrupar campos en secciones.

    <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>

Crear un formulario de varias páginas

Puede crear formularios de varias páginas. También puede anidar formularios dentro de otros formularios.

Cree un iconbox formulario

Utilice la variable iconbox tipo de formulario para mostrar los iconos a la izquierda del formulario, que llevan a los usuarios a diferentes páginas del formulario.

Cambio del tipo de un formulario existente a iconbox, siga estos pasos:

  1. Cambie el type del <form> elemento a iconbox:

    <form […] type="iconbox">

  2. Defina un contenedor para cada página de formulario:

    1. Agregue un <container> como elemento secundario del <form> elemento.

    2. Para definir una etiqueta y una imagen para el icono, utilice la variable label y 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>

    También puede quitar el type="frame" del atributo existente <container> elementos.

Crear un formulario de bloc de notas

Utilice la variable notebook tipo de formulario para mostrar fichas en la parte superior del formulario, que llevan a los usuarios a diferentes páginas.

Cambio del tipo de un formulario existente a notebook, siga estos pasos:

  1. Cambie el type del <form> elemento a notebook:

    <form […] type="notebook">

  2. Agregue un contenedor para cada página de formulario:

    1. Agregue un <container> como elemento secundario del <form> elemento.
    2. Para definir la etiqueta y la imagen del icono, utilice la variable label y 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>

    También puede quitar el type="frame" del atributo existente <container> elementos.

Anidar formularios

Puede anidar formularios dentro de otros formularios. Por ejemplo, puede anidar formularios de bloc de notas en formularios de iconbox.

Nivel de anidación controla la navegación. Los usuarios pueden explorar en profundidad los subformularios.

Para anidar un formulario dentro de otro formulario, inserte un <container> y establezca la variable type al tipo de formulario. Para el formulario de nivel superior, puede definir el tipo de formulario en un contenedor exterior o en la variable <form> elemento.

Ejemplo

Este ejemplo muestra un formulario complejo:

  • El formulario de nivel superior es un formulario de iconbox. Este formulario consta de dos contenedores etiquetados General y Detalles.

    Como resultado, el formulario exterior muestra la variable General y Detalles páginas en el nivel superior. Para acceder a estas páginas, los usuarios hacen clic en los iconos de la izquierda del formulario.

  • El subformulario es un formulario de bloc de notas anidado dentro de la variable General contenedor. El subformulario consta de dos contenedores etiquetados Nombre y Contacto.

<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, la variable General La página del formulario exterior muestra la variable Nombre y Contacto pestañas.

Para anidar un formulario dentro de otro formulario, inserte un <container> y establezca la variable type al tipo de formulario. Para el formulario de nivel superior, puede definir el tipo de formulario en un contenedor exterior o en la variable <form> elemento.

Ejemplo

Este ejemplo muestra un formulario complejo:

  • El formulario de nivel superior es un formulario de iconbox. Este formulario consta de dos contenedores etiquetados General y Detalles.

    Como resultado, el formulario exterior muestra la variable General y Detalles páginas en el nivel superior. Para acceder a estas páginas, los usuarios hacen clic en los iconos de la izquierda del formulario.

  • El subformulario es un formulario de bloc de notas anidado dentro de la variable General contenedor. El subformulario consta de dos contenedores etiquetados Nombre y Contacto.

<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, la variable General La página del formulario exterior muestra la variable Nombre y Contacto pestañas.

Modificación de un formulario de entrada de fábrica

Para modificar un formulario de fábrica, siga estos pasos:

  1. Modifique el formulario de entrada de fábrica:

    1. En el menú , elija Administration > Configuration > Input forms.
    2. Seleccione un formulario de entrada y edítelo.

    Puede ampliar los esquemas de datos de fábrica, pero no puede ampliar los formularios de entrada de fábrica. Se recomienda modificar los formularios de entrada de fábrica directamente sin necesidad de volver a crearlos. Durante las actualizaciones de software, las modificaciones en los formularios de entrada de fábrica se combinan con las actualizaciones. Si la combinación automática falla, puede resolver los conflictos. Más información.

    Por ejemplo, si amplía un esquema de fábrica con un campo adicional, puede agregar este campo al formulario de fábrica relacionado.

Validación de formularios

Puede incluir controles de validación en los formularios.

Concesión de acceso de solo lectura a campos

Para conceder acceso de solo lectura a un campo, utilice la variable readOnly="true" atributo. Por ejemplo, es posible que desee mostrar la clave principal de un registro, pero con acceso de solo lectura. Más información.

En este ejemplo, la clave principal (iRecipientId) de nms:recipient schema se muestra en acceso de solo lectura:

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

Comprobar campos obligatorios

Puede comprobar la información obligatoria:

  • Utilice la variable required="true" para los campos obligatorios.
  • Utilice la variable <leave> para comprobar estos campos y mostrar mensajes de error.

En este ejemplo, la dirección de correo electrónico es obligatoria y se muestra un mensaje de error si el usuario no ha proporcionado esta información:

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

Más información sobre campos de expresión y contexto del formulario.

Validar valores

Puede utilizar llamadas SOAP de JavaScript para validar los datos de formulario desde la consola. Utilice estas llamadas para una validación compleja, por ejemplo, para comparar un valor con una lista de valores autorizados. Más información.

  1. Cree una función de validación en un archivo JS.

    Ejemplo:

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

    En este ejemplo, la función tiene el nombre checkValue. Esta función se utiliza para comprobar la variable recipient el tipo de datos de nms espacio de nombres. El valor que se está comprobando se registra. Si el valor no es válido, se registra un mensaje de error. Si el valor es válido, se devuelve el valor 1.

    Puede utilizar el valor devuelto para modificar el formulario.

  2. En el formulario, agregue la variable <soapCall> al <leave> elemento.

    En este ejemplo, se utiliza una llamada SOAP para validar la variable @valueToCheck cadena:

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

    En este ejemplo, la variable checkValue y nms:recipient se utilizan:

    • El servicio es el área de nombres y el tipo de datos.
    • El método es el nombre de función. El nombre distingue entre mayúsculas y minúsculas.

    La llamada se realiza sincrónicamente.

    Se muestran todas las excepciones. Si usa la variable <leave> , los usuarios no podrán guardar el formulario hasta que se valide la información introducida.

Este ejemplo muestra cómo se pueden realizar llamadas de servicio desde formularios:

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

En este ejemplo, la entrada es un ID, que es una clave principal. Cuando los usuarios rellenan el formulario para este ID, se realiza una llamada SOAP con este ID como parámetro de entrada. El resultado es un booleano que se escribe en este campo: /tmp/@count. Puede utilizar este booleano dentro del formulario. Más información sobre contexto del formulario.

En esta página