Skip to main content
ƚnase a nosotros en TDX, San Francisco o en Salesforce+ del 5 al 6 de marzo en la conferencia de desarrolladores para la era del agente de la IA. Regƭstrese ahora.

Crear la visualizaciĆ³n del mapa de la cuenta y combinar todos los elementos

Objetivos de aprendizaje

DespuƩs de completar esta unidad, podrƔ:
  • Describir los comandos de Salesforce CLI que se usan para sincronizar su proyecto con las organizaciones borrador.
  • Describir el comando de Salesforce CLI para crear un conjunto de permisos.
  • Comprender cĆ³mo se crea una aplicaciĆ³n mediante el uso de componentes de Aura.

ĀæQuĆ© estamos creando?

En este paso, crearemos los componentes finales de nuestra aplicaciĆ³n de geolocalizaciĆ³n, lo cual reĆŗne todas las funciones. Crearemos un componente de Aura que visualiza las direcciones de la cuenta como marcadores en un mapa y crearemos una ficha personalizada para poder navegar hacia nuestra aplicaciĆ³n. TambiĆ©n usaremos un conjunto de permisos para otorgar a los usuarios acceso a nuestra aplicaciĆ³n.

Crear el componente de Aura de mapa de la cuenta

Este componente usa 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 force-app/main/default/aura/AccountMap/AccountMap.cmp y reemplace su contenido por el siguiente cĆ³digo. A continuaciĆ³n, 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 los datos del evento como marcadores de mapa.

  3. Abra force-app/main/default/aura/AccountMap/AccountMapController.js y reemplace su contenido por el siguiente cĆ³digo. A continuaciĆ³n, 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 lado del cliente transforma los datos del evento en el formato esperado por el componente <lightning:map>.

  4. Implemente su cĆ³digo nuevo en la organizaciĆ³n borrador.
    sf project deploy start

Crear el componente de Aura de localizador de la cuenta

Este es nuestro componente principal, y lo usamos para mostrar nuestra aplicaciĆ³n a los usuarios finales en las pĆ”ginas Lightning, Salesforce para dispositivos mĆ³viles y fichas personalizadas. AdemĆ”s, Ā”es el Ćŗltimo componente que crearĆ” 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 force-app/main/default/aura/AccountLocator/AccountLocator.cmp y reemplace su contenido por el siguiente cĆ³digo. A continuaciĆ³n, 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Ć” compuesto por los demĆ”s componentes que creĆ³ a lo largo de este proyecto. Dos funciones poderosas del marco de trabajo de componentes Lightning son la encapsulaciĆ³n y la reutilizaciĆ³n de componentes. La composiciĆ³n de componentes especĆ­ficos en un componente mayor permite crear componentes y aplicaciones mĆ”s interesantes.

  3. Implemente su cĆ³digo nuevo en la organizaciĆ³n borrador.
    sf project deploy start

Crear la ficha personalizada de localizador de la cuenta

Una manera sencilla de mostrar los componentes de Aura tanto en Lightning Experience para computadoras como en Salesforce para dispositivos mĆ³viles es mediante una ficha personalizada. DespuĆ©s de completar este paso, podrĆ” navegar hacia esta ficha personalizada para acceder a su aplicaciĆ³n.

  1. Abra su organizaciĆ³n borrador.
    sf org open
  2. En Setup (ConfiguraciĆ³n), ingrese Tabs (Fichas) en el cuadro Quick Find (BĆŗsqueda rĆ”pida) y, a continuaciĆ³n, haga clic en Tabs (Fichas).
  3. En la secciĆ³n Lightning Component Tabs (Fichas de componentes Lightning), haga clic en New (Nueva) e ingrese los detalles:

    • 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 Ć­cono de lupa y seleccione Map (Mapa) como Ć­cono para la ficha.
    • Description (DescripciĆ³n): Custom tab for Account Locator (Ficha personalizada para el localizador de la cuenta).

      Cuadro de diƔlogo para la ficha New Lightning Component (Nuevo componente Lightning)
  4. Haga clic en Next (Siguiente).
  5. Para Apply one tab visibility to all profiles (Aplicar una visibilidad de ficha a todos los perfiles), seleccione Tab Hidden (Ficha 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, cree un conjunto de permisos y otĆ³rguele visibilidad a la ficha Account Locator (Localizador de la cuenta).

  1. En Setup (ConfiguraciĆ³n), ingrese 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 ingrese los detalles:

    • Etiqueta: Geolocation (GeolocalizaciĆ³n)
    • Nombre de API: Geolocation (GeolocalizaciĆ³n)
    • DescripciĆ³n: Grants access to the Account Geolocation app (Otorga acceso a la aplicaciĆ³n GeolocalizaciĆ³n de la cuenta)
  3. Haga clic en Save (Guardar).
  4. En Apps (Aplicaciones), haga clic en Object Settings (ConfiguraciĆ³n de objetos).
  5. Haga clic en Account Locator (Localizador de la cuenta).
  6. Haga clic en Edit (Modificar).
  7. En Tab Settings (ConfiguraciĆ³n de fichas), seleccione Available (Disponible) y Visible y, a continuaciĆ³n, haga clic en Save (Guardar).

A continuaciĆ³n, asĆ­gnese el conjunto de permisos a usted mismo. En un paso posterior veremos cĆ³mo automatizar la asignaciĆ³n de conjuntos de permisos mediante el uso de Salesforce CLI.

  1. En Setup (ConfiguraciĆ³n), ingrese 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 cuyo nombre completo es 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 habilitados). 
  6. Haga clic en Save (Guardar)

En caso de que se lo estĆ© preguntando, User User (Usuario Usuario) es el nombre completo predeterminado que se le da al administrador del sistema en una organizaciĆ³n borrador. Puede cambiarlo en la configuraciĆ³n si desea que tenga un nombre mĆ”s emocionante.  

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

Hasta ahora, en este mĆ³dulo trabajĆ³ con su proyecto local y extrajo metadatos de su organizaciĆ³n borrador. En este paso, realizĆ³ algunas modificaciones directamente en esa organizaciĆ³n borrador. Ahora es cuando se produce la magia. Con un Ćŗnico comando puede recuperar todos los metadatos que modificĆ³ en la organizaciĆ³n borrador para su proyecto local.

Sin embargo, antes de hacerlo, queremos que configure nuestro archivo .forceignore para ignorar la sincronizaciĆ³n de algunos metadatos. Cuando creĆ³ la ficha Account Locator (Localizador de la cuenta) y asignĆ³ su visibilidad a todos los perfiles, la herramienta de seguimiento de cambios automĆ”ticos de la organizaciĆ³n borrador notĆ³ que los perfiles se habĆ­an modificado. Naturalmente, la prĆ³xima vez que extraiga metadatos de la organizaciĆ³n borrador para sincronizarlos con su proyecto local, la CLI querrĆ” desplegar los metadatos de perfil. Dado que los perfiles no son pertinentes a su aplicaciĆ³n de geolocalizaciĆ³n y no son algo para hacer un seguimiento en su repositorio de control de orĆ­genes para este proyecto, necesitamos decirle a Salesforce CLI que ignore los cambios en el perfil.

En el directorio raĆ­z de su proyecto de geolocalizaciĆ³n, abra el archivo .forceignore y agregue **/profiles como una nueva lĆ­nea en el archivo. A continuaciĆ³n, guarde el archivo. Su archivo .forceignore deberĆ­a tener un aspecto similar a lo siguiente:

# 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

Ahora estĆ” listo para recuperar metadatos. En la ventana de comandos, recupere los cambios que realizĆ³ en la organizaciĆ³n borrador con su proyecto local.

sf project retrieve start

El resultado del comando project retrieve start se ve asĆ­:

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

Note que no se recuperaron los cambios del perfil porque son ignorados en .forceignore.

Validar la aplicaciĆ³n

Si bien puede usar tranquilamente la misma organizaciĆ³n borrador que utilizĆ³ durante el desarrollo para realizar las pruebas, le recomendamos que siempre comience con una organizaciĆ³n borrador nueva, ya que garantiza que externalizĆ³ de manera adecuada toda la fuente de la organizaciĆ³n.

  1. Cree una organizaciĆ³n borrador nueva.
    sf org create scratch --set-default --definition-file config/project-scratch-def.json --alias GeoTestOrg
  2. Implemente sus metadatos y origen local 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 muestra en la organizaciĆ³n. Estos son los datos que exportĆ³ de una organizaciĆ³n borrador diferente en una unidad anterior. 
    sf data import tree --files data/Account.json --target-org GeoTestOrg
  5. Abra su organizaciĆ³n.
    sf org open --target-org GeoTestOrg
  6. Pruebe la ficha Account Locator (Localizador de la cuenta) y verifique que funcione como se espera. Desde el Iniciador de aplicaciĆ³n, busque y seleccione Account Locator (Localizador de la cuenta).
Componente Account Locator (Localizador de la cuenta) con componentes Account Search (BĆŗsqueda de cuenta), Account List (Lista de cuentas) y Account Map (Mapa de la cuenta)

Ā”Felicitaciones! CreĆ³ y probĆ³ correctamente una aplicaciĆ³n nueva con organizaciones borrador y Salesforce CLI. Ā”No olvide agregar todo a su repositorio de control de orĆ­genes!

Comparta sus comentarios de Trailhead en la Ayuda de Salesforce.

Nos encantarƭa saber mƔs sobre su experiencia con Trailhead. Ahora puede acceder al nuevo formulario de comentarios en cualquier momento en el sitio de Ayuda de Salesforce.

MĆ”s informaciĆ³n Continuar a Compartir comentarios