1. EXTENDING COMPONENTS AND TABLE TRANSFORMATIONS WITH XSL
ROBERT KIFFE| OMNIUPDATE

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

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

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

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

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

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

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

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

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

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

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

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

14. THANK YOU!
PLEASE SHARE YOUR FEEDBACK: #OUTC19