Category: Lightning

Lightning web components Wire Service

Let’s discuss here how to use the wire service to get the Salesforce data from the server to lightning web components. You can use the Lightning data service or apex class to get the data from server and wire service is also one of the ways. To read Salesforce data, Lightning web components use a reactive wire service, which is built on Lightning Data Service. Components use @wire in their JavaScript class to read data from one of the wire adapters in the lightning/ui*Api namespace. The wire service provisions an immutable stream of data to the component. Each value in the stream is a newer version of the value that precedes it. when we call the wire service reactive in part because it supports reactive variables, which are prefixed with $. If a reactive variable changes, the wire service provisions new data. We say “provisions” instead of “requests” or “fetches” because if the data exists in the client cache, a network request may not be involved.

The wire service delegates control flow to the Lightning Web Components engine. Delegating control is great for reading operations, but it isn’t great for creating, update, and delete operations. As a developer, you want complete control over operations that change data. That’s why you perform create, update, and delete operations with a JavaScript API instead of with the wire service.

Wire Service Syntax

Import a wire adapter using named export syntax. Decorate a property or function with @wire and specify the wire adapter. Each wire adapter defines a data type.

adapterId (Identifier)—The identifier of the wire adapter.
adapterModule (String)—The identifier of the module that contains the wire adapter function, in the format namespace/moduleName. Take another look at the format! To import a module in JavaScript, use lightning/ui*Api instead of lightning-ui-*-api.
adapterConfig (Object)A configuration object specific to the wire adapter. Configuration object property values can be either strings or references to objects and fields imported from @salesforce/schema. Properties in the adapter config object can’t be undefined. If a property is undefined, the wire service doesn’t provision data.
propertyOrFunction—A private property or function that receives the stream of data from the wire service. If a property is decorated with @wire, the results are returned to the property’s data property or error property. If a function is decorated with @wire, the results are returned in an object with a data property and an error property. Now your code is like below if you convert the wire syntax.

import wire namespace into the JavaScript controller as shown below.

import getRecord from the lightning/uiRecordApi from lightning/ui*Api Wire Adapters and Functions.

Now call the @wire function to get the record data.

Create Lightning web components

create a lightning component in scratch org using the below sfdx command.

Here is the LWCWireExample.html code.

Here is the LWCWireExample.js code.

Here is the LWCWireExample.js-meta.xml markup code.

Push Source to the Scratch Org

Now push the changes to the scratch org by using this SFDX command.

Open Scratch Org by using this SFDX command.

Add this component to the record page and you can able to see the contact data as shown below.

Configure the Lightning Web Components for Lightning App Builder

Let us discuss here how to configure the Lightning web components for Lightning App Builder and expose the attribute properties to the app builder. Please refer this link for how to configure web components environment.  In this example, we will be passing the account rating and limit to web component from the lightning app builder and will get the data and display it.

Step 1: Create an Apex Class

Create an apex class with as shown below with the method and two arguments. use the below SFDX command to create an apex class

Here is the apex code

Step 2: Create a Lightning Web Component

Create Lightning web components in the force-app/main/default/lwc folder. Run the following command to create a lightning web component

Here is the code for AccountInfo.html

Here is the AccountInfo.js code

Now if you can see in the above AccountInfo.js  code you can see the Decorators.T he Lightning Web Components programming model has three decorators that add functionality to property or function.

@api
To expose a public property, decorate it with @api. Public properties define the API for a component. An owner component that uses the component in its markup can access the component’s public properties. Public properties are reactive. If the value of reactive property changes, the component’s template rerenders any content that references the property.
@track
To track a private property’s value and re-render a component when it changes, decorate the property with @track. Tracked properties are also called private reactive properties.
@wire
To read Salesforce data, Lightning web components use a reactive wire service. When the wire service provisions data, the component rerenders. Components use @wire in their JavaScript class to specify a wire adaptor or an Apex method.

Step 3: Configure the Component for Lightning App Builder

Configure the AccountInfo component for Lightning App Builder so that we can add it to a Lightning page. Open AccountInfo.js-meta.xml and add the code in bold. The lets us add the component to an app page. The section lets us set the component’s name property in Lightning App Builder.

The <component>.js-meta.xml file defines the metadata values for the component, including the design configuration for components intended for use in Lightning App Builder. Edit the configuration file to:

  • Define what types of Lightning pages your component can be used on.
  • Configure your component’s properties.
  • Set your component’s supported objects.
  • Make the component usable outside of your own org.

The above configuration file makes the component available for Lightning page types, but you can able to extend or restricts support on record pages. The following markup  will extend the component availability to different lightning pages

The following markup will restrict support on record pages only for an account, opportunity, and warehouse objects on the Lightning record page and lightning app page

 

Step 4: Push Source to the Scratch Org

Now push the changes to the scratch org by using this SFDX command.

Open Scratch Org by using this SFDX command.

Step 5: Add the Component to a Lightning Page

Now add the web component to the lightning app record page by using the app builder as shown below and configure the attributes. Then the component will be displayed 10 accounts with the rating type hot.

Navigate to Component Using Lightning Navigation API

With summer 18 release, navigating with to lightning components is made easier with new navigation API. With the lightning:isUrlAddressable interface, you now control which Lightning components can be opened programmatically. You can also now easily capture URL parameters using the v.pageReference attribute and use the parameter values in your component. With the lightning:navigation component, define a pageReference object for navigating to a custom component that implements lightning:isUrlAddressable and set any attributes the component allows. In standard navigation Lightning apps, you can use the lightning:navigation component to navigate to a custom component that implements lightning:isUrlAddressable. Using lightning:navigation with pageReference provides the following benefits over the now deprecated force:navigateToComponent for standard navigation Lightning apps.

  • Gives you control over whether a component can be opened programmatically, and which attributes can be dynamically set when
    the component is opened.
  • Control and manage which URL parameters are used in your component.
  •  Future-proofs your apps from changes in URL format.
  •  Generates a user-friendly URL for these components.

Quick Notes 

  • New interface lightning:isUrlAddressable is available for components that need to be implemented to navigated directly via URL
  • This interface is used with the component lightning:navigation to navigate from one component to the URL-addressable component. This navigation feature is only supported in Salesforce Lightning and the Salesforce Mobile App.
  • The lightning:isUrlAddressable interface extends the lightning:hasPageReference interface.
  • A component that implements lightning:isUrlAddressable then gets access to the page state through the pageReference attribute.
  • The page state is a representation of the current URL query parameters.
  • lightning:isUrlAddressable enables you to generate a user-friendly URL for a Lightning component with the pattern /cmp/componentName instead of the base-64 encoded URL you get with the deprecated  force:navigateToComponent event.

Usage

For example, c:hellotarget displays a string that’s passed in from another component from the navigation url.

hellotarget.cmp

In c:hellotarget component’s client-side controller, retrieve the attribute values from the page state.

In the component that you want to trigger the navigation, include an instance of the lightning:navigation component. Then include the component to perform the jump to the other component. In this example, a lightning:button component is added to c:hello to trigger the navigation to the URL addressable component.

hello.cmp

Define your page reference for the component you’re navigating to. We recommend setting the page reference using an init handler. This example stores the pageReference in an attribute in the component, and is used to navigate later in the click handler.

Clicking the button in c:hello directs you to /lightning/cmp/c__helloTarget?c__firstname=John, and Hi John is displayed on the c:helloTarget page.

 

 

Chatter Rich Publisher Apps Example

                                                    Use the Chatter Rich Publisher Apps API to integrate your custom apps into the Chatter publisher. The Rich Publisher Apps API enables developers to attach any custom payload to a feed item. Rich Publisher Apps uses lightning components for composition and rendering. Salesforce provides two lightning interfaces and a lightning event to assist with integration. Rich Publisher Apps are available to Lightning communities in topics, group, and profile feeds and indirect messages. Use the lightning:availableForChatterExtensionComposer interface to integrate your custom apps into the Chatter publisher and place the custom app’s payload in the feed. This interface is available in Lightning communities. Use the lightning:availableForChatterExtensionRenderer interface to integrate your custom apps into the Chatter publisher and place the custom app’s payload in the feed. This interface is available in Lightning communities. The lightning:availableForChatterExtensionComposer interface works with the lightning:availableForChatterExtensionRenderer interface and the lightning:sendChatterExtensionPayload event to integrate your custom apps into the Chatter publisher and to render the app’s payload in the feed.

1. Set Up the Composer Component

For the composer component, we created the component, controller, helper, and style files. Here is the component markup in compose.cmp. In this file, we implement the lightning:availableForChatterExtensionComposer interface.

Use your controller and helper to initialize the composer component and to get the rating from a source. Once you get the rating, fire the event sendChatterExtensionPayload. Firing the event enables the Add button so the platform can associate the app’s payload with the feed item. You can also add a title and description as metadata for the payload. The title and description are shown in a non-Lightning context, like Salesforce Classic.

 

2. Set Up the Renderer Component

Here is the component markup in Render.cmp. In this, we implement the lightning:availableForChatterExtensionRenderer interface, which provides the payload as an attribute in the component. You have a couple of ways of dealing with the payload. You can use the payload directly in the component {!v.payload}. You can use your controller to parse the payload provided by the lightning:availableForChatterExtensionRenderer interface and set its attributes yourself.

3. Get the Asset Id

You need to get the asset id that shows as a charter extension icon. Go and upload the image in files as shown below

Get the File Id from the URL. After that Use the below Rest URI to get the Asset Id.

Go to Workbench > utilities > REST Explorer and make a new POST request for creating a file asset with a file Id from your Org.

 

4. Get Renderer and Composer Component Ids 

You need to get the component composer and render record ids to setup the Chatter Publisher. Use below SOQL

5. Set Up a New ChatterExtension Entity

ChatterExtension represents the metadata used to describe a Rich Publisher App that’s integrated with the Chatter publisher. Here is the key metadata about chatter extension. 

Not go to Workbench  Make sure that you’re using at least API version 41.0. Log in to your org, and create a ChatterExtension entity.

From the Data menu, select Insert.

In the Value column, provide values for charter extension fields. click confirm insert.

6. Select the Apps to Embed in the Chatter Publisher

An admin page is available in each community for selecting and arranging the apps to show in the Chatter publisher. Select up to five apps, and arrange them in the order you like. The order you set here controls the order the app icons appear in the publisher. In your community, go to Community Workspaces and open the Administration page. Click Rich Publisher Apps to open the page.

 

After you include the Rich Publisher Apps into the community, you can able to see the new icon as shown below image.

On click of the chatter publish action icon you can able to see the ratings. select the rating and click add to post on chatter.

 

References

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_integrate_customapps_to_publisher.htm

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/meta_chatterextensions.htm#meta_chatterextensions

 

https://developer.salesforce.com/docs/atlas.en-us.216.0.chatterapi.meta/chatterapi/connect_resources_files_asset.htm

 

Usage of lightning:actionOverride

Here we will understand how to override the different salesforce standard action on lightning using lightning component. In order to override any action, your component must implement lightning:actionOverride interface. This interface is a marker interface. A marker interface is a signal to the component’s container to add the interface’s behavior to the component. You don’t need to implement any specific methods or attributes in your component, you simply add the interface name to the component’s implements attribute. The lightning:actionOverride doesn’t add or require any attributes on components that implement it. Components that implement this interface don’t automatically override any action. You need to manually override relevant actions in Setup. However in Lightning Experience, the standard Tab and View actions display as a page, while the standard New and Edit actions display in an overlaid panel. When used as action overrides, Lightning components that implement the lightning:actionOverride interface replace the standard behavior completely. However, overridden actions always display as a page, not as a panel. Your component displays without controls, except for the main Lightning Experience navigation bar. Your component is expected to provide a complete user interface for the action, including navigation or actions beyond the navigation bar.

Overriding the new action 

Here is the sample code to override the new action. the component has implemented the lightning:actionOverride interface and we are using the force:recordData for input form.

Now go ahead and override the new action with the above code as shown below

Once you click on the new button it will prompt the new screen as shown below.

Overriding the Edit Action 

Use the below code to override the edit action. In this example we are using force:recordEdit to show the edit form.

Go and override the Edit action with the above code as shown below.
Once you click on the edit button you can able to see the screen as shown below.

 

Overring The View Action 

Use the below code to override the view action. Here I am using the force: recordView form to view the data.

Now override the view action as shown below.

Once you are trying to view the record you can able to see the screen as shown below

Overriding the Tab 

Use the below code to override the tab. In this example, i am using the lightning:listView  to get the list of opportunities.

Now override the tab action with the above code as shown below

You can see the opportunity tab now as shown below.