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
  • #6

Closed
Open
Created Jan 23, 2018 by S Anand@s.anandOwner

$().formhandler column formatting

<div src="formhandler" class="formhanlder">

<script>
$('.formhandler').formhandler({
// - `columns`: comma-separated column names to display, or a list of objects with these keys:
//     - `name`: column name
//     - `title`: display name of the column. Defaults to the same value as `name`
//     - `type`: `text` (default) / `number` / 'date'. Determines filters to be used
//     - `format`: string / function. Functions are applied to the value and the return value is used. Strings are treated as:
//         - a numeral.js format for number (numeral.js must be loaded by the developer)
//         - a moment.js format for date (moment.js must be loaded by the developer)
//     - `sort`: `true` / `false` / operators dict with:
//       - `{'': 'Sort ascending', '-': 'Sort descending'}` (default)
//     - `filters`: `true` (default) / `false` / operators dict with:
//       - `{'', 'Equals...', '!', 'Does not equal...', ...}`.
//         The default list of operators is based on the auto-detected type of the column.
//     - `unique`: TODO: {dict of query parameter and display value} or [list of values] or function?
//     - `hideable`: `true` (default) / `false`
  columns: [
    {name: 'ID', title: '#', type: 'text', sort: true, filters: true, hideable: true},
    {name: 'c1', title: 'Red', type: 'number', sort: true, filters: true, hideable: true},
    {
      name: 'Name',
      title: 'Name',
      format: 'text',
      sort: {
        '': 'Sort alphabetically',                // Only allow sort ascending
      },
      filters: {
        '': 'Equals...',
        '!': 'Does not equal...',
        '~': 'Contains...',
        '!~': 'Does not contain...'
      },
      hideable: false                             // Cannot hide this column from the UI
    }
  ],
  {
    name: 'Symbols',
    type: 'text',
    format: function(val) { return val === null ? '' : val }  // Disallow NaN
  },
  {
    name: 'c8',
    type: 'number',
    format: '0,0.0'         // Interpreted as a numeraljs format
  }
})

Note: When the operators are clicked, a dialog box should pop up like at https://learn.gramener.com/guide/formhandler/flags?_format=table

Use a template for this - just like the other components.

Edited Jan 23, 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