= !BluePrint: Data List =
[[TOC]]

== 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:

[[Image(datalist2.png, width=960px)]]

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:

[[Image(datalist1.png)]]

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 filter-form and add-form
=== 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 ==

  - '''Prototype''':
    - Renderer: S3DataList in s3data.py
    - CRUD integration: currently as /list_div method


== References ==

  - ...

----
BluePrint