How to build a single page application with Salesforce Lightning Design System and Angular

Salesforce Lightning Design System and Angular

A lot of companies around the world has adopted Salesforce, a cloud-based CRM that offers tools and features to super-charge business relationships and transform the working lives of all company’s team.

Salesforce have a solution for most of the business requests but each business has it’s own growth roadmap and it’s own strategies to target new lead and close-won opportunities.

When a company that uses Salesforce CRM needs to satisfy a business special requests that is not part of the out-of-the-box feature set, there are multiple ways to implement a custom solution. In fact, Salesforce Platform offers a lot of tools that allow to keep the same application context and the same “look and feel”.

If you would like to learn more in depth how to “Build Your Own Salesforce App” please visit the official documentation.

Lightning Component framework

The Lightning Component framework is a UI framework for developing dynamic web apps for mobile and desktop devices. It’s a modern framework for building single-page applications engineered for growth.

The Lightning Component framework runs within the Salesforce instance that a company holds and the code is deployed within the same Org. The integration with backend is seamless native.

One of the main objective of this framework is to allow reusability of components, within different app, inside Salesforce Org and also outside Salesforce servers.

In fact, it is possibile to reuse the Lightning Components in a fully custom web application, written, for example, in Node.js, Java or PHP, by integrating an additional tool named Lightning Out. Once activated, this tool create a context similar to the one that resides within Salesforce Org and you are allowed to deploy your code in your servers.

There are a pros and cons in using Lightning Out but these are not covered here. If you are interested in this topic, you can keep reading the official documentation.

Salesforce Lightning Design System + Angular

Our business is unique, we’re looking for more capabilities and we would like to create a custom single page application keeping Salesforce UI design and adopting a front-end web application framework of our choice.

In this article we will explore one of the possible solution that consists in the implementation of an Angular application integrated with a piece of the Lightning Component framework, the Lightning Design System.

The Salesforce Lightning Design System (SLDS) enables you to build rich enterprise experiences and custom applications with the patterns and established best practices that are native to Salesforce.

So here we are! You will be enthusiast to learn how simple is the integration of SLDS and Angular.

1. In the rest of this article, it is supposed that you have some knowledge about Node.js, Angular and Angular CLI Application.

2. Are you interested in an Hands-On approach? Okay! Please, navigate to the dedicated Github repository and follow the “Getting Started” steps.

Salesforce Lightning Design System can be integrated within an Angular CLI Application by loading all the necessary assets provided by SLDS itself.

First of all, we need to add SDLS as a project dependency:

$ npm install @salesforce-ux/design-system --save

In the next step, we need to configure the angular.json file in order to inform Angular on how to load SLDS assets files.

The code below, shows you how to link the SLDS Cascading Style Sheet (minified version).

"styles": [
  ...,
  ...,
  
  "node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css"
]

And finally, below you can find the code needed to link all SLDS’s static assets.

"assets": [
  ...,
  ...,
  
  { "glob": "**/*", "input": "./node_modules/@salesforce-ux/design-system/assets/fonts", "output": "/assets/fonts/" },
  { "glob": "**/*", "input": "./node_modules/@salesforce-ux/design-system/assets/icons", "output": "/assets/icons/" },
  { "glob": "**/*", "input": "./node_modules/@salesforce-ux/design-system/assets/images", "output": "/assets/images/" }
],

That’s it! Now you can leverage the power of both technologies and create extraordinary apps for your business.

Resources

• Github Repository: https://github.com/matteopio-napolitano/ng-slds
• Salesforce Lightning Design System: https://www.lightningdesignsystem.com/
• Angular: https://angular.io/

All product names, logos, and brands are property of their respective owners. All company, product and service names used in this article are for identification purposes only.