1. Fahd Shaaban, Director Of Professional Services
Component Library
Fahd Shaaban, Director Of Professional Services

2.     Component Library Agenda Overview Component Library Overview
Welcome to the CrownPeak Component Library Agenda Overview
Component Library Overview 
Demo and Walkthru 
Metrics and Summary 
Your Feedback 

3. Component
Library
Overview

4. What is the Component Library?
- Overview
What is the Component Library?
The Component Library is a CrownPeak Extension and Approach that provides
A process to define re-usable template components containing approved and repeatable front-end “patterns” (HTML/CSS/JS)
The corresponding CMS logic necessary to drive
The authoring experience, which includes content capture, and content validation
Content Rendering

5. You should consider the Component Library if…
- Overview
You should consider the Component Library if…
The front-end creative is highly structured and organized
Preferably if the front-end is based on a Pattern Library
The front-end uses patterns that are re-usable within various unique page types
If you want to re-use CMS template configurations within other templates
Input configuration
Post Input configuration
Output configuration

6. We all know how templates work …
Component library
- Overview
We all know how templates work …
Template
Authoring Experience
Input
Content Rendering
Output
Content Validation
Post Input
Assets / Widgets
Assets
Content Storage
Permission
Workflow
Publishing

7. Widgets are assets: The way they are used makes them Widgets
Component library
- Overview
Widgets are assets: The way they are used makes them Widgets
Asset
Widget +
Embeded
Consumed

8. When does utilizing Widget make sense, and when does it not?
Component library
- Overview
When does utilizing Widget make sense, and when does it not?

9. Can we widget-ize templates?
Component library
- Overview
Can we widget-ize templates?
Template
Component +
Include X

10. Input Output Post Input Template 1 2 3 How do we widget-ize templates?
Component library
- Overview
Template 1 2 3
How do we widget-ize templates?
Calls methods to add input controls to capture content
Input
Calls methods to render content and presentation
Output
Calls methods to validate or manipulate content
Post Input
Library Files 1 2 3 2
Input method
Post input method
Output method

11. Let us examine a sample pattern
Component library
- Overview
Let us examine a sample pattern
<img class=”logo" src=" alt=”description”>
<img class=”logo" src=” alt=”description”>
<img class=”logo" src=” alt=”description”>
Basic Pattern
= Image Control
+ Text Control

12. Content authoring (Input)
Component library
- Overview
Content authoring (Input)
public static void logo_input(String label, String name) {
ShowAcquireParams img= new ShowAcquireParams();
img.ShowBrowse = true;
img.ShowUpload = true;
img.Extensions = Util.MakeList("jpg", "jpeg", "gif", "png");
Input.ShowAcquireImage(label, name + “_src”, img);
Input.ShowTextBox(label + “ Description", name + ”_alt"); }

13. Content validation (Post Input)
Component library
- Overview
Content validation (Post Input)
public static void logo_postinput(PostInputContext context, String name) {
if (String.IsNullOrEmpty(context.InputForm[name + “_alt"]))
context.ValidationErrorFields.Add(name + “_alt", ”description"); }

14. Content rendering (Output)
Component library
- Overview
Content rendering (Output)
public static void logo (Asset asset, String name) {
Out.Write(“<img class=\”logo\" src=\””+asset[name + “_src”]+ " alt=\”+asset[name + “_alt”]+”\”>”; }

15. Define the pattern as a Component Asset with one content field: Markup
Component library
- Overview
Define the pattern as a Component Asset with one content field: Markup
<img class=”logo" src=”{src}" alt=”{alt}”>
<img class=”logo" src=" alt=”description”>

16. Content Rendering… the better way
Component library
- Overview
Content Rendering… the better way
Markup in logo component: <img class=”logo" src=”{src}" alt=”{alt}”>
public static String logo(Asset asset) {
Asset pattern = Asset.Load("/atoms/logo");
StringBuilder sbContent = new StringBuilder();
sbContent.Append(pattern.Raw["markup"]);
sbContent.Replace(”{src}”, asset[name+“_src”]);
sbContent.Replace(”{alt}", asset[name+“_alt"]);
return sbContent.ToString(); }

17. Variable Substitution
Component library
- Overview
Variable Substitution
Link Pattern
Links List Pattern
<a href=“#”>lorem ipsum</a>
<ul class=“nav-list”>
<li><a href=“#”>lorem ipsum</a></li>
</ul>
Link Component
<a href=”{href}”>{label}</a>
Links List Component
<ul class=“nav-list”>
[nav-list:<li>{link}</li>]
</ul>

18. Component Library
Demo

19. In conclusion

20. Metrics from recent implementation
Component library
- Metrics
Metrics from recent implementation
17 templates: 15 are component based widgets
45 Components: 70% used more than once
Average time to configure1 a component: 30 minutes
Average time to configure1 a component-based template: 15 minutes
QA was reduced by 30%
Additional time (10-20%) should be allotted for learning curve

21. Summary of Benefits - Review
Component library
- Review
Summary of Benefits
Support for structured, pattern-based, agile Front-End Development, that enjoys pattern re-use
ability to begin CMS implementation as components are approved
QA of components is simpler and faster
Maintenance is easier: Update re-usable component once, instead of in every template the pattern is used
The presentation is branch-able and workflow-able
Components can co-exist with traditional templates
Class / Method Versioning approaches

22. Before we go…
Your Feedback 

23. We are here to hear your ideas and requests.
PARTNER SUMMIT
- FEEDBACK
We want your feedback!
We are here to hear your ideas and requests.
You have our ear - here at the conference, through support, through Connect.
We want to open a dialogue that starts here and continues well beyond
So please share your feedback cos we are always looking for ways to improve our product.
Product improvements come from 3 channels-
Product Management
Innovations from Customer Success team-
And of course Feedback and contributions from Developers like you
Through conversation at the conference or by posting on Connect
Product Management
Customer Success
Community Feedback
Developers

24. Twitter Forums on Connect - FEEDBACK Template development
PARTNER SUMMIT
- FEEDBACK
Twitter
@CrownPeak
#CrownPeakPartners
For ongoing discussions with the CrownPeak community on
Template development
User & Developer Experience
Solutions and Extensions
Product features & roadmap
Hosting & Publishing
Integrations
Forums on Connect
Twitter hashtag and QR Code
<a href=" class="twitter-hashtag-button" data-related="CrownPeakHelp,CrownPeak">Tweet #CrownPeakPartners</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^ 'script', 'twitter-wjs');</script>
<img src=" d=https%3A%2F%2Ftwitter.com%2Fintent%2Ftweet%3Fbutton_hashtag%3DCrownPeakPartners" alt="QRCode"/>
Forums QR code
<img src=" alt="QRCode"/>

25.     Access to Customer Success and Product Teams - FEEDBACK
PARTNER SUMMIT
- FEEDBACK
Access to Customer Success and Product Teams
You have access the Product and Customer Success teams to give direct feedback on features and best practices
Meet the team during the presentations and Q&A sessions
Make suggestions – we are capturing it. Team members are armed with Post-its!
Ask questions – We want to start a conversation that last well beyond the summit
Any Questions? 
MEET THE TEAM 
MAKE
SUGGESTIONS 
ASK QUESTIONS 
Partners and Developers

26. Partners and Developers
PARTNER SUMMIT
- FEEDBACK
FEEDBACK? 
Partners and Developers