Última actualización el 24 de junio de 2022 por Rakesh Gupta

Gran idea o pregunta duradera:

  • ¿Cómo mostrar los componentes web Lightning en Salesforce mobile y Lightning Experience como fichas personalizadas?

Objetivos:

Después de leer este blog, podrá:

  • Comprender la diferencia entre los componentes de superficie en las páginas de App Builder y las pestañas
  • Agregue el objetivo correcto para que un componente web Lightning esté disponible como una ficha personalizada
  • Cree una pestaña de componente Lightning personalizada para el componente web Lightning
  • y mucho más

En el pasado se escribieron algunos artículos sobre Lightning Web Component . ¿Por qué no echarles un vistazo mientras estás en ello?

  1. Acceda a recursos estáticos, archivos de activos de contenido en el componente web Lightning
  2. Acceda a etiquetas personalizadas en el componente web Lightning
  3. Crear un formulario con una barra de progreso en el componente web Lightning

Keegan Watson trabaja como desarrollador junior en Gurukul on Cloud (GoC). Por ahora, ella ha creado un formulario con una barra de progreso después de leer este artículo , como se muestra a continuación:

Ahora quiere saber cómo progresar . El componente web lightning BarExample está disponible como una pestaña personalizada en una aplicación Lightning Experience y la aplicación Salesforce.

Agregar componentes web Lightning en App Builder Pages vs Tabs

Hay diferentes formas de hacer que los componentes web Lightning estén disponibles para la experiencia Lightning y móvil de Salesforce. Estos se dividen en dos categorías, como se menciona a continuación:

Páginas del creador de aplicaciones Pestañas
Diseño construido usando arrastrar y soltar el componente en la plantilla Diseño totalmente controlado por los desarrolladores.
Puede ser construido y configurado por usuarios comerciales Los usuarios comerciales no pueden personalizarlo.
Incluye barra de título, que puede consistir en acciones rápidas
La activación crea pestañas automáticamente y permite agregarlas fácilmente a las aplicaciones y al menú de navegación móvil

El destino especifica dónde se puede agregar el componente, como en un tipo de página Lightning o en Embedded Service Chat. Si desea que su componente aparezca en Lightning App Builder o en Experience Builder, especifique al menos un tipo de página Lightning. Los valores válidos para el objetivo son:

Valor Descripción
relámpago__AppPage Habilita el uso de un componente en una página de aplicación en Lightning App Builder.
relámpago__FlowScreen Permite que un componente se use en pantallas de flujo en Flow Builder.
relámpago__Página de inicio Permite utilizar un componente en una página de inicio en el Generador de aplicaciones Lightning.
relámpago__Bandeja de entrada Permite utilizar un componente en Lightning App Builder para agregar a los paneles de aplicaciones de correo electrónico para las integraciones de Outlook y Gmail.
lightning__RecordAcción Permite utilizar un componente como una acción rápida en una página de registro.
relámpago__RecordPage Habilita el uso de un componente en una página de registro en Lightning App Builder.
relámpago__Tab Permite utilizar un componente en una pestaña personalizada en Lightning Experience o la aplicación móvil Salesforce.
rayo__UtilityBar Permite que un componente se use como un elemento de utilidad en la barra de utilidades en el Administrador de aplicaciones.
rayoSnapin__PreChat Habilita la selección de un componente personalizado previo al chat desde la configuración del chat de servicio integrado.

Enfoque de Campeón de Automatización (I-do):

Hay tres pasos para resolver el requisito comercial de Keegan utilizando Lightning Web Component y una pestaña personalizada . Debemos:

  1. Agregue el destino lightning__Tab al archivo de configuración del componente
  2. Crear una pestaña de componente Lightning para el componente web Lightning
  3. Agregar una ficha de componente Lightning al menú de navegación móvil de Salesforce y Lightning Experience

Paso 1: agregue el destino lightning__Tab al archivo de configuración del componente

Agregue el destino lightning__Tab al archivo de configuración del componente. El archivo de configuración progressBarExample.js-meta.xml define los valores de metadatos para el componente, incluida la configuración para permitir el uso en una pestaña personalizada. 



<?versión xml="1.0" codificación="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadatos"> <apiVersion>54.0</apiVersion> <isExposed>verdadero</isExposed> <objetivos> <target>relámpago__RecordPage</target> <target>relámpago__AppPage</target> <objetivo>relámpago__Página de inicio</objetivo> <objetivo>relámpago__Tab</objetivo>


</objetivos>
</LightningComponentBundle>

Implemente los cambios en la organización de origen a través de Visual Studio Code.

Paso 2: Cree una ficha de componente Lightning para el componente web Lightning

Se puede crear manualmente una ficha Componente Lightning para el componente web Lightning en la interfaz de configuración.

  1. Haga clic en Configuración .
  2. En el cuadro Búsqueda rápida, escriba Pestañas .
  3. Seleccione Fichas , vaya a Fichas de componentes Lightning y haga clic en Nuevo .
  4. Ingrese los detalles como se muestra en la siguiente captura de pantalla:
    1. Seleccione el componente Lightning ProgressBarExample en el componente Lightning.
  5. Ingrese una descripción de la pestaña, si lo desea, y haga clic en Siguiente .
  6. Elija los perfiles de usuario a los que desea acceder en la nueva pestaña personalizada.
  7. Haga clic en Guardar .

Paso 3: agregue una ficha de componente Lightning al menú de navegación móvil de Salesforce y Lightning Experience

La pestaña Lightning Component se puede agregar manualmente al menú de navegación móvil en la interfaz de configuración.

La pestaña Lightning Component se puede agregar manualmente a Lightning Experience agregando aplicaciones a la interfaz de configuración.

Prueba de concepto

A partir de ahora, los usuarios comerciales pueden acceder a la pestaña del componente lightning desde Salesforce mobile en el menú de navegación, como se muestra a continuación:

Evaluación formativa:

¡Quiero saber de ti!

¿Qué es una cosa que aprendiste de esta publicación? ¿Cómo imagina aplicar este nuevo conocimiento en el mundo real? Siéntase libre de compartir en los comentarios a continuación.

…

Esta es una traducción realizada por EGA Futura, y este es el link a la publicación original: https://automationchampion.com/2022/06/24/add-lightning-web-components-in-mobile-and-lightning-experience-as-tabs/

    Entradas recomendadas

    Zero Copy revoluciona la nube de datos con análisis en tiempo real
    Centro DevOps para equipos híbridos colaborativos ☁️
    Centro DevOps para equipos híbridos colaborativos ☁️
    La versión de invierno de 2005: Guía para desarrolladores de Salesforce ☁️
    La versión de invierno de 2005: Guía para desarrolladores de Salesforce ☁️