Create a Lightning Application in the Force.com IDE

Render and preview your contact list in a Lightning application.

Force.com IDE is in a maintenance-only state. We still provide support for the product through our official channels, but updates prior to October 12, 2019 will be only for critical security issues that arise. On October 12, 2019, we will no longer provide support or updates of any kind for Force.com IDE. On that date, we will also begin archiving documentation and removing download links for the product. We recommend that you start migrating to Salesforce Extensions for Visual Studio Code or one of the great tools made by our partners. For more information, see The Future of Salesforce IDEs on the Salesforce Developers Blog.

Warning

In the Force.com IDE, make sure that you’re on the Markup tab of the MyContactList component.
Add this markup below the handler and attribute tags that you created earlier.
1<ul> 2<aura:iteration items="{!v.contacts}" var="contact"> 3<li class="minli"> <h3>{!contact.Name}</h3> </li> 4</aura:iteration> 5</ul>
aura:iteration iterates over the list of contacts and displays their names.
To save your updated component, press Ctrl+S or (Cmd+S on macOS).
Select File | New | Lightning Bundle.
Enter MyContactListApp in the File field.
Select Lightning Application from the Type drop-down menu.
Click Finish.
In the Package Explorer, expand the src, aura, and MyContactListApp directories.
Double-click MyContactListApp.app.
In the body of MyContactListApp.app, between the <aura:application> tags, add this markup.
1<c:MyContactList />
To save your updated application, press Ctrl+S or (Cmd+S on macOS).
If you’re working in Offline mode, right-click MyContactListApp.app in the Package Explorer and select Force.com | Save to Server.
In your web browser, navigate to https://yourDomain.lightning.force.com/c/MyContactListApp.app. Behold, a list of the contacts in your org!

Force.com IDE Developer Guide

Create a Lightning Application in the Force.com IDE