Visualforce Custom Design Patterns

  • View

  • Download

Embed Size (px)


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

Text of Visualforce Custom Design 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, 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 products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of, 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., 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 actionsMaximize User Productivity Create Parent Children Grand Children in one Save Button clickSupport Bulk CRUD operations wherever possible Reduce the number of Button ClicksEasier Navigation Try to keep the user on the same page as much as possibleReduce the number of page navigationsUse Child window pop ups in place of a new page 6. Conventional User Navigation in SFDCInnovation 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 SAVEGenerally used to facilitate complex business requirementsInsert Parent first and then children to associate themUse SavePoints, try catch blocks, Database methods, and Rollbacks in complex bulk operationsDEMO Child Object detailsParent 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 pageUsed generally in the Parent record Detail/View pageAchieved through Radio Button related lists or Expand Collapse patternDEMO ParentChildGrand Child 10. Child Window Pattern (User Navigation) Easy to create Children and Grand Children records using child windows rather down drilling down to new pagesOn closing the child window, refresh the parent windowDEMOParent WindowChild Window 11. Enhanced Related Lists Pattern (User Productivity) Mass Edit Related Lists No limit on the number of columns to be displayedSort enabled on all columnsPagination provided using Standard Set ControllerBulk Edit the children records by staying on the Parent records View pageDEMOBulk Editable Related ListsLeft - Right Panels Show related list records in the left panelDo Read, Edit, and Delete on the right panel by selecting a record in the left panelDEMOLeft PanelRight 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 VFAssign 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 WizardOverrides the sObject New, Edit, View, and Clone links/buttonsDEMOStandard Vanilla Page User Clicks the sObject CRUD ButtonProxy 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 fieldsEasy to fill the form detailsDecreases the real estate of the form sizeCan skip the record type selection pageDEMOShow/hide the form sections based on the value 14. Tab Pattern (Optimize Form Real Estate) Easy to fill the form detailsDecreases the real estate of the form sizeSupports Bulk CRUD operation easilyDEMOTabs 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 listsDEMO 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/VisualforceSpend less time in analyzing and researchingApplying multiple patterns in single page results in productive UI and easier navigationCode Reusability