Showing posts with label Lightning Experience. Show all posts
Showing posts with label Lightning Experience. Show all posts

Friday, January 24, 2020

How To Configure Console Components In Lightning Console Applications

Unfortunately Salesforce doesn't support console components in lightning experience.

If your existing component is linked to a visual force page and then you want to use this component as a console component in lightning experience the workaround is below.

1. Goto Service Setup

2. Open the App Manager Under User Interface Section

3. Select the application where you want to add console component and Click on Edit

4. Select Utility Items Under App Settings



5. Click on Add Utility Items and Select Visual Force Page option

6. Please give console component name and it's related visual force page(your vf page is not shown)

7. Your component is ready and it's available in the bottom left.


Please comment or write us if you have any queries/requirements.

Please follow,bookmark,subscribe this site to receive daily updates.

Facebook - https://www.facebook.com/ILoveCodingYou/?ref=bookmarks

Hope this helps you..Enjoy..!

How To Disable The Switch To Lightning Experience For An User

If you want to disable to switch to lightning experience link a user ,please follow below steps.

1. Identify the list of users to whom you want to disable this feature

2.Find out all the profiles related to these list of users

3. Goto each profile and Click on Edit

4. Uncheck the Lightning Experience User setting under the Administrative Permissions.


5. Now users will not get this switch permission .



Please follow,bookmark,subscribe this site to receive daily updates.

Facebook - https://www.facebook.com/ILoveCodingYou/?ref=bookmarks


Hope this helps you..Enjoy..!

Monday, January 6, 2020

Origins may not contain paths or queries, since they are not part of the origin in Salesforce

You might encounter with this while adding your community URL or domain address in CORS or While setting up the Snap Ins(Known as (Embedded Service Chat).

The error indicates the url we are should not have any paths and we should take only the url till .com/.in/.domain etc..

If you look in this  scenario the url needs to be added is

https://srinivas4sfdc-developer-edition.ap1.force.com/HelpCust

The one highlighted in yellow can be considered as path or queries.So,please copy your url till the domain(till ends with .com/.in/.edu etc) name not the full url.

The Final url we need to add in CORS or SnapIns settings is 

https://srinivas4sfdc-developer-edition.ap1.force.com/


Hope this helps you..Enjoy..!



Thursday, January 2, 2020

Unable To Find My Visual Force Page In Utility Items Of App Settings In Lightning Experience

When your trying to customize any one of your lightning application and some times your trying to add your visual force page as a component but your visual force page is not showing there?

Then please check out the below settings.

Please goto your visual force page and check whether it's enabled to use in lightning application/lightning experience or not?

If not please enable the option "Available for Lightning Experience, Lightning Communities, and the mobile app"


Note: Not only in Utility Items,anywhere in lightning experience if your visual force page is not shown please check these settings.This could be the major issue in most of the cases.

Please comment or write us if you have any queries/requirements.

Please follow,bookmark,subscribe this site to receive daily updates.

Facebook - https://www.facebook.com/ILoveCodingYou/?ref=bookmarks

Hope this helps you..Enjoy..!


Tuesday, December 31, 2019

How To Open Visual Force Page From LWC Components

Please use below code snippet to open the visual force page from LWC.

import { LightningElement,api,track,wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class CallPopup extends NavigationMixin(LightningElement)
{
    //Call this method from your .html file
 openVisualForcePage(event) 
 {

  const urlWithParameters = '/apex/YourVisualPageName?prop1=propval';
  console.log('urlWithParameters...'+urlWithParameters);
  this[NavigationMixin.Navigate]({
  type: 'standard__webPage',
  attributes: {
  url: urlWithParameters
  }
  }, false); //if you set true this will opens the new url in same window
 }
}

Hope this helps you..Enjoy..!

Saturday, December 28, 2019

Error: [LWC error]: Invalid event type "WireContextEvent" dispatched in element force-aloha-page

Usually when we are rendering any LWC component in Lightning experiences or Lightning console applications sometimes you will receive this error.

The complete looks like below in your browser console

aura_proddebug.js:4283 Error: [LWC error]: Invalid event type "WireContextEvent" dispatched in element <force-aloha-page>. Event name must 1) Start with a lowercase letter 2) Contain only lowercase letters, numbers, and underscores
<force-aloha-page>
    at Object.logError (aura_proddebug.js:4279)
    at AlohaPage.dispatchEvent (aura_proddebug.js:7633)
    at DomContextBinding.get (contextService.js:106)
    at findContextProvisions (contextService.js:296)
    at getContextProvisions (contextService.js:337)
    at Object.getContextValue (contextService.js:355)
    at getDelegate (pageService.js:7)
    at PageServiceClient.getCurrentPageReference (pageService.js:28)
    at AlohaPage.connectedCallback (alohaPage.js:688)
    at callHook (aura_proddebug.js:8345)
logError @ aura_proddebug.js:4283


According to Salesforce LWC Documentation the LWC components are not completely supported in all the environments,applications and display sections.

So,this error comes when your rendering any LWC component in any of the area where salesforce doesn't support these LWC components.

Solution:

To fix this error please place your LWC component in Aura component then the LWC component will work without any errors.

Hope this helps you..Enjoy..!

Sunday, December 22, 2019

How To Select And Update Multiple Records Using LWC

If you have a requirement like to display the list of records related to particular record and then selection option to select one or many records from the display list and update the selected records.

And this entire functionality if you want to do using the LWC please follow the below steps and code.

Example :I'm building a component to display list of cases under a particular account and then I'm providing a button to user to make a call out to check which cases can be closed now.

As soon as I got a response from the api i will display all the cases which can be closed now with check box for selection and other cases with non selection option.

For generic demo purpose I'm assuming by default alternative cases are non-closable. So,to test this feature please select account with at least minimum 3 case records.



Apex Class- CaseFilterinLWCCntrl.cls

/**
 * (c) 2019 - srinivas4sfdc.com 
 *
 * Name           : CaseFilterinLWCCntrl
 * Created Date   : 22 Dec 2019
 * Created By     : Sreenivas M
 * Purpose        : Controller class for CaseFilterLWC component.
 *
 **/

global class CaseFilterinLWCCntrl
{
    
    public static List<Case> listCases{get;set;}  
    public static Id recId{get;set;}
    
    public CaseFilterinLWCCntrl(ApexPages.StandardController controller)
    {
        recId = controller.getId();
    }

    @AuraEnabled(cacheable=true)
    public static List<Case> fetchAllCases(String accntId)
    {
        listCases = new List<Case>();
        listCases = [Select id,casenumber,status,Origin,Subject,Type,ContactMobile FROM Case WHERE AccountId=:accntId limit 20];
        return listCases;
    }
 
 @AuraEnabled
    public static List<CasesWrapper> checkIsCloseableCases(List<Case> listAllCases)
    {
        
        System.debug('listAllCases...'+listAllCases);
        String errMsg ='';
        List<String> listCaseNum =new List<String>();
        List<String> listCloseableCaseNum =new List<String>();
        String respString = '{"cases":["';
        
        for(Integer i=0;i<listAllCases.size();i++)
        {
            listCaseNum.add(listAllCases[i].casenumber);
            if(Math.mod((i+1),2) == 0)
                listCloseableCaseNum.add(listAllCases[i].casenumber);
        
        }
        
        String finalCaseClose = String.join(listCloseableCaseNum,'","');
        respString = respString+finalCaseClose +'"]}';
       
        String jsonBody = '{"Country":"IND","casenumber":["'+finalCaseClose+'"]}';
        
        System.debug('respString ...'+respString +'...'+jsonBody);
        Http http = new Http();
        HttpResponse res = new HttpResponse();
        HttpRequest req = new HttpRequest();
        req.setEndpoint('endPoint details..');
        req.setMethod('POST');
        req.setBody(jsonBody);
        req.setHeader('Content-Type', 'application/json');
        req.setHeader('Currency', 'INR');
       
        try
        {
          //  res = http.send(req);                      
            string responseValue;// = res.getBody();           
         //   system.debug('responseValue-->>'+responseValue+''+res.getbody());
            responseValue = respString;           
         
                
            if(String.isNotBlank(responseValue)) //   if(res.getStatus()=='OK' && res.getStatusCode()==200 && String.isNotBlank(responseValue))
            {
                 map<string,object> IsCan = (map<string,object>)JSON.deserializeUntyped(responseValue);
                 List<CasesWrapper> listcaseWrap = new List<CasesWrapper>();
                 System.debug('responseValue...'+responseValue);
                 if(IsCan!=null && IsCan.containsKey('cases'))
                 {
                   List<String> closeableCsNum =new List<String>();
                   for(Object obj: (List<Object>)IsCan.get('cases'))
                       closeableCsNum.add((String)obj);
                   
                     System.debug('closeableCsNum...'+closeableCsNum);
                   for(Case cs : listAllCases)
                   {
                       if(closeableCsNum.contains(cs.casenumber))
                           listcaseWrap.add(new CasesWrapper(cs,true));
                       else
                            listcaseWrap.add(new CasesWrapper(cs,false));
                   }
                   
                   System.debug('listcaseWrap....'+listcaseWrap);
                   return listcaseWrap;
                 }
                 
                 else
                 {
                    errMsg ='Received invalid response';
                    throw new AuraHandledException(errMsg); 
                 }
            }
            else
            {
                    errMsg ='Oops something went wrong';
                    throw new AuraHandledException(errMsg); 
            }
        }
        
        Catch(Exception e)
        {
            System.debug('Exception ---'+errMsg);
            AuraHandledException ex = new AuraHandledException(errMsg);
            ex.setMessage(errMsg);
            throw ex;          
        }
    }
    
    @AuraEnabled
    public static string closeSelCases(List<String> listSelCasesToUpdate)
    {
        List<Case> listCasesToUpdate = new List<Case>();
        for(Case cs : [Select id,Status From Case WHERE CaseNumber IN :listSelCasesToUpdate])
        {
        //  cs.Status = 'Closed';
          listCasesToUpdate.add(cs);
        }
        
        try
        {
            if(!listCasesToUpdate.isEmpty())
            {
                update listCasesToUpdate;
                return 'Selected Cases Has Been Closed Successfully';
             }
         }
         Catch(Exception e)
         {
            AuraHandledException ex = new AuraHandledException(String.valueOf(e));
            ex.setMessage('An Error Occured While Closing The Cases');
            throw ex; 
         }         
          
        return null;
    }
       
                    
    public class CasesWrapper
    {
        @AuraEnabled public Case cs{get;set;}
        @AuraEnabled public boolean isCloseable{get;set;}
        @AuraEnabled public Boolean isSelect{get;set;}
            
        public CasesWrapper(Case csObj,Boolean closeable)
        {
            this.cs = csObj;
            this.isCloseable = closeable;
            this.isSelect = false;
        }

    }
 }

updateListOfCases.js (Java script controller of LWC):


/* eslint-disable no-script-url */
/* eslint-disable no-undef */
/* eslint-disable vars-on-top */
/* eslint-disable no-console */
/* eslint-disable no-unused-vars */
import { LightningElement, api, track, wire } from "lwc";
import fetchCases from "@salesforce/apex/CaseFilterinLWCCntrl.fetchAllCases";
import checkIsCloseableStatus from "@salesforce/apex/CaseFilterinLWCCntrl.checkIsCloseableCases";
import closelSelected from "@salesforce/apex/CaseFilterinLWCCntrl.closeSelCases";

const allCasescolumns = [
    {
        label: 'Case Number', fieldName: 'nameUrl', type: 'url',
        typeAttributes: {
            label: { fieldName: 'CaseNumber' },
            target: '_top'
        }
    },
    { label: 'Status', fieldName: 'Status' },
    { label: 'Origin', fieldName: 'Origin' },
    { label: 'Subject', fieldName: 'Subject' },
    { label: 'Type', fieldName: 'Type' },
    { label: 'ContactMobile', fieldName: 'ContactMobile', type: 'text' }

];

export default class UpdateListOfCases extends LightningElement {
    @api recordId;
    @track listAllCases;
    @track listAllCloseableCasesData;
    @track listcancelSeltedCases = [];
    @track columns = allCasescolumns;
    @track showDefTable;
    @track showIsCloseableBtn;
    @track showConfirmClosebtn;
    @track totalNoOfCases;
    @track showErrMsg;
    @track notifType;
    @track notifMsg;
    @track isLoading;

    @wire(fetchCases, { accntId: '$recordId'})
    wiredFetchCasesList({ error, data }) {
        if (data) {
            this.showIsCloseableBtn = true;
            this.listAllCases = data.map(record => Object.assign(
                { "nameUrl": '/console#%2F' + record.Id },
                record));

            this.totalNoOfCases = this.listAllCases.length;
            this.showDefTable = true;
        }
        else if (error) {
            this.error = error;
            this.listAllCases = undefined;
            this.showIsCloseableBtn = false;
        }
    }

    checkIsCloseableCasesJs(event) {
        this.isLoading = true;
        this.showDefTable = false;
        this.showIsCloseableBtn = true;
        this.showErrMsg = false;
        console.log('this.listAllCases....' + this.listAllCases);
        checkIsCloseableStatus({ listAllCases: this.listAllCases })
            .then(result => {
                this.listAllCloseableCasesData = result;
                this.showIsCloseableBtn = false;
                this.showConfirmClosebtn = false;
                this.isLoading = false;

            })
            .catch(error => {

                var errorMsg;
                if (Array.isArray(error.body)) {
                    this.errorMsg = error.body.map(e => e.message).join(', ');
                } else if (typeof error.body.message === 'string') {
                    this.errorMsg = error.body.message;
                }
                console.log('proper error--->' + this.errorMsg);
                this.isLoading = false;
                this.showErrMsg = true;
                this.notifType = 'error'; 
                this.notifMsg = this.errorMsg;
            });

    }

    rowSelChangeEvent(event) {
        this.showConfirmClosebtn = false;
        this.listAllCloseableCasesData.forEach(element => {
            if (element.cs.CaseNumber === event.currentTarget.dataset.id) {
                element.isSelect = event.target.checked;
            }

        });

        for (let i = 0; i < this.listAllCloseableCasesData.length; i++) {

            if (this.listAllCloseableCasesData[i].isSelect) {
                this.listcancelSeltedCases.push(this.listAllCloseableCasesData[i].cs.CaseNumber);
                this.showConfirmClosebtn = true;
            }

        }

    }

    selectDeselectAll(event) {
        if (event.target.checked) {
            this.listAllCloseableCasesData.forEach(element => {
                if (element.isCloseable) {
                    element.isSelect = true;
                    this.showConfirmClosebtn = true;
                }

            });
        }
        else {
            this.listAllCloseableCasesData.forEach(element => {
                if (element.isCloseable) {
                    element.isSelect = false;
                }
                this.showConfirmClosebtn = false;
            });
        }

    }

    closelselectedCaseJs(event) {
        this.isLoading = true;
        this.showErrMsg = false;
        this.listcancelSeltedCases = [];

        for (let i = 0; i < this.listAllCloseableCasesData.length; i++) {
            if (this.listAllCloseableCasesData[i].isSelect) {
                this.listcancelSeltedCases.push(this.listAllCloseableCasesData[i].cs.CaseNumber);
            }
        }


        closelSelected({ listSelCasesToUpdate: this.listcancelSeltedCases })
            .then(result => {
                console.log('cases--->' + result);
                this.showConfirmClosebtn = false;
                this.showErrMsg = true;
                this.notifType = 'success';
                this.notifMsg = result;
                this.isLoading = false;

            })
            .catch(error => {

                var errorMsg;
                if (Array.isArray(error.body)) {
                    this.errorMsg = error.body.map(e => e.message).join(', ');
                } else if (typeof error.body.message === 'string') {
                    this.errorMsg = error.body.message;
                }

                this.showConfirmClosebtn = true;
                this.showErrMsg = true;
                this.notifType = 'error';
                this.notifMsg = this.errorMsg;
                this.isLoading = false;

            });

    }

}

updateListOfCases.html

<template>
   <!-- To show the toast message in vf pages/classic enviornment-->
    <template if:true={showErrMsg}>
        <c-generic-toast-messages notificationtype={notifType} notificationmessage={notifMsg}></c-generic-toast-messages>
        <div class="slds-m-bottom_x-small"></div>
    </template>



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


    <template if:true={listAllCloseableCasesData}>

        <div>
            <table class="slds-table slds-table_cell-buffer slds-table_bordered">
                <thead>
                    <tr>
                        <th>
                            <lightning-input type="checkbox" label="" onchange={selectDeselectAll} value={selAllChe}>
                            </lightning-input>
                        </th>
                        <th>Case Number</th>
                        <th>Status</th>
                        <th>Origin</th>
                        <th>Type</th>
                        <th>Subject</th>
                        <th>ContactMobile</th>
                        <th>Can Close?</th>
                    </tr>
                </thead>
                <tbody>
                    <template for:each={listAllCloseableCasesData} for:item="aItem">
                        <tr key={aItem.cs.CaseNumber}>
                            <td>
                                <template if:true={aItem.isCloseable} class="slds-text-align--left">
                                    <lightning-input type="checkbox" data-id={aItem.cs.CaseNumber} label="" value={aItem.isSelect} checked={aItem.isSelect} onchange={rowSelChangeEvent} ></lightning-input>
                                    <span class="slds-checkbox--faux"></span>
                                    <span class="slds-form-element__label text"></span>
                                </template>
                                <template if:false={aItem.isCloseable}>
                                    <lightning-icon icon-name="utility:error" alternative-text="Can't Close" variant="error" size="x-small" style="padding:0.1rem !important;"></lightning-icon></span>
                                </template>

                            </td>
                            <td >{aItem.cs.CaseNumber}-{aItem.isCloseable}</td>
                            <td >{aItem.cs.Status}</td>
                            <td>{aItem.cs.Origin}</td>
                            <td>{aItem.cs.Type}</td>
                            <td>{aItem.cs.Subject}</td>
                            <td>{aItem.cs.ContactMobile}</td>                          
                            <td class="slds-text-align--center">
                                <template if:true={aItem.isCloseable}>
                                    <lightning-icon icon-name="action:approval" alternative-text="Closeable" size="xx-small" style="padding:0.1rem !important;"></lightning-icon>
                                </template>
                                <template if:false={aItem.isCloseable}>
                                    <lightning-icon icon-name="utility:error" alternative-text="Non-Cancellable" variant="error" size="small" style="padding:0.1rem !important;"></lightning-icon>
                                </template>
                            </td>
                          
                        </tr>
                    </template>

                </tbody>

            </table>
        </div>
    </template>
    <template if:true={showIsCloseableBtn} class="slds-is-relative">
        <lightning-button label="Check Closeable Cases" title="Check Closeable Cases" variant="success" onclick={checkIsCloseableCasesJs} class="slds-align_absolute-center slds-m-top_medium slds-size_small"></lightning-button>

        <div if:true={isLoading}>
            <lightning-spinner alternative-text="Loading..." variant="brand" size="large" class="slds-is-absolute"></lightning-spinner>
        </div>
    </template>


    <template if:true={showConfirmClosebtn} class="slds-is-relative">
        <lightning-button label="Close Selected" title="Close Selected" variant="success" onclick={closelselectedCaseJs} 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>

    <template if:false={listAllCases}>
        No Cases Found For This Account.
    </template>
</template>

updateListOfCases.js-meta.xml

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

After deploying all these changes we are ready to go demo and below is the sample demo how this code works.


Please keep below points as notes while developing the same.
  • { "nameUrl": '/console#%2F' + record.Id } - This is to open a record in classic console using lightning out
  • <c-generic-toast-messages> - Custom component used to show toast messages in classic environment,in case of lightning we can directly use toast messages.
For more update please like/follow this page on

Hope this helps you..Enjoy..!