AngularJS Integration with Salesforce Lightning Design System Part 1

/ apex, Salesforce / By

Let’s begin by giving a concise overview of AngularJS and delving into the necessary code to construct our initial Visualforce page based on AngularJS and Salesforce Lightning Design System.

AngularJS serves as an MV* framework that excels in Single Page Applications (SPAs). It revolutionizes frontend application development by bridging JavaScript and HTML. Rather than directly manipulating the DOM, AngularJS employs directives and expressions, enabling it to handle DOM manipulations. Its core focus lies in dynamic data binding and HTML extension. Additionally, it boasts various features including data validation and dependency injection.

Salesforce Lightning Design System functions akin to other design systems like Twitter Bootstrap but is specialized for creating Salesforce Lightning-themed applications. It comprises a CSS Framework, Icons, Fonts, and Design Tokens. The primary CSS framework defines UI components like form elements, grid layout systems, page headers, and tables, alongside helper classes for adjustments in sizing, spacing, and visual aspects. The Icons section incorporates PNG and SVG versions of actions, standard, and utility icons. Fonts offer a specifically crafted Salesforce Sans font. Lastly, Design Tokens empower users to customize visuals according to their brand by modifying parameters such as colors and sizing.

Configuration

Before we proceed, it’s essential to set up AngularJS and the Lightning Design System. Acquiring the Lightning Design System can be done in two ways. Firstly, you can acquire it by downloading a .zip file and subsequently uploading it as a Static Resource. Alternatively, you have the option to install it as an Unmanaged Package. Once you have the Lightning Design System installed, proceed to obtain AngularJS. Again, there are two options available: downloading the latest stable version and uploading it as a Static Resource, or directly including it from a CDN. While CDNs generally function smoothly, occasionally users’ security policies might restrict the browser from loading code from CDNs. Therefore, I recommend opting for the Static Resource method.

Let’s Start

First we will create the simplest page we can build with AngularJS and Lighting Design System, using the code below:

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
	<html ng-app="SLDSApp" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
		<head>
		  <title>AngularJS - Salesforce Lightning Design System</title>
		  <apex:stylesheet value="{!URLFOR($Resource.SLDS0110, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
		</head>

		<body>
		  <!-- REQUIRED SLDS WRAPPER -->
		  
<div class="slds">
		    <!-- PAGE HEADER -->
		    <!-- / PAGE HEADER -->

		    <!-- PRIMARY CONTENT WRAPPER -->
		    <input type="text" ng-model="yourName" placeholder="Enter a name here" class="slds-input"/>
      	            
<div class="slds-text-heading--medium">Hello, {{ yourName }}!</div>

		    <!-- / PRIMARY CONTENT WRAPPER -->

		    <!-- FOOTER -->
		    <!-- / FOOTER -->
		  </div>

		  <!-- / REQUIRED SLDS WRAPPER -->
		</body>
		<!-- JAVASCRIPT -->
		<script src="{!$Resource.AngularJS}"/>
        <script>
          angular.module('SLDSApp', []);
        </script>
		<!-- / JAVASCRIPT -->
	</html>
</apex:page>

Here it is—our initial AngularJS and SLDS Visualforce page. Like all Visualforce pages, it encapsulates our page markup within an element. In the provided template, the header, sidebar, and standard stylesheets are disabled to emphasize the AngularJS and SLDS focus. If necessary, these elements can be reactivated without any complications.

Several key aspects stand out in this template:

Firstly, the crucial ‘ng-app’ attribute on the <html> tag initiates the AngularJS process, creating an instance of the specified module and indicating that the module governs that segment of the DOM tree.

Secondly, on the same <html> tag, the ‘xmlns’ and ‘xmlns:xlink’ attributes enable support for SVG icon sprite maps within Visualforce.

Thirdly, the <body> tag encompasses our initial Salesforce Lightning Design System markup. For utilizing the Design System markup, it must reside within an outer wrapper <div> with the ‘slds’ class due to the namespace association with ‘slds’.

Fourthly, the final <script> tag encompasses a call to ‘angular.module’ to define our module. This AngularJS module functions as a collection of functions executing upon application initiation.

Now that we’ve covered the basics, let’s explore the functionality of our page. Upon navigating to the page, you’ll observe an interface similar to what’s depicted in Figure 1.

As you interact by typing into the input box, you’ll notice dynamic updates occurring within the view.

Figure 1: View is updated when you type into the input box.

As evident, you experience effortless bidirectional data binding without needing extensive manual intervention. This implies that alterations in the model are seamlessly reflected in the view, and vice versa. The latter is precisely what occurred when you inputted your name; it instantly appeared below.

Here’s what we accomplished on our page: we directed AngularJS to initialize the SLDSApp module through the ‘ng-app’ directive. Subsequently, we established bidirectional binding to the ‘yourName’ model within the <input> tag. Lastly, we instructed AngularJS to display the ‘yourName’ model using the expression {{yourName}}.

For those familiar with Visualforce, this process resembles defining a ‘yourName’ property within your Apex Controller and employing the merge field expression {!yourName} to exhibit it on the page. However, the distinctive feature absent in Visualforce is the dynamic data binding provided by AngularJS.

Related Posts