The Salesforce app navigation menu enables users to move around your app, access objects you’ve created, and modify data. The navigation menu is generally used for self-contained processes or whole apps that don’t operate in the context of a specific record. Think accessing all your Contacts data, not Joe Smith’s individual record. You can add any mobile-ready Visualforce page to the menu.Let’s create a menu item that provides quick access to the 10 most recently modified accounts.

Latest Accounts page in the Salesforce app navigation menu

Note

While you can create this simple feature without writing any code, it’s a great starting point for learning, and then exploring on your own afterward.

Create the Visualforce Page

Create a Visualforce page to use as the destination of your navigation menu item.

First things first: Before you create a navigation menu item that leads to a page, let’s create the page itself.

  1. Open the Developer Console and click File | New | Visualforce Page. Enter LatestAccounts for the page name.
  2. In the editor, create visualforce
  3. Click File | Save.We’ll leave out the save instruction in the future, but be sure to save your pages between steps.

If you click the Preview button to look at your page, the Developer Console opens a new window and shows the page. But it simply shows the standard Salesforce user interface, not the Salesforce app.

Latest Accounts page in Salesforce Desktop

The best way to view your page is directly in the Salesforce app. We’ll add it to the app in the next step.Notice these characteristics of this code.

  • If you completed the Visualforce Basics module, this page doesn’t look a lot like the Visualforce code you saw there. There are few Visualforce tags, and the page is mostly HTML and JavaScript. We’ll explain why in another unit, but for now take note of it.
  • The standard controller—or any controller—is missing! Instead, the page uses Visualforce Remote Objects to retrieve account records. Remote Objects is one of many ways you can access your organization’s data. It’s a good one, and we’ll use it for the duration of this module.

Beyond the Basics

Why is the Remote Objects method “a good one”? And why would we choose it over other data access methods? We’ll talk about that more later, but for now, let’s step back and look at the three ways you can access and modify your Salesforce data with Visualforce.Standard VisualforceThis is the Visualforce described in the Visualforce Basics Trailhead module. Using built-in components and the Standard Controller, it’s incredibly easy to create custom web apps in minutes.

Standard Visualforce works well for apps that will be used on your organization’s internal network, where bandwidth and latency are usually good. But on mobile devices, especially when they’re on less reliable connections, there’s some overhead in standard Visualforce that can make mobile apps perform more slowly. Because speed is essential, we recommend one of the other approaches for your Salesforce apps.Remote ObjectsRemote Objects, which we’re using throughout this module, is built to be almost as simple to use as standard Visualforce, but optimized for other use cases such as mobile apps.Remote Objects has two characteristics that make it great for use with the Salesforce app. First, it does away with the view state that’s part of standard Visualforce. View state is extra data that’s passed back and forth between the client browser and the server for every request. It’s part of what makes standard Visualforce simple to implement, but the extra data and requests can be a burden on mobile connections.

Second, Remote Objects is JavaScript-based. This makes it natural to use with a variety of mobile frameworks that use JavaScript themselves. We’ll talk more about that in the last unit in this module.JavaScript RemotingJavaScript Remoting is, as you can probably guess from the name, also based in JavaScript. However, where Remote Objects is simple and straightforward, JavaScript Remoting is flexible and powerful. JavaScript Remoting gives you the most capability to create exactly the app experience you want to deliver, and to provide the best performance for those apps. But to do so, you’ll write more code yourself, and you’ll need to master some complex concepts.

For now, we’ll work with Remote Objects. It’s simpler than JavaScript Remoting, but it’s more than capable. There’s a lot of runway available for apps built with Remote Objects, and it’s a great option for all but the most demanding apps.

Add the Page to the Salesforce App Navigation Menu

To add a Visualforce page to the Salesforce app navigation menu, first enable the page for mobile apps. Then create a tab for the page, and add the tab to the Salesforce app menu.

  1. Enable the Visualforce page for Salesforce mobile access.
    1. From Setup, enter Visualforce Pages in the Quick Find box, then select Visualforce Pages.
    2. Click Edit next to the LatestAccounts Visualforce page in the list.
    3. Select Available for Lightning Experience, Lightning Communities, and the mobile app.
    4. Click Save.
    You need to complete these steps for every page you use in the Salesforce app. From here on, we’ll simply say “enable the page for mobile apps.”
  2. Create a tab for the Visualforce page.
    1. From Setup, enter Tabs in the Quick Find box, then select Tabs.
    2. In the Visualforce Tabs section, click New.
    3. In the Visualforce Page drop-down list, select LatestAccounts.
    4. In the Tab Label field, enter Latest Accounts.Notice that the Tab Name field is filled in automatically
    5. Click in the Tab Style field and select the Building style.The icon for this style appears as the icon for the page in the Salesforce app navigation menu.
    6. Click Next, then Next, then Save.
    You now have a new tab that displays the Latest Accounts Visualforce page. You can add any tab to the standard Salesforce Web interface or to the Salesforce app separately. Let’s do it!
  3. Add the tab to the Salesforce app navigation menu.
    1. From Setup, enter Mobile Apps in the Quick Find box, then select Salesforce | Salesforce Navigation.
    2. Select the Latest Accounts tab and click Add.The Latest Accounts item is added at the bottom of the Selected list.
    3. Click Save.

Your page is now available in the Salesforce app. Woohoo! Let’s check it out.

Test the New Navigation Item and Page

Test your page and changes to the navigation menu by viewing them in the Salesforce app.

The best way to test your Salesforce apps is to view them on your mobile device. You can also use a device emulator on your desktop.

  1. Open the Salesforce app on your mobile device. Refresh the app by pulling down.
  2. Tap  to access the navigation menu.You should see Latest Accounts under the Apps section.Note
    • If you’re using the browser version, you might need to refresh the browser to see the page in the navigation menu.
    • If you’re using the mobile app, you might need to log out and log in again to see the change.
  3. Tap Latest Accounts.Your page loads!

That’s it! You can see how easy it is to make your pages and tabs available to your mobile users.

But imagine how cool it would be if you could click on those accounts—let’s do that next.

Add Navigation Controls Using sforce.one

Connect your page to the Salesforce app navigation system by using sforce.one navigation functions.

Visualforce pages running in the Salesforce app often have to interact with or link to other pages in the application. Common navigation functions are available through the sforce.one object, a JavaScript utility library automatically made available when running in the Salesforce app.

  1. Open the Developer Console and click File | Open, then open your page.
  2. At the bottom of the script block, before the closing </script> tag, add the following code to your page.

    ul.addEventListener("click", function(e) { sforce.one.navigateToSObject(e.target.getAttribute("data-id")); });
  3. Reload the app and view your changes. If you don’t see your page, enable the page for mobile apps again.

Your mini app doesn’t look different at first. But try tapping an account. You’ll navigate to the account’s detail page, where you can view the account, the account feed, and so on. What’s more, by using sforce.one to navigate forward, you can also use the Salesforce app back arrow to navigate back to where you started—your Latest Accounts page.

Materiale di studio