EXTENDING COMPONENTS AND TABLE TRANSFORMATIONS WITH XSL ROBERT KIFFE| OMNIUPDATE

Agenda What’s the Problem? Introducing Components Table Transformations XSL Concepts Review 3-Step Strategy Hands-On Q&A

What’s the Problem Some design elements are too difficult to maintain directly in the WYSIWYG Example (from getbootstrap.com):

Introducing Components SOLUTION #1 Components provide a form-based method for entering content Produce complex HTML output without special scripts

Table Transformations SOLUTION #2 Tables provide a form-like method for storing content Tables are a robust element in the WYSIWYG and content reorganization is fairly easy Requires XSL to transform content into desired HTML output

Table Configurations Recreate a form Mirror output design OR SOME OTHER HTML ELEMENT Recreate a form Mirror output design Unlimited entries

The Power of XSL XML Page Content XSL XSL ~ server-side language EXTENDING CAPABILITIES FOR BOTH TABLES AND COMPONENTS XSL XSL ~ server-side language Traditionally used to convert XML data into another XML data structure Now used to convert XML to HTML Global Header Section Nav XML Page Content Global Footer

XSL: Overview XSL IS COMPRISED OF THREE MAIN XSLT the XML element instructions XSLT 3.0 Documentation XPath function library and data navigation XPath 3.0 Functions XPath Path Expressions (navigation) XQuery SQL-like script language for processing data Typically not used in our implementations Function Path Expression

XSL: Apply-Templates Core functionality of XSL TRANSFORMING CONTENT IN PLACE XML Core functionality of XSL Initiated by an “Apply-Templates” instruction Iterated content is captured by “Template Rules” that match the current iteration XSL

XSL: Apply-Templates MULTIPLE MATCHES XML More than one template rule can match any given item Follows basic ruleset: ‘Mode’ attribute must match XSL import precedence ‘Priority’ attribute value (Largest value goes first) ‘Match’ expression specificity (similar to CSS) XML XSL

XSL: Apply-Templates “COPYING” EDITABLE REGIONS XML Don’t use a “Copy-Of” instruction (Deep Copy) Use “Apply-Templates” (w/ Shallow Copy) Create template rules for transforming specific content “template-matches.xsl” “snippets.xsl” XSL

3-Step Solution OR LESS! Data Structure Component Form Builder Snippet (usually a Table) Example Output Code Component Source Code (And/Or) Template Match Update #2 with data/content from #1

Let’s Go Hands-On! Travel to http://workshop[#].outc18.com/index.html Replace [#] with the number on your badge Click the DirectEdit link Log in as the level 10 user! Username: admin Password: found on your badge

THANK YOU! PLEASE SHARE YOUR FEEDBACK: WWW.SLIDO.COM #OUTC19