c3 charts and LWC

I wanted to try out some charting on LWC and I thought what better framework than C3. In this post we will see a component which will display opportunities in various statues associated to an account.

accountCHart

As a prerequisite you would need c3 and d3 (c3 has a dependency on d3.js) framework loaded in static resource for the charting to work .

Download the latest version of the C3 and D3 from below.

C3 -> https://github.com/c3js/c3/releases/latest

D3 -> https://github.com/d3/d3/releases/download/v5.9.7/d3.zip

Couple of important points for charting:

  1. Load the dependency in the same order that I mentioned below. D3 first and then follow it up with C3.
  2. We have added the a parameter t and assigned the current time to it.
    This is done to make sure the cache is refreshed every time the scripts are loaded.
    If we do not do this then there is an issues if we add multiple charts in a single component.

This is just a simple example for one to start with C3. Please share the beautiful charts that you build. Enjoy Charting!!!

LWC-Lightning Datatable sorting

This is a quick post to understand how sorting is accomplished in lightning datatable (LWC).

Lightning datatable provides an onsort attribute which will allow us to implement the sorting for the elements in the table. You could implement sorting locally or via making a server call.

Local Sorting

You would generally implement this type of sorting if you know that the list of elements is going to be small and limited. For example, if you’re displaying a list of approval history records for a particular record, you know that the number of records won’t be more (assuming you have a simple approval process).

In the example below, we have created a simple component which displays the list of the contacts (firstName and lastName). When the header column is clicked the onsort handler is invoked, the field and the sort order is passed and using this information the list is sorted.

Sorting via server call

As you would have guessed this would be useful when you have a huge list and you are displaying a small chunk of the total records.

The major advantage of this method is that you need not implement any custom logic at all. The sorting will be completely handled by the SOQL. Another thing to note here is that you will have to disable the data-table so that the user’s do not click on the header in the time the server call is being executed.

Apex class

Error: An object ‘customMetadata.record.md’ of type CustomMetadata was named in package.xml, but was not found in zipped directory

This issue pops up when we try to deploy the customMetadata from One Org to another . The process I followed was to retrieve the components from Dev using ANT and then deploy it to QA using ANT. Retrieval of the components worked without any issue, but the name with which the components were retrieved was wrong.

componentFailure

If we observe carefully we do not see the __mdt in the extracted metadata but the deploy method expects the metadata name to have ‘__mdt’

After Retrieve.

beforeRetrieve

Just ensure to modify the name of the custom metadata to add the ‘__mdt’ to the file name and that should do the trick.

beforeDeployment

Hope it helps!

MultiFile upload / Drag and drop Attachments

Attaching multiple files as attachments to records is a pain. Its takes lot of time plus lot of navigation. Today, I want to share a small piece of code that I have written as home page component which will inject a small section in the ‘Notes and Attachments’ related list which will allow the users to load multiple file either selecting it from the input file selection or the users can drag and drop the files.

dragndrop

So how do you implement this in your org.

1) Add the main script to a js file and add it to static resource.

2) Create a new Custom Link.

3) Reference the js file in the custom link you created in the previous step. We will also need jQuery, so we will add that as well.

4) Add that custom link a home page component of type Links.

5) Add the home page component to the home page layout and you’re done. For more details on this hacking method, you can check this link here

So here we go: ->

1) Create a javascript file with the below code and add it as a static resource with the name attachmentjs

jQuery(function(){

    /*Checks when the notes and attachment section is loaded and then initiates the process.*/
    var timeInterval = setInterval(function(){
        if(jQuery("div.bRelatedList[id$=RelatedNoteList]").find("div.pbHeader").find("td.pbButton").find("input[name=attachFile]").length > 0){
            addAttachButton();
            clearInterval(timeInterval);
        }
    },100);


});

/*Adds the drop zone div in the notes and attachment section. Event listener are added to listen when files are dropped in the zone.*/
function addAttachButton() {

    var attachmentDiv = jQuery("div.bRelatedList[id$=RelatedNoteList]");
    insertButton();

    attachmentDiv.find("div.pbHeader").find("td.pbButton").after(
        jQuery("<td>", {
            style   : "width:35%;cursor:pointer;"
        }).append(jQuery("<div>",{
                style : "height: 30px;  width: px;border-color: orange;border: 3px solid orange;border-style: dotted;border-radius: 4px;text-align: center;vertical-align: middle;line-height: 2;color: Red;font-family: monospace;font-size: 14px;",
                id : "dropDiv"
            }).append(jQuery("<span>",{id:"clickHere"}).text('Drop files here / click here!') , jQuery("<span>",{id:"uploadingMessage",style:"display:none;"}).text('Uploading your Files, please wait!'))
        )
    );

    jQuery("#dropDiv").on('click',function(){
        if(jQuery("#uploadingMessage:hidden").length > 0) {
            if(jQuery("#multiUploadButton").length > 0) {
                jQuery("#multiUploadButton")[0].click();
            }else {
                insertButton();
                jQuery("#multiUploadButton")[0].click();
            }
        } else {
            alert('Your files are being uploaded. Please Wait!');
        }
    });

    function handleFileSelect(evt) {
        evt.stopPropagation();
        evt.preventDefault();
        var files = evt.dataTransfer.files; // FileList object.
        processFiles(files);
    }    
    function handleDragOver(evt) {
        evt.stopPropagation();
        evt.preventDefault();
        evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
    }

    var dropZone = document.getElementById('dropDiv');
    dropZone.addEventListener('dragover', handleDragOver, false);
    dropZone.addEventListener('drop', handleFileSelect, false);
}


function processFiles(files) {
    hideDiv();
    var insertedFilesArray = [];
    var fileInsertionCounter = 0;

        for(i=0;i<files.length;i++) {
                    
            var reader = new FileReader();
            reader.onload = (function(newFile,pId) {
                return function(e) {
                    var attachmentBody = e.target.result.substring(e.target.result.indexOf(',')+1,e.target.result.length);
                        
                    jQuery.ajax({
                        type: "POST",
                        url: "https://"+window.location.host+"/services/data/v33.0/sobjects/Attachment/",
                        contentType:"application/json; charset=utf-8",
                        headers: { 
                            "Authorization" : "Bearer "+getCookie('sid')
                        },
                        data    : JSON.stringify({'name':newFile.name,'body':attachmentBody,'parentId':pId,'isprivate':false})
                    }).success(function(result) {
                        fileInsertionCounter++;
                        if(fileInsertionCounter == files.length){
                            showDiv();
                        }
                    }).fail(function(err){
                        alert('Unable to Insert file \n Contact your Adminstrator with this error message \n' + JSON.stringify(err));
                        fileInsertionCounter++;
                        //if all the files are uploaded then show the zone div.
                        if(fileInsertionCounter == files.length){
                            showDiv();
                        }
                    });
                };
            })(files[i],jQuery("div.bRelatedList[id$=RelatedNoteList]").attr('id').split('_')[0]);
            
            reader.readAsDataURL(files[i]);
        }
}

/*Inserts the input file button. This is hidden from the view.*/
function insertButton() {
    if(jQuery("#multiUploadButton").length == 0) {
        var attachmentDiv = jQuery("div.bRelatedList[id$=RelatedNoteList]");
        attachmentDiv.find("div.pbHeader").find("td.pbButton").append(
            jQuery("<input>",
                {id     : "multiUploadButton",
                value   : "Multiple Upload",
                type    : "file",
                multiple: "multiple",
                style   : "display:none;"
                })
        );
        jQuery("#multiUploadButton").on('change',function(){
            processFiles(document.getElementById("multiUploadButton").files);
        });
    }
}

function hideDiv() {
    jQuery("#uploadingMessage").show();
    jQuery("#clickHere").hide();
}

function showDiv() {

    jQuery("#uploadingMessage").hide();
    jQuery("#clickHere").show();
    RelatedList.get(jQuery("div.bRelatedList[id$=RelatedNoteList]").attr('id')).showXMore(30);
}

function getCookie(c_name){
    var i,x,y,ARRcookies=document.cookie.split(";");
    for (i=0;i<ARRcookies.length;i++){
        x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
        y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
        x=x.replace(/^\s+|\s+$/g,"");
        if (x==c_name){
            return unescape(y);
        }
    }
}

2) Create a custom link called ‘Attacher Custom Link’ and the add the below code. Make sure you select Behaviour as ‘Execute Javascript’.

  {!REQUIRESCRIPT('//code.jquery.com/jquery-2.1.3.min.js')}
  {!REQUIRESCRIPT('/resource/attachmentjs')}

… follow all the steps mentioned above and you should be set. I have tested this on Latest Chrome and firefox browsers and this is working just fine.

Showing a VF in jQuery modal dialog on standard page button click

Showing a VF page as a popup on click of a custom button is fairly easy. But the problem arises when we have to refresh the parent when the user has completed the operation on the VF pop-up page because of the same-origin policy. The browser doesn’t allow any communication across domain/ protocol. But as a workaround we can use the postMessage() to communicate between parent and pop-up window even if they are on different domain, but again IE8 doesn’t support this.

jQuery Modal Dialog to the rescue. In this demo we will place a custom button on the account detail page, clicking on which will pop-up a modal-vf page which will allow the user to update the name of the account.

I will be using 4 components to demo this :

1) A javascript file, stored in Static resource
2) An images zip file in static Resource. Click here to download the images zip file and store it in the static resource by the name images
3) A Custom button
4) An apex class (extension)
5) A VF page (pop-up)

Lets start with the javascript file. Store this in the static resource by the name mainjs

	/*@description: This script will insert a modal div in the standard page.
					the modal will contain a VF page. This file should be located in static resource.*/
	var j$ = jQuery.noConflict();
	var currentUrl = window.location.href;
	var hostIndex = currentUrl.indexOf(window.location.host+'/')+(window.location.host+'/').length;
	var accountId = currentUrl.substring(hostIndex,hostIndex+15); 
	j$(function(){
		/*Insert the jQuery style sheets in the Head.*/
		/*Insert the Modal dialog along with the VF as an iframe inside the div.*/
		j$("head").after(
			j$("<link>",{rel:"stylesheet",
						href:"https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"}));
		j$("body").after(
			j$("<div>",{id:"modalDiv",
					    style:"display:none;"
			   }).append(
				j$("<iframe>",{id:"vfFrame",
							 src:"/apex/popuppage?id="+accountId,
							 height:200,
							 width:550,
							 frameBorder:0})
			   ));
		/*Initialize the Dialog window.*/
		j$("#modalDiv").dialog({
			autoOpen: false,
			height: 210,
			width: 605,
			modal:true
		});
	});

Apex Class :

public class PopUpExtension{
    public Account account{get;set;}

    public PopUpExtension(ApexPages.StandardController stdController){
        this.account = (Account)stdCOntroller.getRecord();
    }
    
    public void saveAccount() {
        try{
            update Account;
        }catch(exception e) {
            ApexPages.Message myMsg = new ApexPages.Message(ApexPages.Severity.ERROR,'Error Occured while updating the account '+e.getMessage());
            ApexPages.addMessage(myMsg);
        }
    }
}

VF page, name it as popuppage:

<apex:page showHeader="false" sidebar="false" standardController="Account" extensions="PopUpExtension">
    <apex:form>
        <apex:pageBlock title="{!Account.Name}" id="pageBlock">
            Update the Account Name:<br/>
            <b>Account Name</b><apex:inputField value="{!Account.Name}"/>
            <apex:commandButton action="{!saveAccount}" value="Save" onComplete="closeAndRefresh();" status="actionStatus" reRender="pageBlock"/>
            <apex:actionStatus id="actionStatus">
                <apex:facet name="start"> 
                    <img src="/img/loading.gif"/>
                </apex:facet>
            </apex:actionStatus>
        </apex:pageBlock>
    </apex:form>
    <script>
        function closeAndRefresh(){
            console.log('clicked on the button');
            window.top.location = '/{!$CurrentPage.parameters.id}';
        }
    </script>
</apex:page>

Finally create a button on the Account and call it jQuery modal. Select
‘Detail Page Button’ as the Display Type ,
‘Execute Javascript’ as the Behavior and
‘onClick JavaScript’ as content source.

Add the below code in the button:

{!REQUIRESCRIPT("https://code.jquery.com/jquery-1.10.2.js")} 
{!REQUIRESCRIPT("https://code.jquery.com/ui/1.10.4/jquery-ui.js")} 
{!REQUIRESCRIPT("/resource/mainjs")}

j$("#modalDiv").dialog('option','title','{!Account.Name}').dialog('open');

For more info on the Dialog check out the doc here

Hope this helps!

Generate a PDF and Attach it to record from a trigger in Salesforce — RESTful Webservice

Attaching the PDF using RESTful services.

I have posted an article on the step-by-step instruction on doing the same the SOAP way.

Here you go:
Step 1: create a REST resource class and in the post method add the logic to generate the PDF
Step 2: Create a class which has future Method (with callout=true). This future method will call the REST Resource
Step 3: Finally create a trigger that will call this future method.

In this scenario I will create a account and a pdf will be attached to it after the insert.

First lets create the VF page to generate the pdf, a simple one. Lets call it, pdfRenderPage


<apex:page standardController="Account" renderAs="pdf">

Hey, the Account name is {!account.Name}

</apex:page>

Create the Rest Resource which will insert the pdf attachement.

/********
Copyright (c) <2014> <junglee Force(jungleeforce@gmail.com)>
 
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
 
 
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
**********/
@RestResource(urlMapping='/addPDFtoRecord/*')
global with sharing class AddPDFtoRecordREST{
  
  @HttpPost
    global static void doPost(list<String> accountIdList) {
       list<attachment> insertAttachment = new list<attachment>();
        for(String accId: accountIdList){
            //create a pageReference instance of the VF page.
            pageReference pdf = Page.pdfRenderPage;
            //pass the Account Id parameter to the class.
            pdf.getParameters().put('id',accId);
            Attachment attach = new Attachment();
            Blob body;
            if(!test.isRunningTest()){
                body = pdf.getContent();
            }else{
                body=blob.valueOf('TestString');
            }
            attach.Body = body;
            attach.Name = 'pdfName'+accId+'.pdf';
            attach.IsPrivate = false;
            attach.ParentId = accId;//This is the record to which the pdf will be attached
            insertAttachment.add(attach);
         }
         //insert the list
         insert insertAttachment;
    }
}

Next create a class with the future method:

global class AccountTriggerController{

    @Future(callout=true)
    public static void addPDFAttach(string sessionId, list<id> accountIdList){
       HttpRequest req = new HttpRequest();
       req.setEndpoint('https://'+URL.getSalesforceBaseUrl().getHost()+'/services/apexrest/addPDFtoRecord/');
       req.setMethod('POST');
       req.setBody('{"accountIdList":'+JSON.serialize(accountIdList)+'}');
       req.setHeader('Authorization', 'Bearer '+ sessionId);
       req.setHeader('Content-Type', 'application/json');
       Http http = new Http();
       if(!test.isRunningTest()){
           HTTPResponse res = http.send(req);
       }
    }
}

FInally create the trigger:

trigger accountAfterInsert on Account (after insert) {

     list<id> accId = new list<id>();
     for(id acc: trigger.newMap.keySet()){
         accId.add(acc);
      }
		//You would need to send the session id to the future method as the you cannot use the userInfo.getSessionID() method in the future method because it is asynchronous and doesn't run in the user context.
        AccountTriggerController.addPDFAttach(userInfo.getSessionId(), accId);

}

All of this would work only if you add the host in my case it’s https://ap1.salesforce.com, add it to the remote site setting. So go to Setup-> Admin Setup -> security Controls -> Remote Site Settings. Click on new, give it a name(RESTTest), add the Remote Site URL(just copy paste the url from the address bar), it will only take the host and truncate the rest when you save it.

Test Class:

@isTest
public class AddPDFtoRecordTest{
    @isTest static void addPDFtoRecordTestMethod() { 
        account a = new account();
        a.name= 'test PDF';
        insert a;
        
        List<String> accountIdList = new List<String>();
        accountIdList.add(a.Id);
        RestRequest req = new RestRequest(); 
        RestResponse res = new RestResponse();
    
        req.requestURI = 'https://'+URL.getSalesforceBaseUrl().getHost()+'/services/apexrest/addPDFtoRecord/';  
        req.httpMethod = 'POST';
        req.requestBody = Blob.valueOf('{"accountIdList":'+JSON.serialize(accountIdList)+'}');
        req.addHeader('Content-Type', 'application/json');
        RestContext.request = req;
        RestContext.response = res;
    
        AddPDFtoRecordREST.doPost(accountIdList);              
    }
}

You can find the code on gitHub

Hiding selected Side bar custom components(HTML)

There are times in the project where we have to have some UI changes done on the Standard pages. For example, you may have to change the label of the ‘open Activities’ related list on a particular object’s standard page. To achieve this functionality we usually write a simple javascript / jquery script in the side bar component (of type HTML) and then that will do the work. So there are scenarios where multiple team might have implemented such functionality and this results in a lot of sidebar components showing up on the UI which will not make sense to the End Users

In the below code one have to just enter the name of the such side bar components and then that side bar component will be automatically hidden.

//Referencing the jQuery library from the static resource
<script src="/resource/jQuerylib"></script>
<script>
	
var j$ = jQuery.noConflict();
//Add All the name of the components that you want to hide.
var hideComponentArray = ['component1','component2','HideSideBarComponents'];
j$(function(){
   j$("h2.brandPrimaryFgr").each(function(){
      if(j$.inArray(j$(this).text(), hideComponentArray) != -1){
         //Hiding the entire div.
         j$(this).parent("div.sidebarModuleHeader").parent("div.htmlAreaComponentModule").hide();
      }
    });
});
</script>