Toast Notification in Lightning Web Components | ShowToastEvent | (LWC)

Lets talk about how to fire Toast Notification in Lightning web component | LWC. Toast message is used to pop up the alert message to user. To display toast notification you need to import the ShowToastEvent from lightning/platformShowToastEvent module and dispatch the ShowToastEvent event with message , title and variant.

Syntax 

ShowToastMessage() {
     const toastEvnt = new  ShowToastEvent( {
           title: 'Welcome in Apex Hours',
           message: 'This is your toast message',
           variant: 'info',
     });
     this.dispatchEvent (toastEvnt);

}


Here is sample code:-

toastMessage.html

<template>
    <lightning-card title="Show Toast Message" icon-name="custom:custom56">
        <lightning-input label="Message" value={msg} onchange={msgchange}></lightning-input>
        <lightning-button label="Show Toast Message" onclick={ShowToastMessage}></lightning-button>
    </lightning-card>
</template>

toastMessage.js

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class ToastMessage extends LightningElement {
    msg = '';
    msgchange(event){
        this.msg = event.target.value;
    }
    ShowToastMessage() {
        const toastEvnt = new  ShowToastEvent( {
              title: 'Welcome in Apex Hours' ,
              message: this.msg ,
              variant: 'success' ,
        });
        this.dispatchEvent (toastEvnt);
   }
}

toastMessage.js-meta.xml

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

Output

Check this post for more detail.

Please check below post on Lightning Web Components:-

1. Lightning Web Components ( LWC ) in Salesforce with Non-Scratch Org
2. Invoke Apex Controller from Lightning Web Component | Lightning Web Component inside Another LWC
3. Design attributes in Lightning Web Components | CSS and SVG Files | Lightning Web Components | targetConfigs
4. How to get current user id in lightning web component | Access logged in user ID in LWC

Check our YouTube Channel for more recording in Lightning Web Components. 

Thanks,
Amit Chaudhary
amit.salesforce21@gmail.com

  @amit_sfdc    @ApexHours
  Salesforce Apex Hours 
    #SalesforceApexHours 

Continuous Integration Using Jenkins with SalesforceDX | JWT-Based Flow

In this post we will talk about what is Continuous Integration and how to setup Continuous Integration Using SalesforceDX with Jenkins (Salesforce dx jenkins integration). We will use the OAuth JSON Web Token (JWT) bearer flow that’s supported in the Salesforce CLI. The JWT bearer flow supports the RSA SHA256 algorithm, which uses an uploaded certificate as the signing secret.

What Is Continuous Integration (CI) ?

Continuous integration (CI) is a DevOps software development best practice. Where developers regularly merge their code changes into a central repository, after that automated builds and tests are run. This best practice helps development teams to detect problems, identify bugs, and fix those problems and bugs before releasing changes to their customers. Please check our YouTube Recording for step by step process.

How to setup Continuous Integration Using Jenkins.

Step 1) Install Salesforce CLI. Here is link to download.

 

Step 2) Install Jenkins. Download from here.

• Install Git Plugins.

 

Step 3) Create a Self-Signed SSL Certificate and Private Key

• Download the OpenSSL .
• Lets Create a private key and self signed certificate

• Set OPENSSL_CONF path  
  
  set OPENSSL_CONF=C:\openssl\share\openssl.cnf 
• Generate an RSA private key :  
  
  openssl genrsa -des3 -passout pass:x -out server.pass.key 2048
• Create a key file from the server.pass.key file : 
  
  openssl rsa -passin pass:x -in server.pass.key -out server.key
• Request and generate the certificate :
  
  openssl req -new -key server.key -out server.csr
• Generate the SSL certificate: 
  
  openssl x509 -req -sha256 -days 365 -in server.csr -signkey server.key -out server.crt

 

Step 4) Create Connected App for JWT-Based Flow

• Created Connected App
• Callback URL
  
  http://localhost:1717/OauthRedirect
• Use digital signatures To upload your server.crt file.
• Edit policy and select "Admin approved users are pre-authorized" to avoid "Not approved for access in salesforce" issue. 
• Assign Connected App to user or System Admin profile.
• Validate Authorize an Org Using the JWT-Based Flow  
  
  sfdx force:auth:jwt:grant --clientid {ADD_YOUR_CLIENT_ID} --jwtkeyfile server.key --username amit.salesforce21@gmail.com --instanceurl https://login.salesforce.com --setdefaultdevhubusername

• --clientid  :- provide Consumer Key
• --jwtkeyfile :- Absolute path to the location where you generated your OpenSSL server.key file
• --instanceurl :-provide instanceurl if you are using sandbox.
• --setdefaultdevhubusername :- Set Default dev hub User Name.

Sample

sfdx force:auth:jwt:grant --clientid KeyHere --jwtkeyfile c:\openssl\bin\server.key --username amit.salesforce21@gmail.com --instanceurl https://login.salesforce.com --setdefaultdevhubusername

Step 5) Configure the Jenkins environment Variable

• Configure the the Server.key in the credential plugins. 
• Set Environment variable:-

• HUB_ORG_DH:- The username for the Dev Hub org, such as amit@gmail.com
• SFDC_HOST_DH:- The login URL of the Salesforce instance that is hosting the Dev Hub org. The default is https://login.salesforce.com
• CONNECTED_APP_CONSUMER_KEY_DH :- The consumer key that was returned after you created a connected app in your Dev Hub org.
• JWT_CRED_ID_DH:- The credentials ID for the private key file that you stored in the Jenkins Admin Credentials interface
• Install the Custom Tools Plugin into your Jenkins console, and create a custom tool that references the Salesforce CLI

The names for these environment variables are just suggestions. You can use any name as long as you specify it in the Jenkinsfile.

 

Step 6) Configure the Jenkins 

• Add New Item.
• Add Source and provide repository URL.  You can use URL as sample.
  https://github.com/amit-salesforce/SFDXProject
•  Start a build.

We will talk about different option in Jenkins in our future post.

Please check our YouTube Recording for step by step process.

URL :- https://youtu.be/IvTlx6lBkQY

Check below post for more detail:-

1. Salesforce DX Developer Guide
2. Continuous Integration Using Salesforce DX

Check this post to learn more about Salesforce Dx. Here is recording for SalesforceDx Session in ApexHours. If you want to learn about Lightning Web Components. Check this post.


Please share your feedback and question.

Thanks,
Amit Chaudhary

How to get current user id in lightning web component | Access logged in user ID in LWC

 To get current user id in LWC we need to import the "@salesforce/user/Id" Salesforce module.

 Syntax :-

import userId from '@salesforce/user/Id';

Sample Code :-

 showUserId.html

<template>
    <lightning-card title="Show User Detail" icon-name="custom:custom15">
        <div class="slds-m-around_medium">
            <p>User Id: {userId} </p>
        </div>
    </lightning-card>
</template>

 showUserId.js

import { LightningElement } from 'lwc';
import strUserId from '@salesforce/user/Id';

export default class ShowUserDetail extends LightningElement {
    userId = strUserId;
}

 showUserId.js-meta.xml

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

    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

</LightningComponentBundle>

Output :-

Please check our old post on Lightning Web Components:-

1. Lightning Web Components ( LWC ) in Salesforce with Non-Scratch Org
2. Invoke Apex Controller from Lightning Web Component | Lightning Web Component inside Another LWC
3. Design attributes in Lightning Web Components | CSS and SVG Files | Lightning Web Components | targetConfigs

Feel free to post your feedback or question.

Thanks,
Amit Chaudhary

Design attributes in Lightning Web Components | CSS and SVG Files | Lightning Web Components | targetConfigs

In our last post we talk about How to create first lightning web components and How to invoke apex class from Lightning web components. In this post we will talk about how to create design attribute in lightning web components.

We know how to create Design Attribute in lightning component. For Design Attribute we used to create <design:attribute tag in design file. But for Lightning web components we need to define the design attribute in Component Configuration File (XML) with<targetConfigs> tag. The component author need to defines the property in the component’s JavaScript class using the @api decorator.


We can use Design Attribute to make lightning web components attribute available to System Admin to edit Lightning App Builder or Community. 

Here is Sample code.

HelloWorld.html

<template>
    <lightning-card title={strTitle} icon-name="custom:custom14">
        <div>
            <p>  Hello , {firstName} </p>
        </div>
        <div>
            <template if:true={showImage}>
                <img src={imgUrl} width="200" height="200"/>
            </template>
        </div>
    </lightning-card>
</template>

HelloWorld.js

import { LightningElement, api } from 'lwc';
export default class MyComponent extends LightningElement {
    @api firstName ='Amit';
    @api strTitle ='Welcome in Salesforce';
    @api showImage =false;
    @api imgUrl ='';
}

HelloWorld.js-meta.xml

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

    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

    <targetConfigs>  
        <targetConfig targets="lightning__HomePage,lightning__RecordPage">
            <property name="strTitle" type="String" default="Welcome in Salesforce" label="Enter the title"/>
            <property name="showImage" type="Boolean" default="true" label="Show Image ?"/>
            <property name="imgUrl" type="String" default="" label="Enter Image URL"/>
        </targetConfig>
    </targetConfigs>
   
</LightningComponentBundle>

Define the design Attribute in <property tag under <TargetConfig tag.

Please check our YouTube Channel Recording for same topic.

 Please check our old post on Lightning Web Components:-

1. Lightning Web Components ( LWC ) in Salesforce with Non-Scratch Org
2. Invoke Apex Controller from Lightning Web Component | Lightning Web Component inside Another LWC

 

Feel free to post your feedback or question.

Thanks,
Amit Chaudhary

  @amit_sfdc    #SalesforceApexHours    @ApexHours
  Salesforce Apex Hours