lightning:map component

lightning:map introduced in winter 19 which can be use display a map of one or more locations using Google Maps. We can pass markers to the component to define the locations to map. A marker can be a coordinate pair of latitude and longitude, or a set of address elements: City, Country, PostalCode, State, and Street.

This component requires API version 44.0 and later. lightning:map has required attribute mapMarkers which accepts array of markers that indicate location. A market contains

• Location information: This can be a coordinate pair of latitude and longitude, or an address composed of address elements.
• Descriptive information: This is information like title, description and an icon which is information relevant to the marker but not specifically related to location.

Example
Create a new Object called 'Tower' with two new custom fields
1. Field Label: State
    Type: Master-Detail (Account)

2. Field Label: Location
    Type: GeoLocation (Latitude & Longitude Display Notation: Decimal )

Once metadata is ready then create some Tower records with Latitude & Longitude values.

Now copy & paste below code to show Map with markers.

UtilityClass.cls

	public class UtilityClass {
	public static List<sObject> queryObjects(String theObject, List<String> theFields, List<String> theFilters, String sortField, String sortOrder) {
	String theQuery = 'SELECT ' + string.join(theFields, ',');
	theQuery += ' FROM ' + theObject;
	boolean firstFilter = true;
	for(String filter : theFilters) {
	String clauseToUse = (firstFilter) ? ' WHERE ' : ' AND ';
	filter = filter.trim();
	filter = filter.replaceAll('(\\s+)', ' '); // removing white spaces
	theQuery += clauseToUse + filter;
	}
	if(!String.isEmpty(sortField)) {
	theQuery += ' ORDER BY ' + sortField;
	if(!String.isEmpty(sortOrder)) {
	theQuery += ' ' + sortOrder;
	}
	}
	String queryResult = string.escapeSingleQuotes(theQuery);
	return Database.query(queryResult);
	}
	}

view raw UtilityClass.cls hosted with ❤ by GitHub

TowerController.cls

	public class TowerMapController {
	@AuraEnabled
	public static List<Tower__c> getAllTowers() {
	String theObject = 'Tower__c';
	List<String> theFields = new List<String>{'Id', 'Name', 'State__r.Name', 'Location__Latitude__s', 'Location__Longitude__s'};
	List<String> theFilters = new List<String>();
	String sortField = 'Name';
	String sortOrder = 'ASC';
	List<Tower__c> allTowers = UtilityClass.queryObjects(theObject, theFields, theFilters, sortField, sortOrder);
	return allTowers;
	}
	}

view raw TowerMapController.cls hosted with ❤ by GitHub

TowerMap.cmp

	<aura:component controller="TowerMapController" implements="force:appHostable,flexipage:availableForAllPageTypes">>
	<aura:attribute name="mapMarkers" type="object" access="private"/>
	<aura:attribute name="markersTitle" type="object" access="private"/>
	<aura:handler name="init" value="{!this}" action="{!c.init}"/>
	<aura:if isTrue="{!!empty(v.mapMarkers)}">
	<lightning:map mapMarkers="{!v.mapMarkers}" zoomLevel="10" markersTitle="{!v.markersTitle}"/>
	</aura:if>
	</aura:component>

view raw TowerMap.cmp hosted with ❤ by GitHub

TowerMapController.js

	({
	init : function(component, event, helper) {
	helper.initHelper(component, event, helper);
	}
	})

view raw TowerMapController.js hosted with ❤ by GitHub

TowerMapHelper.js

	({
	initHelper : function(component, event, helper) {
	helper.utilSetMarkers(component, event, helper);
	},
	utilSetMarkers: function(component, event, helper){
	//Variables declared with the let keyword can have Block Scope.
	//{ let x = 2; } x cannot be uset outside the block
	var action = component.get("c.getAllTowers");
	action.setCallback(this, function(response){
	var state = response.getState();
	if(state == 'SUCCESS') {
	const data = response.getReturnValue();
	const dataSize = data.length;
	const markers = [];
	for(let index = 0; index < dataSize-1; index++) {
	const Tower = data[index];
	markers.push({
	'location': {
	'Latitude' : Tower.Location__Latitude__s,
	'Longitude' : Tower.Location__Longitude__s
	},
	'icon': 'utility:Tower',
	'title' : Tower.Name,
	'description' : Tower.Name + ' Tower Location at ' + Tower.State__r.Name
	});
	}
	component.set("v.markersTitle", "Out and About Communications Tower Locations");
	component.set("v.mapMarkers", markers);
	}
	});
	$A.enqueueAction(action);
	}
	})

view raw TowerMapHelper.js hosted with ❤ by GitHub

Inherited Sharing in Apex

Inherited Sharing is available with Salesforce Winter'19 release. Use Inherited sharing keyword on apex class which allows the class to run in sharing mode of class that called it. Inherited sharing ensures that our apex code is not used in unexpected or insecure way. An Apex class with inherited sharing runs as with sharing when used as a Visualforce page controller, Apex REST service, or an entry point to an Apex transaction.

If the class is used as the entry point to an Apex transaction, an omitted sharing declaration runs as without sharing. However, inherited sharing ensures that the default is to run as with sharing. A class declared as inherited sharing runs only as without sharing when explicitly called from an already established without sharing context.

Example:
We have declares Apex class with inherited sharing and a visualforce invocation of that Apex code. Because of the 'inherited sharing' declaration, only contacts for which the running user has access are displayed. If we removed inherited sharing then contacts that a user has no rights to view are displayed due to the insecure default behavior.

	public inherited sharing class InheritedSharingClass{
	public List<Contact> getAllTheSecrets(){
	return [SELECT Name FROM Contact];
	}
	}

view raw InheritedSharingClass.cls hosted with ❤ by GitHub

	<apex:page controller="InheritedSharingClass">
	<apex:repeat value="{!allTheSecrets}" var="record">
	{!record.Name}
	</apex:repeat>
	</apex:page>

view raw InheritedSharingPage.vfp hosted with ❤ by GitHub

running user with owner of multiple records

running user owns only one contact record.

Lightning Web Component: Render elements conditionally

to render HTML conditionally we will use if:true|false directive.


Directives are special HTML attributes that add dynamic behavior to HTML templates. below are the list of directive: 

1. for:each={array} : use this directive to iterate over an array and render a list.

2. for:item= "currentItem" : Use this directive to access the current items where currentItem is an identifier that model injects into the current scope.

3. for:index="index" : Use this directive to access the current item's zero-based index where  index placeholder is a new identifier that the model injects into the current scope.

4. if:true|false={expression} : Use this directive to conditionally render DOM elements in a template. The expression can be a JavaScript identifier (for example, person) or dot notation that accesses a property from an object (person.firstName). The engine doesn’t allow computed expressions (person[2].name['John']). To compute the value of expression, use a getter in the JavaScript class.

5. iterator:iteratorName={array}: Use this directive to apply special behavior to the first or last item in an array and render a list.  Access these properties on iteratorName

• value : the value of item in the list (iteratorName.value.propertyName).
• index : The index of item in the list.
• first : A boolean value indicating whether this item is the first item in the list.
• last : A boolean value indicating whether this item is the last item in the list.

6. key={uniqueId} : Use this directive to improve rendering performance by assigning a unique identifier to each item in a list. The key must be a string or a number, it can’t be an object. The engine uses the keys to determine which items have changed.

7. lwc:dom="manual" : Add this directive to a native HTML element to call appendChild() on the element from the owner’s JavaScript class and preserve styling. If a call to appendChild() manipulates the DOM, styling isn’t applied to the appended element.

Now back to topic
if:true|false={property} directive binds data to the template and removes and inserts DOM elements based on whether the data is true or false.

Below code hide and show a section when user selects or deselects the checkbox.

	<template>
	<lightning-card title="HelloConditionalRendering" icon-name="custom:custom14">
	<div class="slds-m-around_medium">
	<lightning-input type="checkbox" label="Show details" onchange={handleChange}></lightning-input>
	<div class="slds-m-vertical_medium">
	<template if:true={areDetailsVisible}>
	These are the details!
	</template>
	<template if:false={areDetailsVisible}>
	Not showing details.
	</template>
	</div>
	</div>
	</lightning-card>
	</template>

view raw helloConditionalRendering.html hosted with ❤ by GitHub

	import { LightningElement, track } from 'lwc';
	export default class HelloConditionalRendering extends LightningElement {
	@track areDetailsVisible = false;
	handleChange(event){
	this.areDetailsVisible = event.target.checked;
	}
	}

view raw helloConditionalRendering.js hosted with ❤ by GitHub

	<?xml version="1.0" encoding="UTF-8"?>
	<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloConditionalRendering">
	<apiVersion>45.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
	<target>lightning__AppPage</target>
	<target>lightning__RecordPage</target>
	<target>lightning__HomePage</target>
	</targets>
	</LightningComponentBundle>

view raw helloConditionalRendering.xml hosted with ❤ by GitHub

Reference: Lightning Web Component Guide