Usage Of lightning:availableForFlowScreens

Salesforce flow is one of the most powerful business automation tools that will be used to build the application with drag and drop. Now we will see how to use the lightning component available for the flow screens. Make your custom Lightning components available to flow screens in the Cloud Flow Designer by implementing the lightning:availableForFlowScreens interface. In the Cloud Flow Designer, flow screen components appear as options for Lightning component screen fields. In this example, I will get the current conversion rates from the external API and will display on the flow by using component.

Apex class

The above class is covert the exchange rates based on the source currency specified. Make sure you added the Rest API URI to remove site settings.

Lightning component 


To make an attribute’s value customizable in the Cloud Flow Designer, add it to the component’s design resource. That way, flow admins can pass values between that attribute and the flow when they configure the Local Action element. That way, flow admins can pass values between that attribute and the flow when they configure the screen field. Here is the designer for component

A design resource describes the design-time behavior of a Lightning component information that visual tools need to allow adding the component to a page or app. Adding this resource is similar to adding it for the Lightning App Builder. When admins reference this component in a flow, they can pass data between the flow and the Lightning component. Use the Inputs tab to set an attribute using values from the flow. Use the Outputs tab to store an attribute’s value in a flow variable

Use Component in flow 

Now we will use the above lightning component in flow designer. Go to salesforce flow builder and create a new flow. Drag and Drop the screen element to flow designer and configure the flow screen as shown below. the flow contains the two input text element that will accept the source and target currencies.


Drag and drop another screen element into the designer and configure flow to receive the input values from the first screen element as shown below.

Click save. Connect the two flow screen elements as shown below. Set the first screen as a starting element


Now go to the flow and enter the source and target currencies as shown below

Click Next and you will see the result from the Lightning component as shown below.


Usage Of force:lightningQuickAction

Let us discuss the simple usage of the force:lightningQuickAction .Add the force:lightningQuickAction interface to a Lightning component to allow it to be used as a custom action in Lightning Experience or the Salesforce mobile app. When used as actions, components that implement the force: lightningQuickAction interface display in a panel with standard action controls, such as a Cancel button. These components can display and implement their own controls in the body of the panel, but can’t affect the standard controls. They should nevertheless be prepared to handle events from the standard controls. If you implement force:lightningQuickAction, you can’t implement force:lightningQuickActionWithoutHeader within the same component. Here is the simple quick action on the case that will allow users to take the case ownership from the queue.

Apex Class

Lightning Component

Now create an action on the case object as shown below

Add the Action to page layout as shown below.


Now go to case record page and you can able to change the case owner from queue to the current user.


once you click on save you can able to see the case owner is updated with the current user.


Usage Of force:lightningQuickActionWithoutHeader

Let’s discuss how to use force: lightningQuickActionWithoutHeader .The force: lightningQuickActionWithoutHeader interface to a Lightning component to allow it to be used as a custom action in Lightning Experience or the Salesforce mobile app. You can use these components as object-specific or global actions in both Lightning Experience and the Salesforce mobile app.When used as actions, components that implement the force:lightningQuickActionWithoutHeader interface display in a panel without additional controls. The component should provide a complete user interface for the action. If you implement force:lightningQuickActionWithoutHeader,  you can’t implement force:lightningQuickAction within the same component. Here we are creating the quick action that will allow the user to take the ownership from the case queue.

Apex Class

Lightning Component 

Now go and create an action on the case object like as shown below.

Add the Action to the page layout as shown below


now go to the case and click on the case ownership action that will looks as shown below  panel without additional controls


Configure Lightning Components for Community Builder

We will see here how to add the custom lightning component on to the community builder. To appear as a drag-and-drop component in Community Builder, a component must implement the forceCommunity:availableForAllPageTypes interface. After you create the Lightning component, it appears in the Components panel of all Lightning communities in your Org..

1.Create a Component 

Here’s the sample code for the custom component that will be used in the community builder.

Apex Class

Component (FirstCommunityCmp.cmp)



  • To make a resource, such as a component, usable outside of your own org, mark it with access=” global”.
  • When you add custom components to your community, they can bypass the object- and field-level security (FLS) you
    set for the guest user profile.
  • Lightning components don’t automatically enforce CRUD and FLS when referencing objects or retrieving the objects from an Apex controller. This means that the framework continues to display records and fields
  • You must manually enforce CRUD and FLS in your Apex controllers.

2. Add a Design Resource to  Component Bundle

A design resource controls which component attributes are exposed in Community Builder. The design resource lives in the same folder as your .cmp resource and describes the design-time behavior of the Lightning component—information that visual tools need to display the component in a page or app.

Here is the designer code

3. Add an SVG Resource to Component 

To define a custom icon for your component, add an SVG resource to the component bundle. The icon appears next to the component in the Community Builder Components panel. Here is the code for SVG

4. Drag and Drop the component to Community 

Now go the Salesforce community builder and drag and drop the component as shown below.

Configure the component attribute as shown below and publish your changes

After publishing the community you can able to see the basic information of the user as shown below.


Custom Content Layout Components for Communities

In this blog, I will show how to create a custom layout for community pages by using lightning components. To appear in Community Builder as a custom layout, a component must implement the forceCommunity:layout interface. Community Builder includes several ready-to-use layouts that define the content regions of your page, such as a two-column layout with a 2:1 ratio. However, if you need a layout that’s customized for your community, create a custom content layout component to use when building new pages in Community Builder. You can also update the content layout of the default pages that come with your community template.

  • The community should be enabled.
  • Make sure that community template has Builder option.

Mark your resources, such as a component, with access=”global” to make the resource usable outside of your own Org. For example, if you want a component to be usable in an installed package or by a Lightning App Builder user or a Community Builder user in another org.

1. Create a Component

To appear in the New Page and the Change Layout dialog boxes in Community Builder, a content layout component must implement the forceCommunity:layout interface. Here is the sample code that we will use into the community builder

Here is the CSS

You can include an SVG resource in your component bundle to define a custom icon for the content layout component when it appears in the Community Builder. Use Below SVG code to show the icon on the community.


2. Using Custom Layout In Communities

Open Community Builder from the Community settings page and Click on the Add a New Page as shown below

Select Standard page

You can view the custom layout you created. Select the layout for the page. Click on Next
Enter the name for the page and create a page . after creating the page you can able to see the layout of the screen as shown below.