Building User Interfaces

If I was 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 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 in it. Putting the wrong kind of logic in your client tier can result in inconsistent behavior and, at worst, expensive rework if you decide to shift client technology in the future.

This chapter will cover the aspects of delivering a user interface for Lightning-based applications, getting the most from the Salesforce standard UIs, and building custom UIs with Lightning versus Visualforce. We will also cover using third-party...

What devices should you target?

One of the first questions historically asked when developing a web-based application is What 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 might still 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 or, depending on your target market, they might be larger devices, such as cars or vending machines! So, make sure that you think big and understand all the types of devices your customers and their customers might use to interact with your application.

For desktop and laptop users interacting with...

Leveraging standard UIs and custom UIs

Choice can be a good thing, but sometimes, the choices are not so clear, especially when new technologies are emerging 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 automatically rendered by the platform, building your own custom UIs or, in fact, balancing the use of both. With the new Lightning Component 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. 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...

Leveraging the Salesforce standard UIs and tools

Salesforce puts a lot of effort into its desktop- and mobile-based UIs. These declarative UIs and related UI builder tools are the first to see advancements, such as the ability to dynamically display content based on expressions. These standard UIs and tools 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.

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...

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...

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 for generating 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 attempt to use this attribute on one that's used for other purposes.

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 attach the...

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 Lightning 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 Lightning Aura Components, the $A.enqueueAction JavaScript method can be called from a component's client-side controller method to access the Apex code. 
• For Lightning Web Components, the @wire protocol can be used to bind properties in your client-side controller to methods in your Apex code.
• For Visualforce, the apex:commandButton and apex:actionFunction components can be used to invoke Apex code.

Salesforce also takes care of the security aspects for you, ensuring that the user is logged...

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 1,000 items before a runtime exception is thrown.

At the time of writing, 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.

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...

Object- and field-level security

Ensuring that object- and field-level security configuration is respected in your custom UIs is a key part of your responsibility to your customers in providing a secure solution. The standard UIs do this automatically for you, but it requires further consideration for custom UIs. In this section, we will explore how to do this for both Lightning Web Components and Visualforce pages. Lightning Aura Components has more limited support for it.

The following custom UIs illustrate how object- and field-level security is applied (or not) depending on the binding approach and/or components used. This will help you understand when you need to add additional code or just rely on the standard components.

In the use case used in the next two sections, two users are used; one has full access, and the other has been given the following permissions via...

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 be 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 insights into your component hierarchy and the rendering times for each component. You can download and install...

Using the Service layer and database access

To make Lightning Component controller server-side calls to Apex, use the @AuraEnabled annotation method and the applicable Lightning Aura Component or Lightning Web Component communication method (as outlined in the earlier table) to invoke the method:

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

You will need to ensure that you throw an AuraHandledException exception from your controller code to allow the platform to pass the error to your client code. As previously discussed, we are using a utility function...

Considerations for using JavaScript libraries

As discussed, the more you move toward a stateless server-side controller and the rich client architecture of Lightning Components, the more options open up to you in leveraging client-side components not presently provided by Salesforce. The Lightning Component library, at the time of writing, is growing fast, so you should always check the Lightning Component Reference first (https://developer.salesforce.com/docs/component-library/overview/components)!

Consider the use of third-party UI libraries 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 skills, velocity, and tooling. Libraries such as AngularJS, React, View...

Custom Publisher Actions

In Chapter 2, Leveraging Platform Features, 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 this type of operation, you can use Lightning Component to develop a Lightning Action.

Creating websites and communities

Salesforce now recommends that Lightning Communities is used to create websites for your users, customers, and partners. This feature is based on Lightning Components and uses Lightning Community Builder to allow you to leverage templates that you can customize with standard Lightning Components or customer components you build.

Historically, Salesforce provided the following two ways to create public-facing web content, which are still available for existing customers, although Lightning Communities should be seen as the successor to these capabilities:

• Force.com Sites: 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...

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, and AngularJS, along with Salesforce's own APIs, including OAuth for authentication, and the Salesforce REST API to access Standard and Custom Object records, leading up to the current development around the latest Salesforce 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 Salesforce Mobile, we only had the option of building a custom UI with a developer.

As things stand today, we now have both options available for building...

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.

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

As in previous chapters, feel free to update your package and try out an installation of the package in your test org.

Summary

In this chapter, we learned that 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. We observed that 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.

We learned that if you want to express a more complex process or a series of tasks, Lightning and Visualforce allow 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...