Cómo comenzar con los formularios dinámicos

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

• Explicar las diferencias entre las páginas de registro basadas en Dynamic Forms y las páginas de registro estándar.
  
• Enumerar los beneficios de Dynamic Forms.
  
• Migrar una página de registro a Dynamic Forms.
  
• Explicar cómo se muestran las páginas basadas en Dynamic Forms en dispositivos móviles.
  

Nota

¿Es su idioma de aprendizaje español (LATAM)? Comience el reto en un Trailhead Playground en español (LATAM) y copie y pegue los valores en español (LATAM). Si no aprueba el reto en su organización en español (LATAM), recomendamos que (1) cambie la configuración local a Estados Unidos, (2) cambie el idioma a inglés (según estas instrucciones) y, luego, (3) haga clic en el botón “Check Challenge” (Comprobar el reto) nuevamente.

Consulte la insignia Trailhead en su idioma para obtener más información sobre cómo aprovechar la experiencia de Trailhead en otros idiomas.

Accesibilidad

Esta unidad requiere algunas instrucciones adicionales para los usuarios de lectores de pantalla. Para acceder a una versión detallada para lectores de pantalla de esta unidad, haga clic en el siguiente vínculo:

Abrir las instrucciones para lectores de pantalla de Trailhead.

Antes de empezar

Esta unidad se basa en la página de registro que creó en la unidad anterior. Primero complete la unidad anterior y use la misma página de registro para recorrer esta unidad. 

¿Qué es Dynamic Forms?

Dynamic Forms lleva al Generador de aplicación Lightning a un nivel completamente nuevo. Le permite a usted, el administrador de Salesforce, crear experiencias sumamente flexibles y dinámicas, que a sus usuarios les encantarán, mediante la configuración de campos y secciones de detalles de registros dentro del Generador de aplicación Lightning.

Imagine su organización de Salesforce hoy. Tal vez tenga varias versiones ligeramente distintas de una página para admitir diferentes perfiles o tipos de registros. Además, tal vez tenga diseños de página con más de 100 campos porque diferentes tipos de usuarios utilizan campos diferentes en el mismo objeto. Cuantos más campos haya en el diseño de su página, más se convertirá el componente Record Detail (Detalles de registro) en un bloque monolítico de campos que no podrá personalizar. 

Dynamic Forms divide el componente Record Detail (Detalles de registro) en sus páginas Lightning en componentes de sección y campo individuales que puede colocar en cualquier lugar de la página, incluso en fichas separadas y secciones de acordeón. Puede utilizar reglas de visibilidad para mostrar a sus usuarios finales solo los campos que necesitan ver, cuando necesitan verlos. 

Dynamic Forms ofrece: 

• Una actualización instantánea de los diseños de página. Puede colocar campos y secciones donde desee.
  
• Diseños dinámicos: Utilice reglas de visibilidad para mostrar y ocultar campos y secciones.
  
• Gestión de diseño más sencilla:
  

• Administre los campos y secciones de sus páginas en el Generador de aplicación Lightning sin tocar el editor de diseño de página.
  
• Reduzca la cantidad de diseños de página y tipos de registros que necesita definiendo reglas de visibilidad de componentes.
  
• Asigne una página Lightning sin tener que asignar también un diseño de página.
  

¿Cómo funciona Dynamic Forms?

Dynamic Forms agrega una nueva ficha al panel de componentes: Fields (Campos). La ficha Fields (Campos) contiene el componente Field Section (Sección de campo) y una lista de campos. Puede colocar el componente Field Section (Sección de campo) en cualquier lugar de la página y puede colocar campos en cualquier lugar dentro del componente Field Section (Sección de campo).

Puede empezar a utilizar Dynamic Forms de dos maneras.

• Cree una nueva página de registro de Lightning. Luego, haga clic en la ficha Fields (Campos) en el panel del componente Generador de aplicación Lightning y comience a arrastrar secciones y campos a cualquier lugar que desee en la página.
  
• Abra una página de registro existente y, con solo unos pocos clics, migre los detalles de su registro utilizando el asistente de migración de Dynamic Forms.
  

En esta unidad, explorará la segunda opción: la migración de páginas.

Dynamic Forms (versión de escritorio y móvil) es compatible con la mayoría de los objetos estándar habilitados para LWC, pero no con todos ellos. Consulte Migración de LWC para páginas de inicio de registros a fin de obtener una lista de objetos habilitados para LWC. Si abre una página de registro para un objeto en el Generador de aplicación Lightning y no se muestra la ficha Fields (Campos) en el panel de componentes, Dynamic Forms no es compatible con ese objeto. Por ejemplo, el objeto Note (Nota) no admite Dynamic Forms porque tiene un diseño fijo. Dynamic Forms no se admite en objetos que no estén habilitados para LWC. Por ejemplo, las campañas, los productos y las tareas, que no están habilitados para LWC, aún usan información del diseño de página. 

Migrar una página de registro a Dynamic Forms

Con Dynamic Forms, puede migrar los campos y secciones de sus páginas de registro existentes como componentes individuales en el Generador de aplicación Lightning. Luego, puede configurarlos como el resto de los componentes de la página y mostrar a sus usuarios únicamente los campos y secciones que necesitan.

Es hora de recorrer el proceso.

1. En Setup (Configuración), ingrese App Builder (Generador de aplicaciones) en el cuadro Quick Find (Búsqueda rápida) y, a continuación, seleccione Lightning App Builder (Generador de aplicaciones Lightning).
   
2. Abra la página New Opportunity (Nueva oportunidad) que creó en la última unidad.
   
3. Haga clic en la ficha Details (Detalles) y luego haga clic en los detalles del registro.
   Esto selecciona el componente Record Detail (Detalles de registro) y muestra sus propiedades en el panel de propiedades.
   
4. En el panel de propiedades, haga clic en Upgrade Now (Actualizar ahora) para iniciar el asistente de migración de Dynamic Forms.
   

5. Siga el asistente, seleccione Opportunity Layout (Diseño de oportunidad) y luego haga clic en Finish (Finalizar).
   
6. Haga clic en Save (Guardar).
   

¡Espere! Aparentemente, falta un campo obligatorio. Si guarda la página sin los campos obligatorios, y los campos obligatorios que faltan no tienen valores, los usuarios no podrán guardar un registro después de crearlo, editarlo o clonarlo.

7. Haga clic en Cancel (Cancelar) y averigüe qué falta.
   
8. Haga clic en la ficha Fields (Campos) en la paleta de componentes.
   

De los campos obligatorios universales, falta Forecast Category (Categoría de pronóstico) en la ficha Details (Detalles). ¿Qué falta? Cuando migra campos desde un diseño, si los campos universalmente obligatorios para el objeto no estaban presentes en el diseño desde el que migró, no se agregan automáticamente. Si echa un vistazo a la página Opportunity Layout (Diseño de oportunidad), podrá ver que la categoría de pronóstico no está allí.

9. Haga clic en la ficha Details (Detalles) y arrastre el campo Forecast Category (Categoría de pronóstico) a la sección Opportunity Information (Información de oportunidad).
   
10. Guarde la página de nuevo.
    

¿Por qué elegir un diseño de página en el asistente de actualización cuando la ficha Fields (Campos) tiene todos los campos que necesita? Podría solo arrastrar todos esos campos manualmente a la página. Pero, si elige un diseño de página, el asistente de actualización toma los campos y secciones de ese diseño de página y los agrega automáticamente a su página. ¡Solo unos pocos clics y listo!

Aquí está la página migrada. Cada sección es un componente, al igual que cada campo dentro de la sección. 

El componente Record Detail - Mobile (Detalles de registro - Dispositivos móviles) se agregó al final de la página y se eliminó el componente Record Detail (Detalles de registro) original. Eso es intencional y aprenderá más sobre esto más adelante.

Si le parece que los campos dentro de las secciones están un poco dispersos, no se equivoca. La vista previa del Generador de aplicación Lightning ignora la configuración de densidad para las secciones de campo. La vista previa del Generador de aplicación Lightning siempre muestra la configuración Comfy para las secciones de campo. La configuración de densidad adecuada se aplica cuando la página se muestra a sus usuarios.

Personalizar la página

Aunque haya dividido el detalle del registro en componentes de campo individuales, todavía hay bastantes campos en la página, lo que puede causar problemas de rendimiento. Una forma de evitarlo es mover los campos de menor prioridad a fichas o secciones de acordeón cuyo contenido no sea visible cuando se carga la página.

Empiece por optimizar la página. En primer lugar, elimine la sección vacía Other Information (Otra información).

1. Haga clic en la ficha Details (Detalles) en el lienzo.
   
2. Desplace el cursor sobre la sección Other Information (Otra información) y haga clic en para eliminarla.
   

A continuación, agregue una ficha nueva.

1. Haga clic en la ficha Details (Detalles).
   
2. En el panel Tabs properties (Propiedades de fichas), haga clic en Add Tab (Agregar ficha). Se mostrará un nuevo elemento de ficha Details (Detalles).
   
3. Haga clic en la nueva ficha Details (Detalles).
   
4. En la lista Tab Label (Etiqueta de ficha), seleccione Custom (Personalizada). 
   Es posible que tenga que desplazarse hacia arriba en la lista Tab Label (Etiqueta de ficha) para encontrar Custom (Personalizado) en la parte superior.
   
5. Para Custom Label (Etiqueta personalizada), ingrese More Details (Más detalles) y luego haga clic en Done (Listo).
   
6. En el panel de propiedades, arrastre la nueva ficha More Details (Más detalles) por sobre la ficha Activity (Actividad).
   

Ahora, mueva las secciones de campo de Details (Detalles) a More Details (Más detalles).

1. En el lienzo, haga clic en la ficha Details (Detalles) y contraiga la sección Opportunity Information (Información de oportunidad), reduciendo el espacio vertical para arrastrar por sobre este en el siguiente paso.
   
2. En la sección Additional Information (Información adicional), haga clic en  y arrastre la sección a la ficha More Details (Más detalles).
   
3. Haga lo mismo con la sección Description Information (Información de descripción) y colóquela debajo de la sección Additional Information (Información adicional).
   
4. En la sección Additional Information (Información adicional), coloque el campo Tracking Number (Número de seguimiento) debajo de Delivery/Installation Status (Estado de entrega/instalación).
   
5. Haga clic en la sección Description Information (Información de descripción).
   
6. En el panel de propiedades de la sección Description Information (Información de descripción), haga clic en el campo Label (Etiqueta), desplácese a la parte superior del menú desplegable y seleccione Custom (Personalizada).
   
7. En el campo Custom Label (Etiqueta personalizada), ingrese Description (Descripción). Sí, este es un cambio bastante pequeño (y aburrido). Pero, con Dynamic Forms, puede nombrar las secciones de campo como desee. ¡Sea creativo!
   

La sección Additional Information (Información adicional) tiene cinco campos, pero los usuarios no necesitan ver el campo Main Competitor(s) (Competidor[es] principal[es]). Ahí es donde Dynamic Forms se destaca. Puede personalizar la sección, dejando solo los campos relevantes, aquí en el Generador de aplicación Lightning, sin usar el editor de diseño de página en absoluto.

Por último, elimine los campos innecesarios.

1. En la sección Additional Information (Información adicional), desplace el cursor sobre el campo Main Competitor(s) (Competidor[es] principal[es]) y haga clic en  para eliminarlo.
   
2. Haga clic en la ficha Detalles.
   
3. Expanda la sección Opportunity Information (Información de oportunidad) y, a continuación, elimine el campo Primary Campaign Source (Fuente principal de la campaña).
   
4. Elimine el campo Next Step (Paso siguiente). 
   ¿Ve cómo se ajusta automáticamente la columna?
   
5. Arrastre el campo Stage (Etapa) sobre el campo Close Date (Fecha de cierre).
   
6. Guarde la página.
   

Los cambios que realizó aquí son un ejemplo sencillo de lo que puede hacer con Dynamic Forms. En el caso de las páginas que tienen 100 campos o más en el bloque Record Detail (Detalles del registro) original, este tipo de optimización puede mejorar significativamente el rendimiento de la página. Las páginas con menos campos para mostrar se cargan más rápido. Además, sus usuarios no tienen que desplazarse tanto para acceder a los campos que necesitan.

Haga que su página de registro habilitada para formularios dinámicos sea compatible con dispositivos móviles

Como parte del proceso de migración de la página, el componente Record Detail (Detalles de registro) se elimina de la página. Cuando migra una página de registro que admite los factores de forma de escritorio y teléfono a Dynamic Forms, se agrega un componente Record Detail - Mobile (Detalles de registro - Dispositivos móviles) a la página. 

El componente Record Detail - Mobile (Detalles de registro - Dispositivos móviles) muestra el componente Record Detail (Detalles de registro) original en un contenedor solo para dispositivos móviles. Por lo tanto, en las páginas compatibles con el escritorio y el teléfono, los usuarios de escritorio ven los componentes Field Section (Sección de campo) y los usuarios móviles ven el componente Record Detail - Mobile (Detalles de registro - Dispositivos móviles).

Ahora bien, no es la situación ideal, ¿verdad? Quiere que los usuarios de dispositivos móviles vean el mismo conjunto de campos seleccionados que los usuarios de escritorio. Afortunadamente, hay una solución para eso: Dynamic Forms en dispositivos móviles. 

Es hora de adaptar las páginas de registro habilitadas para Dynamic Forms en la organización para dispositivos móviles.

1. En Setup (Configuración), ingrese Mobile (Móvil) en el cuadro Quick Find (Búsqueda rápida) y, a continuación, seleccione Salesforce Mobile App (Aplicación móvil Salesforce).
   
2. Habilite Dynamic Forms and Dynamic Highlights on Mobile (Dynamic Forms y Dynamic Highlights en dispositivos móviles). 
   

Con solo pulsar un interruptor, las páginas de registro que usan Dynamic Forms ahora pueden mostrar los mismos campos personalizados tanto a los usuarios de escritorio como a los de dispositivos móviles. Cualquier página de registro futura que cree y actualice para usar Dynamic Forms después de este punto mostrará automáticamente los campos personalizados en dispositivos móviles y no contendrá el componente Record Detail - Mobile (Detalles de registro - Dispositivos móviles).

Sin embargo, debido a que la página de nueva oportunidad se creó antes de que activara el interruptor, hay una cosa más para hacer antes de que esté lista para dispositivos móviles. Si habilita Dynamic Forms en dispositivos móviles y la página de registro habilitada para Dynamic Forms existente incluye un componente Record Detail - Mobile (Detalles de registro - Dispositivos móviles), los usuarios seguirán viendo solo el componente Record Detail - Mobile (Detalles de registro - Dispositivos móviles) desde su dispositivo móvil. Puede solucionarlo.

Para ofrecer a los usuarios de dispositivos móviles la misma experiencia de Dynamic Forms que a los usuarios de escritorio, debe eliminar el componente Record Detail - Mobile (Detalles de registro - Dispositivos móviles) de las páginas existentes. 

1. En Setup (Configuración), ingrese App Builder (Generador de aplicaciones) en el cuadro Quick Find (Búsqueda rápida) y, a continuación, seleccione Lightning App Builder (Generador de aplicaciones Lightning).
   
2. Haga clic en Edit (Modificar) junto a la nueva página de oportunidad.
   
3. Haga clic en la ficha Details (Detalles) en el lienzo.
   
4. Desplace el mouse sobre el componente Record Detail - Mobile (Detalles de registro - Dispositivos móviles) y haga clic en  para eliminarlo.
   
5. Guarde la página.
   

Eche un vistazo a la página de nuevas oportunidades terminada tanto en computadoras de escritorio como en dispositivos móviles en la próxima unidad.

Ahora que sabe algo sobre lo que puede hacer Dynamic Forms, ¡pruébelo en su propia organización!

¿Quiere estar al día con las últimas noticias sobre Dynamic Forms? Únase a la comunidad Dynamic Forms and Actions Trailblazer Community, donde los equipos de producto responden a sus preguntas, inquietudes y comentarios. También puede ver la hoja de ruta de Dynamic Forms y Actions allí.

Recursos

• Ayuda de Salesforce: Consejos y consideraciones sobre Dynamic Forms
• Ayuda de Salesforce: Crear y configurar páginas de registros de Lightning Experience
• Ayuda de Salesforce: Campos obligatorios y de solo lectura en Dynamic Forms
• Ayuda de Salesforce: Dynamic Forms en dispositivos móviles