Month: April 2018

Dynamically Update a Flow Screen with a Lightning Component

In this post, I am going to explain how to dynamically update the flow screen with the lightning component. To conditionally display a field on your screen, build a Lightning component that uses aura: if to check when parts of the component should appear. This component displays a custom script component and a group of radio buttons. The component gets the user feedback based on user-selected yes or no options.

If the user selects the Yes radio button, the component displays  form for the user get in touch details

If the user selects the Yes radio button, the component displays thanks message.

Here is the lightning component

Here is the flow which created for this example 

Below image shows how to invoke the lightning component in flow designer.

 

Width Aware Lightning Page Components

In this post, I am going to show how to design you are lighting component region aware to adjust the width by using lightning:flexipageRegionInfo which Provides Lightning page region information to the component that contains it and passes the width of the region that the component is dropped into in the Lightning App Builder. When you add a component to a region on a page in the Lightning App Builder, the lightning:flexipageRegionInfo sub-component passes the width of that region to its parent component. With lightning:flexipageRegionInfo and some strategic CSS, you can tell the parent component to render in different ways in different regions at runtime. For example, the ListView component renders differently in a large region than it does in a small region as it’s a width-aware component. Valid region width values are Small, Medium, Large, and Xlarge.You can use CSS to style your component and to help determine how your component renders. The following example component has two fields, field1 and field2. The component renders with the fields side by side, filling 50% of the region’s available width when not in a small region. When the component is in a small region, the fields render as a list, using 100% of the region’s width.

If you use this component it will adjust the width dynamically based on the CSS which you defined.

The component renders with the fields side by side, filling 50% of the region’s available width when not in a small region. When the component is in a small region, the fields render as a list, using 100% of the region’s width.

 

Custom Lightning Page Template

In this blog, I am going to explain how to create a template for the lightning pages which contains the different custom page regions to place the lightning components. Every standard Lightning page is associated with a default template component, which defines the page’s regions and what components the page includes. Custom Lightning page template components let you create page templates to fit your business needs with the structure and components that you define. Once implemented, your custom template is available in the Lightning App Builder’s new page wizard for your page creators to use.Custom Lightning page template components are supported for record pages, app pages, and Home pages. Each page type has a different interface that the template component must implement.Here are the below interfaces that support components for templates.

lightning:appHomeTemplate

Implement the lightning:appHomeTemplate interface to enable your component to be used as a custom Lightning page template for pages of type App Page. This interface has no effect except when used within Lightning Experience and the Salesforce app.Components that implement this interface appear in the Custom Templates section of the Lightning App Builder new page wizard for app pages.

lightning:homeTemplate

Implement the lightning:homeTemplate interface to enable your component to be used as a custom Lightning page template for the Lightning Experience Homepage. This interface has no effect except when used within Lightning Experience.

lightning:recordHomeTemplate

Implement the lightning:recordHomeTemplate interface to enable your component to be used as a custom Lightning page template for object record pages. This interface has no effect except when used within Lightning Experience.

1. Build the Template Component Structure

A custom template is a Lightning component bundle that should include at least a .cmp resource and a design resource. The .cmp resource must implement a template interface, and declare an attribute of type Aura.Component[] for each template region. The Aura.Component[] type defines the attribute as a collection of components.The Aura.Component[] attribute is interpreted as a region only if it’s also specified as a region in the design resource.Here is the component code that will allow you to define the record home template for lightning app builder.

2. Configure Template Regions and Components in the Design Resource

The design resource controls what kind of page can be built on the template by specifying what regions a page that uses the template must have and what kinds of components can be put into those regions.The Below code shows the designer resource code for the above component.

3. (Optional) Add a Template Image

If you added a description to your .cmp resource, both it and the template image display when a user selects your template in the Lightning App Builder new page wizard.

 

Now go to app builder and create a new record page .now you can able to see the custom page template as shown below image.

After finish, you can able to see the lightning records page as shown below .you can drag and drop the lightning components into those regions.

Best Practices and limitation 

 

  1. Each template component should implement only one template interface. Template components shouldn’t implement any other type of interface, such as flexipage:availableForAllPageTypes or force:hasRecordId.
  2. You cant able to restrict the template to any specific object means sfdc:objects are not supported in the designer resource.
  3. Don’t add custom background styling to a template component. It interferes with Salesforce’s Lightning Experience page themes.
  4. Including scrolling regions in your template component can cause problems when you try to view it in the Lightning App Builder.
  5. Custom templates can’t be extensible nor extended—you can’t extend a template from anything else, nor can you extend other things from a template.
  6. Using getters to get the regions as variables works at design time but not at runtime.
  7. You can remove regions from a template as long as it’s not being used by a Lightning page, and as long as it’s not set to access=global. You can add regions at any time.
  8. A region can be used more than once in the code, but only one instance of the region should render at runtime.
  9. A template component can contain up to 25 regions.

 

 

 

Using Lightning Component In Flows

Introduction :

In this post, I am going to show how to use the lightning component in the flow. the example I am taking hers is search contact based on user inputs like the user will enter contact information and once the form is submitted from the flow, we will fetch the flow input and passing it the lightning component to get the contacts. To use a custom Lightning component in flow screens, configure the component and it is designed to the resource so that they’re compatible with the Cloud Flow Designer.

 Apex Class 

Lightning Component

The below is the lightning component which we will use in cloud flow designer. This component will collect the input values from the flow and pass it the controller to fetch the contacts

design.resource

Flow 

Now create a simple flow as shown below. I create a flow with multiple screens but you can create a single screen. Evey screen is having only one text field line first name, last name, email, and phone. The final is screen is the place where I am invoking the lightning component.

The below image shows how to call the lightning components from the flow designer. Use Lightning Component Extension 

configuree the input and output variable as shown below 

Add it the Lightning Record page. Now you can see your flow as shown below.  

You can able to search the contacts from the flow screen as shown below after entering the first name, last name, and email and phone.

 

 

Lightning Components for Flow Screens

In this blog, i am going to explain how to create a lightning component to use in cloud flow designer.Make your custom Lightning components available to flow screens in the Cloud Flow Designer by implementing the lightning: availableForFlowScreens interface. After defining the component you need to add design resource to your component bundle. 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. It contains attributes that are available for admins to edit in the Cloud Flow Designer.

Step1:- Create a Component 

create a new lightning component as shown below. In order to use the component in cloud flow designer, you need to implement lightning:availableForFlowScreens interface.

Add the flowing code to designer resource for the above component.

 

Step 2: Create a flow 

Open the Cloud Flow Designer From the Setup Drag the appropriate screen element onto the canvas as snow below.

Now from the Add Field Section Drap and Drop the lightning component from the extension section as shown below

Now add the Unique name and then select the lightning compoent from  the dropdown 

Create an input and output variable  as shown below

 

  • Now set starting element to the flow.
  • Save the flow
  • Activate the flow

 

Step3: Add to the Salesforce UI 

Now you can add the flow the Salesforce user interface . in this example I am just adding the flow to the opportunity record page. Go to the opportunity records on lightning and edit the page drag and drop the flow component to the page as shown below

Save the record page.Now you can go to opportunity records to see the lightning component output that was invoked from the flow as shown below