There are two steps. First, create a tab to hold the page and make it available in the Salesforce user interface. Second, add the tab to the
Salesforce1 navigation menu.
Create a Tab for the Page
Visualforce pages are added to the Salesforce user interface by creating tabs to hold them.
Although we as developers get used to accessing our Visualforce pages using the direct URL, that’s not the way our users reach them
day to day. Instead, they want to have the pages be accessible from the standard Salesforce user interface. The way you accomplish this
is by first creating a new tab to hold the 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 FindNearbyWarehouses.
4. In the Tab Label field, enter Nearby Warehouses.
The label field is what users see both on the full site and in the mobile app. With that in mind, keep your labels concise.
5. Click into the Tab Style field, and select the Globe style.
The icon for this style appears as the icon for the page in the Salesforce1 mobile app’s navigation menu.
6. Click Next, and Next again.
7. Deselect the Include Tab checkbox so that the tab isn’t included in any of the apps in the desktop version of the site. You only want
this tab to appear when users are viewing Salesforce1 on their mobile device.
8. Click Save.
Add the Tab to Mobile Navigation
Now that you’ve created a tab to hold your Visualforce page, you’re ready to add the new tab to the Salesforce1 navigation menu.
In this step you add the tab as a navigation menu item in the Salesforce1 mobile app. The menu item will become available to mobile
app users who have access to it.
1. From Setup, enter Navigation in the Quick Find  box, then select Salesforce1 Navigation.
2. Move Nearby Warehouses to the Selected list and then Save.
Try Out the App
Your new mobile app is complete! Search for nearby warehouses on your device.
Being able to test your mobile pages inside your desktop browser is great during development. But now that the page is finished and
added to Salesforce1, it’s important to test it out on the actual devices your users will be using it with.
1. Open the Salesforce1 app on your mobile device. Refresh the app by pulling down.
2. Tap 
to access the navigation menu.
You should see Nearby Warehouses under the Apps section.
Note:
• If you’re using the /one/one.app browser version, you may need to refresh the browser to see the page in the
navigation menu.
• If you’re using the installed mobile app, you may need to log out and log in again to see the change.
55
Create a Tab for the Page
Visualforce and Apex In Action
Pdf link - insert, remove PDF links in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Free C# example code is offered for users to edit PDF document hyperlink (url), like inserting and deleting
add links to pdf in preview; change link in pdf
Pdf link - VB.NET PDF url edit library: insert, remove PDF links in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Help to Insert a Hyperlink to Specified PDF Document Page
convert excel to pdf with hyperlinks; add links to pdf
3. Tap Nearby Warehouses.
4. Click OK when you see a prompt that asks to use your current location.
A map that contains warehouse locations within 20 miles appears.
56
Try Out the App
Visualforce and Apex In Action
RasterEdge .NET Document Imaging Trial Package Download Link.
View & Process. XImage.Raster. Adobe PDF. XDoc.PDF. Scanning. XImage.OCR. Microsoft Office. View & Process. XImage.Raster. Adobe PDF. XDoc.PDF. Scanning. XImage.
pdf link open in new window; add hyperlink in pdf
C# PDF Library SDK to view, edit, convert, process PDF file for C#
RasterEdge PDF SDK for .NET package offers robust APIs for editing PDF document hyperlink (url) and quick navigation link in PDF bookmark.
adding links to pdf document; add hyperlink to pdf
Note:  If you don’t receive a prompt to share your location, it might be related to your device settings. If that’s the case, the
geographical area should default to San Francisco. Also, the warehouses in the package sample data are all located in the San
Francisco area. If you’re testing this from another location, be sure to add a few warehouses located within 20 miles of your
location.
Summary
And...that’s it! You can see how easy it is to make standard pages and tabs available to your mobile users.
Adding your apps to Salesforce1 is pretty much a point-and-click operation.
Visualforce Pages with Apex Controllers
As you learned earlier in this workbook, Visualforce includes standard controllers for every sObject available in your organization. They
make it easy for you to create Visualforce pages that handle common features without writing any code beyond the Visualforce itself.
For highly customized applications, Visualforce allows you to extend or replace the standard controller with your own Apex code. You
can make Visualforce applications available only within your company, or publish them on the Web.
In this tutorial, you’ll use Visualforce to create a simple store front page. The page will list products for sale, offer a simple shopping card,
and the app and its back-end code will illustrate how Visualforce connects to a controller written in Apex.
Displaying Product Data in a Visualforce Page
In this lesson, you’ll extend your first Visualforce page to display a list of products for sale. Although this page might seem fairly simple,
there’s a lot going on, and we’re going to move quickly so we can get to the Apex.
1. In your browser, open your product catalog page at https://<your-instance>.salesforce.com/apex/Catalog,
and click Create Page Catalog to create the new page. Open the Page Editor, if it’s not already open.
2. Modify your code to enable the Merchandise__c standard controller, by editing the <apex:page> tag.
<apex:page standardController="Merchandise__c">
This connects your page to your Merchandise__c custom object, using a built-in controller that provides a lot of basic functionality,
like reading, writing, and creating new Merchandise__c objects.
3. Next, add the standard list controller definition by setting the recordSetVar attribute.
<apex:page standardController="Merchandise__c" recordSetVar="products">
This configures your controller to work with lists of Merchandise__c records all at once, for example, to display a list of products in
your catalog. Exactly what we want to do!
4. Click Save. You can also press CTRL+S, if you prefer to use the keyboard.
The page reloads, and if the Merchandise tab is visible, it becomes selected. Otherwise you won’t notice any change on the page.
However, because you’ve set the page to use a controller, and defined the variable products, the variable will be available to
you in the body of the page, and it will represent a list of Merchandise__c records.
5. Replace any code between the two <apex:page> tags with a page block that will soon hold the products list.
<apex:pageBlock title="Our Products">
<apex:pageBlockSection>
57
Summary
Visualforce and Apex In Action
How to C#: Basic SDK Concept of XDoc.PDF for .NET
XDoc.PDF for .NET allows C# developers to edit hyperlink of PDF document, including editing PDF url links and quick navigation link in bookmark/outline.
add hyperlinks to pdf online; add links to pdf online
VB.NET PDF: Basic SDK Concept of XDoc.PDF
XDoc.PDF for .NET allows VB.NET developers to edit hyperlink of PDF document, including editing PDF url links and quick navigation link in bookmark/outline.
pdf link to attached file; adding a link to a pdf in preview
(Products Go Here)
</apex:pageBlockSection>
</apex:pageBlock>
Note:  From here we’ll assume that you’ll save your changes whenever you want to see how the latest code looks.
6. It’s time to add the actual list of products. Select the (Products Go o Here) placeholder and replace it with a
<apex:pageBlockTable> component.
7. Now you need to add some attributes to the pageBlockTable tag. The value attribute indicates which list of items the
pageBlockTable component should iterate over. The var attribute assigns each item of that list, for one single iteration, to
the pitem variable. Add these attributes to the tag.
<apex:pageBlockTable value="{!products}" var="pitem">
8. Now you’re going to define each column, and determine where it gets its data by looking up the appropriate field in the pitem
variable. Add the following code between the opening and closing pageBlockTable tags.
<apex:pageBlockTable value="{!products}" var="pitem">
<apex:column headerValue="Product">
<apex:outputText value="{!pitem.Name}"/>
</apex:column>
</apex:pageBlockTable>
9. Click Save and you’ll see your product list appear.
The headerValue attribute has simply provided a header title for the column, and below it you’ll see a list of rows, one for each
merchandise record. The expression {!pitem.Name} indicates that we want to display the Name field of the current row.
10. Now, after the closing tag for the first column, add two more columns.
<apex:column headerValue="Condition">
<apex:outputField value="{!pitem.Condition__c}"/>
</apex:column>
<apex:column headerValue="Price">
<apex:outputField value="{!pitem.Price__c}"/>
</apex:column>
58
Displaying Product Data in a Visualforce Page
Visualforce and Apex In Action
C# Raster - Raster Conversion & Rendering in C#.NET
add links to pdf in preview; clickable links in pdf
VB.NET Word: How to Process MS Word in VB.NET Library in .NET
Besides, here is the quick link for how to process Word document within We are dedicated to provide powerful & profession imaging controls, PDF document, image
adding hyperlinks to pdf files; add links pdf document
11. With three columns, the listing is compressed because the table is narrow. Make it wider by changing the
<apex:pageBlockSection> tag.
<apex:pageBlockSection columns="1">
This changes the section from two columns to one, letting the single column be wider.
12. Your code will look like this.
<apex:page standardController="Merchandise__c" recordSetVar="products">
<apex:pageBlock title="Our Products">
<apex:pageBlockSection columns="1">
<apex:pageBlockTable value="{!products}" var="pitem">
<apex:column headerValue="Product">
<apex:outputText value="{!pitem.Name}"/>
</apex:column>
<apex:column headerValue="Condition">
<apex:outputField value="{!pitem.Condition__c}"/>
</apex:column>
<apex:column headerValue="Price">
<apex:outputField value="{!pitem.Price__c}"/>
</apex:column>
</apex:pageBlockTable>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>
And there you have your product catalog!
Tell Me More...
The pageBlockTable component produces a table with rows, and each row is found by iterating over a list. The standard
controller you used for this page was set to Merchandise__c, and the recordSetVar to products. As a result, the
controller automatically populated the products list variable with merchandise records retrieved from the database. It’s this list that
the pageBlockTable  component uses.
• You need a way to reference the current record as you iterate over the list. The statement var="pitem" assigns a variable called
pitem that holds the record for the current row.
Using a Custom Apex Controller with a Visualforce Page
You now have a Visualforce page that displays all of your merchandise records. Instead of using the default controller, as you did in the
previous tutorial, you’re going to write the controller code yourself. Controllers typically retrieve the data to be displayed in a Visualforce
page, and contain code that will be executed in response to page actions, such as a command button being clicked.
In this lesson, you’ll convert the page from using a standard controller to using your own custom Apex controller. Writing a controller
using Apex allows you to go beyond the basic behaviors provided by the standard controller. In the next lesson you’ll expand this
controller and add some e-commerce features to change the listing into an online store.
To create the new controller class:
59
Using a Custom Apex Controller with a Visualforce Page
Visualforce and Apex In Action
VB.NET PDF: Create PDF Document Viewer in C#.NET for Document
reading PDF document in ASP.NET web, .NET Windows Forms and mobile developing applications respectively. For more information on them, just click the link and
adding a link to a pdf; add hyperlink to pdf in preview
VB.NET Word: VB Code to Create Word Mobile Viewer with .NET Doc
For the respective tutorials of these Document or Image Mobile Viewer in VB.NET prorgam, please link to see: PDF Document Mobile Viewer within VB.NET
pdf hyperlinks; add hyperlink to pdf acrobat
1. From Setup, enter Apex Classes in the Quick Find box, then select Apex Classes.
2. Click New.
3. Add the following code as the definition of the class and then click Quick Save.
public class StoreFrontController {
List<Merchandise__c> products;
public List<Merchandise__c> getProducts() {
if(products == null) {
products = [SELECT Id, Name, Description__c, Price__c FROM Merchandise__c];
}
return products;
}
}
4. Navigate back to your product catalog page at https://<your-instance>.salesforce.com/apex/Catalog,
and open the Page Editor, if it’s not already open.
5. Change the opening <apex:page> tag to link your page to your new controller class.
<apex:page controller="StoreFrontController">
Notice that the attribute name has changed from standardController to controller. You also remove the
recordSetVar attribute, because it’s only used with standard controllers.
6. Click Save to save your changes and reload the page.
The only change you should see is that the Merchandise tab is no longer selected.
7. Make the following addition to set the application tab style back to Merchandise.
<apex:page controller="StoreFrontController" tabStyle="Merchandise__c">
8. Notice that above the Page Editor tool bar there is now a StoreFrontController button. Click it to view and edit your page’s controller
code. Click Catalog to return to the Visualforce page code.
You’ll use this in the next lessons.
Tell Me More...
As in the previous lesson, the value attribute of the pageBlockTable is set to {!products}, indicating that the table
component should iterate over a list called products. Because you are using a custom controller, when Visualforce evaluates the
{!products}expression, it automatically looks for a method getProducts() in your Apex controller.
60
Using a Custom Apex Controller with a Visualforce Page
Visualforce and Apex In Action
• The StoreFrontController class does the bare minimum to provide the data required by the Visualforce catalog page. It
contains that single method, getProducts(), which queries the database and returns a list of Merchandise__c records.
• The combination of a public instance variable (here, products) with a getter method (getProducts()) to initialize and
provide access to it is a common pattern in Visualforce controllers written in Apex.
Using Inner Classes in an Apex Controller
In the last lesson, you created a custom controller for your Visualforce catalog page. But your controller passes custom objects from the
database directly to the view, which isn’t ideal. In this lesson, you’ll refactor your controller to more correctly use the MVC design pattern,
and add some additional features to your page.
1. Click StoreFrontController to edit your page’s controller code.
2. Revise the definition of the class as follows and then click Quick Save.
public class StoreFrontController {
List<DisplayMerchandise> products;
public List<DisplayMerchandise> getProducts() {
if(products == null) {
products = new List<DisplayMerchandise>();
for(Merchandise__c item : [
SELECT Id, Name, Description__c, Price__c, Total_Inventory__c
FROM Merchandise__c]) {
products.add(new DisplayMerchandise(item));
}
}
return products;
}
// Inner class to hold online store details for item
public class DisplayMerchandise {
private Merchandise__c merchandise;
public DisplayMerchandise(Merchandise__c item) {
this.merchandise = item;
}
// Properties for use in the Visualforce view
public String name {
get { return merchandise.Name; }
}
public String description {
get { return merchandise.Description__c; }
}
public Decimal price {
get { return merchandise.Price__c; }
}
public Boolean inStock {
get { return (0 < merchandise.Total_Inventory__c); }
}
public Integer qtyToBuy { get; set; }
61
Using Inner Classes in an Apex Controller
Visualforce and Apex In Action
}
}
3. Click Catalog to edit your page’s Visualforce code.
4. Change the column definitions to work with the property names of the new inner class. Replace the existing column definitions
with the following code.
<apex:column headerValue="Product">
<apex:outputText value="{!pitem.Name}"/>
</apex:column>
<apex:column headerValue="Condition">
<apex:outputText value="{!pitem.Condition}"/>
</apex:column>
<apex:column headerValue="Price">
<apex:outputText value="{!pitem.Price}"/>
</apex:column>
The outputField component works automatically with sObject fields, but doesn’t work at all with custom classes. outputText
works with any value.
5. Click Save to save your changes and reload the page.
You’ll notice that the price column is no longer formatted as currency.
6. Change the price outputText tag to the following code.
<apex:outputText value="{0,number,currency}">
<apex:param value="{!pitem.Price}"/>
</apex:outputText>
The outputText component can be used to automatically format different data types.
7. Verify that your code looks like the following and then click Save.
<apex:page controller="StoreFrontController" tabStyle="Merchandise__c">
<apex:pageBlock title="Our Products">
<apex:pageBlockSection columns="1">
<apex:pageBlockTable value="{!products}" var="pitem">
<apex:column headerValue="Product">
<apex:outputText value="{!pitem.Name}"/>
</apex:column>
<apex:column headerValue="Condition">
<apex:outputText value="{!pitem.Condition}"/>
</apex:column>
<apex:column headerValue="Price" style="text-align: right;">
<apex:outputText value="{0,number,currency}">
<apex:param value="{!pitem.Price}"/>
</apex:outputText>
</apex:column>
</apex:pageBlockTable>
</apex:pageBlockSection>
62
Using Inner Classes in an Apex Controller
Visualforce and Apex In Action
</apex:pageBlock>
</apex:page>
Your catalog page will look something like this.
Tell Me More...
The DisplayMerchandise class “wraps” the Merchandise__c type that you already have in the database, and adds new
properties and methods. The constructor lets you create a new DisplayMerchandise instance by passing in an existing
Merchandise__c record. The instance variable products is now defined as a list of DisplayMerchandise instances.
• The getProducts() method executes a query (the text within square brackets, also called a SOQL query) returning all
Merchandise__c records. It then iterates over the records returned by the query, adding them to a list of DisplayMerchandise
products, which is then returned.
Adding Action Methods to an Apex Controller
In this lesson, you’ll add action method to your controller to allow it to handle clicking a new Add to Cart button, as well as a new
method that outputs the contents of a shopping cart. You’ll see how Visualforce transparently passes data back to your controller where
it can be processed. On the Visualforce side you’ll add that button to the page, as well as form fields for shoppers to fill in.
1. Click StoreFrontController to edit your page’s controller code.
2. Add the following shopping cart code to the definition of StoreFrontController, immediately after the products
instance variable, and then click Quick Save.
List<DisplayMerchandise> shoppingCart = new List<DisplayMerchandise>();
// Action method to handle purchasing process
public PageReference addToCart() {
for(DisplayMerchandise p : products) {
if(0 < p.qtyToBuy) {
shoppingCart.add(p);
}
}
return null; // stay on the same page
}
public String getCartContents() {
if(0 == shoppingCart.size()) {
return '(empty)';
}
String msg = '<ul>\n';
for(DisplayMerchandise p : shoppingCart) {
63
Adding Action Methods to an Apex Controller
Visualforce and Apex In Action
msg += '<li>';
msg += p.name + ' (' + p.qtyToBuy + ')';
msg += '</li>\n';
}
msg += '</ul>';
return msg;
}
Now you’re ready to add a user interface for purchasing to your product catalog.
3. Click Catalog to edit your page’s Visualforce code.
4. Wrap the product catalog in a form tag, so that the page structure looks like this code.
<apex:page controller="StoreFrontController">
<apex:form>
<!-- rest of page code -->
</apex:form>
</apex:page>
The <apex:form>  component enables your page to send user-submitted data back to its controller.
5. Add a fourth column to the products listing table using this code.
<apex:column headerValue="Qty to Buy">
<apex:inputText value="{!pitem.qtyToBuy}" rendered="{! pitem.inStock}"/>
<apex:outputText value="Out of Stock" rendered="{! NOT(pitem.inStock)}"/>
</apex:column>
This column will be a form field for entering a quantity to buy, or an out-of-stock notice, based on the value of the
DisplayMerchandise.inStock() method for each product.
6. Click Save and reload the page.
There’s a new column for customers to enter a number of units to buy for each product.
7. Add a shopping cart button by placing the following code just before the </apex:pageBlock> tag.
<apex:pageBlockSection>
<apex:commandButton action="{!addToCart}" value="Add to Cart"/>
</apex:pageBlockSection>
If you click Save and try the form now, everything works…except you can’t see any effect, because the shopping cart isn’t visible.
8. Add the following code to your page, right above the terminating </apex:form> tag.
<apex:pageBlock title="Your Cart" id="shopping_cart">
<apex:outputText value="{!cartContents}" escape="false"/>
</apex:pageBlock>
9. Click Save, and give the form a try now. You should be able to add items to your shopping cart! In this case, it’s just a simple text
display. In a real-world scenario, you can imagine emailing the order, invoking a Web service, updating the database, and so on.
10. For a bonus effect, modify the code on the Add to CartcommandButton.
<apex:commandButton action="{!addToCart}" value="Add to Cart" reRender="shopping_cart"/>
If you click Save and use the form now, the shopping cart is updated via Ajax, instead of by reloading the page.
64
Adding Action Methods to an Apex Controller
Visualforce and Apex In Action
Documents you may be interested
Documents you may be interested