Add even richer interaction to your site -

plone.patternslibPlone Conference 2016, Boston

Wolfgang Thomas

pysailor_de

pysailor

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

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

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

ResourcesPatternslib

• URL: http://patternslib.com/

• The core package

• Can be used outside of Plone, too. Think: github pages and jekyll...

Resourcesplone.patternslib

• URL: https://github.com/plone/plone.patternslib

• Integration of most Patterns into Plone

ResourcesMockup

• URL: http://plone.github.io/mockup

• Part of Plone 5

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

Let's see some real action!

Example: A custom application for ACME Corporation

Global manufacturer of goods

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”

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

Submit on change

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>

But reloading is so 2006!

We can do better, surely!

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

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/

Using injection

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!)

Masonry

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>

Overview table with search

It's about the content!I want to see the results of the reports immediately.

We need a good filterThink “Advanced Search”

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.

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/

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.

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}" />

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

Depending on other input

z3c.form with custom field for Audit result

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>

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/

Advanced UsageQuaive (Plone Intranet)

Where to begin? Patterns are used all over the place!

Advanced UsageOiRA - Online interactive Risk Assessment

Plone 4 based application that also uses Patterns all over the place.

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!

(*) Double / incompatible

• Both in Mockup and Patternslib

• pat-tooltip

• pat-toggle

• pat-inject vs pat-contentload

• pat-autosuggest vs pat-select2

• and some more