Hi All,

I'm trying to build a Google Maps LWC to show the location of an Account on the Account's record page. However, the component isn't rendering, even though I've added it to the page. No error appears. Screenshots and code below.

companyMap.html:

<template>
    <template if:true={record}>
        <lightning-card title="Location" icon-name="standard:address">
                <lightning-map
                data={accounts.data} 
                name={name} 
                map-markers={mapMarkers}
                ></lightning-map>
        </lightning-card>
    </template>
</template>

companyMap.js:

import { LightningElement, wire, track, api } from 'lwc';
import getAccount from '@salesforce/apex/AccountListController.getAccount';

const fields = [
    'Account.Name', 
    'Address__c', 
    'Account.BillingStreet', 
    'Account.BillingCity', 
    'Account.BillingState',
    'Account.BillingPostalCode', 
    'Account.BillingCountry'
];

export default class CompanyMap extends LightningElement {
    @api recordId;
    accountId;
    address;
    @track record;
    @track name;
    @track billingStreet;
    @track billingCity;
    @track billingState;
    @track billingPostalCode;
    @track billingCountry;
    mapMarkers;

    @wire(getAccount, { recordId: '$accountId', fields: fields })
    wiredRecord({ error, data }) {
        if (data) {
            this.record = data;
            const account = data.fields;
            this.address = 
                `${account.BillingStreet.value}, 
                ${account.BillingCity.value}, 
                ${account.BillingState.value},
                ${account.BillingPostalCode.value},
                ${account.BillingCountry.value}`;

            this.mapMarkers = [
                {
                    location: `${account.address.value}`,
                    title: `${account.Name.value}`,
                    mapIcon: {
                        path: 'M1472 992v480q0 26-19 45t-45 19h-384v-384h-256v384h-384q-26 0-45-19t-19-45v-480q0-1 .5-3t.5-3l575-474 575 474q1 2 1 6zm223-69l-62 74q-8 9-21 11h-3q-13 0-21-7l-692-577-692 577q-12 8-24 7-13-2-21-11l-62-74q-8-10-7-23.5t11-21.5l719-599q32-26 76-26t76 26l244 204v-195q0-14 9-23t23-9h192q14 0 23 9t9 23v408l219 182q10 8 11 21.5t-7 23.5z',
                        fillColor: '#f28b00',
                        fillOpacity: 1,
                        strokeWeight: 1,
                        scale: 0.02
                    }
                }
            ];
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.record = undefined;
        }
        console.log(data);
    }
}

AccountListController.cls:

public with sharing class AccountListController {
    
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccount() {
        return 
        [
            SELECT Id, Name, BillingStreet, BillingCity, BillingState, BillingPostalCode, BillingCountry
            FROM Account
            WITH SECURITY_ENFORCED 
            ORDER BY LastModifiedDate DESC 
            LIMIT 50
        ];
    }
}

companyMap.js-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Account</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Hello All,

I'm setting up Embedded Services Chat. Is there a way to override the

embedded.svc.settings

parameters so that instead of text being displayed, an icon is displayed instead? For example, instead of 

embedded.svc.settings.defaultMinimizedText

we would have 

embedded.svc.settings.defaultMinimizedImage

. I've looked in the documentation and don't see any parameters like this, so would we have to build a LWC to override the default 

.embeddedServiceHelpButton

?

Hi All,

I've got a Flow being called in a Global Action via a Lightning Aura Component. The Flow and Component are working, but for some reason the scrollable utility isn't. Does anyone have any idea what the problem could be?

Component:

<aura:component implements="force:lightningQuickActionWithoutHeader,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global">
<!-- Component is initialized -->
<aura:handler name="init" value="{!this}" action="{!c.init}" /> 
    <div class="slds-docked_container_align-left">
        <div class="slds-scrollable">
        	<div class="slds-docked-modal_composer slds-grid slds-grid_vertical-align-left slds-grid_align-left slds-is-open" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
            	<div class="slds-docked-composer__body">
            		<lightning:flow aura:id="flowData" />
            	</div>
        	</div>
        </div> 
    </div>
</aura:component>

Style:

.THIS .slds-scrollable {
    overflow: auto !important;
}
.THIS .slds-docked-modal-composer {
    max-width: auto;
}

Controller:

({
    init : function(component) {
        // Find the component whose aura:id is "flowData"
        let flow = component.find("flowData");
        // In that component, start your flow. Reference the flow's Unique Name/API Name.THIS
    flow.startFlow("New_Case");
    }
})

Any help would be greatly appreciated!

Hello All,

I'm setting up Embedded Services Chat. Is there a way to override the

embedded.svc.settings

parameters so that instead of text being displayed, an icon is displayed instead? For example, instead of 

embedded.svc.settings.defaultMinimizedText

we would have 

embedded.svc.settings.defaultMinimizedImage

. I've looked in the documentation and don't see any parameters like this, so would we have to build a LWC to override the default 

.embeddedServiceHelpButton

?

Hi All,

I'm trying to build a Google Maps LWC to show the location of an Account on the Account's record page. However, the component isn't rendering, even though I've added it to the page. No error appears. Screenshots and code below.

companyMap.html:

<template>
    <template if:true={record}>
        <lightning-card title="Location" icon-name="standard:address">
                <lightning-map
                data={accounts.data} 
                name={name} 
                map-markers={mapMarkers}
                ></lightning-map>
        </lightning-card>
    </template>
</template>

companyMap.js:

import { LightningElement, wire, track, api } from 'lwc';
import getAccount from '@salesforce/apex/AccountListController.getAccount';

const fields = [
    'Account.Name', 
    'Address__c', 
    'Account.BillingStreet', 
    'Account.BillingCity', 
    'Account.BillingState',
    'Account.BillingPostalCode', 
    'Account.BillingCountry'
];

export default class CompanyMap extends LightningElement {
    @api recordId;
    accountId;
    address;
    @track record;
    @track name;
    @track billingStreet;
    @track billingCity;
    @track billingState;
    @track billingPostalCode;
    @track billingCountry;
    mapMarkers;

    @wire(getAccount, { recordId: '$accountId', fields: fields })
    wiredRecord({ error, data }) {
        if (data) {
            this.record = data;
            const account = data.fields;
            this.address = 
                `${account.BillingStreet.value}, 
                ${account.BillingCity.value}, 
                ${account.BillingState.value},
                ${account.BillingPostalCode.value},
                ${account.BillingCountry.value}`;

            this.mapMarkers = [
                {
                    location: `${account.address.value}`,
                    title: `${account.Name.value}`,
                    mapIcon: {
                        path: 'M1472 992v480q0 26-19 45t-45 19h-384v-384h-256v384h-384q-26 0-45-19t-19-45v-480q0-1 .5-3t.5-3l575-474 575 474q1 2 1 6zm223-69l-62 74q-8 9-21 11h-3q-13 0-21-7l-692-577-692 577q-12 8-24 7-13-2-21-11l-62-74q-8-10-7-23.5t11-21.5l719-599q32-26 76-26t76 26l244 204v-195q0-14 9-23t23-9h192q14 0 23 9t9 23v408l219 182q10 8 11 21.5t-7 23.5z',
                        fillColor: '#f28b00',
                        fillOpacity: 1,
                        strokeWeight: 1,
                        scale: 0.02
                    }
                }
            ];
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.record = undefined;
        }
        console.log(data);
    }
}

AccountListController.cls:

public with sharing class AccountListController {
    
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccount() {
        return 
        [
            SELECT Id, Name, BillingStreet, BillingCity, BillingState, BillingPostalCode, BillingCountry
            FROM Account
            WITH SECURITY_ENFORCED 
            ORDER BY LastModifiedDate DESC 
            LIMIT 50
        ];
    }
}

companyMap.js-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Account</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Hello All,

I'm setting up Embedded Services Chat. Is there a way to override the

embedded.svc.settings

parameters so that instead of text being displayed, an icon is displayed instead? For example, instead of 

embedded.svc.settings.defaultMinimizedText

we would have 

embedded.svc.settings.defaultMinimizedImage

. I've looked in the documentation and don't see any parameters like this, so would we have to build a LWC to override the default 

.embeddedServiceHelpButton

?

Hi All,

I've got a Flow being called in a Global Action via a Lightning Aura Component. The Flow and Component are working, but for some reason the scrollable utility isn't. Does anyone have any idea what the problem could be?

Component:

<aura:component implements="force:lightningQuickActionWithoutHeader,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global">
<!-- Component is initialized -->
<aura:handler name="init" value="{!this}" action="{!c.init}" /> 
    <div class="slds-docked_container_align-left">
        <div class="slds-scrollable">
        	<div class="slds-docked-modal_composer slds-grid slds-grid_vertical-align-left slds-grid_align-left slds-is-open" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
            	<div class="slds-docked-composer__body">
            		<lightning:flow aura:id="flowData" />
            	</div>
        	</div>
        </div> 
    </div>
</aura:component>

Style:

.THIS .slds-scrollable {
    overflow: auto !important;
}
.THIS .slds-docked-modal-composer {
    max-width: auto;
}

Controller:

({
    init : function(component) {
        // Find the component whose aura:id is "flowData"
        let flow = component.find("flowData");
        // In that component, start your flow. Reference the flow's Unique Name/API Name.THIS
    flow.startFlow("New_Case");
    }
})

Any help would be greatly appreciated!

How to count number of options selected from multiselect picklist