Join us to learn about Custom Visualforce Design Patterns built in-house and used by Yahoo! Inc. Sales Cloud to support Partnerships revenue. In standard salesforce.com pages, doing CRUD and any other complex tasks on the Grand Children records from the Parent Detail Page can be extremely painful as we have to drill down from one page to another, and any new Sales user can get lost in the navigation. We'll share several custom Visualforce patterns that help solve such inefficiencies and keep navigations simple. Along the way, we'll also discuss some cool tricks used in these patterns.

1. Visualforce Custom Design Patterns
Building Productive Visualforce Pages
Amy Larion, Yahoo! Inc, Product Manager
Amy Larion
Jay Jayakumaran, Yahoo! Inc, Senior Developer
@jsksjsu
Jay Jayakumaran

2. Safe harbor
Safe harbor statement under the Private Securities Litigation Reform Act of 1995:
This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties
materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results
expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be
deemed forward-looking, including any projections of product or service availability, subscriber growth, earnings, revenues, or other
financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any
statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services.
The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new
functionality for our service, new products and services, our new business model, our past operating losses, possible fluctuations in our
operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of any
litigation, risks associated with completed and any possible mergers and acquisitions, the immature market in which we operate, our
relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our
service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and selling to
larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is
included in our annual report on Form 10-K for the most recent fiscal year and in our quarterly report on Form 10-Q for the most recent
fiscal quarter. These documents and others containing important disclosures are available on the SEC Filings section of the Investor
Information section of our Web site.
Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently
available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions
based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these
forward-looking statements.

3. Agenda - Visualforce Custom Design Patterns
 Bulk CRUD Pattern
 Grand Children Pattern
 Child Window Pattern
 Enhanced Related Lists Pattern
 Proxy Page Pattern
 Show/Hide Pattern
 Tab Based Pattern
 Generic Component Pattern

4. Yahoo! Partnerships CRM

Manage information about Yahoo! Partners for Business Development, Legal, Finance, and Corporate
Development teams.

Parent  Children  Grand Children Relationships and bulk CRUD (Create, Read, Update, and
Delete) transactions.

Custom sObjects and Visualforce pages due to business needs on complex revenue share
partnerships.

5. Our approach towards SFDC CRUD User Interface

Dynamic UI ( AJAX)
•
•

Dynamic Create, Update, and Delete without page Refresh
Show and Hide components based on user actions
Maximize User Productivity
•
•
Create Parent  Children  Grand Children in one Save Button click
•

Support Bulk CRUD operations wherever possible
Reduce the number of Button Clicks
Easier Navigation
•
Try to keep the user on the same page as much as possible
•
Reduce the number of page navigations
•
Use Child window pop ups in place of a new page

6. Conventional User Navigation in SFDC
Innovation using Visualforce
Only one Page- (Parent, Children, and Grand Children CRUD)

7. Why Build Visualforce Pages ?

8. Bulk CRUD Pattern (User Productivity)

Create Parent  Children  Grand Children records in one SAVE

Generally used to facilitate complex business requirements

Insert Parent first and then children to associate them

Use SavePoints, try catch blocks, Database methods, and Rollbacks in complex bulk operations

DEMO
Child Object details
Parent Object
details

9. Grand Children Pattern (User Navigation)

In Standard SFDC, drilling down on the Grand Children records from the parent record requires 3
pages.

Accommodate the CRUD of children and Grand Children records in just one page

Used generally in the Parent record Detail/View page

Achieved through Radio Button related lists or Expand Collapse pattern

DEMO
Parent
Child
Grand Child

10. Child Window Pattern (User Navigation)

Easy to create Children and Grand Children records using child windows rather down
drilling down to new pages

On closing the child window, refresh the parent window

DEMO
Parent Window
Child Window

11. Enhanced Related Lists Pattern (User Productivity)

Mass Edit Related Lists
•
•
No limit on the number of columns to be displayed
•
Sort enabled on all columns
•
Pagination provided using Standard Set Controller
•

Bulk Edit the children records by staying on the Parent record’s View page
DEMO
Bulk Editable Related Lists
Left - Right Panels
•
Show related list records in the left panel
•
Do Read, Edit, and Delete on the right panel by selecting a record in the left panel
•
DEMO
Left Panel
Right Panel

12. Proxy Page Pattern (Assign VF pages to a Record Type)

Used as Router VF Pages for New, Edit, View and Clone, and other miscellaneous purposes in VF

Assign Standard Vanilla and VF Pages for different record Types since SFDC does not have the ability
to assign a VF page to a Record Type in the Profile/ Record Type/ Page Layout Assignment Wizard

Overrides the sObject New, Edit, View, and Clone links/buttons

DEMO
Standard Vanilla
Page
User Clicks the
sObject CRUD
Button
Proxy VF Code
Determines the Logged In
User Profile/ Record Type
assigned and routes to
either Standard or VF Page
Visualforce Page

13. Show/Hide Pattern (Action based UI)

Dynamically show/hide section/fields in a form based on one/many fields

Easy to fill the form details

Decreases the real estate of the form size

Can skip the record type selection page

DEMO
Show/hide the form sections based on the value

14. Tab Pattern (Optimize Form Real Estate)

Easy to fill the form details

Decreases the real estate of the form size

Supports Bulk CRUD operation easily

DEMO
Tabs optimize the real estate

15. Generic Component Pattern (Code Reusability)

Instead of Coding different VF pages and Apex classes for each object, code only one generic
component which can be reused for all the objects.

Example: Building Audit trail related lists or mass editable related lists

<c:GenericHistoryComponent myObject="{!Contract}"/>

DEMO
Generic Audit trail component

16. Benefits of Visualforce UI Patterns

Helps to solve complex Business problems (both DB level and UI level) more quickly using
Apex/Visualforce

Spend less time in analyzing and researching

Applying multiple patterns in single page results in productive UI and easier navigation

Code Reusability