Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Add even richer interaction to your site - plone.patternslib

Plone already ships with several rich interaction patterns, available via the "Mockup" package. Patternslib offers more goodies for integrators and developers who want to enhance the user experience of their site. No need to know any Javascript!

  • Login to see the comments

Add even richer interaction to your site - plone.patternslib

  1. 1. Add even richer interaction to your site - plone.patternslib Plone Conference 2016, Boston Wolfgang Thomas pysailor_de pysailor
  2. 2. 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 #ploneconf2015
  3. 3. Patterns & Plone Mockup, 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 Brand
  4. 4. 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
  5. 5. Resources Patternslib • URL: • The core package • Can be used outside of Plone, too. Think: github pages and jekyll...
  6. 6. Resources plone.patternslib • URL: • Integration of most Patterns into Plone
  7. 7. Resources Mockup • URL: • Part of Plone 5
  8. 8. Resources How 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:
  9. 9. Let's see some real action! Example: A custom application for ACME Corporation Global manufacturer of goods
  10. 10. The challenge Keep 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”
  11. 11. 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...
  12. 12. Submit on change
  13. 13. Submit on change With 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>
  14. 14. But reloading is so 2006! We can do better, surely!
  15. 15. Using injection We 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">
  16. 16. Using injection All 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:
  17. 17. Using injection
  18. 18. 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!)
  19. 19. Masonry
  20. 20. Masonry Using 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>
  21. 21. Overview table with search It's about the content! I want to see the results of the reports immediately.
  22. 22. We need a good filter Think “Advanced Search”
  23. 23. 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 use allow-new-words: false.
  24. 24. Auto-suggest with fixed values The parameters for "words-json" are a simple json dict: {"grnspn": "Gru00fcnspan Alley Copper Works", "ivy": "Ivy Plaza Greenery", "rdgrd": "Ru00f8dgru00f8d Road Explosives", "sherwood": "Sherwood Forest Lumber”} This is just one way of providing the “vocabulary”. Documentation:
  25. 25. 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.
  26. 26. 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}" />
  27. 27. 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
  28. 28. Depending on other input z3c.form with custom field for Audit result
  29. 29. 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>
  30. 30. 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:
  31. 31. Advanced Usage Quaive (Plone Intranet) Where to begin? Patterns are used all over the place!
  32. 32. Advanced Usage OiRA - Online interactive Risk Assessment Plone 4 based application that also uses Patterns all over the place.
  33. 33. 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!
  34. 34. (*) Double / incompatible • Both in Mockup and Patternslib • pat-tooltip • pat-toggle • pat-inject vs pat-contentload • pat-autosuggest vs pat-select2 • and some more