Capítulo 2 de 7 · 12 min

Tu primer Stepper

Creás el Stepper Alta de cliente sobre Account y le armás la primera pantalla: un título con el nombre de la cuenta, lo que ya está cargado y dos campos para completar.

En este capítulo creás el Stepper y le armás la primera pantalla, Datos de la empresa. Todavía no guarda nada: eso viene en el capítulo de guardar lo que se completa.

Antes de empezar

Necesitás una cuenta de prueba. En Accounts → New, creá una con Name Frigorífico Pampa, Website https://frigorificopampa.example y Email compras@frigorificopampa.example. Dejá Industry y Phone vacíos: son los que va a completar el Stepper.

Creá el Stepper

ConfiguraciónAutomatizaciónProcesos

Abrí la pestaña Steppers y hacé clic en Nuevo. Se abre el diálogo Nueva automation, ya preparado para un Stepper:

Label: Alta de cliente. El API name se completa solo (alta_de_cliente); dejalo así.
Se lanza desde: escribí Acc y apretá Enter para elegir Account. Es la entidad en cuyo encabezado va a aparecer el botón, y la que el Stepper conoce como {{record}}.
Descripción: Datos de la empresa, contacto principal y primera oportunidad, en un solo recorrido.

Hacé clic en Nueva automation.

Diálogo Nueva automation con Label Aprender — Alta de cliente, API name aprender_alta_de_cliente, Se lanza desde Account y la descripción completa — El diálogo antes de crear el Stepper. En QA el nombre lleva el prefijo Aprender —; en tu workspace, Alta de cliente alcanza.

Se abre el builder: a la izquierda la paleta Agregar nodos, en el centro la tarjeta Trigger que dice “Account · Lo lanza un usuario”, y arriba a la derecha el estado Inactiva. Un Stepper nace apagado: lo vas a activar cuando esté listo.

Agregá una pantalla

En la paleta, grupo Pantallas, arrastrá Pantalla al canvas y soltala debajo del Trigger. Como es el primer nodo, queda conectada sola.

En el inspector de la derecha, cambiá Nombre del nodo a Datos de la empresa.

Abrí el diseñador

Hacé clic en Diseñar pantalla (o doble clic sobre la tarjeta de la pantalla). Se abre Pantalla: Datos de la empresa con tres columnas: a la izquierda los Bloques, en el centro la pantalla, a la derecha las propiedades de lo que elijas.

Hacé clic en la fila Pantalla, arriba de todo en la columna del centro. A la derecha aparecen las opciones de la pantalla entera. En Agrupar respuestas en escribí empresa: todo lo que se complete en esta pantalla va a quedar guardado como {{empresa.…}}. En el capítulo siguiente vas a ver por qué conviene.

Diseñador de la pantalla Datos de la empresa con la fila Pantalla seleccionada y, a la derecha, Agrupar respuestas en empresa, Texto del botón, Mientras procesa y Ofrecer Atrás tildado — Las opciones de la pantalla: el grupo de las respuestas, el texto del botón y lo que se lee mientras procesa.

Sumá los bloques de texto

Cada clic en un bloque de la izquierda lo agrega al final de la pantalla. También podés arrastrarlo al lugar exacto.

Título. En Texto escribí Datos de {{record.name}} y dejá Tamaño en Título. Al correr, {{record.name}} se reemplaza por el nombre de la cuenta.
Texto. En Texto: Revisá lo que ya está cargado y completá lo que falta.
Detalle del registro. En Campos a mostrar tildá Name, Website y Email. Si no tildás ninguno, muestra todos los campos de la cuenta que tengan valor.

Diseñador con el bloque Detalle del registro seleccionado y la lista Campos a mostrar con Name, Website y Email tildados — El detalle muestra datos de la cuenta, solo para leer: nadie los edita desde acá.

Sumá los dos campos

Hacé clic dos veces en Input. Seleccioná el primero y en Label escribí Industria; seleccioná el segundo y escribí Teléfono. Mirá Escribe en: se completa solo con empresa.industria y empresa.telefono. Es la variable donde va a quedar cada respuesta.

Por ahora alcanza con eso. En el capítulo siguiente los configurás bien.

Guardá

Hacé clic en Guardar pantalla y, en la barra de arriba del builder, en Guardar.

La tarjeta de la pantalla resume lo que tiene adentro: “Pantalla · 2 campos”. Así distinguís a simple vista una pantalla vacía de una armada.

Builder del Stepper Aprender — Alta de cliente: la tarjeta Trigger Account · Lo lanza un usuario conectada a la tarjeta Datos de la empresa, Pantalla · 2 campos; arriba, el estado Inactiva — Un Stepper con una sola pantalla. Todavía inactivo: nadie lo ve.

Los bloques se reordenan con las flechas de cada fila o arrastrándolos, y se borran con el ícono de papelera. Para buscar un bloque por nombre, usá Buscar bloques arriba de la paleta.

Cómo saber que te salió

Volvé a abrir la pantalla con doble clic: están el Título, el Texto, el Detalle del registro e Industria y Teléfono, con Escribe en empresa.industria y empresa.telefono.
En la lista Steppers de Procesos aparece Alta de cliente, que se lanza desde account y no está activo.

¿Llegaste al resultado de arriba?

En la referencia