Friday, December 14, 2018

Sneak Peek: Lightning Web Components

With latest announcement of Lightning Web Components, Salesforce development ecosystem (Lightning Platform) moves one step closer to using web standards of UI development. It is definitely quite welcome move, as it helps in learning and utilizing skills which are not confined to Salesforce ecosystem.

You must read this official Salesforce blog post to get more background details on why and what of lightning web components.


User interface development has evolved drastically in past decade. With introduction of AngujarJS (2010), javascript based front end development became more modularized and then with React (2015) it became much faster, lightweight and component driven. So, front end layer is no longer confined to lightweight ui and graphics. Instead, with Single Page Applications (SPA), you can have pretty much an entire application running on browser (serverless).

Web Components

"Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps." - Mozilla

In short, prior to web components, one had to utilize an external library/ framework (like Angular, React etc.) and build your application on top of it. So essentially, your application runs on top of the external library/ framework and which in turn runs on the browser.

With latest innovations within web development world and addition of custom elements, shadow DOM (don't confuse with virtual DOM), and content template element, browsers are now equipped to execute custom web components themselves, without needing any external library.

It can be related to running a video using HTML video component vs using Adobe Flash for running videos (not quite literally).

Lightning Web Components

Lightning web components, leverages these new web standards (or browser improvements) and allows developers to create web components which can work within Salesforce Lightning platform.

Remember, web components allow you to combine UI and processing. To create a web application, you still need security, access to server services/ data. This is where Lightning web components come into place. Salesforce Lightning web components provides these additional capabilities (security, lightning data service). With these, we can create standard web components which can interact and work with Salesforce Lightning platform.

Additionally, lightning web components can leverage lightning base components (already built on web components), enhancing overall application performance.

Lightning components vs Lightning web components


Similar to custom lightning components, lightning web components can be utilized to create standalone components which can be embedded within
  • Lightning Applications
  • Custom lightning components
  • Visualforce page (using lightning out)
  • Lightning components *
* Info: I am able to embed lightning web component within a custom lightning component and then embed this custom lightning component within lightning community page. Awaiting more details around LightningComponentBundle targets

Custom Lightning Components vs Lightning Web Components

So, what is the difference between Custom Lightning components (something that has taken a significant portion of everyone's time in past 3-4 years) and Lightning Web Components. One word answer is Framework.

Lightning components utilize Aura framework for development and execution of Lightning components. Aura framework can be placed in same stack as Angular, React, as it provides the nuts and bolts to run your lightning components.

Lightning web components, on other hand utilize browser provided features for general component scaffolding along with Salesforce Lightning web components framework (which provides features related to security, service integration and base lightning components). As a large portion of this is now native within browser, there is an obvious cost saving in terms of processing overhead.

To put it simply, in above infographic, the blue blocks represents the custom layers running on top of browser (javascript engine) to make a lightning components work. In middle-left you can see a big chunk which represents Aura framework (custom). On middle-right, the orange block, represents the web component implementation within Browsers (native).


As lightning web components utilize more of native browser features and capabilities they are:
  1. Compliant to web standards
  2. Lightweight
  3. Memory efficient
  4. Fast
  5. Easier to learn and Transferable knowledge


For most part, all mainstream browsers support these web standards. However, there is still come catching up to do. For e.g. Edge still do not fully support all these web standards (totally clueless about IE's support for these standards). So, if your organization still uses one of the older browsers or older versions, Lightning web components may not be useful right away.

(Update Dec 15): As pointed out by Diego Ferreiro Val, Lightning web components works on all mainstream browsers, down to IE11.

For more details on browser support of web components, refer

Open questions

There are still some unanswered questions here:
  • As we know Lightning Experience itself is built on top of Aura framework. Is Salesforce planning to re-write entire Lightning experience with newer Lightning web components? I'm sure the additional performance and memory efficiency will be more than welcome
  • Would lightning web components become latest de-facto of publishing packages on AppExchange?
  • More importantly, with server side rendering of visualforce pages and client side handling of lightning web components, can there is a mixed model to utilize best of both the worlds?
  • Most important, would it help load lightning experience home page faster? (pun intended)

Further Learning

For most part, as Lightning web components utilize HTML web components, documentation for that can be found fairly easily.

Following are few learning resources:

Saturday, December 1, 2018

Lightning: Generate PDF within Lightning Experience with Salesforce Data

Some time back I posted a solution to generate PDF from Lightning components using in-memory data.
Post url:

It was developed for a specific scenario, wherein we need to generate PDF where:
  1. User interface is Salesforce classic
  2. Initiated via Lightning Component
  3. Data doesn't exist within Salesforce and is completely in-memory
As complex and tricky this situation was, we did end up finding a stable and equally tricky solution.

However, I realize that there are still lack of solutions (or maybe my search skills are downgrading) to generate and automatically download PDF document from Lightning Experience, without using any lightning components, wherein data exists within Salesforce. You can use the earlier solution in that case, but it will be an overkill.

There are various solutions available to generate PDF from javascript. But, I still think the plain old method of converting HTML to PDF (via visualforce PDF generation utility provided by Salesforce) is a better solution, due to sheer control over the end result.

So, I ended up creating another quick solution to generate PDF documents from Salesforce.

Generate PDF within Lightning Experience with Salesforce Data

This simple solution entails adding a custom action to an object and embedding the button within object view.

  1. Create a visualforce page with page attribute renderas = "pdf" (sample code below)
  2. Add a Quick Action "Generate PDF" for required object:
    • Action Type: Visualforce
    • Visualforce Page:
  3. Go to Lightning App builder to add the action to detail view of Object


Automatically download PDF from Lightning Experience

Now, the above solution does allow you to generate PDF. However, it's not a good user experience. Wouldn't it be better, if the PDF is automatically downloaded with a defined name.

  1. Create new page to initiate PDF page download (code below)
  2. Modify quick action "Generate PDF" created in previous step and set Visualforce page to
That's IT!!


Thursday, November 15, 2018

SFDX Utility - Easy to use Command Line Wizard

As you would already know, SFDX is Salesforce utility for improved build management and development activities. It is definitely a big leap in terms of bringing Salesforce development practices in line with common delivery and development processes.

However, I believe non-admins, new developers and most of folks who love browser based development will be puzzled, as they now have to move to a not-so-good-looking command line screen to run their commands. Not to mention, they need to remember these commands and all their options.

Who is it for?

This utility (currently) caters to teams/ developers who are yet not using scratch org for their development. I consider you are familiar with managing package.xml to ensure you have your build manifest ready.

What is the need?

  1. Eases pain of entering common development commands (retrieve, deploy, build)
  2. With one time config, you'll be sure you are not messing up with instances
  3. Ensure you or your team follows same process

What does it do?

  1. Retrieve - it performs following steps for each retrieve cycle
    • retrieves components, as per src/package.xml file
    • unzips zip file generated by SFDX
    • copies downloaded components to src folder
    • deletes temporary files
  2. Deploy - allows user to specify username for instance
  3. Test Build - runs a quick validation deployment on a pre-defined build environment/ sandbox

Technical Details

This utility is a windows batch script and tested only on Windows 10, but should work on older windows machines as well (unless you are still using windows 95).

This is a command line utility available for:
  1. Windows machines (tested on Windows 10) - use ctksfdx.bat
  2. *Nix machines (tested on Linux Mint 18.02) - use


Follow these instructions for each client/ project setup, and you'll not have to enter long SFDX commands again and again.


(This setup is to be repeated for each client/project)
  1. Copy utility within project folder (
  2. Setup configurations within utility (explained below)

Example folder structure

Configure utility

Within configuration section of utility (batch file) setup following:
  1. DEV - define username of development sandbox (line no. 13)
    SET DEV=
  2. BUILD - define username of build test sandbox (line no. 16)

Optional settings:
  1. Retrieve wait period - setup time interval in minutes, utility should wait for retrieve operations to complete
  2. Deploy wait period - setup time interval in minutes, utility should wait for deploy/ built test operations to complete

How to use it?

Remember, this is to reduce complexity and effort for repititive tasks, so all you have to do is fire command ctksfdx

That's it!! 

Utility will give you options to choose.

Remember, to keep it really simple and safe, deploy option needs you to provide username of the org where you want to deploy.

[Update Nov 21, 2018] Added shell script utility for *nix systems.

Popular Posts