Try It Out: Create a Lightning Page

As we mentioned, we have to create our Lightning Page manually as an XML file. You’ll need an XML editor for this task and the next one.

In the Salesforce1_Dev_Guide_Deliveries_App folder created when you extracted the package, you’ll see a flexipages folder. Inside, you’ll find a sample version of the final Lightning Page file we’re creating here, for your reference. But you’re going to create one for yourself. Let’s get coding!

Open the XML editor of your choice.
Open a new file.

Copy and paste this code block into your XML editor:

1<?xml version="1.0" encoding="UTF-8"?>
2<FlexiPage xmlns="http://soap.sforce.com/2006/04/metadata">
3    <flexiPageRegions>
4        <componentInstances>
5            <componentInstanceProperties>
6                <name>entityName</name>
7                <value>Delivery__c</value>
8            </componentInstanceProperties>
9            <componentInstanceProperties>
10                <name>filterName</name>
11                <value>Todays_Deliveries</value>
12            </componentInstanceProperties>
13            <componentName>flexipage:filterListCard</componentName>
14        </componentInstances>
15        <componentInstances>
16            <componentInstanceProperties>
17                <name>entityNames</name>
18                <value>Delivery__c,Return_Item__c</value>
19            </componentInstanceProperties>
20            <componentName>flexipage:recentItems</componentName>
21        </componentInstances>
22        <name>main</name>
23    </flexiPageRegions>
24    <masterLabel>Deliveries</masterLabel>
25</FlexiPage>

Save the file as Deliveries.flexipage in the flexipages folder.

Always save your Lightning Pages with the .flexipage extension.
Important

All right, we’ve created a basic Lightning Page, but there’s another block of code we need to add: a section specifying actions to be assigned to the Lightning Page. We’re not done with the XML just yet.

Salesforce1 Mobile App Developer Guide

Try It Out: Create a Lightning Page