Reference - Git commands

Version control systems allow you to track all changes made to your codebase and enables you to do things like reverting to an old version of code, developing features separately without affecting other people's changes etc. There are many version control tools like Git, SVN/subversion etc. Git is a very popular version control system out there. It is a distributed version control system, ie - every user will have their own seprate copy of code and can continue development even if there is no connectivity to server. From Salesforce development perspective, using version control systems like git became more important than earlier with Salesforce DX(SFDX).

Basics

This article assumes that you know basics of git. Once you are familiar with basics, you can use this reference article to quickly find common git commands. If you want to go through basics of git please checkout this git guide.

Explanation

You need to have a very high level idea about git to use this reference article. Just search in the page to find commands for common operations like cloning repo, creating branch, committing code, reverting code, stashing code etc.

How to use

Install Git CLI corresponding to your operating system from git website. Start running commands from above command reference.

Please note that if you do not want to use command line git, you can always depend on git clients like Github Desktop, SourceTree, TortoseGit, GitKraken and more others

How to use custom iterator in apex batch class

Apex batch classes are used to process large volume of records that can hit governor limits if processed synchronously. Batch classes are used to split these large set of records into small chunks and execute as separate transactions. Batch class can work on up to 50M sObject records using QueryLocator or upto 50k records using Iterator. Using list of sObjects is a common pattern and you can find a sample batch class template here. There are two ways of using iterator approach. it can either be a or a There are cases where using a Iterator is more meaningful. You can find some use cases below,

1. Use a custom iterator defined using CustomIterable interface
2. You can just use standard apex collections like list as iterator. Because they are implementing Iterable interface behind the scenes

Use cases

• If your batch class needs to operate on data obtained from two unrelated objects, you can create a custom iterable class and return combined data from both objects as a list of iterable from start method
• Say you have an API that returns ~5k product Ids and then you need to hit another API for each of these products to get more details about each product. You can return a list of product Ids from start method to achieve this.

Explanation

Apex batch classes can return an iterator to process large volume of data that are not directly queried from database/sobjects. These iterators can be classes implementing Iterable interface or standard apex data strucutres like list. In above example we are getting a list of animals and details of individual animal from an API hosted in Heroku. It is used by Salesforce for trailhead modules. Here "baseUrl/animals" gives a list of animals and "baseUrl/animals/animalId" gives details of a single animal.

Suppose the API to get list of animals gives back 1000 animal IDs. Then we cannot get details of all animals individually using single transaction. This is because currently governor limit on number of callouts in one transaction is 100. So we need to split it into multiple transactions. Best way to do this is to use apex batch. Here we use start method to make an API call to get list of all animals. Then we will process the result and finally start method will return a list of all animal Ids to execute method. Then because it is a batch, Salesforce will call execute method multiple times with a subset of total animal list each time using the batch size we specify while starting the batch. This will help us to stay within governor limits if we use correct batch size (Something below 100 in our case so that we can stay within 100 callouts per transaction limit).

How to use

• Make sure that you are adding https://th-apex-http-callout.herokuapp.com/ in remote site settings to allow callouts to this URL.
• Create an apex class with name "IteratorExampleBatch" and copy paste the code from above
• Execute the batch using "Developer Console" => "Execute Anonymous" option. You can use Database.executeBatch(new IteratorExampleBatch(), 10); to execute batch with a batch size of 10

How to use lightning data service in lightning web components(LWC)

Lightning data service allows you to cache and share data between lightning components using browser cache. Lightning framework takes care of managing cached data in browser. You do not need to write any code to interact with browser cache. There is no need to write any apex code also. Since the data is coming from client/browser cache, you can access data quickly if it is cached already. Lightning data service is built on top of Salesforce user interface API.

Use cases

• Create simple forms that can create/view/edit single record.
• lightning-record-form can be used to display data from all fields in standard page layout.
• If you are building a component to use in a record details page and the component only updates the fields in the same record, it is highly recommended to use lightning data service, since Salesforce keeps data in sync with details page automatically.

Explanation

You can use "getRecord" and "updateRecord" methods from "lightning/uiRecordApi" to get record and update record from lightning data service respectively. After getting a record you need to wire it to a variable to make it available in UI. Then you need to use "getFieldValue" method and create a getter method to make the field available in the UI.

If we go step by step in the flow, below actions happen in a sequence when the component is loaded and value is changed.

1. Component gets loaded in a record details page and salesforce passes "recordId" attribute is passed in to the component
2. @wire annotation uses "getRecord" to get data from Salesforce server using lightning data service
3. This data is made available to HTML through "checkboxValue" getter method. At this point if the data in contact record is checked, it will be dispalyed in UI
4. Say user changed the value of checkbox by clicking it. "handleFieldChange" method is called. This method creates an object to update and passes to "updateContact" method
5. "updateContact" method uses "updateRecord" method from lightning data service to send this data to Salesforce server and update
6. Based on success or failure, a toast message is shown by firing an eveng

How to use

• This code assumes that you have a checkbox field in your contact object with API name "My_Checkbox_Field__c"
• Create an LWC component with name "lwcDataserviceComponent". Copy HTML, JS and XML code above to relevant files
• Once the component is saved, you should be able to see it in app builder interface for contact object. This is because we have made it available through the metadata file of lightning component
• Drag and drop the component to contact page and activate it
• If you have the same field in record details section, you will be able to see that getting updated in real time as you update the checkbox in the lwc component.

How to pass attributes from aura component to lightning web component(lwc)

We can compose aura components and aura apps with a combination of lwc components and aura components. Frequently we need to pass attributes from aura component to lightning web component. Here we go through the an example of passing data from aura to lwc component

Explanation

Here we are creating an LWC component with name "childLWCComponent". We display data received from parent aura component "ParentAuraComponent" in "childLWCComponent". In order to make an lwc Javascript variable/attribute available for parent components to pass data, we need to add @api annotation before the variable. In order to pass data to "childLWCComponent" LWC component from parent aura component, you can just use the syntax <c:childLWCComponent childVariable="Value sent from parent"></c:childLWCComponent>

How to use

• Create an LWC component with name childLWCComponent
• Copy content from above code to childLWCComponent component. childLWCComponent.html is the HTML file and childLWCComponent.js is the Javascript file
• Create an aura component with name "ParentAuraComponent"
• Copy content from above code sample to ParentAuraComponent.cmp file
• You can embed the parent aura component in an aura app to see the result

How to use a lightning web components(LWC) inside an aura component

It is very easy to embed lightning web components(lwc) inside aura components. But remember that you cannot insert an aura component inside an LWC component.

Use cases

• You can use this approach to migrate/modernize your big aura applications to LWC step by step. Suppose there is a big aura application that has four big aura sub components. We can migrate the application to LWC framework, by migrating one of these four aura components to LWC at a time.

Explanation

Here we are creating an LWC component with name "childLWCComponent". We display data from a javascript variable in controller with name "testVariable" in the UI. To embed we are using an aura application with name TestApp. In order to embed "childLWCComponent" LWC component in aura app, you can just use the syntax "<c:childLWCComponent></c:childLWCComponent>"

How to use

• Create an LWC component with name childLWCComponent
• Copy content from above code to childLWCComponent component. childLWCComponent.html is the HTML file and childLWCComponent.js is the Javascript file
• Create an aura app with name "Testapp.app"
• Copy content from above code sample to Testapp.app file
• Navigate to "yourOrgBaseUrl/c/TestApp.app" to see the result

How to display a modal window using lightning web components

We will go through building a reusable lightning web component that you can use to show modal windows in other LWC components.

Use cases

• Display modal window or popup window in user interface

Explanation

We can use lightning design system sample modal code in the link to show the modal window. But to implement opening and closing behavior of the modal, we need to use javascript variables in lwc. We will create a reusable lwc component with name "utilModal". This will have code needed to show and hide modal window. Then we will create a sample parent component with name "modalParentExample" that we can use embed modal component. We fire custom events from utilModal component and parent "modalParentExample" catches these events. Parent component can use these action handlers to execute actions when buttons in modal window are clicked.

How to use

• Create an LWC component with name utilModal
• Copy content from above code to utilModal component. utilModal.html is the HTML file and utilModal.js is the Javascript file
• "modalParentExample" has sample code to open modal window