Some highlights by Salesforce

03:21 3 Comments A+ a-

​Hello All,

There are some recent updates by Salesforce, which i got to know in last a few days and announced in Dreamforce 19. Just sharing it with you.

1. Dynamic Forms let you migrate fields & sections from your page layout as individual components into Lightning App Builder. Then configure them just like rest of the components on page, and give users relevant info when they need. Check it out here.

2. The Salesforce Einstein Hub is your one-stop-shop for education on how to use and get started with Einstein. Go to place to learn all about the Einstein Platform. Check it out here.

3. Secure Your Sandbox Data With Salesforce Data Mask - a new tool to help you customize, build, and test on Salesforce while protecting private data. Find out more here.

4. Einstein Voice Assistant and Einstein Voice Skills (beta Spring ’20) allows every Salesforce admin to create custom versions of the Voice Assistant for every user, whether they're a sales rep or manager, service agent, marketer etc

5.  Trailhead comes to mobile devices. Salesforce has introduced the Trailhead GO app to skill up for the future on the go. Currently, this app is exclusively for iOS and iPadOS. Click on this link to download it from Apple App Store,

6.  Salesforce With Customer 360 Data Manager, admins can register their instances of Marketing, Commerce, Service Cloud & then map customer records from each one of them into one, unified view of customer.

7. Salesforce has partnered with AWS to empower learners to skill up for the future. AWS learning content is now available on Trailhead. Check it out here.

8. Permission Set Groups is a new feature that allows Admins to combine multiple permission sets into a single permission set group for user assignment. With the grouping mechanism, admins can truly apply role-based access control for managing user entitlements in Salesforce orgs.

Thank you
Ranu Bari​

Winter’20 Release Highlights

02:45 9 Comments A+ a-

I have reviewed Winter'20 release notes by salesforce. In case you have not read the whole PDF of Salesforce Winter’20 release notes, summarized some of the need-to-know or cool Winter‘20 features.

1.      Add Lightning Web Components as Custom Tabs : Now you can add LWC as a custom tab in lightning experience app and salesforce app.
2.      Increase Productivity with Local Development for Lightning Web Components (Beta) : LWC offers local development, now no need to deploy during development and continuously changes, you can see preview on local without publishing.
3.      Hitting Apex Limits in Server-Side Actions Is More Predictable : Apex limits in Lightning components are now applied per action. Previously, the Apex limits applied across all the actions batched together  in a request.
4.      Navigate Users Directly to an App : Now you can create components that link directly to your app and to a specific page in your app.
5.      Hide the Default Label for Visualforce Pages in Lightning App Builder : Lightning app builder provides a Show Label option so that you can choose your own to hide the default label.
6.      Enforce Field-Level Security in Apex (Beta) : stripInaccessible() security feature provides field level data protection. For example, If the user doesn’t have permission to read the any  field of a Contacts object, this example code removes the subquery field before reading the records. The DML operation completes without throwing an exception.
7.      Callouts Are Excluded from Long-Running Request Limit :  HTTP callout processing time is no longer included when calculating the 5-second limit. Timer paused for the callout and resume it when callout completes.
8.      Formula Class in the System Namespace : The new System.Formula class contains the recalculateFormulas method that updates (recalculates) all formula fields on the input sObjects.
9.      Community and Portal User Visibility Are Disabled by Default in New Orgs : The Community User Visibility and Portal User Visibility settings are now disabled by default for orgs created in Winter ’20 and later that enable communities or portals. External users in portals and communities can see themselves and are visible to users above them in the role hierarchy. When Community User Visibility is enabled, communities users are visible to all other users in the communities that they are a member of. When Portal User Visibility is enabled, portal users are visible to all other portal users in the same account.
10.   Set Up Email Address Confirmations for Lightning Communities :  When Lightning Communities external users changed their email address, the email address is updated immediately. For better security, you can now make sure that the user owns the new email address before the update takes effect. Salesforce recommends that you enable email confirmations from the Identity Verification Setup page. For new orgs, email confirmations occur automatically.
11.   Use Sharing Rules to Grant Record Access to Guest Users : Control which records you allow guest users without login credentials to access. A guest user sharing rule is a type of criteria-based sharing rule that can grant Read Only access to guest users. It’s the only way that you can share records with unauthenticated users when the Secure guest user record access setting is enabled.

12.   Secure Guest Users’ Record Access with a New Setting : Secure the access that unauthenticated guest users have to your org’s data with the Secure guest user record access setting. When enabled, guest users’ org-wide defaults are set to Private for all objects, and you can’t change this access level. You also can’t add guest users to groups or queues or manually share records with them. You can grant record access only with new guest user sharing rules.
13.   Make Files on Records Visible to Customers in Communities : Now you can decide which files customers can see on records that you share with customers in your communities. By default, files on records aren’t visible to customers in communities. The new Customer Access switch on a file’s sharing detail page lets you decide when customers can see the file.
14.   Remove a File from a Record Without Deleting It Everywhere : Want to remove a file from a record but not delete it from your Salesforce org? Now you can! Previously, a file owner could delete a file from Files home or a record using row-level actions. But this method also removed the file from all records and posts where it was attached. Now you can easily remove the file from a record without also removing it from other records, posts, or Files home.

15.   Require Verification When Community Users’ Change Their Email Address : Improve security by requiring external users to confirm their community email address changes. When a community user changes an email address, you can have an email sent to the new address for confirmation. After the user clicks the confirmation link in the message, the address change takes effect. Salesforce recommends that you enable email confirmations to improve security. Sending email confirmations occurs automatically for new communities and new and existing internal users.

For detail information, you can visit here,

Salesforce Data Modelling & Application Implementation

03:01 7 Comments A+ a-

Hi All,

As a regular practice we organize "Let's Code Together" session at iBirds Software Services Pvt. Ltd. time to time. This Saturday (21 Sep, 2019), we had seminar on Data Modelling and Application Implementation seminar on Salesforce. We chose the example of implementing a sample "Recruitment Application" in salesforce. We had the following case study before starting this seminar.

Recruitment App Case Study

‘Smart Job’ company needs their recruitment application on salesforce.

Admin / HR can perform following tasks

1.       Can create jobs
2.       View all jobs by different filters
3.       Can see all candidates
4.       Can see all applications
5.       Assign application to Interviewer for taking interview of the candidates

Interviewer can do following tasks

1.       Can see all jobs
2.       Cannot edit/create/delete jobs
3.       Can see applications only assigned to him
4.       Cannot see all candidates
5.       Can edit applications assigned to him few fields.

Candidate can do following tasks

1.       Can see all jobs
2.       Can apply for a particular job
3.       Can see all his/her applications
4.       Can delete / edit self-applications anytime
5.       Can apply only after login
6.       Can upload CV
7.       Candidates cannot see each other data

Guest user can do following tasks

1.       Can see all jobs
2.       Cannot apply on jobs

It was great get together session. Here is the recording for the seminar.

Sharepoint Integration With Salesforce

09:03 21 Comments A+ a-

Hi Folks,
In this post, I want to address how we can integrate Sharepoint with Salesforce through Microsoft Graph API. We all know that we are in the era of cloud. We may want to connect two cloud services. So, How can we do that? Through integrating one cloud service into another cloud service. Let's start the integration. (If you want to integrate Sharepoint to other applications, convert the below code into any language that you used in your application.)

What is Sharepoint?

Organizations use SharePoint to create websites. You can use it as a secure place to store, organize, share, and access information from any device. It is a very robust content management and document management platform used by all kinds of companies, mainly for storing business-related documents and content. It is mostly used as a secure document repository for intranet portals, websites, cloud-based services, and of course as an independent repository as well.

What is the Microsoft Graph API?

Microsoft Graph is the gateway to data and intelligence in Microsoft 365. You can use the Microsoft Graph API to build apps for organizations and consumers that interact with the data of millions of users. With Microsoft Graph, you can connect to a wealth of resources, relationships, and intelligence, all through a single endpoint:

All set, let’s get started!

Register Your Application in Azure Portal

  • Sign in to the Azure Portal. (
  • Go to the Azure Active Directory in the left side navigation pane.
  • 1) Click App Registrations then 2) Click New application registration.
  • Follow the below steps.
          1) Enter the Name of your application. 
          2) Choose application type as "Web App/ API". 
          3) Enter Sign-on URL like "".
          4) Click "Create".

  • Now you will get the registered application information. Copy and keep the Application ID somewhere we will use it later.
  • Go to settings in the top menu in your application info section.
  • Go to the Required Permissions.

  • Click the "Add" button to add the permissions to your application.
  • Now we have two steps to do. 1) Select an API 2) Select Permissions for that API. In our case, we need to select the "Microsoft Graph" API and in the next step, we will give permissions related to this API. 
  • Currently, I am giving "Read and write files in all site collections" permission only.  We will add more permissions later. 
  • Don't forget to click the "Done" button after adding permissions.
  • It's a time to generate Private Key for our application. Go Back to the "Settings" navigation pane. Then click "Keys". Fill the description of the key and then select expires duration. Then click the "Save" button. It will provide us a private key. Copy the key value and store it in a secure place. You won't be able to retrieve the same key after. 
  • To add more permissions to your app, go to the "App registrations (Preview)" section. Then select the app that we created recently (Force Application).  Copy the "Directory (tenant) ID" we will use it later.
  • Then Click the "View API Permissions" button. 
  • Now go to "Add a Permission".
  • In "Select an API" section select "Microsoft Graph" API.
  • Go to the "Delegated Permissions" and add the listed permissions. Also, add the permissions in the "Application Permissions" section as well. 
  • The following permissions are required to create a folder and upload files in Sharepoint.
     Delegated permissions :
     Application Permissions:

Application Permissions - Your client application (Salesforce) needs to access the Web API (MS Graph API) directly without user context. This type of permission requires administrator consent and is also not available for Native client applications.

Delegated Permissions - Your client application (Salesforce) needs to access the Web API (MS Graph API) as the signed-in user, but with access limited by the selected permission. This type of permission can be granted by a user unless the permission is configured as requiring administrator consent.
  • After adding permissions don't forget to "Grant admin consent". (See the bottom of the API Permissions page)
Let's test our application.


As of now, we noted three values 1. Application ID (Client Id) 2. Private Key (Client Secret) 3. Tenant ID. See the below code for authorization.  Store access_token in the public variable so that we can use it in other processes.

String clientId = 'my application id'; 
String clientSecret = 'my private key';
String tenantId = 'my tenant id';
Http h = new Http();
HttpRequest req = new HttpRequest();
req.setHeader('Content-Type', 'application/x-www-form-urlencoded');
//< tenant Id>/oauth2/token
req.setEndpoint(''+EncodingUtil.urlEncode(tenantId, 'UTF-8').replaceAll('\\+', '%20')+'/oauth2/token'); 
String body = 'grant_type=client_credentials'+
    '&client_id=' + EncodingUtil.urlEncode(clientId, 'UTF-8') +
    '&client_secret='+ EncodingUtil.urlEncode(clientSecret, 'UTF-8') +
HttpResponse res = h.send(req);
System.debug('Response Body: ' + res.getBody());
//Parse the response and store the access_token in public variable to use it in other methods.

I added the sample response from Postman for the above request.

Note: Below example are to upload files in the Sharepoint host/root site. If you want  to upload files to other sites your URL format Should be:{site-id}/drives/    (get drive list){site-id}/drives/{drive id}/root/children      (create a folder){site-id}/drives/{drive id}/root:/{folder path}/{file name}:/content (upload a file)

Get the Drive List

Below code shows how to get a list of drives available to your application. In Sharepoint, every "Document Library" considered as a separate drive. If you know your drive (Document Library) ID then skip this step. From drive list find your drive with the help of "webUrl" or "name" in the response and store the "id" in a global variable like Custom Settings in salesforce. 

String access_token= 'access_token';
Http h = new Http();
HttpRequest req = new HttpRequest();
req.setHeader('Authorization', 'Bearer '+ access_token);
req.setHeader('Content-Type', 'application/json');
req.setHeader('Accept', 'application/json');
HttpResponse res = h.send(req);
System.debug('Response Body: ' + res.getBody());
//Get your drive id from the response and store it somewhere.

In my case, I want to store my files in Documents. 

Create a Folder

Run the below code to create a folder in Root library.
URL format to create a child folder:{drive id}/root:/{parent folder path}:/children.
URL format to create the Folder with Parent Folder Id instead of folder path :{drive id}/items/{parent folder id}/children.
Also, @microsoft.graph.conflictBehavior have three values fail, replace, and rename.

String access_token= 'access_token';
String driveID = 'my drive id';
String folderBody = '{"name": "New Folder","folder": { },"@microsoft.graph.conflictBehavior": "rename"}';
string endPoint = '' + 
                        EncodingUtil.urlEncode(driveID, 'UTF-8').replaceAll('\\+', '%20') +
Http h = new Http();
HttpRequest req = new HttpRequest();
req.setHeader('Authorization', 'Bearer '+ access_token);
req.setHeader('Content-Type', 'application/json');
req.setHeader('Accept', 'application/json');
HttpResponse res = h.send(req);
System.debug('Response Body: ' + res.getBody());

Make sure that the folder created successfully in SharePoint.

Upload a File

Run the below code to upload the file in "New Folder" which we created previously. This method only supports files up to 4MB in size.
URL format to upload file with parent folder path:{drive Id}/root:/{parent folder path}/{file name}:/content.
URL format to upload file with parent folder id:{drive Id}/items/{parent folder id}:/{file name}:/content.

String access_token= 'access_token';
String driveID = 'my drive id';
String folderName = 'New Folder';
String fileBody = 'Hello World!';
String fileName = 'My Document.txt';
String endPoint = '' + 
                                EncodingUtil.urlEncode(driveID, 'UTF-8').replaceAll('\\+', '%20') +
                                '/root:/'+EncodingUtil.urlEncode(folderName, 'UTF-8').replaceAll('\\+', '%20')+'/'+
                                EncodingUtil.urlEncode(fileName, 'UTF-8').replaceAll('\\+', '%20')+':/content';
Http h = new Http();
HttpRequest req = new HttpRequest();
req.setHeader('Authorization', 'Bearer '+ access_token);
req.setHeader('Content-Type', 'text/plain');
req.setHeader('Accept', 'application/json');
HttpResponse res = h.send(req);
System.debug('Response Body: ' + res.getBody());

Make sure that the file uploaded successfully in SharePoint.

Worried about upload large files? We have a Resumable File Upload feature.

Resumable Upload

Create an upload session to allow your app to upload files up to the maximum file size. An upload session allows your app to upload ranges of the file in sequential API requests, which allows the transfer to be resumed if a connection is dropped while the upload is in progress.

To upload a file using an upload session, there are two steps:
1.Create an upload session
2.Upload bytes to the upload session

1.Create an upload session
The response to this request will provide the details of the newly created uploadSession, which includes the URL used for uploading the parts of the file.
String access_token= 'access_token';
String driveID = 'my drive id';
String parentFolderId = 'My parent folder id';
String fileDesc = '{"@microsoft.graph.conflictBehavior": "rename"}';
String fileName = 'largeFile.txt';
string endPoint = '' + 
                                EncodingUtil.urlEncode(driveID, 'UTF-8').replaceAll('\\+', '%20') +
                                '/items/'+EncodingUtil.urlEncode(parentFolderId, 'UTF-8').replaceAll('\\+', '%20')+':/'+
                                EncodingUtil.urlEncode(fileName, 'UTF-8').replaceAll('\\+', '%20')+':/createUploadSession';
Http h = new Http();
HttpRequest req = new HttpRequest();
req.setHeader('Authorization', 'Bearer '+ access_token);
req.setHeader('Accept', 'application/json');
HttpResponse res = h.send(req);
System.debug('Response Body: ' + res.getBody());

Copy the uploadUrl from the response.

2.Upload bytes to the upload session
To upload the file or a portion of the file, your app makes a PUT request to the uploadUrl value received in the createUploadSession response. You can upload the entire file, or split the file into multiple byte ranges, as long as the maximum bytes in any given request is less than 60 MB.

The size of each chunk MUST be a multiple of 320 KB (327,680 bytes) except the last chunk. Using a fragment size that does not divide evenly by 320 KiB will result in errors committing some files.

Run the below code to upload the file in a single chunk (less than 60 MB file).  If you have large files then repeat the below request until you upload all the chunks with appropriate Content-Range.
String access_token= 'access_token';
Blob file_body = Blob.valueOf('Hello World!');
String fileLength = String.valueOf(file_body.size());
String uploadUrl = 'upload URL from create an upload session';
Http h = new Http();
HttpRequest req2 = new HttpRequest();
req2.setHeader('Authorization', 'Bearer '+ access_token);
req2.setHeader('Content-Range','bytes 0-'+(Integer.ValueOf(fileLength) - 1)+'/'+fileLength);
req2.setHeader('Accept', 'application/json');
HttpResponse res = h.send(req2);
System.debug('Response Body: ' + res.getBody());

If you have any other queries/issues drop me an email(

Rajesh K

Salesforce and Mulesoft Integration Workshop

08:52 15 Comments A+ a-

Hi All,
As always, at iBirds Services, we do time to time #iTW sessions. Last weekend we had #iTW session on #salesforce and #mulesoft integrations. He had a workshop at our office, and here are the recorded sessions for this event.
(We have blurred few parts due to personal credentials hiding needs)

Salesforce and Mulesoft workshop part 1

Salesforce and Mulesoft workshop part 2

For any questions and feedback, email to me (

Aslam Bari

Salesforce Quick Change Set Tool

09:00 6 Comments A+ a-

This tool is native  (Apex / Visual Force) based screen. It helps user to upload their Changeset CSV component files at one shot from this screen. It helps users to avoid adding multiple items in changeset with traditional long efforts.

You can install this tool from this un-managed package as well:


You need to first add your "Quick Change Set" page URL domain into remote site settings


  • Open the Tab "Quick Change Set", it will open the "QuickChangeSet" page
  • On the screen, it will ask three inputs
    •   Input file: This is the CSV file for the changeset. Here is the
    •   NOTE: CSV file format and sequences of columns MUST be same as given in csv file.
    •   Change Set Id: To get this from your org
      •     Open your changeset which you created
      •     Click on "Add" button, right click on anywhere from the page to check inspect elements or open the View Source Code window
      •     Grab the "id" of changeset from this source code
    •   Confirmation Token: To get this from your org
      •  From the source code window which you opened in above step, get the value from "_CONFIRMATIONTOKEN" input tag
  • Click on "Upload File" button to parse this file. It will show all possible components in bottom table with links. You can click on any output component to go directly to setup record for that component
  • Click Confirm Submit to execute the script. It will start adding components into your salesforce changeset
  • Once completed, it will show a success message with changeset link
  • For more info: Watch Here

Supported Components and Rules to mention in CSV file

For now we are supporting following components. In near future, we need to support more. All names must be case sensitive and must exact match to salesforce Name/DeveloperName exact case
  1. Apex Classes -- API name of apex class
  2. Apex Triggers -- API name of apex trigger
  3. Visualforce Pages -- API name of page
  4. Visualforce Components -- API name of VF components
  5. Email Templates -- Email Template Name 
  6. Static Resources -- API name of static resource
  7. Custom Objects -- API name of object
  8. Custom Fields -- [API name of object].[API name of field]
  9. Workflow Rules -- [API name of object].[Rule Name]
  10. Email Alerts -- API name of email alert
  11. Field Updates -- Name of the field update
  12. Custom Labels -- API name of custom field
  13. Record Types -- [API name of object].[DeveloperName of record type]
  14. Page Layouts -- [API name of object].[Name of the layout]

Known Issues

  1. More validations needed on front end side
  2. Error handling needed. Right now there is no way to check if a component is added in changeset properly or not. It always shows success message
  3. File input required validation needed
  4. Few variables may not be useful or can be removed
  5. Getting Changeset Id and Confirmation token is from User Input. There seems to be no way to get this dynamically right now.
  6. Delete functionality is not given in this tool for now.
  7. CSV file format must be same as given in demo file and columns must be in given sequences only
  8. This tool is tested on classic salesforce only so far. Not sure how it will work on lightning UI. Need to do couple of changes to support lightning UI
  9. All names must be exact same as appear in salesforce (Case Sensitives)
  10. In Display output table, it does not show "__c" in object/field names


Please comment about your views on this tool. If you want to contribute to enhance this package/library then email me :

Aslam Bari

04:08 17 Comments A+ a-

Salesforce Lightning Web Components

Hi All,

Today I will talk about Lightning Web Components, which will be generally available in February 2019 and will run in any Salesforce Org.

Lightning Web Components is a new programming model for building Lightning components. It holds web standards breakthroughs, can interoperate with the Aura programming model and delivers unique performance. To create and develop Lightning Web Components, you need to set up “Salesforce DX”.and “Visual Studio” code editor, which is the recommended Salesforce development environment. Here are the installation links:

Command Line Interface (CLI) :
Visual Code Studio :

-Now we need to Install below Visual Code Studio Extensions

  1. Salesforce Extension Pack
  2. Lightning Web Components
  3. Salesforce CLI Integration.
-Now we also need to run below commands in “Visual Studio” terminal. Here are the commands:
  1. sfdx plugins:install salesforcedx@pre-release
  2. sfdx plugins:install salesforcedx@latest
Now, we can run “sfdx plugins” command for check the installed plugins.

It should be show result like “salesforcedx 45.0.12 (pre-release)” it.

- Now, we are ready to create new lightning web component. First of all, we need to create new “Developer Edition Pre-Release Org”. Here is the creation link:

- Now, we need to create a new “Salesforce DX” project in our local machine. Here are the steps:

SFDX Project Creation Steps :

  1. In Visual Studio code, press Command + Shift + P on a Mac OR Ctrl + Shift + P on Windows.
  2. Type SFDX: Create Project.
  3. Enter MyLightningWebComponent as the project name, press Enter.
  4. Select a folder to store the project.
  5. Click Create Project.
- Now, we need to follow required steps to connect “Visual Studio” project with our Salesforce org.

  1. In Visual Studio code, press Command + Shift + P on a Mac OR Ctrl + Shift + P on Windows.
  2. SFDX: Authorize a Dev Hub: This step is used for login our pre-release Devhub Org.
  3. SFDX: Create a Default Scratch Org: We need to create new scratch org for pushing our changes from our local machine into scratch org.
  4. SFDX: Create Lightning Web Component: Now we need to create new lightning web component under “lwc” folder.
Now we will create a Lightning Web Component named ‘contactSearch’

Here’s the code:-


1:  <template>  
2:    <lightning-card icon-name="custom:custom57">  
3:      <div slot="title">  
4:        <lightning-layout vertical-align="center">  
5:          <lightning-layout-item>  
6:            Contact Search  
7:          </lightning-layout-item>  
8:          <lightning-layout-item padding="around-small">  
9:            <c-nav-to-new-record></c-nav-to-new-record>  
10:          </lightning-layout-item>  
11:        </lightning-layout>  
12:      </div>  
13:      <div class="slds-m-around_medium">  
14:        <lightning-input type="search" onchange={handleKeyChange} class="slds-m-bottom_small" 
15:           label="Search"></lightning-input>  
16:        <template if:true={contacts}>  
17:          <template for:each={contacts} for:item="contact">  
18:            <c-contact-tile key={contact.Id} contact={contact}></c-contact-tile>  
19:          </template>  
20:        </template>  
21:      </div>  
22:    </lightning-card>  
23:  </template>  


1:  lightning-input,  
2:  c-contact-tile {  
3:    position: relative;    
4:    border-radius: 4px;  
5:    display: block;  
6:    padding: 2px;  
7:  }  
8:  c-contact-tile {  
9:    margin: 1px 0;  
10:  }  
11:  lightning-input:before,  
12:  c-contact-tile:before {  
13:    color: #dddbda;  
14:    position: absolute;  
15:    top: -9px;  
16:    left: 4px;  
17:    background-color: #ffffff;  
18:    padding: 0 4px;  
19:  }  


1:  import { LightningElement, track } from 'lwc';  
2:  import findContacts from '@salesforce/apex/ContactController.findContacts';  
3:  /** The delay used when debouncing event handlers before invoking Apex. */  
4:  const DELAY = 350;  
5:  export default class ContactSearch extends LightningElement {  
6:    @track contacts;  
7:    @track error;  
8:    handleKeyChange(event) {  
9:      // Debouncing this method: Do not actually invoke the Apex call as long as this function is  
10:      // being called within a delay of DELAY. This is to avoid a very large number of Apex method calls.  
11:      window.clearTimeout(this.delayTimeout);  
12:      const searchKey =;  
13:      // eslint-disable-next-line @lwc/lwc/no-async-operation  
14:      this.delayTimeout = setTimeout(() => {  
15:        findContacts({ searchKey })  
16:          .then(result => {  
17:            this.contacts = result;  
18:            this.error = undefined;  
19:          })  
20:          .catch(error => {  
21:            this.error = error;  
22:            this.contacts = undefined;  
23:          });  
24:      }, DELAY);  
25:    }  
26:  }  


1:  <?xml version="1.0" encoding="UTF-8"?>  
2:  <LightningComponentBundle xmlns="">  
3:    <apiVersion>45.0</apiVersion>  
4:    <isExposed>true</isExposed>  
5:    <targets>  
6:      <target>lightning__AppPage</target>  
7:      <target>lightning__RecordPage</target>  
8:      <target>lightning__HomePage</target>  
9:    </targets>  
10:  </LightningComponentBundle>  

Now we will create a Lightning Web Component named ‘contactTile’

contactTile.html :
1:  <template>  
2:    <lightning-layout vertical-align="center">  
3:      <lightning-layout-item>  
4:        <img src={contact.Picture__c} alt="Profile photo">  
5:      </lightning-layout-item>  
6:      <lightning-layout-item padding="around-small">  
7:        <a onclick={navigateToView}>{contact.Name}</a></p>  
8:        <p>{contact.Title}</p>  
9:        <p>  
10:          <lightning-formatted-phone value={contact.Phone}></lightning-formatted-phone>  
11:        </p>  
12:      </lightning-layout-item>  
13:    </lightning-layout>  
14:  </template>  


1:  img {  
2:    width: 60px;  
3:    height: 60px;  
4:    border-radius: 50%;  
5:  }  


1:  import { LightningElement, api } from 'lwc';  
2:  import { NavigationMixin } from 'lightning/navigation';  
3:  //import getSingleContact from '@salesforce/apex/ContactController.getSingleContact';  
4:  export default class ContactTile extends NavigationMixin(LightningElement) {  
5:    @api contact;  
6:   // @wire(getSingleContact) contact;   
7:    navigateToView() {     
8:     this[NavigationMixin.Navigate]({  
9:      type: "standard__recordPage",  
10:        attributes: {  
11:          objectApiName: "Contact",  
12:          actionName: "view",  
13:          recordId:,  
14:        },  
15:      });  
16:   }    
17:  }  


1:  <?xml version="1.0" encoding="UTF-8"?>  
2:  <LightningComponentBundle xmlns="">  
3:    <apiVersion>45.0</apiVersion>  
4:    <isExposed>false</isExposed>  
5:    <targets>  
6:      <target>lightning__AppPage</target>  
7:      <target>lightning__RecordPage</target>  
8:      <target>lightning__HomePage</target>  
9:    </targets>  
10:  </LightningComponentBundle>  

Now we will create a Lightning Web Component named ‘navToNewRecord’

1:  <template>  
2:      <lightning-button label="New Contact" variant="brand" class="slds-m-around_medium" 
3:      onclick={navigateToNewContact} ></lightning-button>  
4:  </template>  


1:  import { LightningElement } from 'lwc';  
2:  import { NavigationMixin } from 'lightning/navigation';  
3:  export default class NavToNewRecord extends NavigationMixin(LightningElement) {  
4:    navigateToNewContact() {  
5:      this[NavigationMixin.Navigate]({  
6:        type: 'standard__objectPage',  
7:        attributes: {  
8:          objectApiName: 'Contact',  
9:          actionName: 'new',  
10:        },  
11:      });  
12:    }  
13:  }  


1:  <?xml version="1.0" encoding="UTF-8"?>  
2:  <LightningComponentBundle xmlns="" fqn="navToNewRecord">  
3:    <apiVersion>45.0</apiVersion>  
4:    <isExposed>true</isExposed>  
5:    <targets>  
6:      <target>lightning__AppPage</target>  
7:      <target>lightning__RecordPage</target>  
8:      <target>lightning__HomePage</target>  
9:    </targets>  
10:  </LightningComponentBundle>  

Here’s the GitHub link for further files which are required before pushing to scratch org for this tutorial
Files which are required:-
Picture__c.field-meta.xml file for creating a custom field
lwc.permissionset-meta.xml file for assigning permission
‘data’ named the folder for loading data

Push to a Scratch Org

Type :SFDX: Push Source to Default Scratch Org by using Ctrl + Shift + P  OrType in terminal
sfdx force:source:push [-u<Username>]

Assign the lwc permission set to the default user:

sfdx force:user:permset:assign -n lwc

Load sample data:

sfdx force:data:tree:import --plan ./data/data-plan.json

Add Component to App in Lightning Experience

  1. Type SFDX: Open Default Org.
  2. Click the app launcher icon App Launcher to open the App Launcher.
  3. Select the Sales app.
  4. Click the gear icon Setup Gear to reveal the Setup menu, then select Edit Page.
  5. Drag the contactSearch Lightning web component from the list of custom components to the top of the Page Canvas.

Deploy it to your Pre-release org:
Log in to your Pre-Release org and create an alias for it.
To deploy we have to also push further files which I’ve mentioned above
Type the following commands in VS Code terminal:
sfdx force:auth:web:login -a MyOrg
Confirm that this org is available:
sfdx force:org:list
Deploy your code to Pre-Release org
sfdx force:source:deploy -p force-app  -u MyOrg
Assign the lwc permission set to the default user:
sfdx force:user:permset:assign -n lwc -u MyOrg
Load sample data:
sfdx force:data:tree:import --plan ./data/data-plan.json -u MyOrg
Run your org  and interact with the app:
sfdx force:org:open -u MyOrg