1. The document discusses components and plugins in Zuora for Salesforce, which allow customizing and extending the quote to subscription workflow. 2. Components are reusable patterns that encapsulate common design patterns, while plugins are Apex classes that encapsulate custom business logic. 3. The document provides examples of out-of-the-box components and describes lab exercises for creating a basic component, advanced component, and plugin.

1. #Subscribed14 @twittername
Section 301
Templates, Components & Plugins
Advanced Concepts

2. OBJ 1:
OBJ 2:
OBJ 3:
Understand the need when to extend and add to the OOTB
Quote workflow and the benefits offered by ZQuotes
Templates, Components & Plugin functionality
Get comfortable with developing components & plugins and
enhancing Quote workflow
Objectives
Explore the Component Registration Feature in ZuoraConfig
and examples of OOTB components available

3. #Subscribed14 @twittername
Business Need For
Components &
Plugins

4. #Subscribed14 @twittername
Business Scenario - Advanced
Sales Quote Workflow
Create
Account
Create
Opp
Create Quote
• Add Custom Page as Step #2
• Extend Existing Functionality etc.
Add Products & RatePlans
• Custom Product
Selector
Submit Quote
Review Subscription
& Invoice
With a large number of variations in the quote to subscription workflow,
very often it is required to either extend existing functionality or add new
functionality to Zuora Quotes. This is where Components and Plugins in
Zuora For Salesforce comes into the picture.

5. #Subscribed14 @twittername
Understanding
Components &
Plugins

6. #Subscribed14 @twittername
Components Definition
A way to encapsulate a common design
pattern in a custom component and then
reuse that component several times in one
or more Visualforce pages.

7. #Subscribed14 @twittername
Plugins Definition
An Apex plugin is an Apex class referenced
from within a managed package via a
component at runtime. It is a method to
encapsulate your own business logic within
our existing Zuora for Salesforce Visualforce
pages.

8. #Subscribed14 @twittername
Why use Components & Plugins?
Components
They dramatically speed up development what
previously was pure Apex code by reusing successful
patterns already established in our Quotes application
Plugins
They allow custom functionality over and above what
Zuora for Salesforce provides out of the box, but in a
managed way, an example being the default values
exercise you will perform in a lab exercise.

9. #Subscribed14 @twittername
Component Registration and
Library
Zuora Provides
– A Component Registration feature if you wish to
develop your own Components and Plugins
– A library of Components and Plugins that you can
customize and use in your own Quoting
workflows

10. #Subscribed14 @twittername
Component Registration
Benefits
• Provides a central place to manage all of your custom components
and plugins
• Reduces the number of steps it previously took to use a component
or a plugin in your system
• Puts you on an upgrade path such that when we add additional
functionality to these components, you get an immediate benefit as
opposed to if you had used custom code
• It means you will take advantage for your own components of any
point and click Admin UI we decide to put on top of the components
or plugins
• It allows Zuora to isolate custom code versus product issues
occurring in your implementation much more easily

11. Components & Plugin -Architecture
Visual Force Page
Page Level Component
UI Component
UI Component
UI Component
UI Component
= Plug-In

12. #Subscribed14 @twittername
Examples of OOTB Components

13. #Subscribed14 @twittername
UI Components

14. #Subscribed14 @twittername
List Component

15. #Subscribed14 @twittername
Lookup Component

16. #Subscribed14 @twittername
Mutton (Menu + Button)
Component

17. #Subscribed14 @twittername
Page Level Components

18. #Subscribed14 @twittername
Create Quote Component

19. #Subscribed14 @twittername
Select Products Component

20. #Subscribed14 @twittername
Billing Account Component

21. #Subscribed14 @twittername
Section 301
Lab Exercises

22. #Subscribed14 @twittername
Lab Exercise 1: Basic Component
Component Code Example to develop New Subscription Quote Page

23. #Subscribed14 @twittername
Lab Steps

24. #Subscribed14 @twittername
Basic Component - Lab Exercise
Steps
1. Develop Create Quote Page using out of box CreateQuote
Component
2. Add the newly added Visualforce page to Quote Workflow
3. Create a new Quote to verify the custom page is functional

25. #Subscribed14 @twittername
Lab Step 1
Develop Custom Create Quote
Page

26. #Subscribed14 @twittername
Component Development Example
Under AppSetup – Click on Pages
Click on New to create a new Visualforce Page

27. #Subscribed14 @twittername
Component Development Example
Name the Page
<YourName>CustomQuoteCreatePage

28. #Subscribed14 @twittername
Code for the Visualforce Page
Download the code from this link:
http://bit.ly/Z4SF-Lab1

29. #Subscribed14 @twittername
Lab Step 2
Add the new Quote Page to Quote
Workflow

30. #Subscribed14 @twittername
Add the New Page to Quote
Workflow
Edit the New Subscription workflow to add your
page as step #2

31. #Subscribed14 @twittername
Lab Step 3
Create a new Quote and Verify
CreateQuote Page is working

32. #Subscribed14 @twittername
End of Lab Exercise 1

33. #Subscribed14 @twittername
Lab Exercise 2

34. #Subscribed14 @twittername
Advanced Component – Lab 2
Exercise Steps
1. Develop Custom Quote Page and Controller
2. Add the Custom Quote Page to Quote Wizard Workflow
3. Create a new Quote and Verify that the new Custom Step is
functional.

35. #Subscribed14 @twittername
Lab Exercise 2: Advanced Component
Create Custom Quote Workflow Page

36. #Subscribed14 @twittername
Adding Page for Selecting Business
Channel and Sales Region
We will be adding another custom
Visualforce page and associated Apex
Controller
Visualforce Page:
http://bit.ly/labexercise1
Apex Controller:
http://bit.ly/labexercise1-2

37. #Subscribed14 @twittername
Adding Page for Selecting Business
Channel and Sales Region
Follow the steps from the previous Visualforce page to create a new
Page and call it <YourNameCustomQuoteStep>

38. #Subscribed14 @twittername
Adding Page for Selecting Business
Channel and Sales Region
Click on AppSetup-Develop-Apex Classes-New to create a new Apex
Class and call it <YourNameApexCustomQuoteWizardStep>

39. #Subscribed14 @twittername
Add the new Step to Quote
Workflow

40. #Subscribed14 @twittername
Add the new Step to Quote
Workflow
Ensure the Quote Wizard Configuration looks similar to the
following figure

41. #Subscribed14 @twittername
Create a new Quote and Verify the
Newly Added Pages are functional
Step #3 should be selecting Business Channel and State.

42. #Subscribed14 @twittername
Other Component Examples
In the previous two examples we just scratched the
surface on what’s possible with components.
More code and examples can be found at:
https://github.com/zuora/Z-
Force/tree/master/ZDKSampleCode
&
http://knowledgecenter.zuora.com/CB_Commerce/Z
uora_for_Salesforce/E_Z-
Force_Builder/B_Component_Library

43. #Subscribed14 @twittername
Lab Exercise 3: Plugin
Zuora For Salesforce Titanium edition provides plugins for extending the functionality of
high-level components. With component registration, you can write your custom plugins
(here the "Default Value" plugin for the create quote component used in the out of box
flow) and extend the out of box default plugin used.

44. #Subscribed14 @twittername
Plugin - Lab Exercise Steps
1. Develop Apex Plugin (Code Provided)
2. Use Component Registration Feature under ZuoraConfig to
extend the CreateQuote PropertyComponent
3. Create a new Quote to verify the Default Value Plugin works

45. #Subscribed14 @twittername
Step 1- Create Apex Class
Under AppSetup – Click on Pages
Click on New to create a new Apex Class

46. #Subscribed14 @twittername
DefaultValuePlugin - Code
Download the code from here
http://bit.ly/Z4SF-Lab3

47. Lab Step 2
Use Component Registration
& Extend Default
PropertyComponent

48. #Subscribed14 @twittername
Using Component Registration
Click on ZuoraConfig Tab
Select Component Registration

49. #Subscribed14 @twittername
Extend the Default Value Plugin
Click on Edit Action for
zqu:PropertyComponent for CreateQuote

50. #Subscribed14 @twittername
Extend the Default Value Plugin
We will be extending the
PopulateValuePlugin
Enter the name of the Plugin Apex class
you created in the Class Name
Click on Update Button

51. #Subscribed14 @twittername
Lab Step 3
Create a New Quote

52. #Subscribed14 @twittername
Create a new Quote and See the
new Plugin in Action
Note the required values have default
values populated.

53. #Subscribed14 @twittername
End of Section 301