Time Estimate

Topics

Use CSS and JavaScript Mobile Frameworks

Learning Objectives

After completing this unit, you’ll be able to:
  • Describe why you should use the Salesforce Lightning Design System (SLDS) to style your Visualforce pages.
  • List at least two JavaScript frameworks you can use to build Visualforce pages using the single page application pattern.
  • Describe two technical challenges that frameworks can simplify in your Salesforce app development efforts.
  • Create a Visualforce page that incorporates mobile frameworks.

Using Mobile Frameworks

A mobile web framework makes it easy to support the single-page application pattern when writing Visualforce pages for the Salesforce app.

Getting apps to render perfectly on different screen sizes can be tedious. Styling every user interface component to provide an optimized mobile experience is hard as well. Use existing CSS frameworks that have already done the hard work for you. To build mobile-optimized user interfaces, we recommend that you use the Lightning Design System (SLDS).

The Lightning Design System is a CSS framework that gives you access to the icons, color palettes, and font that our developers use to create this new Salesforce look and feel.

There are other CSS frameworks out there, such as Bootstrap, Ionic, and Ratchet. However, if your goal is to match the style of the Salesforce app, the Lightning Design System is the way to go. It’s continuously updated, so you’re always consistent with Lightning Experience. You can even use other CSS frameworks with SLDS for extra customization.

Writing single-page apps from scratch is complex. Fortunately, you can use existing JavaScript frameworks that abstract and manage most of that complexity. To build Visualforce pages using the single-page application architecture, you can use JavaScript frameworks, such as AngularJS and React.

These frameworks are just a couple of the options available. Take a look at a few different options and decide which one matches the skills and preferences of your organization. To get you started we’ll take a brief look at two of them. We don’t provide a recommendation—we’re simply showing you the first few steps along a path. You’re in charge of your journey! Use one of the options presented here, or blaze your own trail. The principles you learn here will prove useful along the way.

Beyond the Basics

One other option you should at least consider is the Lightning Component framework. The Lightning Component framework is a modern UI framework for developing dynamic single-page applications. This is a complete digression from Visualforce, the topic at hand, so we won’t cover the details here. See the unit in the Lightning Experience Development module for an in-depth comparison and points of consideration.

AngularJS

AngularJS is a popular JavaScript framework developed by Google that works well for single-page applications. Use AngularJS to extend HTML with powerful built-in features and to simplify the development and testing process.

See this unit’s resources for articles on the benefits of AngularJS and how it compares with other third-party frameworks.

React

React is a JavaScript library for building interactive web applications. React allows developers to create fast, efficient interfaces, where the page’s data can change without the page reloading.

See this unit’s resources for articles on the benefits of React and how it compares with other third-party frameworks.

Use AngularJS and SLDS to Create a Mobile-Friendly Visualforce Page

Let’s use AngularJS, a JavaScript framework, and the Salesforce Lightning Design System (SLDS), a Salesforce CSS framework, to create an interactive business card template for mobile.
  1. Open the Developer Console and click File | New | Visualforce Page. Enter MobileFrameworks for the page name.
  2. In the editor, replace the contents with the following.
    <apex:page showHeader="false" standardStylesheets="false" sidebar="false"
          applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
    
      <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ng-app="MobileFrameworksApp">
        <head>
          <meta charset="utf-8" />
          <meta http-equiv="x-ua-compatible" content="ie=edge" />
          <title>SLDS Visualforce Page in Salesforce Mobile</title>
          <meta name="viewport" content="width=device-width, initial-scale=1" />
    
          <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    
          <!-- Import the Design System style sheet -->
            <apex:slds />
        </head>
    
        <body>
        <!-- REQUIRED SLDS WRAPPER -->
          <div class="slds-scope">
                                
          <!-- PRIMARY CONTENT WRAPPER -->
    
          <!-- / PRIMARY CONTENT WRAPPER -->
    
        </div>
        <!-- / REQUIRED SLDS WRAPPER -->
    
        <!-- JAVASCRIPT -->
              <!-- / JAVASCRIPT -->
        </body>
      </html>
    </apex:page>
    This code is a simple example of using SLDS and AngularJS. A lot of the SLDS markup is similar to what we’ve written in previous units. Let’s take a closer look at the new AngularJS elements.
    • The <script> src attribute points to the external AngularJS file.
    • The ng-app directive tells AngularJS that “MobileFrameworksApp” is the root element of the AngularJS application. All AngularJS applications need a root element.
  3. Now let’s add the code that creates the input fields and the virtual business card under the <!-- PRIMARY CONTENT WRAPPER --> tag.
      <div class="myapp">
    <!-- HEADING -->
      <div class="slds-text-heading_small slds-p-top_medium slds-p-bottom_medium">Virtual Business Card Template</div>
    <!-- / HEADING -->
    
    <!-- INPUT FIELDS -->
      <div class="slds-col slds-size--1-of-2 slds-small-size--1-of-6 slds-medium-size--1-of-6" >
        <input type="text" ng-model="yourName" placeholder="Name:" class="slds-input"/>
        <input type="text" ng-model="yourCompany" placeholder="Company Name:" class="slds-input"/>
        <input type="tel" ng-model="yourNumber" placeholder="Phone Number:" class="slds-input"/>
        <input type="email" ng-model="yourEmail" placeholder="Email:" class="slds-input"/>
      </div>
    <!-- / INPUT FIELDS -->
    
    <!-- BUSINESS CARD -->
      <div class="slds-col slds-size--1-of-1 slds-small-size--1-of-3 slds-medium-size--1-of-3" >
        <div class="slds-box slds-m-top_x-large">
    
          <div class="slds-text-heading_large slds-text-align_center">{{ yourName }}</div>
          <div class="slds-text-heading--medium slds-text-align_center">{{ yourCompany }}</div>
    
          <!-- ICON -->
            <div class="slds-align_absolute-center">
              <span class="slds-icon_container slds-icon-standard-avatar
                           slds-icon-align_center slds-m-bottom_small slds-m-top_small">
                <svg aria-hidden="true" class="slds-icon">
                  <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#avatar')}"></use>
                </svg>
              </span>
            </div>                    
          <!-- / ICON -->
    
          <div class="slds-text-body_regular slds-text-align_center">{{ yourNumber }}</div>
          <div class="slds-text-body_regular slds-text-align_center">{{ yourEmail }}</div>
        </div>
      </div>
    
    <!-- / BUSINESS CARD -->
    </div>    
    • The ng-model directive lets you bind the value of your input field to a variable.
    • AngularJS displays your content from the model using the {{ yourInput }} expression, where “Input” is your name, company, phone number, and email.
  4. Finally, add the following JavaScript code.
    <script>
      angular.module('MobileFrameworksApp', []);
    </script>
    • The angular.module('MobileFrameworksApp', []); call in the JavaScript section of the markup defines the module which contains our AngularJS application. The AngularJS module is a container for functions that run when the application starts.
Preview your Visualforce page. You’ll see that the business card is dynamically updated as you type. Now view your Visualforce page in the Salesforce app. Where would you add this page to the Salesforce app? How would you add it? Take five minutes right now and test your memory. Can you add this page to the Salesforce app without referring to a prior unit?
retargeting