Chapter 8. User Interface

If I were to list all the technologies that have come and gone most often in my career, I would say it has to be those that impact the end user experience. Being a UI technology developer is a tough business; the shift from desktop to web to mobile to device agnostic has shaken things up, and this situation is still ongoing! This means that the investment in this part of your application architecture is important, as is the logic you put into it. Putting the wrong kind of logic in your client tier can result in inconsistent behavior and, at worst, an expensive rework if you decide to shift client technology in the future.

This chapter discusses the aspects of delivering a user interface for Force.com-based applications, getting the most from the Salesforce standard UIs and building custom UIs with Lightning versus Visualforce. It also discusses using third-party-rich client frameworks, contrasting their architecture's pros and cons with respect to platform features...

Which devices should you target?

One of the first questions historically asked when developing a web-based application is Which desktop browsers and versions shall we support? These days, you should not be thinking so much about the software installed on the laptops and desktops of your users, but rather the devices they own.

The answer will still likely include a laptop or desktop, though no longer is it a safe assumption that these are the main devices your users use to interact with your application. Mobile phones, tablets, watches or skills for voice recognition devices such as Alexa could all be used, or depending on your target market, larger devices such as cars or even a vending machine! So, make sure that you think big and understand all the types of devices your customers and their customers might want to interact with your application.

Tip

For your desktop and laptop users interacting with your Force.com application, it is a combination of using the standard Salesforce UI and any...

Introducing Salesforce Standard UIs and Lightning

Choice can be a good thing, but sometimes, the choices are not very clear, especially when new technologies emerge and overlapping with existing ones. In this chapter and the next, we will be exploring features that help you make the choice between standard UIs provided by Salesforce, or building your own custom UIs or, in fact, balancing the use of both. With the advent of the new Lightning technology from Salesforce, deciding what technology to use for a given custom UI requires some consideration.

Salesforce has historically provided Visualforce as the recommended technology for building custom UIs. To some developers, it resembles Java Server Pages or .NET Active Server Pages, and is very powerful and stable. They also provide a great number of ways to extend their standard UIs with custom UIs built with Visualforce, allowing you to make the choice at a more granular function-by-function level, depending on what works best for your particular...

Leveraging the Salesforce standard UIs

Salesforce puts a lot of effort into its desktop and mobile based UIs. These declarative UIs are the first to see advancements, such as the ability to embed reporting charts. These standard user interfaces are also the primary method by which your subscribers will customize your application's appearance. Furthermore, the UI will evolve with Salesforce's frequent updates. In some cases, new features are available to your users, even without you updating your application.

Tip

In general, aspects of your application that had already leveraged the standard UI in Salesforce Classic will just work fine in Lightning Experience without change, and will also automatically adopt the new look and feel. However, if you have utilized Visualforce extensively, and/or used unsupported features such as JavaScript Custom Buttons, you will have to make some changes. Carefully test and explore your application in Lightning Experience to understand what changes you need to...

Generating downloadable content

The contentType attribute allows you to control how the browser interprets the page output. With this attribute, you can, for example, output some CSV, JSON, or XML content. Using a controller binding, this can be dynamically generated output. This can be useful to generate content to download. The following changes have been made to the FormulaForce application and are included in the code for this chapter:

• Added a new method, generateSummaryAsCSV, to RaceService

• Added a new getCSVContent method to RaceSummaryController

• Added a new racesummaryascsv Visualforce page

• Added a new Custom Button, Download Summary, to the Race layout

The new method is added to the existing RaceSummaryController class, but is only used by the new page. Feel free to review the new Service method; note that it also uses the ContestantsSelector.selectByRaceIdWithContestantSummary method introduced in the previous chapter. Here is the new controller method calling it:

public String getCSVContent...

Generating printable content

Salesforce has a built-in PDF generation engine that can take your HTML markup and turn it into a PDF. This is a very useful feature to generate more formal documents such as invoices or purchase orders.

You can access it using the renderAs attribute of the apex:page element on a Visualforce page, setting it to pdf. Note that you would typically dedicate a specific Visualforce page for this purpose rather than attempting to use this attribute on one used for other purposes.

Tip

Make sure that you use as much vanilla HTML and CSS as possible; the Visualforce standard components do not always render well in this mode. For this reason, it is also useful to use the standardStylesheets attribute to disable Salesforce CSS as well.

You can also programmatically access this capability by using the PageReference.getContentAsPDF method and attaching the PDF generated to records for future. If you would rather generate PDF content without using a Visualforce page, you can...

Client server communication

Fundamentally, any communication between the user's chosen device (client) and the data and logic available on the Salesforce server occurs using the HTTP protocol. As a Force.com developer, you rarely get involved with the low-level aspects of forming the correct HTTP POST or HTTP GET request to the server and parsing the responses.

For example, the Visualforce apex:commandButton and apex:actionFunction (AJAX) components do an excellent job of handling this for you, resulting in your Apex code being called with very little effort on your behalf apart from simply using these components. Salesforce also takes care of the security aspects for you, ensuring that the user is logged in, and has a valid session to make the request to the server. For Lightning Components, there are no direct equivalent components through the component markup. Instead, the $A.enqueueAction JavaScript method can be called from a component's client-side controller method to access the Apex...

Managing limits

Normally, the total number of records retrieved within a single controller execution context is 50,000 records (in total across all SOQL queries executed). In addition, Visualforce components such as apex:dataTable and apex:repeat can only iterate over 1000 items before a runtime exception is thrown.

At the time of writing this, the readOnly attribute (specified on the apex:page component) changes this to 1 million records and 10,000 iterations within Visualforce components on the page (refer to the Salesforce documentation for the latest update). As the name suggests, no updates to the database can occur, which basically means no DML at all. Note that queries are still governed by timeouts.

Tip

If you require a more granular elevation of the SOQL query rows governor, you can apply the @ReadOnly Apex attribute to a JavaScript Remoting method in your controller, and not at the page level as described previously. Again, this method will not be able to use DML operations to update...

Object and field-level security

Visualforce pages exposing the SObject information (either via Standard, Custom, or Extension Controllers) can leverage built-in field-level security enforcements when using components or expressions that reference SObject fields directly; such usage will honor the user's field-level security. However, Visualforce expressions referencing SObject fields by way of a controller property are not affected, as the Visualforce engine cannot tell whether the controller property in turn refers to an SObject field.

Lightning does not currently offer components that are sensitive to object- and Field-Level security. You must, instead, inform the client side controller of the permissions via a Lightning server-side action that leverages Apex Describe for the information being accessed. The Lightning Data Service component, in Developer Preview at time of writing, does, however, support not only object and field security, but also sharing rules. Developer Preview status...

Managing performance and response times

The response times in your solutions can make a big difference to the usability of the application. This section provides information on how to monitor and manage response times in Lightning and Visualforce.

Lightning tools to monitor size and response times

In Lightning, it is important to monitor the complexity of your component hierarchy. While it is good to componentized for reasons of separation of concerns, too much of it can result in a heavy component tree, and result in poor performance. Salesforce provides an excellent tool known as Lightning Inspector, which provides insight into your component hierarchy and the rendering times each component takes. You can download and install this from the Google Chrome Web store.

The following shows an example screenshot for the FormulaForce application:

You may also have noticed that LEX displays page size and response time in the header:

Visualforce Viewstate size

Visualforce Developer's Guide has a section...

Using the Service layer and database access

As with the Visualforce Apex controller action methods you've seen in the earlier chapters, the Service layer is also designed to be called from Visualforce JavaScript Remoting methods, as follows:

public with sharing class RaceResultsController {
  @RemoteAction
  public static List<RaceService.ProvisionalResult>loadProvisionalResults(Id raceId) {
    return RaceService.calculateProvisionResults(
      new Set<Id>{ raceId }).get(raceId);
  }
}

To make Lightning Component controller server-side calls to Apex use the @AuraEnabled annotation method:

public with sharing class RaceResultsController {
  @AuraEnabled
  public static List<RaceService.ProvisionalResult>loadProvisionalResults(Id raceId) {
    return RaceService.calculateProvisionResults(
      new Set<Id>{ raceId }).get(raceId);
  }

You will also need to apply the @AuraEnabled method to accessors for Apex types referenced by the Controller methods:

public class ProvisionalResult...

Considerations for using JavaScript libraries

As discussed, the more you move towards a stateless controller and JavaScript Remoting client architecture, the more you need to invest in providing or obtaining client-side components not presently provided by Salesforce.

Consider this decision carefully on a per-case basis (not all of your application UI has to use the same approach) and make sure that you appreciate the value of the platform features that you are leaving behind. Expect to adjust your expectations around your client developer's velocity to be more in alignment with those on other platform developers.

Libraries such as JQuery provide a great deal of convenience, flexibility, and components available in the community to provide some alternatives and improvements over the Visualforce components, in addition to larger components such as grids and trees. Taking things a step further, larger commercially available libraries such as Sencha ExtJS are also usable from within a Visualforce...

Custom Publisher Actions

In a previous chapter, we created a Publisher Action to mark a Contestant as a DNF (Did not Finish) object easily from a Chatter feed. This leveraged the declarative approach to creating Publisher Actions, based on creating or updating a related record. If your use case does not fit into these type of operations, you can use Lightning Component to develop a Custom Publisher Action.

Creating websites and communities

Salesforce provides the following two ways to create public-facing web content:

• Force.com: This offers a means to create public-facing authenticated or public websites using Visualforce pages. Due to this, it can access Standard and Custom objects using the approaches described in this chapter, reusing components and services from your application as needed. The Force.com site configurations cannot be packaged, though the pages and controllers you create to support them can be. This feature is available in the Enterprise and Developer Edition orgs. It is possible to use Lightning Components via Lightning Out for Visualforce pages.

• Sites.com: This is a declarative website product that is targeted at nontechnical users. Visualforce pages cannot be used directly with Site.com though components available with Site.com can access your application's Custom Objects and as such will invoke your Apex Trigger and thus Domain logic code. It is possible to use Lightning...

Mobile application strategy

Mobile application development using Salesforce has been a hot topic for the last few years, starting with the use of various well-known mobile frameworks such as jQuery Mobile, AngularJS along with Salesforce's own API's, including oAuth for authentication, and Salesforce REST API to access Standard and Custom Object records, leading up to the current development around the latest Salesforce1 mobile application.

The interesting thing about this is that it has evolved in a different way to the browser UI, which started with the standard declarative-driven UI and could then be augmented with a more developer-driven solution such as Visualforce. For a mobile UI, up until the release of Salesforce1, we only had the option of building something with a developer.

As things stand today, we now have both options available for building mobile UI's. As such, make sure that you understand first and foremost the capability of the Salesforce1 mobile application and its ability...

Custom reporting and the Analytics API

Sometimes, the standard output from the Salesforce Reporting engine is just not what your users are looking for. They require formatting or a layout not supported by Salesforce, but the way in which they have defined the report is appealing to them.

The Salesforce Analytics API allows you to build a Visualforce page or mobile application that can execute a given tabular, summary, or matrix report and return its data into your client code to be rendered accordingly. The API is available directly to Apex developers and as a REST API for native mobile applications.

Tip

You might want to consider using a report to drive an alternative approach to selecting records for an additional process in your application by leveraging the flexibility of the Report Designer as a kind of record selection UI.

Updating the FormulaForce package

Apply the code included in this chapter into your package org. Apart from the RaceResultsController Apex class, all components provided with the sample code for this chapter will be included in the package automatically as they are additions to or referenced from components that are already packaged.

Summary

Salesforce provides a great standard UI experience that is highly customizable and adaptable to new features of the platform without you necessarily releasing new revisions of your application. At its core, it is a data-centric user experience, which means that most tasks come down to creating, editing, or deleting records of some kind. Having a strong focus on your Domain layer code ensures that it protects the data integrity of your application.

If you want to express a more complex process or a series of tasks, Visualforce and Lightning allows you to be more expressive using components or other HTML libraries to create the user experience needed for the task at hand. While this is very powerful, it is important to always consider the standard UI, and, wherever possible, augment or complement it with the Visualforce page and/or Lightning components rather than making this the only way of interacting with your application.

Equally important is to observe best practices around engineering...