Menu

It is often needed to incorporate the Lightning Spinner when designing a Visualforce page using the Lightning Design System.

As mentioned in other posts, SLDS only provides a set of CSS libraries therefore we cannot fully operate with its component unless we enrich it with custom Javasacript code for the behaviour.

Today, I’d like to create a component to deal with all AJAX request while presenting the cool loading spinner from Lightning user experience.

In order to do that, let’s create a Visualforce Component just to be able to reuse it anywhere.

Let me add a remark on the Component Attribute importSLDS which will control the loading of the SLDS resources if needed.

Now, when adding the component to any page like this

You will be able to invoke it in any of the AJAX visualforce markup like in the following example

The code can be enhanced or commented in github as usual.

See you on the next post

There is a new way of incorporating the Lightning style CSS of Salesforce aka Lightning Design System – ‘SLDS’ in Visualforce pages.

Traditionally you would download a zip with all the CSS assets and you would upload it into your Salesforce org instance as a static resource in order to reference it at a later step in any of your Visualforce pages by invoking such static resource.
That is always a best practice since you would no be referencing an external link/CDN to retrieve the assets at run time, hence the loading times are better and the availability is always assured.
The pitfall is that you should be maintaining your static resource by uploading the newest version every now and then if you want to stay up to date with the latest improvements.

However, Salesforce has released a new way of using these awesome set of UI libraries by introducing a new Visualforce markup <apex:slds>. By following this approach we can be sure our Visualforce pages are always up to date with the latest improvements Salesforce does to the libraries and we do not need to deal with static resources any more.

In order to proceed with the Salesforce new guidelines on referencing the Lightning Design System in our Visualforce pages, we need to replace these kind of lines:

with:

Salesforce being awesome to the developers just again 😀 😀

Alright, I know that the post’s subject might sound a little bit pretentious but I truly think that what I am about to explain could be really useful to a number of Salesforce Developers and Technical Architects desiring to implement an enterprise-level Visualforce template.

Some time ago, I needed to build a Visualforce template robust enough to be used in a production environment and flexible enough to be quickly changed and theses changes to be propagated across all the pages using the template, quite a task…
Along the time, the Visualforce Template has proven to be very consistent furthermore it has been refined and I believe it is ready to be released for the public to help me improve it. Hence, all the code will be available in a proper GitHub repository.

Let’s start with the capabilities and features of the template:

  • Ability to define at page level the metadata information and feed the template
  • Ability to define at page level the needed CSS and JS to be loaded by the template in the proper order
  • Enforce single apex form across all pages unless it is needed to extend it
  • Ability to reuse common elements with a single declaration of Visualforce components at tempalte level

As you can imagine, the visualforce template will define the scaffolding or skeleton for the visualforce pages to actually implement the placeholders. With the given approach, we make sure that a common structure is followed by every page and we leverage certain paradigms to release the visualforce page developer from traditional concerns.

Let’s dive into it by presenting the code of the template:

As you can see, this is a pretty simple example of a template with three sections: top or header one, main or central content and bottom or footer part. These sections are declared at the ‘body’ of the page and any visualforce page must implement it for the template to work correctly.

In the ‘head’ section we are declaring the variables that every visualforce will define in order to manage two things: html meta information and CSS and JS that the template should load in the correct order.

Additionally, the template can implement those common elements that should be shared across all visualforce pages. For instance, it’s included a component that would load a spinner every time a visualforce page is invoking it from a status attribute within an AJAX request.

After we have defined our template, now it makes sense to create a flexible controller structure. For simplicity sake I am going to use an abstract class to act as a Base Controller for the rest of the pages to extend it. This is particularly useful to group together a set of functionality that the rest of the pages are going to use, therefore we reuse code and guarantee its management.

Now, it is time for a visualforce page to implement and use the template. This could serve as an example:

And its related controller would be:

As you can check both the controller and the page are implementing the template feeding all the required information and only focusing on coding the main content area.

All the code is available in gitHub, feel free to collaborate and suggest new features (comments are welcome).

Finally Salesforce has published its latest set of new functionalities packed in Spring’17 release, more info available here.

There are tons of new cool features being the most remarkable one the new AI engine known as Einstein. Also, I am eager to check the lightning enhancements 🙂

Here a quick overview extracted from the notes:

Salesforce Overall: Favorites, Console Apps, and More Actions

Spring ’17 gives you more reasons to love Lightning Experience. Customize your navigation experience with favorites, see multiple
records on one screen with console apps, and access more global actions from anywhere in Lightning Experience.

Lightning Experience: A Modern and Intelligent User Experience

Lightning Experience is a completely reimagined interface. Even better, it’s built on our UI platform, so the experience can grow and
evolve with your needs. Check out the new features and considerations in this release.

Salesforce Einstein: The World’s Smartest CRM with Artificial Intelligence (AI) for Everyone

Salesforce Einstein is AI built into the Salesforce platform. It delivers advanced AI capabilities to sales, service, and marketing—and
enables anyone to use clicks or code to build AI-powered apps that get smarter with every interaction. Now, everyone in every role
and industry can use AI to be their best.

Sales: Artificial Intelligence, Expanded Sales Path, and Smarter Email

Deliver high-impact Lightning Experience features that keep sales teams laser-focused on the leads and deals most likely to generate
sales. Help reps develop strong customer relationships and integrate their email and calendars with Microsoft—and now with Gmail.
For added productivity, your reps can prioritize calls and easily manage records using Kanban in even more ways.

Data.com: Continual Record Updates and Better Control

Data Integration improves Data.com Clean with a new, more powerful way to make continual, rule-based updates to your records.
Customized field mapping provides data integration rules with flexibility to suit your particular needs. Data Integration provides
reliable data from various data services, including Data.com and third-party data packages. To control how a data service updates
records, the service provides a data integration rule. Matching and updating between the data service and your org are controlled by the rule’s field mappings.

Service: Lightning Hits the Console and Knowledge; Field Service Comes to iOS

Zap! Lightning Experience has hit the Service Console. Enjoy its streamlined UI and the ease of customizing it with the drag-and-drop
Lightning App Builder. Knowledge also gets a Lightning charge, with a unified Knowledge tab and standard record types replacing
custom articles types. Field service comes to your technicians with an iOS app. And Open CTI comes to Lightning Console Apps,
while Desktop CTI takes its final bow.

Analytics: Lightning Enhancements, One-Stop Data Manager, Personal Wave Home, New Charts, and More

Drive decisions with insights from reports and dashboards and Wave Analytics. Lightning Experience reports and dashboards offer
report subscriptions, dashboard sharing and following, and chart enhancements. Wave gets personal with one-stop shopping in
Data Manager, the new personalized Wave home page, custom app navigation, new chart types, and much more.

Communities: Community Workspaces, Criteria-Based Audiences, Mobile Actions, and More

The cool breeze of Spring ’17 blows in some significant changes for Communities—from refreshed tools to fresh components.
Community Workspaces centralizes access to all the tools you use to build, moderate, and manage your community, and Community
Builder gives you more room to work. With criteria-based audiences, you can assign location and record type criteria to page variations
to hit your target audience. And mobile actions make it easy to create, edit, and update Salesforce records directly from your mobile
device.

Chatter: Company Highlights Feed, Create Custom Feeds, Customize Groups

We redesigned the Chatter home page in Lightning Experience to give you more of what you want—customization. We introduced
the Company Highlights feed, the ability to create your own feeds with streams, a list of your recently updated groups, and a way
to share posts. You can also create custom groups for any use case and filter questions in group feeds in communities and Lightning
Experience.

Files: Folders in Libraries (Beta), Attach Salesforce Files to Records, and Rename Files from the Related List

We enhanced the files experience to get you more functionality with less friction. Freshen up your libraries by organizing your library
files into folders (beta). Use Apex to customize file downloads for security and tracking. Work faster and better in Lightning Experience
by attaching and renaming files right from the Files related list.

Mobile: Do More on the Go

Salesforce mobile apps help your users stay productive throughout their busy days, no matter where they are. Salesforce1 offers
improvements to tasks, enhanced charts, approvals, and many other sales features, so sales professionals can take care of even more
business from their phones. Salesforce Authenticator gets a design update that makes it easier to read notifications at a glance. And
introducing the new Field Service Lightning iOS mobile app, an all-in-one tool that puts everything your field service technicians
need at their fingertips.

Financial Services Cloud: Client and Household Relationship Mapping, Alerts, Client Service Enhancements

Advisors can now create, maintain, and visualize clients and households through new relationship groups. Get new client service
enhancements, including alerts on a client’s profile page and financial accounts to help advisors keep up with changes to client’s
financial accounts.

Health Cloud: Wave for Health Cloud: Risk Stratification, Lead-to-Patient Conversion, and More

Optimize care coordination and proactively manage patients who are at risk with Wave dashboards. And we’ve made it super easy
to take Salesforce leads and convert them into Health Cloud patient records. To top if off, we’ve added to the Health Cloud data model, and improved the performance of the Health Cloud console.

Customization: More Control Over Record Page Assignments and Flow Screens, Connect to External Services

Now clicks take you further than ever. They get you more granular control over how you assign Lightning record pages to your users.
They give you control over your flow screens – including a way to make them look like Lightning Experience. And although a little
bit of code is involved, clicks make it easy to connect your org to external services.

Security and Identity: Easier Health Check, Chatter Encryption, OAuth for Connected Apps

Security Health Check offers custom baselines to streamline the job of setting up security for your users and customers. You can
encrypt Chatter posts and attachments, and protect Internet of Things devices with OAuth 2.0

Deployment: Deployment Permission Dependency Now Selected Automatically

The “Modify All Data” permission is now selected automatically when the “Deploy Change Sets” permission is selected.

Development: Create Your Own Salesforce App

Whether you’re using Lightning components, Visualforce, Apex, or our APIs with your favorite programming language, these
enhancements to Force.com help you develop amazing applications, integrations, and packages for resale to other organizations.

Marketing: Tools to Engage Your Customers Like Never Before

Marketing Cloud is the premier platform for delighting customers with 1:1 customer journeys. It enables you to build a single view
of your customer-leveraging data from any source, and plan and optimize unique customer journeys based on your business
objectives. Deliver personalized content across every channel and device at precisely the right time, and measure the impact of each
interaction on your business so you can optimize your approach in real time and deliver better results.

Critical Updates: LockerService Changes, CRSF Protection for Visualforce Pages, and Masking Decoupled from Shield Platform
Encryption

This release includes two new critical updates. One changes how Visualforce pages implement CRSF protection for GET requests.
The other decouples the “View Encrypted Data” permission from Shield Platform Encryption. In addition, the LockerService, approvals,
and flow critical updates from Summer ’16 have been postponed.

It’s been quite a long time since I don’t write a new post with custom code. This time, I’d like to talk about the Salesforce Reports API and Salesforce Report namespace classes. More info here and here.

It is pretty simple and awesome if I may, Salesforce exposes each report via the Report API for any external application to gather the results of the report base while having the proper level of access.

Likewise, the Report namespace and the set of Report classes are available for any developer to accomplish basically the same within the force.com domain using pure Apex code. This second method is what we are trying and getting to exploit in this post with specific examples and custom made code which I’m pretty sure the reader will appreciate 🙂

                          OBJECTIVE

We want to create a Visualforce component to accept dynamically a report Id in order to display the report results (ie. all its rows and groups). This Visualforce component is meant to be reusable and easily invoked from Visualforce pages.

                          REPORT NAMESPACE WRAPPER

First thing to do is write a Report namespace wrapper to deal with Report classes and methods in a better way. For this purpose, we need to create the following Apex class with useful static methods:

                          COMPONENT CONTROLLER

As we are about to create a Visualforce component, we will need its Apex Controller to be created firstly. Our Controller will make use of the Report wrapper we have just created in the step before. A simple example could be like this:

                          VISUALFORCE COMPONENT

Right now, we are able to create the Visualforce component that will render the Report results received via an attribute. As I wanted to display it in a cool lightning way, the code has been extended a little bit. However you can extract the important elements quite easily and remove the rest of the parts:

                          VISUALFORCE PAGE

Finally we are ready to use our component. Therefore we will create a Visualforce page that can invoke as many instances of our component as we want. Keep in mind that we need to pass a report Id every time we invoke the component like the following example:

                          IMPORTANT NOTES

Exploiting this solution in an extensive way, could lead to hit some Salesforce limits as we could query lots of rows in a synchronous manner. Minor enhancements have been applied such as page attribute readonly=true or transient modifier to the result collection. You might need to think about more improvements though.
In fact, in a more advanced solution that I designed some weeks ago I opted to store the results in attachments and break the execution in different steps to get the user experience run smoother.

                          FINAL RESULT

A small demonstration invoking the component passing the id of two different Lead reports. As you can see, with this example we allow a developer a method to expose important data, delegating the management to the business side:

report results

Do not hesitate to contribute or reuse the code hosted in github.