Skip to content

GitLab

  • Menu
Projects Groups Snippets
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
  • G g1
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 68
    • Issues 68
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 4
    • Merge requests 4
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Monitor
    • Monitor
    • Incidents
  • Packages & Registries
    • Packages & Registries
    • Container Registry
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • cto
  • g1
  • Issues
  • #25

Closed
Open
Created Mar 16, 2018 by Sundeep Reddy Mallu@sundeep.malluMaintainer

Create FormHandler Grid

The objective is to allow browsing data like Windows explorer. (Just like FormHandler table allowed exploring data like Excel.)

Extend $().formhandler() with a table: 'grid' option. This uses a separate template that renders items in a grid instead of a table. (Implementation: use a <!-- var template_table_grid -->)

<div class="formhandler-grid">
  <div <%= classes %>>
    <%= ... same as formhandler table cell ... %>
  </div>
  <div <%= classes %>>
    ...
  </div>
  <div <%= classes %>>
    ...
  </div>
</div>

By default, this displays an image, and below that, all columns and values as a simple list. (TODO: improve aesthetics.) Crude sample code:

<div><img class="img img-responsive" src="<%= ... || 'default.png' %>"></div>
<div><strong><%= col %></strong>: <%= value %></div>
<div><strong><%= col %></strong>: <%= value %></div>
...

default.png should be committed into this repo somewhere and copied into the dist/ directory by npm run build

Attributes:

  • table: 'grid' specifies the style to be a grid
  • classes: string / function(row) that has the classes to be added to each table row or grid cell. For table: 'grid', this defaults to formhandler-grid-cell d-inline-block p-3 box-shadow ...
  • icon: string / function(row) that returns a URL or a fa fa-<font-awesome-class>. If the string begins with fa , it is treated as a FontAwesome icon
  • rowTemplate: ... specifies an optional row template to be used for each data row. For table: true, this defaults to a FormHandler template called template_row_table. For table: grid it defaults to template_row_grid. By default, template_row_table has a <tr>....</tr> (see current template_table), while template_row_grid has a <div class="...">...</div>

Use case:

  • Use FormHandler directory to create a Windows explorer grid view like structure that looks good
Edited Apr 11, 2018 by S Anand
To upload designs, you'll need to enable LFS and have an admin enable hashed storage. More information
Assignee
Assign to
Time tracking