🎨

Interfaz de Usuario y Lightning App Builder

Lightning App Builder, Dynamic Forms, page layouts, acciones, botones, list views, Path, Kanban y componentes Lightning.

⏱️ Tiempo estimado de lectura: 50 minutos

Lightning App Builder: Páginas y Plantillas

Lightning App Builder es la herramienta principal drag-and-drop para diseñar páginas Lightning sin código.

3 tipos de páginas que puedes crear:

1. App Page (Página de aplicación):
- Página standalone accesible desde la navegación de la app.
- Ideal para dashboards personalizados, centros de comando, portales internos.
- Plantillas: una columna, dos columnas, tres columnas.
- Se asigna a una Lightning App y aparece como un tab.

2. Home Page (Página de inicio):
- Reemplaza la página de inicio por defecto.
- Componentes típicos: Assistant, Key Deals, Today's Tasks, Performance Chart, Recent Items.
- Se puede asignar a: toda la org (default) o a perfiles específicos o a una app específica.
- Solo una Home Page activa por perfil/app.

3. Record Page (Página de registro):
- Personaliza la vista de detalle de un registro específico.
- Es el tipo de página más complejo y más preguntado en el examen.
- Se asigna por: Org DefaultApp DefaultApp + Record Type + Profile (mayor especificidad gana).
- Plantillas disponibles: Header and One Column, Header and Two Columns (3:9, 6:6, 4:8), Header and Three Columns, Full Width.

Asignación de Record Pages (Activation / Assignment):
Cuando activas una Record Page, puedes asignarla con diferentes niveles de especificidad:
- Org Default: Se aplica a todos los usuarios, todas las apps.
- App Default: Se aplica solo dentro de una Lightning App específica.
- App, Record Type, and Profile: La asignación más específica. Gana sobre las demás.

Regla: La asignación más específica SIEMPRE gana.

Componentes estándar disponibles:
- Related Lists, Related Record, Highlights Panel, Record Detail, Chatter Feed, Path, Activities, Flow (embed Screen Flows), Rich Text, Report Chart, Custom Lightning Components.

Dynamic Forms:
Permiten colocar campos individuales en cualquier región de la página (no atados a secciones del Page Layout). Beneficios:
- Visibility Rules: Mostrar/ocultar campos basándose en el perfil del usuario, record type, valores de campos, permisos, o el dispositivo.
- Elimina la necesidad de múltiples Page Layouts para diferentes combinaciones de visibilidad.
- Solo disponible en Record Pages y solo para Custom Objects (y algunos Standard Objects seleccionados).

Dynamic Actions:
Similar a Dynamic Forms pero para las acciones (botones) del registro. Permite controlar qué acciones se muestran basándose en criterios dinámicos sin necesidad de diferentes Page Layouts por perfil.
- Reemplaza la sección 'Salesforce Mobile and Lightning Experience Actions' del Page Layout.
- Permite asignar acciones diferentes por perfil, Record Type o valor de campo.

Component Visibility Rules:
Cada componente Lightning en el App Builder puede tener reglas de visibilidad:
- Device: Solo desktop, solo móvil, ambos.
- Permissions: Basado en permisos de usuario.
- Field Values: Basado en el valor de un campo del registro.
- Advanced (Custom): Fórmulas booleanas personalizadas.

Puntos Clave

  • 3 tipos de página: App Page, Home Page, Record Page
  • Record Pages se asignan por Org Default → App Default → App + RT + Profile (más específico gana)
  • Dynamic Forms: campos individuales con Visibility Rules en Record Pages (solo Custom Objects)
  • Dynamic Actions: controlar qué acciones se muestran según criterios dinámicos
  • Component Visibility Rules: cada componente puede tener filtros por dispositivo, perfil o valor de campo

Page Layouts, Compact Layouts y Related Lists

Los Page Layouts siguen siendo relevantes, especialmente antes de migrar a Dynamic Forms.

Page Layouts controlan:
1. Fields: Qué campos aparecen y su disposición en la página (columnas, secciones).
2. Sections: Agrupaciones de campos con títulos personalizados.
3. Related Lists: Qué listas relacionadas aparecen y en qué orden.
4. Actions (Buttons): Qué Quick Actions y botones se muestran en la barra de acciones.
- Sección: 'Salesforce Mobile and Lightning Experience Actions'.
- Si no se personaliza, se hereda la sección global (Publisher Global Layout).
5. Field Properties: Marcar campos como Required (requerido) o Read-Only en el contexto del layout.

Asignación de Page Layouts:
- Se asignan mediante la matriz Profile × Record Type.
- Un perfil + un Record Type = un Page Layout específico.
- Si no hay Record Types activos, se asigna un layout por perfil.

Mini Page Layout:
- Controla qué campos aparecen en los hover tooltips (ventana emergente cuando pasas el ratón sobre un hipervínculo de registro).
- Se configura dentro del Page Layout Editor en la sección 'Mini Page Layout'.

Compact Layouts:
- Controlan qué campos aparecen en el Highlights Panel (la barra superior de un registro).
- También controlan qué campos se ven en la App móvil y en las Cards de Lookup.
- Máximo 7 campos (más el campo Name que siempre aparece).
- El primer campo del Compact Layout se usa como el título principal del registro.
- Se asigna por Record Type. Si no hay Record Types, hay un solo Compact Layout activo por objeto.
- System Default Compact Layout: muestra solo el campo Name.

Related Lists:
- Muestran registros hijos asociados al registro actual.
- Se configuran en el Page Layout (arrastrar a la sección Related Lists).
- Related List - Single: Muestra una related list embebida directamente en la Record Page (componente de Lightning App Builder).
- Los campos visibles en la Related List se configuran haciendo clic en la llave inglesa del elemento en el Page Layout Editor.
- Enhanced Related Lists: Permiten acciones inline (editar, borrar) directamente desde la lista.

Blank Spaces & Sections:
- Usa 'Blank Space' para crear espacios vacíos en el layout.
- Las secciones pueden ser de 1 o 2 columnas.
- Las secciones colapsables se pueden configurar como contraídas por defecto.

Puntos Clave

  • Page Layouts: campos, secciones, related lists, acciones — asignados por Profile × Record Type
  • Compact Layouts: Highlights Panel + Mobile + Lookup Cards — máximo 7 campos
  • Mini Page Layouts: controlan los hover tooltips de los enlaces de registros
  • Dynamic Forms reemplaza la necesidad de múltiples Page Layouts para visibilidad de campos
  • Si la sección de acciones no está personalizada, se hereda del Publisher Global Layout

Acciones, Botones y Quick Actions

Las Quick Actions permiten realizar operaciones rápidas directamente desde un registro o desde cualquier contexto.

Tipos de Quick Actions:

1. Object-Specific Quick Actions:
- Vinculadas a un objeto específico.
- Acceden al contexto del registro padre (pueden pre-rellenar campos desde el padre).
- Tipos: Create (crear registro relacionado), Update (actualizar campos), Log a Call, Custom (LWC, Visualforce, Flow).
- Se configuran en: Object Manager > [Objeto] > Buttons, Links, and Actions.
- Se añaden al Page Layout en la sección de acciones.

2. Global Quick Actions:
- NO están vinculadas a ningún objeto específico.
- Disponibles desde el menú '+' de la barra de navegación global.
- No tienen contexto de registro padre → no pueden pre-rellenar campos desde un padre.
- Casos de uso: crear una nueva Task, Event, Contact, o registro personalizado desde cualquier lugar.
- Se configuran en: Setup > Global Actions.
- Se añaden al: Publisher Global Layout.

Predefined Field Values:
- Al crear una Quick Action de tipo 'Create', puedes pre-rellenar campos automáticamente.
- Ejemplo: Quick Action 'New Case' en Account que pre-rellena el campo Account con el registro actual y Priority con 'High'.
- Los campos predefinidos NO son editables por el usuario en el formulario de acción.

Action Layout:
- Cada Quick Action tiene su propio layout miniatura que define qué campos aparecen en el formulario emergente.
- Puede ser diferente del Page Layout principal del objeto.
- Permite crear formularios simplificados con solo los campos necesarios.

Custom Buttons y Custom Links:

TipoUbicaciónAcción
List ButtonVista de lista (list view)Ejecuta URL, JavaScript (Classic), o Flow
Detail Page ButtonPágina de detalle del registroEjecuta URL o JavaScript
Detail Page LinkAparece como un enlace en la páginaEjecuta URL

Nota importante: Los Custom Buttons con JavaScript solo funcionan en Salesforce Classic, NO en Lightning Experience. En Lightning, se usan Quick Actions con Screen Flows para funcionalidad equivalente.

Lightning Actions (Acciones Lightning):
- Las acciones en Lightning aparecen en la action bar (barra de acciones) en la parte superior de la Record Page.
- Solo se muestran las primeras acciones que caben en la barra; el resto se ocultan bajo un menú desplegable.
- El orden importa: las acciones más importantes deben estar primero en el Page Layout.
- Con Dynamic Actions (Lightning App Builder), puedes controlar qué acciones se muestran según criterios dinámicos, eliminando la dependencia del Page Layout.

Puntos Clave

  • Object-Specific Actions: heredan contexto del padre, permiten Predefined Field Values
  • Global Actions: sin contexto de padre, disponibles en el menú '+' de navegación global
  • Predefined Field Values se establecen al crear la Quick Action y NO son editables por el usuario
  • Custom Buttons con JavaScript NO funcionan en Lightning (solo Classic)
  • Dynamic Actions eliminan la dependencia del Page Layout para la visibilidad de acciones

List Views, Path, Kanban y Herramientas de Productividad

Salesforce ofrece múltiples herramientas visuales para mejorar la productividad y la experiencia del usuario.

List Views (Vistas de lista):
- Muestran registros de un objeto filtrados por criterios.
- Se pueden crear List Views personalizadas con filtros específicos.
- Visibilidad: Private (solo el creador), Shared with specific groups, All users.
- Opciones avanzadas: Inline Editing (editar campos directamente desde la lista), Charts (mini gráficos), Kanban view.
- Los administradores pueden pinear una List View como vista predeterminada para toda la org.
- Mass Actions: Desde una List View se pueden realizar acciones masivas: cambiar propietario, enviar email masivo, cambiar status.

Kanban View:
- Vista visual tipo tablero (como Trello) que agrupa registros por un campo picklist o lookup.
- Ejemplo clásico: Opportunities agrupadas por Stage (columnas: Prospecting, Qualification, Proposal, etc.).
- Permite drag-and-drop para mover registros entre columnas (cambiar el valor del campo).
- Muestra resumen numérico en cada columna (cantidad, suma).
- Disponible desde cualquier List View pulsando el icono de Kanban.
- Se puede configurar qué campo agrupa las columnas y qué campo se resume.

Path (Ruta):
- Banda visual en la parte superior de un registro que muestra las etapas de un proceso.
- Funciona con campos Picklist o Stage (Opportunity).
- Se configura en: Setup > Path Settings > Enable Path > New Path.
- Key Fields: Se pueden configurar campos clave que aparecen en un popup al hacer clic en cada etapa. Ayudan al usuario a saber qué información completar antes de avanzar.
- Guidance for Success: Texto personalizado de ayuda para cada etapa (consejos, mejores prácticas).
- Se añade como componente Path en Lightning App Builder.
- Un solo Path por objeto por Record Type.

Split View:
- Disponible en Console Apps.
- Muestra la List View en un panel lateral y el registro seleccionado en el panel principal.
- Permite navegar rápidamente entre registros sin salir de la lista.

Related Lookup Filters:
- Filtros que restringen los registros disponibles en un campo Lookup.
- Ejemplo: en un campo Lookup a Contact, filtrar para mostrar solo contactos activos de la misma Account.
- Se configuran al editar el campo de relación.

Global Search:
- Búsqueda que busca en todos los objetos simultáneamente.
- Resultados filtrados por permisos del usuario.
- Los administradores pueden configurar qué campos son buscables por objeto (Search Layouts).
- Search Layouts: Controlan qué campos aparecen en los resultados de búsqueda, las lookup dialogs y los resultados de phone/tablet.

Puntos Clave

  • Kanban View: vista tipo tablero con drag-and-drop, agrupa por picklist/lookup
  • Path: etapas visuales con Key Fields y Guidance for Success — se configura por picklist
  • List Views soportan Inline Editing, Charts, acciones masivas y Kanban
  • Split View (Console Apps): lista + registro lado a lado para navegación rápida
  • Search Layouts controlan qué campos aparecen en los resultados de búsqueda global

Componentes Lightning: Estándar, Custom y AppExchange

Lightning Experience está construido sobre una arquitectura de componentes reutilizables.

Tipos de componentes disponibles en Lightning App Builder:

1. Standard Components (Componentes estándar):
Pre-construidos por Salesforce. Incluyen:
- Record Detail: El formulario completo del Page Layout.
- Related Lists: Todas las listas relacionadas configuradas en el Page Layout.
- Related List - Single: Una lista relacionada individual embebida.
- Highlights Panel: Muestra los campos del Compact Layout.
- Chatter: Feed de Chatter del registro.
- Activities: Timeline de actividades (Tareas, Eventos, Emails, Calls).
- Path: Barra de etapas del proceso.
- Flow: Embebe un Screen Flow directamente en la página. El usuario puede interactuar con el flow sin salir del registro.
- Rich Text: Muestra texto formateado, instrucciones o HTML básico.
- Report Chart: Embebe un gráfico de un reporte directamente en la página.
- Accordion: Agrupa contenido en secciones colapsables.
- Tabs: Agrupa componentes en pestañas para ahorrar espacio.

2. Custom Components (LWC - Lightning Web Components):
- Desarrollados por programadores usando HTML, JavaScript y CSS estándar web.
- Pueden exponerse para uso en Lightning App Builder configurando su metadata.
- Pueden recibir parámetros de configuración del administrador (design attributes).
- Son la evolución de los Aura Components (legacy).
- Requieren deployment pero una vez desplegados, los administradores los usan como drag-and-drop.

3. AppExchange Components:
- Instalados desde AppExchange.
- Se usan igual que los Standard Components en App Builder.
- Ejemplos: gráficosavanzados, mapas interactivos, widgets de integración.

Lightning Page Templates:
Definen la estructura de la página (regiones donde se pueden colocar componentes).
- Templates estándar: Full Width, Two Columns (varias proporciones), Three Columns.
- El template se selecciona al crear la página. Se puede cambiar después pero puede requerir reubicar componentes.

Componente Flow en Lightning Pages:
Uno de los usos más poderosos: embeber Screen Flows directamente en una Record Page.
- El flow se ejecuta en el contexto del registro.
- Se puede pasar el recordId como input al flow para que trabaje con el registro actual.
- Caso de uso: formularios de escalamiento, wizards de configuración, encuestas post-venta.

Lightning Email Templates:
- Diseñados visualmente con el drag-and-drop Email Template Builder.
- Soportan campos de merge (ej: {!Contact.FirstName}).
- Se pueden usar en: Quick Actions, Flows, Mass Email.
- Se reemplazan a Letterheads + HTML Templates (que son Classic/Legacy).

Puntos Clave

  • 3 tipos de componentes en App Builder: Standard, Custom (LWC) y AppExchange
  • El componente Flow embebe Screen Flows directamente en Record Pages
  • LWC (Lightning Web Components) reemplazan a Aura Components (legacy)
  • Report Chart permite embeber gráficos de reportes directamente en páginas
  • Los templates de página definen las regiones disponibles y se pueden cambiar después
  • Los administradores pueden usar LWC custom como drag-and-drop sin escribir código