nxar.Aprender
Steppers: procesos guiados paso a paso0 de 7 capítulos
  1. 1Qué es un Stepper
  2. 2Tu primer Stepper
  3. 3Campos, validaciones y valores por default
  4. 4Guardar lo que se completa
  5. 5Ramas y bloques condicionales
  6. 6Activarlo y lanzarlo desde la cuenta
  7. 7Probar y ver quién lo corrió

Casos de uso

  1. ·Registrar un reclamo desde la cuenta
  2. ·Calificar una oportunidad
  3. ·Checklist de onboarding que deja tareas
Volver al recorrido
Capítulo 3 de 7 · 10 min

Campos, validaciones y valores por default

Industria como picklist obligatorio que arranca con lo que ya tiene la cuenta, Teléfono con ejemplo y ayuda, los demás tipos de campo y la vista previa.

Un Input es un campo que completa la persona. Lo que escribe queda en una variable (la de Escribe en) y los nodos que vienen después la leen como {{empresa.industria}}. En este capítulo configurás los dos campos de Datos de la empresa.

Por qué agrupar las respuestas

En el capítulo anterior pusiste Agrupar respuestas en empresa. Las variables de un Stepper son una sola bolsa para todo el proceso: si la pantalla de la empresa y la del contacto tuvieran cada una un campo nombre, la segunda pisaría a la primera sin avisar. Con el grupo, una es {{empresa.nombre}} y la otra {{contacto.nombre}}, y no se cruzan.

Industria: un picklist obligatorio

Abrí el diseñador de Datos de la empresa y seleccioná el campo Industria. A la derecha:

  • Tipo de campo: Picklist.
  • Opciones: Lista fija. Cargá una fila por opción, con Agregar opción: en Valor lo que se guarda y en Label lo que ve la persona. Usá los mismos valores que el campo Industry de Account (Technology, Finance, Healthcare, Retail, Manufacturing, Services, Education, Other): es donde va a terminar la respuesta.
  • Valor por default: {{record.industry}}. Si la cuenta ya tiene industria, el picklist arranca con ese valor; si no, arranca vacío.
  • Tildá Requerido.

Teléfono: con ejemplo y ayuda

Seleccioná Teléfono:

  • Tipo de campo: Texto.
  • Valor por default: {{record.phone}}.
  • Placeholder: +54 11 4000-0000. Es el texto gris que se ve mientras el campo está vacío.
  • Texto de ayuda: El de la central, con código de área. Aparece debajo del campo.

No lo marques como requerido: hay clientes que no lo tienen a mano.

El campo Teléfono configurado. En la lista del centro, cada campo muestra la variable donde escribe.
Diseñador de la pantalla Datos de la empresa con el campo Teléfono seleccionado: Escribe en empresa.telefono, Tipo de campo Texto, Valor por default record.phone, Placeholder +54 11 4000-0000 y Texto de ayuda

El campo Teléfono configurado. En la lista del centro, cada campo muestra la variable donde escribe.

Mirá la vista previa

Arriba a la derecha del diseñador, Vista previa muestra la pantalla con el mismo dibujo que va a ver la persona. Los {{…}} todavía no se resuelven: eso pasa al correr, cuando hay una cuenta de verdad. Para volver, Volver al diseño.

La vista previa: el asterisco rojo marca los obligatorios. El detalle está vacío porque todavía no hay una cuenta.
Vista previa de la pantalla: Datos de {{record.name}} sin resolver, la línea de instrucciones, el detalle del registro vacío, Industria con asterisco rojo, Teléfono con su placeholder y su ayuda, y el botón Siguiente

La vista previa: el asterisco rojo marca los obligatorios. El detalle está vacío porque todavía no hay una cuenta.

En la vista previa vas a ver arriba también el nombre de la pantalla (Datos de la empresa) además de tu título. Al correr no pasa: cuando la pantalla tiene un bloque Título, se muestra solo ese.

Guardá

Guardar pantalla y después Guardar en la barra del builder.

Los tipos de campo

Tipo de campoPara qué
TextoUna línea: un nombre, un teléfono, un email
Texto largoVarias líneas: notas, el detalle de un reclamo
NúmeroMontos, cantidades. Si escriben letras, no deja seguir
FechaCon selector de calendario
CheckboxSí o no. Sin tildar vale “no”: nunca cuenta como vacío
PicklistUna opción de una lista fija, o de una lista que armó un paso anterior
Buscar registroElegir un registro de una Entidad (un contacto, una cuenta). Guarda la referencia, no el nombre

Dos opciones más que vas a usar:

  • Solo lectura: muestra el valor por default y no deja cambiarlo, pero igual llega a los nodos de abajo. Sirve para mostrar algo que ya está decidido (por ejemplo, la cuenta padre). Si además es Requerido, ponele un valor por default: si queda vacío, nadie puede completarlo y la pantalla se traba. El diseñador lo marca en amarillo.
  • Mostrar este bloque cuando: un campo que aparece solo según una respuesta. Lo ves en el capítulo de ramas y bloques condicionales.

Qué pasa si falta un obligatorio

Al tocar Siguiente, cada campo obligatorio vacío se marca en rojo con “Este campo es requerido.” y la pantalla no avanza. La misma revisión se hace otra vez en el servidor: no se puede saltear desde el navegador.

Así se ve en la pantalla del contacto, que vas a armar en el capítulo siguiente: dos obligatorios vacíos, la pantalla no avanza.
Pantalla ¿Con quién hablamos? del Stepper con Nombre y Email en rojo y el texto Este campo es requerido debajo de cada uno

Así se ve en la pantalla del contacto, que vas a armar en el capítulo siguiente: dos obligatorios vacíos, la pantalla no avanza.

Cómo saber que te salió

  • Abrí Vista previa de Datos de la empresa: Industria tiene asterisco rojo y lista de opciones; Teléfono muestra +54 11 4000-0000 en gris y la ayuda debajo.
  • En la lista del centro del diseñador, Industria dice → empresa.industria y Teléfono → empresa.telefono.

¿Llegaste al resultado de arriba?