Display Fields
If you want to selectively determine a record’s fields for display, use the <apex:outputField> component. This component,
when embedded in the <apex:pageBlock> component, displays not only the value of the field, but also the field’s label.
1. Insert the following into your page to see it in action:
<apex:pageBlock title="Custom Output">
<apex:pageBlockSection title="Custom Section Title">
<apex:outputField value="{!account.Name}"/>
<apex:outputField value="{!account.Owner.Name}"/>
</apex:pageBlockSection>
</apex:pageBlock>
Here, account.Name specifies the current account record’s name field, whereas account.Owner.Name looks at the owner
field of the account record, and then retrieves that record’s name field.
Display a Table
In the previous lessons, you displayed individual fields and a complete record. Sometimes however, you need to display a set of fields
across a number of records—for example, the list of contacts associated with the account. In this step you will list the contacts of an
account record by iterating over the list and displaying each one individually. It may seem complex initially because there are multiple
tags that nest within each other, but you will find it second nature in no time. Don’t forget you can always click the Component
Reference link to learn more about each.
1. First start by adding an <apex:pageBlock> component:
<apex:pageBlock title="My Account Contacts">
</apex:pageBlock>
2. You can save and view the result if you like. Now within this component, insert another one, the <apex:pageBlockTable>
component:
<apex:pageBlockTable value="{! account.contacts}" var="item">
</apex:pageBlockTable>
You can think of this component as doing the following: it takes a look at its value attribute, and retrieves the list of records that
it finds there. In this case, it retrieves the contacts field that represents the list of Contact records associated with the current
Account record. Then, for each individual Contact record, it assigns it to a variable called item. It does this repeatedly until it reaches
the end of the list. The key lies in the body of the component. This will be output at each iteration—effectively allowing you to
produce something for each individual record.
3. Ideally, you want to insert something inside of the <apex:pageBlockTable> component that does something with the
current item. Try adding this:
<apex:column value="{! item.name}"/>
15
Display Fields
Introduction to Visualforce
Pdf links - 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
accessible links in pdf; check links in pdf
Pdf links - 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
pdf email link; clickable links in pdf files
The <apex:column> component creates a new column within the table. It adds a table header based on the name of the field,
and also outputs the values for that field in the rows of the table, one row per record. In this case, you have specified {!
item.name}, which will show the name field for each of the Account’s Contacts.
Here’s what your final code looks like:
<apex:pageBlock title="My Account Contacts">
<apex:pageBlockTable value="{! account.contacts}" var="item">
<apex:column value="{! item.name}"/>
</apex:pageBlockTable>
</apex:pageBlock>
Contact records also have a field called phone. Try adding a column to display the phone numbers. Of course, if you don’t have any
contacts associated with the account that you’re viewing, or if you haven’t supplied an account ID, then it won’t display anything.
Summary
The <apex:detail> and <apex:relatedList> components make it tremendously easy to display records and related lists
by utilizing the standard controller to automatically retrieve the record’s data. The <apex:pageBlockTable> component provides
a way to iterate over a list of records, producing output for each record in the list.
Learning More
Use <apex:facet> to customize the caption, headers and footers of a table.
• The <apex:enhancedList> and <apex:listViews> components provide a way to embed a standard list view of an
object’s records.
Updating Visualforce Pages with Ajax
Visualforce lets you use Ajax effects, such as partial page updates, without requiring you to implement any complex JavaScript logic.
The key element is identifying what needs to be dynamically updated, and then using the rerender attribute to dynamically update
that region of the page.
Identify a Region for Dynamic Updates
A common technique when using Ajax in Visualforce is to group and identify the region to be dynamically updated. The
<apex:outputPanel> component is often used for this, together with an id attribute for identifying the region.
1. Create a Visualforce page called Dynamic, using the following body:
<apex:page standardController="Account">
<apex:pageBlock title="{!account.name}">
<apex:outputPanel id="contactDetails">
16
Summary
Introduction to Visualforce
C# PDF Convert to HTML SDK: Convert PDF to html files in C#.net
Embed zoom setting (fit page, fit width). Turn PDF form data to HTML form. Export PDF images to HTML images. Embed PDF hyperlinks to HTML links.
add a link to a pdf in acrobat; pdf link open in new window
C# Image: Tutorial for Document Management Using C#.NET Imaging
more detailed C# tutorials on each part by following the links respectively are dedicated to provide powerful & profession imaging controls, PDF document, image
convert a word document to pdf with hyperlinks; adding hyperlinks to pdf
<apex:detail subject="{!$CurrentPage.parameters.cid}"
relatedList="false" title="false"/>
</apex:outputPanel>
</apex:pageBlock>
</apex:page>
2. Ensure that your Visualforce page is called with an identifier for a valid account.
Your Visualforce page won’t show much at all except for the account name. Note that the <apex:outputPanel> has been given
an identifier named contactDetails. Also note that the <apex:detail> component has a subject attribute specified.
This attribute is expected to be the identifier of the record whose details you want to display. The expression
{! $CurrentPage.parameters.cid} returns the cid parameter passed to the page. Since you’re not yet passing in such
a parameter, nothing is rendered.
Add Dynamic Re-Rendering
Now you need to add elements to the page that set the page parameter and dynamically render the region you’ve named detail:
1. Modify your page by adding a new page block beneath your current one:
<apex:pageBlock title="Contacts">
<apex:form>
<apex:dataList value="{! account.Contacts}" var="contact">
{! contact.Name}
</apex:dataList>
</apex:form>
</apex:pageBlock>
This iterates over the list of contacts associated with the account, creating a list that has the name of each contact.
2. Click Save.
If you access your page, you’ll see the list of contacts. Now you need to make each contact name clickable.
3. Modify the {! contact.Name} expression by wrapping it in an <apex:commandLink> component:
<apex:commandLink rerender="contactDetails">
{! contact.Name}
<apex:param name="cid" value="{! contact.id}"/>
</apex:commandLink>
There are two important things about this component. First, it uses a rerender="contactDetails" attribute to reference the
output panel you created earlier. This tells Visualforce to do a partial page update of that region when the name of the contact is clicked.
Second, it uses the <apex:param> component to pass a parameter, in this case the id of the contact.
If you click any of the contacts, the page dynamically updates that contact, displaying its details, without refreshing the entire page.
Summary
Visualforce provides native support for Ajax partial page updates. The key is to identify a region, and then use the rerender attribute
to ensure that the region is dynamically updated.
17
Add Dynamic Re-Rendering
Introduction to Visualforce
.NET PDF Document Viewing, Annotation, Conversion & Processing
PDF Write. Insert text, text box into PDF. Edit, delete text from PDF. Insert images into PDF. Edit, remove images from PDF. Add, edit, delete links. Form Process
add url pdf; adding hyperlinks to a pdf
VB.NET PDF Convert to HTML SDK: Convert PDF to html files in vb.
Turn PDF images to HTML images in VB.NET. Embed PDF hyperlinks to HTML links in VB.NET. Available zoom setting (fit page, fit width).
adding a link to a pdf; add email link to pdf
Learning More
There’s a lot more to the Ajax and JavaScript support:
• <apex:actionStatus> lets you display the status of an Ajax request—displaying different values depending on whether it’s
in-progress or completed.
• <apex:actionSupport> lets you specify the user behavior that triggers an Ajax action for a component. Instead of waiting
for an <apex:commandLink> component to be clicked, for example, the Ajax action can be triggered by a simple mouse
rollover of a label.
• <apex:actionPoller> specifies a timer that sends an Ajax update request to Force.com according to a time interval that you
specify.
• <apex:actionFunction> provides support for invoking controller action methods directly from JavaScript code using an
Ajax request.
• <apex:actionRegion> demarcates the components processed by Force.com when generating an Ajax request.
Overriding and Pointing to Pages
Using Visualforce, you can override pretty much any aspect of the user interface, such as buttons, tabs, or links.
In this tutorial, you’ll explore how to use Visualforce pages that you’ve created to replace standard Salesforce behavior.
Override the Standard Display for a Page
The Visualforce page you created in Using Standard Controllers can function as a replacement to the standard detail page for an account.
You can modify the standard user interface generated by the platform to ensure that your page gets shown instead of the standard
page.
1. From the object management settings for accounts, go to Buttons, Links, and Actions.
2. Click Edit next to the View item.
3. For Override With, select Visualforce Page.
4. From the Visualforce Page drop-down list, select accountDisplay.
5. Click Save.
To see this in action, select the Accounts tab and then choose an account. Your page displays instead of the default. You’ve successfully
configured the platform to automatically pass in that ID parameter to your page.
18
Overriding and Pointing to Pages
Introduction to Visualforce
C# PDF Convert to Word SDK: Convert PDF to Word library in C#.net
keeps the elements (like images, tables and chats) of original PDF file and maintains the original text style (including font, size, color, links and boldness
c# read pdf from url; pdf hyperlinks
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 a link to a pdf; pdf link to attached file
6. Follow the same procedure to reverse the override, so you can view the default page on the next lesson.
Embed a Page on a Standard Layout
Another way to get your page displayed is to embed it within a standard layout for another page. For example, imagine your
accountDisplay showed an interesting analysis of the account data, and you wanted to embed it within the standard account
detail view.
1. From the object management settings for accounts, go to Page Layouts.
2. Click Edit next to Account Layout.
3. Select Visualforce Pages in the left column of the user interface elements palette.
4. You’ll notice your page appears here (because it uses the Accounts standard controller).
5. Select accountDisplay, and drag it to the Account Information panel.
6. Click Save.
7. To see this in action, select the Accounts tab and then choose an account. You’ll notice the standard display of data, with your
Visualforce page embedded within it! Your embedded page ideally needs to accommodate the inline display, so it might look a little
plain right now, but notice how the embedded page automatically shows data of the same record—it’s also being passed the ID
parameter.
Create a Button that Links to a Visualforce Page
Pages like the standard account detail page have buttons, such as Edit and Delete. You can add a new button here that links to your
page.
1. From the object management settings for accounts, go to Buttons, Links, and Actions.
2. Click New Button or Link.
3. Enter MyButton for the Label.
4. Enter My_Button for the Name.
5. For the Display Type, select Detail Page Button.
6. Select Visualforce Page in the Content Source picklist.
7. In the Content picklist that appears, select your accountDisplay page.
8. Click Save.
19
Embed a Page on a Standard Layout
Introduction to Visualforce
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.
add links to pdf document; clickable links in pdf from word
C# Create PDF Library SDK to convert PDF from other file formats
file. Create and save editable PDF with a blank page, bookmarks, links, signatures, etc. Create fillable PDF document with fields.
add hyperlink to pdf in; pdf link
9. Now that you have your button, you need to add it to a page layout. Repeat the process from Embed a Page on a Standard Layout
but, instead of selecting a Visualforce page, add a button, and select MyButton.
Note:  Depending on your browser settings, you might get a privacy warning—allow your browser to load pages from the
Visualforce domain to avoid these warnings.
You can use a similar procedure to create a link instead of a button, and you can add many buttons and links to standard and custom
pages to create just the right navigation and user interface for your app.
Create Hyperlinks to URLs or Other Visualforce Pages
You might want to point from one Visualforce page to another, or to an external URL.
1. Modify your Visualforce page to include the <apex:outputlink> component to produce a link:
<apex:outputLink value="http://developer.salesforce.com/">Click me!</apex:outputLink>
2. To reference a page, use the expression {! $Page.pagename} to determine its URL.
3. You can then include a link as follows:
<apex:outputLink value="{! $Page.AccountDisplay}">I am me!</apex:outputLink>
You can think of $Page as a global object that has a field for every page you’ve created.
Summary
Once you’ve created your Visualforce page, there are many ways to view it. You can just enter its URL, but you can also make it replace
one of the automatically-generated pages, embed it within an existing page layout, or create buttons and hyperlinks that link to it.
Learning More
• Visualforce pages can also be viewed on public-facing web sites by using Force.com Sites. See the Force.com Workbook for an
example.
20
Create Hyperlinks to URLs or Other Visualforce Pages
Introduction to Visualforce
• Sometimes you want to embed links to default actions, such as creating a new Account. Use the <apex:outputLink>
component together with URLFOR() and the $Action global variable. For example:
<apex:outputLink value="{! URLFOR($Action.Account.new)}">Create</apex:outputLink>
Inputting Data with Forms
In this tutorial you learn how to create input screens using the standard controller, which provides record save and update functionality
out of the box. This introduces you to the major input capabilities and their container—the <apex:form> component. Creating and
Using Custom Controllers extends this and shows how to build forms that interact with your own controllers.
Create a Basic Form
The key to any data input is using a form. In this lesson you’ll create the most basic form.
1. Create a new Visualforce page called MyForm, which uses a standard controller for the Account object.
<apex:page standardController="Account">
</apex:page>
2. Insert an <apex:form> component, into which all your input fields will be placed:
<apex:form>
</apex:form>
3. Within the form, add an input field for the name field of an account, as well as command button that saves the form when clicked:
<apex:inputField value="{! account.name}"/>
<apex:commandButton action="{! save}" value="Save!"/>
This form, although very basic, contains all the essential elements: a form, an input field, and a button that processes the form:
In this case, you use a <apex:commandButton> which produces a button. Note that the action element is bound to {! save}.
This expression language syntax looks similar to the syntax you used to specify a field in a record. However, in this context, it references
a method—a piece of code named save. Every standard controller automatically supplies a save() method—as well as update()
and other methods—so in this case, the save() method on the standard controller is invoked when the button is clicked.
If you enter a value and click Save, the values of the input fields are bound to like-named field values in a new record, and that record
is inserted. In other words, the <apex:inputField> component produces an input field for the name field of a new account
record, and when you click Save, ensures that the value you entered is automatically saved to that field.
After you click Save, the platform displays the newly-created record. Return to your Visualforce page by entering its URL, which will look
something like https://na6.salesforce.com/apex/MyForm.
21
Inputting Data with Forms
Introduction to Visualforce
Show Field Labels
Visualforce does a lot of work behind the scenes, binding the input field to a field on a new record. It can do more, such as automatically
showing the field label (much like <apex:outputField> in Using Standard User Interface Components), as well as automatically
changing the input element to match the data type (for example, showing a picklist instead of an input box).
Modify the contents of the <apex:form> element so that it reads as follows:
<apex:form>
<apex:pageBlock>
<apex:pageBlockSection>
<apex:inputField value="{!account.name}"/>
<apex:inputField value="{!account.industry}"/>
<apex:commandButton action="{!save}" value="Save!"/>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
By encapsulating the input fields within <apex:pageBlock> and <apex:pageBlockSection> components, Visualforce
automatically inserts field labels (“Account Name”, “Industry”) as well as indicators of whether values are required for the fields, all using
the platform styles.
Display Warning and Error Messages
The <apex:pageMessages> component displays all information, warning or error messages that were generated for all components
on the current page. In the previous form, the account name was a required field. To ensure that a standard error message is displayed
if someone tries to submit the form without supplying an account name, do the following:
1. Update your page by inserting the following line after the <apex:pageBlock> tag:
<apex:pageMessages/>
2. Now click Save on the form. An error panel will be displayed:
Summary
Visualforce’s standard controllers contain methods that make it easy to save and update records. By using the <apex:form> and
<apex:inputField> components, you can easily bind input fields to new records using the standard controllers. The user interface
automatically produces input components that match the type of the field—for example displaying a calendar input for a Data type
22
Show Field Labels
Introduction to Visualforce
field. The <apex:pageMessages> component can be used to group and display the information, warning and error messages
across all components in the page.
Learning More
• You can use the <apex:commandLink> instead of the <apex:commandButton> component within a form to provide a
link for form processing.
• Use the quicksave() method instead of the save() method to insert or update an existing record without redirecting the
user to the new record.
• Use the <apex:pageBlockButtons> component to place command buttons when using the <apex:pageBlock>
component.
• Use the <apex:pageMessage> component (the singular, not the plural) to create custom messages.
Reusing Pages with Templates
Many web sites have a design element that appears on every page, for example a banner or sidebar. You can duplicate this effect in
Visualforce by creating a skeleton template that allows other Visualforce pages to implement different content within the same standard
structure. Each page that uses the template can substitute different content for the placeholders within the template.
Create a Template
Templates are Visualforce pages containing special tags that designate placeholder text insertion positions. In this lesson you create a
simple template page that uses the <apex:insert> component to specify the position of placeholder text.
1. Create a new Visualforce page called BasicTemplate.
2. Use the following as the body of the page:
<apex:page>
<h1>My Fancy Site</h1>
<apex:insert name="body"/>
</apex:page>
The key here is the <apex:insert> component. You won’t visit this page (unless developing it) directly. Rather, create another
Visualforce page that embeds this template, inserting different values for each of the <apex:insert> components. Note that each
such component is named. In the above template, you have a single insert position named body. You can have dozens of such positions.
Use a Template with Another Page
You can now embed the template in a new page, filling in the blanks as you go.
1. Create a new Visualforce page called MainPage.
2. Within the page, add the following markup:
<apex:page sidebar="false" showHeader="false">
<apex:composition template="BasicTemplate">
<apex:define name="body">
<p>This is a simple page demonstrating that this
text is substituted, and that a banner is created.</p>
</apex:define>
23
Reusing Pages with Templates
Introduction to Visualforce
</apex:composition>
</apex:page>
The <apex:composition> component fetches the Visualforce template page you created earlier, and the <apex:define>
component fills the named holes in that template. You can create multiple pages that use the same component, and just vary the
placeholder text.
Include One Visualforce Page within Another
Another way to include content from one page into another is to use the <apex:include> component. This lets you duplicate the
entire contents of another page, without providing any opportunity to make any changes as you did with the templates.
1. Create a new Visualforce page called EmbedsAnother.
2. Use the following markup in the page:
<apex:page sidebar="false" showHeader="false">
<p>Test Before</p>
<apex:include pageName="MainPage"/>
<p>Test After</p>
</apex:page>
Your original MainPage will be inserted verbatim.
Summary
Templates are a nice way to encapsulate page elements that need to be reused across several Visualforce pages. Visualforce pages just
need to embed the template and define the content for the placeholders within the template. The <apex:include> component
provides a simpler way of embedding one page within another.
24
Include One Visualforce Page within Another
Introduction to Visualforce
Documents you may be interested
Documents you may be interested