Introduction to Flexible page aka Lightning Page with example

What you will do if you need to display a visualforce tab only in Salesforce1 app and not in desktop version of Salesforce, not even after clicking on “+” link of tab ?

We all are well aware about PageLayout and Visualforce Pages. From API 29 (Winter 14 release), Salesforce has introduced new functionality in platform named “FlexiPage”. Like Pagelayout, We can add Custom components in Flexipage however Flexipage will be visible only in Salesforce1 application in sidebar.

We can use Flexipage to make custom Homepage for some product which will be accessed directly from Salesforce1. One important thing to note here is that, till date (at the time of writing this tutorial) Flexipage can be defined in XML file and then deploying it using Eclipse, Ant Migration tool, workbench or any other migration tool. There is no way to define Flexipage directly in Salesforce using point and click functionality.

Flexi page can contain List View, Recent Items, Report chart, Visualforce page and Global actions.

Update 8-JulyFlexipage is refered as “Lightning Page” in Salesforce documentation.

Step1 : Defining XML file for Flexipage containing detail of components

Filename – “AccountFlexi.flexipage”

<?xml version="1.0" encoding="UTF-8"?>
<FlexiPage xmlns="http://soap.sforce.com/2006/04/metadata">
  <flexiPageRegions>
    <componentInstances>
      <componentInstanceProperties>
        <name>entityName</name>
        <value>Account</value>
      </componentInstanceProperties>
      <componentInstanceProperties>
        <name>filterName</name>
        <value>AllAccounts</value>
      </componentInstanceProperties>
      <componentName>flexipage:filterListCard</componentName>
    </componentInstances>
    <name>main</name>
  </flexiPageRegions>
  <quickActionList>
    <quickActionListItems>
      <quickActionName>NewAccount</quickActionName>
    </quickActionListItems>
  </quickActionList>
  <masterLabel>My new App</masterLabel>
</FlexiPage>

XML file for Flexipage must needs to have “flexipage” extension and should be saved in “flexipages” folder.

Components supported in Lightning Page / Flexi Page

  • flexipage:filterListCard
    • Points to a list view and displays the first few records from that view
  • flexipage:recentItems
    • A list of most recently used items that supports these objects, based on the specified properties
  • flexipage:reportChart
    • Use the Report Chart component to include a chart from a report in your Lightning Page
  • flexipage:richText
    • Use the Rich Text component to add text and simple HTML markup to your Lightning Page
  • flexipage:visualforcePage
    • Use the Visualforce Page component to include a Visualforce page in your Lightning Page

Note :

  • For List View Supported objects include standard objects (Account, Campaign, Case, CollaborationGroup, Contact, Contract, Lead, LiveChatTranscript, Opportunity), custom objects.
  • Recent Items are available only for Custom Objects.

Step 2 : Create package.xml

<?xml version="1.0" encoding="UTF-8"?>
<Package xmlns="http://soap.sforce.com/2006/04/metadata">
  <types>
    <members>AccountFlexi</members>
    <name>FlexiPage</name>
  </types>
  <version>29.0</version>
</Package>

Step3 : Deploying Flexipage

Create Zip file containing above both XML files. you can download it from here also.

We need to deploy this zip file into Salesforce and for that, I am going to use Workbench. In Workbench, navigate to deploy, select your zip file and select “Single package”. Once you have successfully deployed above zip file, you will see below page conforming Success message.

Deploy Flexipage using Workbench Tool
Deploy Flexipage using Workbench Tool

Step4 : Creating Tab for Flexipage

Once deployment is done, we can create a new Tab for flexipage. Navigate to create new Tab and at bottom of page you will see option to select new tab for flexipage as shown in below image.

Creating Flexipage Tabs
Creating Flexipage Tabs

Now, go ahead and create a new tab by providing all necessary information. You should be able to see your flexipage in next screen which you just deployed in step 3.

Step 5 : Configuring Navigation menu in Salesforce1

After creating flexipage tab, We have to tell Salesforce1 engine to display this tab in navigation menu of salesforce 1.

Navigate to “Setup | Administration Setup | Mobile Administration | Mobile Navigation” and add Flexipage to navigation.

Step 6 : Testing Flexipage / Flexipage in Action
Now login to Salesforce application from your mobile phone by launching Salesforce1 app or you can also launch it from your browser by navigating to this address “https://YOURINSTANCE.salesforce.com/one/one.app”.

Access Salesforce1 from Browser
Access Salesforce1 from Browser
Flexipage in Action
Flexipage in Action
Flexipage Components in Salesforce1
Flexipage Components in Salesforce1

please provide feedback on this post if there is chance of making it better.

Posted

in

by


Related Posts

Comments

6 responses to “Introduction to Flexible page aka Lightning Page with example”

  1. Sakthi Avatar
    Sakthi

    hi i need to hide the record which is there when we click the account flexi page tab in salesforce1 app page.. is there any way to do it ??

  2. Sakthi Avatar
    Sakthi

    Hai Mr.
    JITENDRA ZAA,
    I am working with flexipages in salesforce(name changed as lightining page in new workbooks.). I NEED TO WORK WITH REPORT CHART COMPONENT IN FLEXI PAGE. HOW CAN I SPECIFY THEM INSIDE THE COMPONENT INSTANCe properties?? there is no possible ways to specify them when i surfed through internet. could you please say if there is any possible ways??

    1. Jitendra Zaa Avatar

      You need to create a Visualforce page which will have Chart Component embedded in it.

  3. Lily Blunt Avatar
    Lily Blunt

    Jitendra. Amazed to see the post on this topic as pre-dated as this. Just now working with the FlexiPage. So, as of now Lightning App Builder allows you to create FlexiPage in a point and click way. And you can add a component onto it as well. But when you extract the meta data using ANT migration tool using the “FlexiPage” tag, the meta data doesnt show any trace of the component. Am wondering how I ‘ll be able to migrate the page between orgs.

  4. Vadivel Murugan Avatar
    Vadivel Murugan

    Hi,

    I have successfully deployed the zip file using workbench. But in my tab section no flexi page tab section. Why?

  5. Manohar Avatar
    Manohar

    Hi Jithendra,

    I have created the new record types and new lightning record pages.

    Now i need to create a flexi page on case and few other objects.

    There is already one Application for these, i need to create new flexi page on that application .

    can you please help on above scenario

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from Jitendra Zaa

Subscribe now to keep reading and get access to the full archive.

Continue Reading