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

    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 

Component Library Overview

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

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

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

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

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?

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

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

Let us examine a sample pattern Component library - Overview Let us examine a sample pattern <img class=”logo" src="http://www.domain.com/image.png" alt=”description”> <img class=”logo" src=”http://www.domain.com/image.png" alt=”description”> <img class=”logo" src=”http://www.domain.com/image.png" alt=”description”> Basic Pattern = Image Control + Text Control

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"); }

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"); }

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”]+”\”>”; }

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="http://www.domain.com/image.png" alt=”description”>

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(); }

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>

Component Library Demo

In conclusion

Metrics from recent implementation Component library - Metrics Metrics from recent implementation 17 templates: 15 are component based + 2 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

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

Before we go… Your Feedback 

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

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="https://twitter.com/intent/tweet?button_hashtag=CrownPeakPartners" class="twitter-hashtag-button" data-related="CrownPeakHelp,CrownPeak">Tweet #CrownPeakPartners</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> <img src="http://qrfree.kaywa.com/?l=1&s=8& d=https%3A%2F%2Ftwitter.com%2Fintent%2Ftweet%3Fbutton_hashtag%3DCrownPeakPartners" alt="QRCode"/> Forums QR code <img src="http://qrfree.kaywa.com/?l=1&s=8&d=https%3A%2F%2Fconnect.crownpeak.com%2Fdevelopers_and_partners%2Fforums" alt="QRCode"/>

    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

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