What’s New in Sample Apps for Winter ’19

Winter ’19 is here with new and exciting features for developers! Like always, we have updated the Sample Gallery applications to leverage the features available in this new release. We are excited to share the Winter ’19 version of the sample apps in this blog post.

New Lightning Components

Winter ’19 comes with new components like lightning:map, lightning:menuDivider, and lightning:menuSubheader. Check out the Component Library to familiarize yourself with these new components as well as the existing ones. There are now 157 components available out-of-the-box!

As an example, the lightning:map component is used in the DreamHouse app to show the property location on the record page.

You can add a map to a component with a single line of code:

<lightning:map mapMarkers="{!v.mapMarkers}" zoomLevel="{!v.zoomLevel}" />

Check out the RecordMap component to learn more.

New and easy way to subscribe to Streaming API topics and platform events

lightning:empApi is another new component that makes it easy to subscribe to Streaming API topics and platform events. You no longer have to use a static resource to import a version of a CometD library.

To subscribe to a Streaming API topic or a platform event, simply add lightning:empApi to the markup (.cmp) file of your custom component:

<lightning:empApi aura:id="empApi" />

Then, add the following code to your component controller or helper:

subscribe: function (component, event) {
    var empApi = component.find("empApi");
    var channel = "YourChannelName";
    var replayId = -2;
    empApi.subscribe(channel, replayId, $A.getCallback(function(message) { // handle message })); }

Usage in sample apps:

  • In PureAloe, lightning:empAPI is used to subscribe to the BundleStatusChange Streaming API topic (bundlePath component) and to the Field_Status_Change__e platform event (harvestFieldMap component).
  • In Northern Trail Outfitters, lightning:empAPI is used to subscribe to the MixStatusChange Streaming API topic (MixPath component), and to the Einstein_Event__e platform event (EinsteinTwitterFeed component).

New Apex caching annotation

Winter ’19 makes it easy to cache Apex method call responses at the client-side and improve the performance of your applications. Prior to Winter ’19, you had to call setStorable() in JavaScript on every action object that called an Apex method whose response you wanted to cache.

var action = component.get("c.getItems");
action.setStorable();
action.setCallback(this, function(response) {
    // handle response
});
$A.enqueueAction(action);

In Winter ’19, you can now centralize your caching strategy directly in Apex controllers by annotating methods with @AuraEnabled(cacheable=true).

@AuraEnabled(cacheable=true)
public static List<String> getItems() {

}

Usage in sample apps:

The new caching annotation is used throughout all the sample apps to improve their performance. For example, check out:

  • PropertyController.cls in Dreamhouse
  • FundController.cls in DreamInvest
  • MerchandiseController.cls in PureAloe
  • MerchandiseController.cls in Northern Trail Outfitters
  • CustomerServices.cls and MarketServices.cls in Easy Spaces

Read this blog post to learn more about storable (or cacheable) actions, but remember to use the new syntax.

New Lightning Console JavaScript API methods

Winter ’19 changes the default navigation behavior of menu items in console apps. As a developer, you can use new methods of the Navigation Item API (part of the Lightning Console JavaScript API) to programmatically control the behavior of menu items (like object home pages and custom Lightning page tabs).

To gain access to the Navigation Item API, add the lightning:navigationItemAPI component into your custom component markup (.cmp) file:

<lightning:navigationItemAPI aura:id="navigationItemAPI"/>

Then in your component’s controller or helper, use Navigation Item API methods to control menu items. For example, to refresh the selected navigation object’s home page (typically the object’s list view), call the refreshNavigationItem() method as follows:

handleRefresh: function(component, event, helper){   
    var navigationItemAPI = component.find("navigationItemAPI");
    navigationItemAPI.refreshNavigationItem()
        .then(function(response) {
            // Handle response (true on success and false if there are unsaved
            // changes)
        })
        .catch(function(error) {
            // Handle error
        });
    }
}

Check out the spaceDesigner and reservationHelper components in Easy Spaces for examples of how to work with the menu item navigation methods.

New metadata type to deploy and package your Lightning themes

The new LightningExperienceTheme metadata type means you can now retrieve, deploy, and update custom themes through the Metadata API or with change sets, and add them to unlocked or managed packages. You can also manage your themes, branding assets and related metadata in source control.

We leveraged this new feature in Easy Spaces and created a fresh theme for Winter ’19:

The clarity this new metadata type enables in source is even more beautiful than the theme! Check out the new theme metadata and branding resources in the es-base-styles module. It is also included it in the latest release of the Easy Spaces unlocked packages.

New configuration format for Scratch Org creation

Winter ’19 gives you even more control over settings when creating scratch orgs. With the new settings key, you can enable, disable, or configure any setting exposed as part of the Metadata API.

{
    "orgName": "Easy Spaces",
    "edition": "Developer",
    "hasSampleData": "false",
    "features": "ServiceCloud;ServiceWave;SalesWave",
    "settings": {
      "orgPreferenceSettings": {
        "s1DesktopEnabled": true,
        "s1EncryptedStoragePref2": false,
        "isLiveAgentEnabled": true
      }
    }
}

This new syntax is used in all sample apps. The previous configuration format is scheduled to be deprecated in Spring ’19. Make sure you familiarize yourself with the new configuration file format to gain greater control with less manual configuration when creating scratch orgs.

Unlocked Packages are GA

The unlocked package feature is GA in Winter ’19. All the sample apps can be installed in two different ways:

  • From source, using the Salesforce CLI: this is the recommended option for developers who want to experience the app and make changes to the applications.
  • Using unlocked packages: this is the recommended option for non developers. Use this option if you want to experience the sample app but do not plan to modify the source code.

Blaze your own Winter ’19 trail!

We hope that you’ll enjoy Winter ’19 as much as we do and that you’ll find some inspiration in the updated Sample Gallery applications to blaze your own Winter ’19 trail, plus incorporate some of these new and exciting features into your own applications.

Additional resources

Winter ’19 Release Highlights module in Trailhead.

Leave your comments...

What’s New in Sample Apps for Winter ’19