Showing posts with label Lightning Web Components. Show all posts
Showing posts with label Lightning Web Components. Show all posts

Thursday, December 5, 2019

How To Throw An Exception From Apex (Server Side) To JavaScript(Client Side) Controller in LWC

In lightning if you want to throw something as error from Apex class to client side Js controller ,we can use the salesforce standard class AuraHandledException.

Please look at the below code snippet where I'm trying to call an api to get the weather information,basis on the api response you can throw an exception(received in valid status,received process status but didn't got the expected response etc..) wherever you want throw an exception to the client side controller.

If your using try and catch in your code and if you raise an exception in try it will automatically goes to catch block and from there it will return to client side controller.


global class WeatherReportCntrl
{

@AuraEnabled(cacheable=true)
public static string fetchWeatherReport()
{
   Http http = new Http();
   HttpResponse res = new HttpResponse();
   HttpRequest req = new HttpRequest();
   req.setEndpoint('endpoint');
   req.setMethod('GET');
   try
    {
 res = http.send(req);                      
 string responseValue =res.getBody();
 if(res.getStatus()=='OK' && res.getStatusCode()==200 && String.isNotBlank(responseValue)
 {
    //while processing some error came then
    System.debug('responseValue--->'+responseValue);
    if(someerror)
     throw new AuraHandledException('Error while Processing data');  

   return 'data processed successfully';
 }
 else
       {
 // Received some invalid status code
  throw new AuraHandledException('Received some invalid status');
 
 }
    }
   Catch(Exception e)
   {
       AuraHandledException ex = new AuraHandledException(String.valueOf(e));
       ex.setMessage('Exception caught in catch block');
       throw ex;
   }
 } 
}


Hope this helps you..Enjoy..!

Wednesday, December 4, 2019

Hyperlinks in Lightning-DataTable To Open The Record Detail Page In Classic Console

In my previous post we have seen how to open record detail page directly from the lightning data table .If the same thing you wants to do it in Classic Console where your visual force is loading the LWC component then that will not work.

Please do the below changes to work the same in Classic console as well.The major change involves at Url param and target param in columns section.

Change the target attribute to '_top' and append the console#%2F in the redirection url

AccountListTable.js

import { LightningElement ,wire,track} from 'lwc';
import getAllOpps from '@salesforce/apex/GetAllAccountsCntrl.getAllAccounts';

export default class AccountListTable extends LightningElement {
    @track columns = [
        {
            label: 'Account Name',
            fieldName: 'nameUrl',
            type: 'url',
            typeAttributes: {label: { fieldName: 'Name'}, 
            target: '_top'},
            sortable: true
        },
        {
            label: 'Account Source',
            fieldName: 'AccountSource',
            type: 'text',
       
        },
  {
            label: 'Website',
            fieldName: 'Website',
            type: 'text',
        },
        {
            label: 'Close date',
            fieldName: 'closeDate',
            type: 'date',
        }

    ];

    @track error;
    @track listAccsData = [];


    @wire(getAllAccounts)
 wiredAllAccounts({ error, data }) {
        if (data) {
         
            this.listAccsData = data.map(record => Object.assign(
                { "nameUrl": '/console#%2F'+record.Id},
                record
            ));
        
        }
        else if (error) {
            this.error = error;
            this.listAccsData = null;
          
        }
 }
}


Hope this helps you..Enjoy..!

Issue With Lightning-Button Click Action (Outside the button) In LWC

Issue:

If your using <lightning-button> in your component and this button is invoking the action even if you clicked outside of the button(it means the horizontally anywhere on the screen).

Route Cause:

This is because by default if your not setting any width to the button it will considers the entire width as the scope of the button.So,if you click anywhere on the screen horizontally to this,it will invokes the action automatically.

If you look at the below image the blue line has occupied entire width of the screen ,it means the scope of the button is spread like blue line.So,if you click anywhere it's get invoked automatically.



Sample button code:


 <template if:true={showIsCheck} class="slds-is-relative">
     <lightning-button label="Check ?" title="Check" 
          variant="success" onclick={checkIsCan} 
          class="slds-align_absolute-center slds-m-top_medium ">
     </lightning-button>
    
        <div if:true={isLoading}>
            <lightning-spinner alternative-text="Loading..." variant="brand" size="large" class="slds-is-absolute"></lightning-spinner>
        </div>
 </template>

Workaround:

Please set the width of the button so that the scope of the button will automatically bounds within the button.If you look at the below code snippets and image you can clearly undertsraynd that as soon as I sets the width the blue line is becoming small(Scope of the button).


 <template if:true={showIsCheck} class="slds-is-relative">
        <lightning-button label="Check ?" title="Check" 
            variant="success" onclick={checkIsCan} 
          class="slds-align_absolute-center slds-m-top_medium slds-size_medium"></lightning-button>
    
        <div if:true={isLoading}>
            <lightning-spinner alternative-text="Loading..." variant="brand" size="large" class="slds-is-absolute"></lightning-spinner>
        </div>
 </template>


a)when size as small

b)when size as medium


Thanks for visiting..hope this helps you!

Tuesday, December 3, 2019

Hyperlinks in Lightning-DataTable To Open The Record Detail Page In Classic(Non-Console) Or Lightning

If your using <lightning-datatable> in html file to show the list of records and you want to provide an hyper link to open the record from the same table.

This can be done easily easing the  typeAttributes of lightning-datatable. Please use the below code snippet to display list of accounts with an option to open the account with hyperlink.This below code works only in Lightning(Console or Non-Console) and in Classic Non-Console applications.

Note: If you want the same thing in classic console as well please refer my previous post

GetAllAccountsCntrl.cls


public with sharing class GetAllAccountsCntrl {
   @AuraEnabled(cacheable=true)
    public static List<Account> getAllAccounts() {
        return [SELECT Id, Name,AccountSource,Website, Createddate FROM Account Limit 10];
    }

}

AccountListTable.js

import { LightningElement ,wire,track} from 'lwc';
import getAllOpps from '@salesforce/apex/GetAllAccountsCntrl.getAllAccounts';

export default class AccountListTable extends LightningElement {
    @track columns = [
        {
            label: 'Account Name',
            fieldName: 'nameUrl',
            type: 'url',
            typeAttributes: {label: { fieldName: 'Name'}, 
            target: '_blank'},
            sortable: true
        },
        {
            label: 'Account Source',
            fieldName: 'AccountSource',
            type: 'text',
       
        },
  {
            label: 'Website',
            fieldName: 'Website',
            type: 'text',
        },
        {
            label: 'Close date',
            fieldName: 'closeDate',
            type: 'date',
        }

    ];

    @track error;
    @track listAccsData = [];


    @wire(getAllAccounts)
 wiredAllAccounts({ error, data }) {
        if (data) {
         
            this.listAccsData = data.map(record => Object.assign(
                { "nameUrl": '/'+record.Id},
                record
            ));
        
        }
        else if (error) {
            this.error = error;
            this.listAccsData = null;
          
        }
 }
}

AccountListTable.html

<template>
    <lightning-card  title="Account Details">
        <lightning-datatable data={listAccsData} columns={columns} key-field="Id"></lightning-datatable>        
    </lightning-card> 
</template>


Output






Note: If you want the same thing in classic console please refer my previous post

Hope this helps you..Enjoy..!

Thursday, November 28, 2019

How To Access Parent Object Or Relationship Object Fields In LWC DataTable

Lets consider a case where we have 2 objects as listed below.
  • Activities__c  // Child Object
  • Transaction__c    //Parent Object
Now if you want to display all activities related to a particular transaction and as well as you want to show some field values related to transaction on each activity record (Ex: PNR and Status).

Unfortunately similar to VF pages you can't directly access them in LWC templates .So,we have to do some changes on data set (list of recors) before we display it in html template.

Solution:

We have to set/update the related field column value for each record before pushing/adding it into the list.

this.allActivitiesData = data.map(
   record => Object.assign(
 { "Transaction__r.Status__c": record.Transaction__r.Status__c, "Transaction__r.PNR__c": record.Transaction__r.PNR__c},
  record
  )
);

Complete Solution With Sample Code:


ActivitiesFlowCntrl.cls

global class ActivitiesFlowCntrl
{
    
    public ActivitiesFlowCntrl()
    {
      System.debug('Inside constructor..');
    }

    @AuraEnabled(cacheable=true)
    public static List<Activities__c> fetchActivities(String recdId)
    {
        List<Activities__c> lstAct = new List<Activities__c>()
        lstAct = [SELECT id,Name,Act_Name__c,Act_Type__c,Amount__c,Start_Time__c,
                  End_Time__c,Act_UniqueId__c,Transaction__r.Status__c,
                  Transaction__r.PNR__c FROM Activities__c 
                  WHERE Transaction__c=:recdId];
       return lstAct;
    }
}

ActivitiesFlow.js

import { LightningElement, api, track, wire } from "lwc";
import fetchActivities from "@salesforce/apex/ActivitiesFlowCntrl.fetchActivities";

const columns = [
    { label: 'Id', fieldName: 'Name' },
    { label: 'Name', fieldName: 'Act_Name__c' },
    { label: 'Type', fieldName: 'Act_Type__c' },
    { label: 'Status', fieldName: 'Transaction__r.Status__c' },
    { label: 'PNR', fieldName: 'Transaction__r.PNR__c' },
    { label: 'Amount', fieldName: 'Amount__c', type: 'currency' },
    { label: 'StartTime', fieldName: 'Start_Time__c', type: 'date' },
    { label: 'End Time', fieldName: 'End_Time__c', type: 'date' },
    { label: 'UniqueId', fieldName: 'Act_UniqueId__c' }

];

export default class ActivitiesFlow extends LightningElement 
{
  
  @track allActivitiesData;
  
  @wire(fetchActivities, { recdId: '$sfrecordId' })
    wiredActivities({ error, data }) {
       if (data) 
       {
          this.allActivitiesData =  data.map(
      record => Object.assign(
  { "Transaction__r.Status__c": record.Transaction__r.Status__c, "Transaction__r.PNR__c": record.Transaction__r.PNR__c},
  record
       )
            );
         
        }
 else if (error) {
            this.error = error;
            this.allActivitiesData = undefined;
           
        }
 }
}

ActivitiesFlow.html

<template>
    <template if:true={allActivitiesData}>
        <lightning-datatable data={allActivitiesData} columns={columns} key-field="id" hide-checkbox-column="true"></lightning-datatable>
    </template>
</template>


Hope this helped you..Enjoy..!

Friday, August 23, 2019

Creating a Salesforce Scratch Org Using SFDX CLI

sfdc force:org:create -a <yourScartchOrgAliasName> -d 30 -f config/project-scratch-def.json -s

If you want to create a scratch org using the Salesforce CLI please use the below the command.

sfdx force:org:create -a <aliasNameOfYourOrg> -d <duration 1-30> - f <file path> -s (defaults)

sfdc force:org:create -a <aliasNameOfYourOrg> -d 30 -f config/project-scratch-def.json -s

-d   -- Scratch org duration 1 to 30 days
-a   -- Alias name that you give for your scratch org
-s    -- defaults this org for all ongoing commands
-f    -- config file location



You can specify all your scratch org configuration in this config file before you run this command


Hope this helped you..Enjoy..!


Basic Structure Of SFDX CLI Commands

Basically all the CLI commands will be in below format

namespace:topic:[Subtopics]:methodName

namespace             --  force/lightning
topic                       -- apex/org/data
Subtopics               -- apex:class,data:bulk,auth:web
methodname          -- final action

Sample Commands:

force:alias:list
force:alias:set
force:apex:class:create
force:apex:execute
force:apex:log:get
force:apex:log:list
force:apex:log:tail
force:apex:test:report
force:apex:test:run
force:apex:trigger:create
force:auth:jwt:grant
force:auth:list
force:auth:logout
force:auth:sfdxurl:store
force:auth:web:login
force:config:get
force:config:list
force:config:set
force:data:bulk:delete
force:data:bulk:status
force:data:bulk:upsert
force:data:record:create
force:data:record:delete
force:data:record:get
force:data:record:update
force:data:soql:query
force:data:tree:export
force:data:tree:import
force:doc:commands:display
force:doc:commands:list
force:lightning:app:create
force:lightning:component:create
force:lightning:event:create
force:lightning:interface:create
force:lightning:lint
force:lightning:test:create
force:lightning:test:install
force:lightning:test:run
force:limits:api:display
force:mdapi:convert
force:mdapi:deploy
force:mdapi:deploy:cancel
force:mdapi:deploy:report
force:mdapi:describemetadata
force:mdapi:listmetadata
force:mdapi:retrieve
force:mdapi:retrieve:report
force:org:clone
force:org:create
force:org:delete
force:org:display
force:org:list
force:org:open
force:org:shape:create
force:org:shape:delete
force:org:shape:list
force:org:snapshot:create
force:org:snapshot:delete
force:org:snapshot:get
force:org:snapshot:list
force:org:status
force:package1:version:create
force:package1:version:create:get
force:package1:version:display
force:package1:version:list
force:package:create
force:package:hammertest:list
force:package:hammertest:report
force:package:hammertest:run
force:package:install
force:package:install:report
force:package:installed:list
force:package:list
force:package:uninstall
force:package:uninstall:report
force:package:update
force:package:version:create
force:package:version:create:list
force:package:version:create:report
force:package:version:list
force:package:version:promote
force:package:version:report
force:package:version:update
force:project:create
force:project:upgrade
force:schema:sobject:describe
force:schema:sobject:list
force:source:convert
force:source:delete
force:source:deploy
force:source:deploy:cancel
force:source:deploy:report
force:source:open
force:source:pull
force:source:push
force:source:retrieve
force:source:status
force:user:create
force:user:display
force:user:list
force:user:password:generate
force:user:permset:assign
force:visualforce:component:create
force:visualforce:page:create


Hope this helped you..Enjoy..!

How To Open Command Palette In Visual Studio Code

Basically we will use command palette as an alternative option whatever we will be doing with commands can be done with this without writing any commands.

Based on your operating system you can use the below listed short cuts.

  • Windows Os - Ctrl+Shift  P
  • Mac Os - Command+Shift P



Hope this helped you..Enjoy..!

How To List All Commands In SFDX CLI

If you don't remember all the commands and if you want to know the list of the commands then please use the below command in your terminal window.It will list outs all the available commands.



sfdx commands

force:apex:class:create
force:apex:execute
force:org:open
.
.
.
force:auth:list





Hope this helped you..Enjoy..!

SFDX CLI Command To LogIn to An Org

If you want to login to your developer org/sandbox using the Salesforce CLI please use the below the command.

sfdx force:auth:web:login -a <aliasNameOfYourOrg> -d

sfdx force:auth:web:login -a mergedDev -d

-d   -- Makes this org as default for subsequent commands
-a   -- Alias name that you give for an org to identify prod/sandbox or which sandbox

Once you execute this command you can see this alias name under sfdx-config.json file.Based on the org you (dev or devhub) used it will stores the alias name under the this.


{
    "defaultusername": "mergedDev"}
-------------In case of devhub login------------
{
    "defaultdevhugusername": "mergedDev"}



Hope this helped you..Enjoy!..

Wednesday, July 10, 2019

How To Check Whether User is In Console or Not in Lightning Experience

Basically if you want to check whether user in Lightning experience console(sales/service consoles in lightning experience not the just lightning experience ) you can use the same sforce console methods which you have used in classic.This method will support in lightning experience with out any changes.

Sample code:

<apex:page> 
<apex:includeScript value="/support/console/42.0/integration.js" /> 
<apex:includeScript value="/support/api/41.0/interaction.js"/> 

<button onclick="openTab();" > Console openPrimaryTab</button> 

<script> 
function inConsole() { 
if (sforce.console.isInConsole()) { 
alert('In console'); 
}else { 
alert('Not in console'); 
} 
}
</apex:page>

Note:
Even after using this if it's not working please check you version of /support/api/42.0/integration.js. If your version is below 42 then it will not work.So,please change the version it will work automatically.

Hope this helped you..Enjoy!..

Saturday, July 6, 2019

Lightning Web Components (lwc) Are Not Showing in SF While Adding To Layout

Even after pushing the lighting web components into sf ,if it's showing in components list but not showing while adding to any layout ,it means your .js-meta.xml file has some issue.

Please check whether <targets> is specified for this component or not.Targets is nothing but where are in places this component can be accessible/usable like App page ,Record detail page or in home page layout.

Proper js-meta.xml will be like

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

Hope this helps you...Enjoy!

Base Lightning Components in Salesforce LWC

In Lightning web components(lwc) we will Base Lightning Components to display the particular record information/to create a record quickly with provided information with out using any custom apex.

List of the available Base Lightning Components are
  • lightning-record-edit-form
  • lightning-record-form
  • lightning-record-view-form

lightning-record-edit-form:

  • This component wrapper accepts the record id to display one or more fields and labels related to that field corresponding to given record id 
  • This will not require any apex because it uses Lightning Data Services to fetch the data
  • This will not support Standard objects like Task and Events.
  • Use lightning-output-field to display data in read only format
  • Use lightning-input-field to edit these fields in edit on record edit page

lightning-record-form:

  • Use this component to build the forms quickly to create a record,view the record or to update the record. 
  • Building the record creation forms is easier than building the form using lightning-record-edit-form and lightning-record-view-form. 
  • This component accepts 4 properties like object name which is mandatory,record id which is optional in case of create record ,mode to specify view/edit/read only and layout type like Full or compact
  • It will also takes care of FLS and sharing rules
 <lightning-record-form  
   record-id="739hchjsh773"  
   object-api-name="Position__c"  
   layout-type="Full"  
   mode="view">  
 </lightning-record-form>  

lightning-record-view-form:

  • Use this component when you want to dispaly the record on view mode
  • This will not require any apex because it uses Lightning Data Services to fetch the data
  • This will not support Standard objects like Task and Events.
  • It will also takes care of FLS and sharing rules.

For more information refer:

Hope this helps you...Enjoy!

How To Access Salesforce Org Data in Lightning Web Components

In Classic if you want access/create the Salesforce Data we can either use some Standard Controllers or Custom controllers .Similar to Classic in Lighting Web Components also you can use two different ways to access/create the data into Salesforce objects or to show the Salesforce objects data in Lightning Web Components.

  1. Base Lightning Components
  2. Wire Services

Base Lightning Components:


These are the standard salesforce components which will be used to view the record,to edit the record and to view the record in read only mode.

Benefits:
  • Doesn't require apex code
  • Field labels are displayed based on org default
  • It's has built over Lighting UI API and Lightning Data Service API
  • It access models Static and Dynamically
  • Metadata Aware
  • Custom rendering of data
  • Custom layouts and multi column layouts



Wire Service:

Wire service will use Lighting /UI API Module and Lightning Data Service to fetch the data from the Salesforce Servers/Objects and to show it in the components.Basically we have to import the wire adapters into our lighting web components js file in order to build the communication between the components and servers.The results returned from the wire adapter will be stored either in property or function.

  • Lighting /UI API Module : It will contains bunch of wire adapters(small segment of code) and some JS APIs. These wire adapters will be used to fetch the data from the servers and these JS APIs if you want to modify this data or to push the data into servers.

  • Lightning Data Service : It will act an interface between the wire adapters and data base to get the data from the data base into the adapters. Basically adapters will interacts with Lightning Data Services to fetch the data from the data base.









 Hope this helps you...Enjoy!