![Page 1: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/1.jpg)
Add even richer interaction to your site -
plone.patternslibPlone Conference 2016, Boston
Wolfgang Thomas
pysailor_de
pysailor
![Page 2: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/2.jpg)
Patternslib, what is it?
“A library of reusable patterns which let you create rich, dynamic and interactive prototypes or websites, without having to know or care about Javascript”
A designer / integrator adds a class to their markup, and "magic things" happen.<div class="pat-collapsible closed"> <p>Check this out</p> <p>Text that will appear on click</p> <div>
Excellent overview by JC Brand from #ploneconf2015https://www.youtube.com/watch?v=qTmkT7vFTT8
![Page 3: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/3.jpg)
Patterns & PloneMockup, part of Plone 5• Started as an early fork of Patternslib• Has some very Plone-specific patterns (Resource
registry, theme mapper)• Shares base pattern with Patternslib, still different
parser• Conflicts with some Patternslib patterns
History of Mockup and Patternslib, also by JC Brandhttps://www.youtube.com/watch?v=acuo0P5-H3Q
![Page 4: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/4.jpg)
plone.patternslib• Add-on for bringing Patternslib to Plone
• Still in an early stage, but ready to use
• Comes with some handy examples (browser views):
• @@pat-switch
• @@pat-inject
• etc
![Page 5: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/5.jpg)
ResourcesPatternslib
• URL: http://patternslib.com/
• The core package
• Can be used outside of Plone, too. Think: github pages and jekyll...
![Page 6: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/6.jpg)
Resourcesplone.patternslib
• URL: https://github.com/plone/plone.patternslib
• Integration of most Patterns into Plone
![Page 7: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/7.jpg)
ResourcesMockup
• URL: http://plone.github.io/mockup
• Part of Plone 5
![Page 8: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/8.jpg)
ResourcesHow did I create those tabs in the plain Plone page?
pat-stacks<nav> <a href="#patternslib">Patternslib</a> | <a href="#plone">plone.patternslib</a></nav><article class="pat-stacks"> <section id="patternslib">...</section> <section id="plone">...</section></article>
Documentation: http://patternslib.com/stacks/#documentation
![Page 9: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/9.jpg)
Let's see some real action!
Example: A custom application for ACME Corporation
Global manufacturer of goods
![Page 10: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/10.jpg)
The challengeKeep track of their suppliers
• They're spread all over the world, and contribute to ACME's various production plants.
• Once in a while, they get audited.• There can be multiple audit reports per
supplier.• Custom content types, yay! No problem for
Plone.
Plus: “make it look nice”
![Page 11: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/11.jpg)
Overview and quick-search
Keeping track of a long list of suppliers
• Dig your way through a long listing
• Or, just type a few letters for ACME KwikSearch...
![Page 12: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/12.jpg)
Submit on change
![Page 13: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/13.jpg)
Submit on changeWith pat-autosubmit the form is submitted on every change.<form class="pat-autosubmit" action="suppliers-listing" method="POST"> <input type="search" placeholder="Search suppliers" name="Title"> </form>
![Page 14: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/14.jpg)
But reloading is so 2006!
We can do better, surely!
![Page 15: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/15.jpg)
Using injectionWe use pat-inject to re-insert the search results into an element with id “suppliers".<form class="pat-inject pat-autosubmit" action="my-view-name#suppliers" method="POST">
![Page 16: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/16.jpg)
Using injectionAll results are displayed in a <div> with id "suppliers".<div id="suppliers"> <div tal:repeat="supplier view/suppliers"> Display title and description... </div> </div>
Take a good look at the documentation:http://patternslib.com/inject/
![Page 17: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/17.jpg)
Using injection
![Page 18: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/18.jpg)
But where's the "nice"?
Also here Patternslib can help us.
And we need a little bit of CSS (which we can copy from Patternslib!)
![Page 19: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/19.jpg)
Masonry
![Page 20: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/20.jpg)
MasonryUsing pat-masonry and some custom CSS, the results are displayed in neat little boxes.<div id="suppliers" class="tiles pat-masonry" data-pat-masonry="item-selector: .tile"> <div tal:repeat="supplier view/suppliers" class="tile four columns"> Display title and description... </div> </div>
![Page 21: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/21.jpg)
Overview table with search
It's about the content!I want to see the results of the reports immediately.
![Page 22: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/22.jpg)
We need a good filterThink “Advanced Search”
![Page 23: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/23.jpg)
Auto-suggest with fixed values
We use pat-autosuggest to create a "select2" widget.<input class="pat-autosuggest" type="text" name="plant" data-pat-autosuggest=' words-json: ${view/plant_names_json}; allow-new-words: false;' placeholder="Plant">
The list of values is fixed, therefore we useallow-new-words: false.
![Page 24: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/24.jpg)
Auto-suggest with fixed values
The parameters for "words-json" are a simple json dict:{"grnspn": "Gr\u00fcnspan Alley Copper Works","ivy": "Ivy Plaza Greenery","rdgrd": "R\u00f8dgr\u00f8d Road Explosives","sherwood": "Sherwood Forest Lumber”}
This is just one way of providing the “vocabulary”.Documentation: http://patternslib.com/auto-suggest/
![Page 25: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/25.jpg)
Auto-suggest with limit
pat-autosuggest comes with several options, such as<input class="pat-autosuggest" type="text" name="audit_type" data-pat-autosuggest=' words-json: ${view/audit_types_json}; allow-new-words: false; max-selection-size: 1' >
The user can only pick one entry at a time.
![Page 26: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/26.jpg)
We can haz Mockup, too!
Here, we use the Mockup pattern pat-pickaday.
Peaceful coexistence is possible! (But, it depends...)<input name="from" class="pat-pickadate" data-pat-pickadate="time:false" value="${view/default_from}" />
![Page 27: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/27.jpg)
Depending on other input
Now it gets a little crazy...
Results "Pass", "Conditional pass" & "Fail" need to have different labels, depending on the type of audit.
Audit-Type Pass Cond. Pass Fail
Financial Pass (C) Cond. Pass (B) Fail (A)
Operational Green Red Yellow
Internal / Investigative A B C
![Page 28: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/28.jpg)
Depending on other input
z3c.form with custom field for Audit result
![Page 29: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/29.jpg)
Depending on other input
With pat-depends we show or hide <select> fields based on the user's choice for "Audit type". The example below shows the case for audit type "Operational".<select class="pat-depends" disabled="disabled" name="form.widgets.audit_result:list" data-pat-depends=" condition:form-widgets-audit_type=operational action:both" > <option value="pass" selected="selected">Green</option> <option value="conditional">Yellow</option> <option value="fail">Red</option> </select>
![Page 30: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/30.jpg)
Depending on other input
For every variant, we define a <select> field with the desired options. Those fields are initially set to disabled (and thereby hidden).
Only if the condition is true will the field be 1) shown and 2) enabled (action: both).
Several dependency expression options are available (Equals, lower than, is not, substring, etc.)
Documentation: http://patternslib.com/depends/
![Page 31: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/31.jpg)
Advanced UsageQuaive (Plone Intranet)
Where to begin? Patterns are used all over the place!
![Page 32: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/32.jpg)
![Page 33: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/33.jpg)
Advanced UsageOiRA - Online interactive Risk Assessment
Plone 4 based application that also uses Patterns all over the place.
![Page 34: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/34.jpg)
![Page 35: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/35.jpg)
The future: More Patterns for everybody!
Goals• Unify duplicated patterns (*)• Move generic Mockup patterns to Patternslib• Full Patternslib integration in Plone (PLIP?)• Update documentation• [...]• Profit!
![Page 36: Add even richer interaction to your site - plone.patternslib](https://reader035.vdocument.in/reader035/viewer/2022081605/5888a5661a28ab264b8b6971/html5/thumbnails/36.jpg)
(*) Double / incompatible
• Both in Mockup and Patternslib
• pat-tooltip
• pat-toggle
• pat-inject vs pat-contentload
• pat-autosuggest vs pat-select2
• and some more