Skip to main content
ƚnase a nosotros en TDX, en San Francisco, o en Salesforce+ los dƭas 5 y 6 de marzo en la conferencia para desarrolladores sobre la era de agentes de IA. Registrarse ahora.

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