visualforce custom design patterns
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
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
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.
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
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.
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
Conventional User Navigation in SFDC
Innovation using Visualforce
Only one Page- (Parent, Children, and Grand Children CRUD)
Why Build Visualforce Pages ?
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
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
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
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
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
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
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
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
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