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-July – Flexipage 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.

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.

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”.

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