BluePrint: Data List

Introduction

In many cases, the representation of data in a table visually dissolves the structure of the information, and is therefore difficult to consume for user:

An alternative concept is to represent records as a list of cards with a context-adapted per-item design (typically nested DIVs which allow various styling options):

The most commonly known example for this concept is certainly the facebook-timeline, but many other websites have adopted this concept as well:

Currently, Sahana-Eden lacks a framework for these data lists - whereas there is a fairly complete framework for data tables. This BluePrint is for a datatables-equivalent framework for data lists.

Description

• tbw

Use-Cases

• active tasks for a project (or a user)
• timeline of incident reports
• CAP alerts
• list of requests
• list of projects

Requirements

• tbw

Prototype

• Basic HTML renderer
• Basic CSS

Basic Implementation

• Ajax pagination
  • Infinite scroll
• Integration into S3CRUD
  • Option of regular select() method or separate method?
  • Integrated page with FilterForm and AddForm

Enhancements

• Configuration hooks
  • Custom Item Renderer
  • Item Actions
• Customizable Item Renderer
• Item Actions
  • read/edit/delete/...custom
  • action buttons/links/icons
  • authorize actions per item
• Export options
  • Formats-row like in datatables

Later (not on roadmap yet)

• Ajax Filtering
• Ajax Sorting
• Inline-Editing
  • Ajax-add items
  • Ajax-edit items
  • Ajax-remove items
• Bulk actions:
  • Multi-Select
• Embedding of components
  • similar to S3InlineForms
  • collapsable/expandable
• Mixed Resources (using common filters/forms)
• Drag&Drop
  • to build user-customizable lists (subscription)

• feel free to add more...

Design

• tbw

Implementation

• Renderer: S3DataList in s3data.py
• CRUD integration: currently as /list_div method

References

• ...

---

BluePrint