Salesforce App Developer Guide

Introduction
About This Book
Setting Up Your Work Environment
Salesforce App Administration
Developing for the Salesforce App
Welcome to Salesforce Platform Development
Designing Mobile-First User Interfaces
Extending the Salesforce App with Visualforce Pages
Try It Out: Create a Visualforce Page
Create a New Tab
Add the Tab to the Navigation Menu
Test the Visualforce Page
Tell Me More: Where Visualforce Pages Can Appear in the Salesforce App
Tell Me More: About the Code
Adding Functionality with Visualforce Custom Actions
Development Guidelines and Best Practices
Learning More
PDF

Try It Out: Create a Visualforce Page

Now we’ll create a Visualforce page and make it available from the navigation menu.
This Visualforce page references these items.
  • A static resource named googleMapsAPI
  • An Apex class named FindNearby
These have been provided for you in the package that you downloaded and installed for this guide.

Also included in the package is the Visualforce page FindNearbyWarehousesPage. You can move on to the next step, Create a New Tab, if you want to use the page included in the package.

The code for this page uses the location of the current user and integrates with Google Maps to display a map with warehouses located within 20 miles. For each nearby warehouse, the map displays a pin along with the warehouse name, address, and phone number.
  1. In the Salesforce application, from Setup, enter Visualforce Pages in the Quick Find box, then select Visualforce Pages.
  2. Click New.
  3. In the Label field, enter FindNearbyWarehousesPage.
    The FindNearbyWarehousesPage page is included in the package you installed, so if you’re copying this code to create a new page, you’ll want to name your page something different.
  4. Select the Available for Lightning Experience, Lightning Communities, and the mobile app checkbox.
    Selecting this checkbox designates that the page is mobile-ready.
  5. Copy and paste this code into the Visualforce Markup tab.
  6. Click Save.

Now that we’ve created the Visualforce page for finding warehouses, the next step is to create a tab for it. We’ll then add the page to the navigation menu.