Skip to main content

Crear la visualización de mapa de cuentas y reunir todos los elementos

Objetivos de aprendizaje

Después de completar esta unidad, podrá:
  • Describir los comandos de Salesforce CLI que se usan para sincronizar el proyecto con las organizaciones borrador.
  • Describir el comando de Salesforce CLI que se usa para crear un conjunto de permisos.
  • Comprender cómo desarrollar una aplicación con componentes Aura.

¿Qué vamos a desarrollar?

En este paso, vamos a desarrollar los componentes finales de nuestra aplicación de geolocalización, donde se reunirán todas las funciones. Vamos a crear un componente Aura que permita visualizar direcciones de cuentas en forma de marcadores en un mapa, además de una ficha personalizada para poder navegar por la aplicación. También vamos a usar un conjunto de permisos para conceder acceso a los usuarios a nuestra aplicación.

Crear el componente Aura de mapa de cuentas

Este componente utiliza el componente <lightning:map> para mostrar cuentas en un mapa.

  1. Cree el componente AccountMap en la carpeta aura.
    sf lightning generate component --name AccountMap --output-dir force-app/main/default/aura
  2. Abra el archivo force-app/main/default/aura/AccountMap/AccountMap.cmp y sustituya el contenido por el siguiente código. Luego guarde el archivo.
    <aura:component>
        <aura:handler event="c:AccountsLoaded" action="{!c.onAccountsLoaded}"/>
        <aura:attribute name="mapMarkers" type="Map[]"/>
        <lightning:card title="Account Map" iconName="action:map">
            <lightning:map mapMarkers="{!v.mapMarkers}"/>
        </lightning:card>
    </aura:component>
    Este componente escucha el evento AccountsLoaded y muestra sus datos en forma de marcadores en un mapa.

  3. Abra el archivo force-app/main/default/aura/AccountMap/AccountMapController.js y sustituya el contenido por el siguiente código. Luego guarde el archivo.
    ({
        onAccountsLoaded: function( component, event, helper ) {
            var mapMarkers = [];
            var accounts = event.getParam( 'accounts' );
            for ( var i = 0; i < accounts.length; i++ ) {
                var account = accounts[i];
                var marker = {
                    'location': {
                        'Street': account.BillingStreet,
                        'City': account.BillingCity,
                        'PostalCode': account.BillingPostalCode
                    },
                    'title': account.Name,
                    'description': (
                        'Phone: ' + account.Phone +
                        'Website: ' + account.Website
                    ),
                    'icon': 'standard:location'
                };
                mapMarkers.push( marker );
            }
            component.set( 'v.mapMarkers', mapMarkers );
        }
    })
    La función onAccountsLoaded del controlador del cliente transforma los datos del evento en el formato que espera el componente <lightning: map>.

  4. Implemente el nuevo código en la organización borrador.
    sf project deploy start

Crear el componente Aura de localizador de cuentas

Este es el componente principal, el que usaremos para mostrar la aplicación a los usuarios finales en páginas Lightning, plataformas móviles de Salesforce y fichas personalizadas. También es el último componente que creamos para este proyecto.

  1. Cree el componente AccountLocator en la carpeta aura.
    sf lightning generate component --name AccountLocator --output-dir force-app/main/default/aura
  2. Abra el archivo force-app/main/default/aura/AccountLocator/AccountLocator.cmp y sustituya el contenido por el siguiente código. Luego guarde el archivo.
    <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
        <lightning:layout horizontalAlign="space" multipleRows="true">
            <lightning:layoutItem size="12"
                                  mediumDeviceSize="12"
                                  padding="around-small">
                <c:AccountSearch/>
            </lightning:layoutItem>
            <lightning:layoutItem size="12"
                                  mediumDeviceSize="6"
                                  padding="around-small">
                <c:AccountList/>
            </lightning:layoutItem>
            <lightning:layoutItem size="12"
                                  mediumDeviceSize="6"
                                  padding="around-small">
                <c:AccountMap/>
            </lightning:layoutItem>
        </lightning:layout>
    </aura:component>
    Este componente está formado por los otros componentes que creó durante el proyecto. Dos funciones muy potentes del marco de trabajo de componentes Lightning son la encapsulación de componentes y la reutilización de componentes. Construir componentes detallados dentro de un componente más grande permite desarrollar componentes y aplicaciones más interesantes.

  3. Implemente el nuevo código en la organización borrador.
    sf project deploy start

Crear la ficha personalizada de localizador de cuentas

Una manera sencilla de mostrar componentes Aura tanto la experiencia de escritorio de Lightning como en la experiencia móvil de Salesforce es con una ficha personalizada. Después de este paso, podrá acceder a la aplicación yendo a esta ficha personalizada.

  1. Abra la organización borrador.
    sf org open
  2. En Setup (Configuración), escriba Tabs (Fichas) en el cuadro Quick Find (Búsqueda rápida) y, a continuación, seleccione Tabs (Fichas).
  3. En la sección Lightning Component Tabs (Fichas de componentes Lightning), haga clic en New (Nueva) e introduzca la siguiente información:

    • Lightning Component (Componente Lightning): c:AccountLocator
    • Tab Label (Etiqueta de ficha): Account Locator
    • Tab Name (Nombre de ficha): Account_Locator
    • Tab Style (Estilo de ficha): haga clic en el icono de lupa y seleccione Map (Mapa) como icono de la ficha.
    • Description (Descripción): Custom tab for Account Locator (Ficha personalizada para el localizador de cuentas).

      Nuevo cuadro de diálogo de ficha de componentes Lightning
  4. Haga clic en Next (Siguiente).
  5. Si quiere aplicar un tipo de visibilidad de la ficha a todos los perfiles, elija la opción Tab Hidden (Tabla oculta).
  6. Haga clic en Save (Guardar).

Crear el conjunto de permisos de geolocalización

Para controlar quién tiene acceso a su aplicación de geolocalización, es necesario crear un conjunto de permisos y conceder visibilidad para la ficha Account Locator (Localizador de cuentas).

  1. En Setup (Configuración), introduzca Permission Sets (Conjuntos de permisos) en el cuadro Quick Find (Búsqueda rápida) y, a continuación, haga clic en Permission Sets (Conjuntos de permisos).
  2. Haga clic en New (Nuevo) e introduzca estos detalles:

    • Label (Etiqueta): Geolocation (Geolocalización)
    • API Name (Nombre de la API): Geolocation (Geolocalización)
    • Description (Descripción): Grants access to the Account Geolocation app (Concede acceso a la aplicación Account Geolocation (Geolocalización de cuentas))
  3. Haga clic en Save (Guardar).
  4. En Apps (Aplicaciones), haga clic en Object Settings (Configuración del objeto).
  5. Haga clic en Account Locator (Localizador de cuentas).
  6. Haga clic en Edit (Modificar).
  7. En Tab Settings (Configuración de ficha), seleccione Available (Disponible) y Visible (Visible) y luego haga clic en Save (Guardar).

A continuación, asígnese el conjunto de permisos. Más adelante veremos cómo automatizar la asignación de conjuntos de permisos desde Salesforce CLI.

  1. En Setup (Configuración), escriba Users (Usuarios) en el cuadro Quick Find (Búsqueda rápida) y, a continuación, haga clic en Users (Usuarios).
  2. Haga clic en el usuario con el nombre completo User, User (Usuario, Usuario) en la tabla.
  3. Haga clic en Permission Set Assignments (Asignaciones de conjuntos de permisos).
  4. En la sección Permission Set Assignments (Asignaciones de conjuntos de permisos), haga clic en Edit Assignments (Modificar asignaciones).
  5. Agregue el conjunto de permisos Geolocation (Geolocalización) al cuadro Enabled Permission Sets (Conjuntos de permisos activados). 
  6. Haga clic en Save (Guardar)

Por si tiene dudas, User, User (Usuario, Usuario) es el nombre completo predeterminado que se asigna al administrador del sistema en una organización borrador. Si quiere usar otro nombre más divertido, puede cambiarlo en Setup (Configuración).  

La magia de los metadatos: recuperar los cambios en el proyecto

Hasta ahora en este módulo, ha trabajado en su proyecto local y ha enviado los metadatos a la organización borrador. En este paso, ha hecho algunos cambios directamente en la organización borrador. Ahora es cuando se produce la magia. Con un único comando, puede recuperar en el proyecto local todos los metadatos que ha modificado en la organización borrador.

Pero antes de hacerlo, hay que configurar el archivo .forceignore para ignorar la sincronización de algunos datos. Al crear la ficha Account Locator (Localizador de cuentas) y asignar su visibilidad a todos los perfiles, el control de cambios automático de la organización borrador detectó que los perfiles habían cambiado. Por supuesto, la próxima vez que extraiga metadatos de la organización borrador para sincronizarlos con el proyecto local, la CLI querrá extraer metadatos de los perfiles. Como los perfiles no se corresponden con la aplicación de geolocalización y no son algo que haya que rastrear en el repositorio de control del código fuente de este proyecto, tenemos que indicarle a Salesforce CLI que debe ignorar los cambios en los perfiles.

En el directorio raíz del proyecto de geolocalización, abra el archivo .forceignore y agregue **/profiles en una nueva línea. Luego, guarde el archivo. El archivo .forceignore debe tener un aspecto similar a este:

# List files or directories below to ignore them when running force:source:push, force:source:pull, and force:source:status
# More information: https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_exclude_source.htm
#
package.xml
# LWC configuration files
**/jsconfig.json
**/.eslintrc.json
# LWC Jest
**/__tests__/**
# Profiles
**/profiles

Ya puede recuperar los metadatos. En la ventana de comandos, recupere los cambios que ha realizado en la organización borrador en el proyecto local.

sf project retrieve start

El resultado del comando project retrieve start debería ser algo parecido a esto:

Retrieving v58.0 metadata from test-t7e5za@example.com using the v58.0 SOAP API
Preparing retrieve request... Succeeded
Retrieved Source
================================================================================================================
| State   Name            Type          Path
| ─────── ─────────────── ───────────── ────────────────────────────────────────────────────────────────────────
| Created Account_Locator CustomTab     force-app/main/default/tabs/Account_Locator.tab-meta.xml
| Created Geolocation     PermissionSet force-app/main/default/permissionsets/Geolocation.permissionset-meta.xml

Tenga en cuenta que no se han recuperado los cambios en los perfiles porque se ignoran con el comando .forceignore.

Validar la aplicación

Aunque puede usar sin problemas la misma organización borrador que ha usado durante las tareas de desarrollo para realizar las pruebas, le recomendamos empezar siempre con una nueva. Al usar una nueva, se asegura de haber externalizado correctamente todo el código fuente de la organización.

  1. Cree una nueva organización borrador.
    sf org create scratch --set-default --definition-file config/project-scratch-def.json --alias GeoTestOrg
  2. Implemente el código fuente y los metadatos locales en la organización borrador.
    sf project deploy start --target-org GeoTestOrg
  3. Asigne el conjunto de permisos.
    sf org assign permset --name Geolocation --target-org GeoTestOrg
  4. Cargue los datos de ejemplo en la organización. Son los datos que ha exportado de una organización borrador distinta en una unidad anterior. 
    sf data import tree --files data/Account.json --target-org GeoTestOrg
  5. Abra la organización.
    sf org open --target-org GeoTestOrg
  6. Pruebe la ficha Account Locator (Localizador de cuentas) y compruebe que todo funciona según lo previsto. Desde App Launcher (Iniciador de aplicación), busque y seleccione Account Locator (Localizador de cuentas).
Componente Account Locator (Localizador de cuentas) con los componentes Account Search (Búsqueda de cuentas), Account List (Lista de cuentas) y Account Map (Mapa de cuentas)

Enhorabuena. Ha creado y probado una nueva aplicación con la ayuda de organizaciones borrador y Salesforce CLI. No olvide agregarlo todo al repositorio de control del código fuente.

Comparta sus comentarios sobre Trailhead en la Ayuda de Salesforce.

Nos encantaría conocer su experiencia con Trailhead. Ahora puede acceder al nuevo formulario de comentarios cuando quiera desde el sitio de la Ayuda de Salesforce.

Más información Continuar para compartir comentarios