Acerca de los controles del diseñador de formularios

Al arrastrar y soltar un componente o al hacer clic en el botón Editar de un componente del formulario, se abre el asistente de configuración. Dependiendo del tipo de componente del formulario, hay ciertas pestañas del asistente disponibles para personalizarlo. A continuación se describen todas las pestañas disponibles y sus propiedades generales en el Diseñador de formularios de UiPath .

Visualización

• Etiqueta : el título del componente.

• Posición de la etiqueta : la posición de la etiqueta para un campo.

• Descripción : el texto que aparece debajo del campo de entrada.

• Tooltip - Adds a tooltip icon to the side of the field. Input the text of the tooltip.

• Hidden - Hide a component in the Form Renderer.

• Ocultar etiqueta : oculta la etiqueta de un componente.

• Deshabilitado : deshabilita un campo en el formulario.

• Marcador de posición : el texto que aparece cuando el campo está vacío.

• Prefix - The text that shows before a field.

• Suffix - The text that shows after a field.

• Table View - When checked, shows the value within the table view of the submissions.

• Input Mask - An input mask provides a predefined format. For a phone-number field, the default input mask is [phone].

  Los elementos de la máscara de entrada son:

  • 9 - numérico
  • a : alfabético
  • * : alfanumérico

Datos

• Default Value - The value of the field before users interacting with it. The default value overrides the placeholder text.
• Multiple Values - When checked, multiple values can be added to the field. The Add Another Button becomes visible in the field.
• Contenido : la sección donde escribes el contenido de un componente.
• Format - The moment.js format you use for saving this field. For example, HH:mm:ss.
• Redibujar en : redibuja este componente si otro componente del formulario cambia. Elija el evento en el que el componente debe volver a dibujarse en la lista desplegable. Los eventos predeterminados a elegir son Cualquier cambio y Enviar.

Validación

• Obligatorio : cuando se marca, este campo debe tener un valor.
• Validar en : determina cuándo este componente desencadena la validación de front-end. Elija un evento de la lista desplegable: Cambiar o Desenfocar.
• Longitud mínima : el requisito de longitud mínima que debe cumplir este campo.
• Longitud máxima : el requisito de longitud máxima que debe cumplir este campo.
• Longitud mínima de palabra : la cantidad mínima de palabras que se pueden añadir a este componente.
• Maximum Word Length - The maximum amount of words that can be added to this field.
• Regular Expression Pattern - This is the regular expression pattern that the component must pass, before the form can be submitted.
• Etiqueta de error : la etiqueta que se muestra cuando se muestra un mensaje de error de validación.
• Mensaje de error personalizado : un mensaje de error personalizado que se mostrará si se produce un error.

Clave del campo

• Property Name - The name of this component in the Workflow Fields Collection.

Condicional

The Conditional tab in the Form Designer allows you to place conditions on components in your form, in order to hide or display them.

La pestaña Condicional tiene una sección Simple .

The Simple section of the Conditional tab allows you to hide or display a component, based on the value of another component.

La sección Simple consta de tres campos:

1. This component should Display - from this dropdown list, choose:

   • True if you want to condition when the component displays.
   • False if you want to condition when the component hides.

2. When the form component - from this dropdown list, choose a component in the form to act as a condition.

3. Has the value - type in the value that conditions the component when to display or hide.

   

Consulta el tutorial sobre la creación de condiciones simples en la guía Form.Activities.

Lógica

The Logic tab of the Form Designer allows you to create conditions and advanced logic scripts that can change the state or the behavior of the selected form component.

Usando la lógica avanzada, puedes cambiar dinámicamente los controles, la apariencia y la sensación de un componente del formulario.

La lógica de un formulario consta de dos partes: el desencadenador y la acción.

Desencadenador

El desencadenador lógico es la condición en la que tiene lugar la acción. Por ejemplo, es posible que desees mostrar un campo de formulario específico solo cuando se selecciona una opción de casilla de verificación. En este caso, la opción de casilla de verificación es el desencadenador y la acción muestra el campo de formulario.

Hay cuatro tipos de desencadenadores lógicos:

Tipo de desencadenador	Descripción	Ejemplo
Simple	Se define un componente y un valor del formulario de activación.
Javascript	Proporcionas una lógica JavaScript para un componente de formulario o datos de formulario. Utiliza la sintaxis de JavaScript para crear una lógica compleja, como un bucle o un comportamiento dinámico.
Lógica JSON	Proporcionas una lógica JSON para un componente de formulario o datos de formulario. Recomendado en casos en los que JavaScript no está permitido. No puede admitir bucles o comportamientos dinámicos.
Evento	Se define un evento de componente que, una vez emitido por el componente correspondiente, desencadena la acción deseada.

Acción

La acción lógica es el comportamiento del componente del formulario que debe ocurrir en función de las condiciones lógicas que establezca (es decir, el desencadenador). Por ejemplo, puede activar un botón para usuarios de una edad específica. En este caso, el rango de edad es el desencadenador y la activación del botón es la acción.

Hay cuatro tipos de acciones lógicas:

Tipo de acción	Descripción	Ejemplo
Propiedad	El desencadenador cambia una de las propiedades del componente disponibles, como Información sobre herramientas, Descripción, Clase CSS, etc. Las propiedades disponibles dependen del tipo de componente de activación.
Valor	El desencadenador cambia el valor del componente correspondiente. La acción debe definirse utilizando la sintaxis de JavaScript.
Fusionar esquema de componentes	El desencadenador cambia los parámetros del esquema del componente que se encuentran en el componente JSON. Para ver los parámetros del esquema que puedes cambiar, pasa el ratón por encima del componente correspondiente y haz clic en Editar JSON. Puedes cambiar varios parámetros dentro de una acción.
Acción personalizada	Defina una acción personalizada utilizando la sintaxis de JavaScript, de la misma manera que definiría el tipo de desencadenador de JavaScript.	N/A

Plantillas

La pestaña Plantillas es específica del componente Editar cuadrícula . La plantilla de pie de página te permite personalizar la cuadrícula utilizando JavaScript. Puedes modificar el aspecto del pie de página.

• Footer Template - This is the Lodash Template used to render the footer of the Edit Grid component.

  Hay dos variables disponibles:

  • valor : la matriz de datos de fila
  • componentes : la matriz de componentes en la cuadrícula

Archivo

La pestaña Archivo es específica solo para el componente Archivo . La pestaña Archivo te permite personalizar un componente de archivo , a través de configuraciones y propiedades específicas.

Estas son las propiedades disponibles en la pestaña Archivo

• Directorio : coloca todos los archivos cargados en este componente, en el directorio especificado. La cadena debe terminar con /.

• Solo cargar : permite a los usuarios solo cargar archivos. La opción de descarga no estará disponible cuando se marque.

• Tipos de archivo : te permite especificar los tipos de archivo, para clasificar los tipos de archivos que carga el usuario. Recomendado cuando un usuario carga varios tipos de archivos y quieres que el usuario especifique el tipo de cada archivo cargado.

• Patrón de archivo : te permite especificar las extensiones de archivo que se podrán cargar. No se cargarán otras extensiones de archivo que no se especifiquen.

• Tamaño mínimo del archivo : establece el tamaño mínimo del archivo cargado.

• Tamaño máximo del archivo : establece el tamaño máximo del archivo cargado. Para obtener más información sobre cómo especificar patrones y tamaños de archivo, consulta este enlace de GitHub.