Introduction to Flexible page aka Lightning Page with example

Display Visualforce page only in Salesforce1 mobile application and not in desktop version

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.

Related posts

5 thoughts on “Introduction to Flexible page aka Lightning Page with example”

  1. 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. 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??

  3. 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. Hi,

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

Leave a Reply

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