Custom Development Icon

Lightning Components

The Lightning Component Framework is a modern JavaScript framework for building components and applications on App Cloud. It shares the same characteristics as other modern JavaScript frameworks, while adding deep integration with the Salesforce App Cloud and a robust security model. When you build components and applications using the Lightning Component Framework, you are using the same framework, the same metadata, and the same design system that Salesforce Engineers use to build the Salesforce apps and core components. The result is a visually and functionally cohesive user experience.

Several Lightning Components are used to improve the broker experience in the DreamHouse sample application. The DreamHouse components are built with the Lightning Component Framework latest and greatest features including the Base Lightning Components and the Lightning Data Service. They are used in different places in the application: in Lightning Pages, in the Salesforce1 Mobile App, in Quick Actions, and in the Utility Bar.

Base Lightning Components

The Base Lightning Components are a set of core components you can use as the building blocks for your own components. The list of base components includes: badge, button, buttonGroup, buttonIcon, buttonMenu, card, formattedDateTime, formattedNumber, icon, input, inputRichText, layout, layoutItem, menuItem, select, spinner, tab, tabset, textarea.

Lightning Data Service

The Lightning Data Service makes it easy to work with data inside your Lightning Components:

  • No Code (client-side or server-side code). You set up the Data Service with one line of markup.
  • Data Sharing. The Data Service transparently shares data across components. Components don’t make their own separate and redundant calls to the server for the same data.
  • Automatic Synchronization. Because the data is shared, a change made in one component is automatically available in the other components working on the same record.

Lightning Components in Lightning Pages

Lightning Components can be added to existing Lightning Pages or can be used to create new pages.

Watch the video below to see how you can use Lightning Components to customize the Property Record Home Page in the DreamHouse sample app:

You can also assemble Lightning Components to create entirely new experiences. Watch the video below to see how you can use Lightning Components to create a custom search experience in the DreamHouse sample app:

Lightning Components in the Salesforce1 Mobile App

You can also also deploy Lightning Pages to the Salesforce1 Mobile App. Watch the video:

Lightning Components in Quick Actions

You can also use Lightning Components to create Quick Actions. In the DreamHouse sample app, the SmartHome component allows brokers to remotely adjust the temperature, turn on the lights, and even unlock the doors of their connected properties. You could add the SmartHome component to the the Property Home Page, but you can also use it as a Quick Action to make sure it’s always one click away in the browser and one tap away in the Salesforce1 mobile app.

Watch the video:

Lightning Components in the Utility Bar

The Utility Bar is a great place to surface components that users may need regardless of the page they are on. In the DreamHouse sample application, the Mortgage Calculator component is a a good example of a component brokers may always need at their fingertips.

Watch the video below to see the Mortgage Calculator component in action in the utility bar:

Source Code:

The source code for the PropertyExplorer component is included in the DreamHouse unmanaged package.