Day: April 2, 2018

Custom Navigation Model for Flow Screens with Lightning Component

In this blog, I am going to explain how to use the custom lightning component button that is used to control the navigation of flow.By default, users navigate a flow by clicking standard buttons at the bottom of each screen. The lightning:availableForFlowScreens interface provides two attributes to help you fully customize your screen’s navigation. To figure out which navigation actions are available for the screen, loop through the availableActions attribute. To programmatically trigger one of those actions, call the navigateFlow action from your JavaScript controller.

Flow Navigation Actions

The availableActions attribute lists the valid navigation actions for that screen NEXT, BACK, PAUSE, RESUME, FINISH are the possible actions. A screen’s available actions are determined by:

  • Where in the flow the screen is. For example, Previous isn’t supported on the first screen in a flow, Finish is supported for only the last screen in a flow, and you can never have both Next and Finish.
  • Whether the flow creator opted to hide any of the actions in the screen’s Navigation Actions controls. For example, if Allow Pause is de-selected, the Pause action isn’t included in availableActions.

Component 

Here is the lightning component

 

 

Flow 

Here the simple flow that I created for testing
You can see below the image that shows how the lightning component interacts with flow navigation.
Once you click the next button on the component it will take to the next action i.e Finish.

Using Lightning Components In Visualforce page

In this blog, I am going to explain how to invoke the lightning component from the visualforce page by using Lightning out. Add Lightning components to your Visualforce pages to combine features you’ve built using both solutions. Implement new functionality using Lightning components and then use it with existing Visualforce pages. Lightning Components for Visualforce is based on Lightning Out, a powerful and flexible feature that lets you embed Lightning components into almost any web page.

Step 1: Create Sample Component

Create a lightning component with below code which contains two attributes

Step 2: Create  Lightning Dependency App

To use Lightning Components for Visualforce, define component dependencies by referencing a Lightning dependency app. This app is globally accessible and extends ltng:outApp. The app declares dependencies on any Lightning definitions (like components) that it uses.

Step 3: Using in Visualforce from the page

There are three steps to add Lightning components to a Visualforce page.

  1. Add the Lightning Components for Visualforce JavaScript library to your Visualforce page using the <apex:includeLightning/>  component.
  2. To reference this app on your page, use the following JavaScript code.
  3. Finally, add your top-level component to a page using $Lightning.createComponent(String type, Object attributes, String locator, function callback). This function is similar to $A.createComponent(), but includes an additional parameter, domLocator, which specifies the DOM element where you want the component inserted.

Here is the final code.

 

 

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.