visualforce custom design patterns

18
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

Upload: salesforce-developers

Post on 15-Nov-2014

202 views

Category:

Technology


0 download

DESCRIPTION

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.

TRANSCRIPT

Page 1: Visualforce Custom Design Patterns

Visualforce Custom Design PatternsVisualforce Custom Design PatternsBuilding Productive Visualforce Pages

Amy Larion, Yahoo! Inc, Product Manager

Amy Larion

Jay Jayakumaran, Yahoo! Inc, Senior Developer

@jsksjsu

Jay Jayakumaran

Page 2: Visualforce Custom Design Patterns

Safe harborSafe 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.

Page 3: Visualforce Custom Design Patterns

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

Page 4: Visualforce Custom Design Patterns

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.

Page 5: Visualforce Custom Design Patterns

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• Support Bulk CRUD operations wherever possible

• Create Parent Children Grand Children in one Save Button click

• 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

Page 6: Visualforce Custom Design Patterns

Conventional User Navigation in SFDC

Innovation using Visualforce

Only one Page- (Parent, Children, and Grand Children CRUD)

Page 7: Visualforce Custom Design Patterns

Why Build Visualforce Pages ?

Page 8: Visualforce Custom Design Patterns

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

DEMOChild Object details

Parent Object details

Page 9: Visualforce Custom Design Patterns

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

DEMOParent

Child

Grand Child

Page 10: Visualforce Custom Design Patterns

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

Page 11: Visualforce Custom Design Patterns

Enhanced Related Lists Pattern (User Productivity)

Mass Edit Related Lists• Bulk Edit the children records by staying on the Parent record’s View page

• No limit on the number of columns to be displayed

• Sort enabled on all columns

• Pagination provided using Standard Set Controller

• DEMO

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

Bulk Editable Related Lists

Left Panel Right Panel

Page 12: Visualforce Custom Design Patterns

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

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

Standard Vanilla Page

Visualforce Page

Page 13: Visualforce Custom Design Patterns

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

Page 14: Visualforce Custom Design Patterns

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

DEMOTabs optimize the real estate

Page 15: Visualforce Custom Design Patterns

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

Page 16: Visualforce Custom Design Patterns

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

Page 17: Visualforce Custom Design Patterns
Page 18: Visualforce Custom Design Patterns