Web UI component: j-Properties


  • Info
  • HTML
  • JS
  • CSS
  • Meta

j-Properties (BETA)

The component uses j-DatePicker, j-TimePicker, j-Directory, j-Emoji, j-ColorPicker and j-FaIcons components.

Configuration:

  • dateformat {String} optional, a date format (default: yyyy-MM-dd)
  • timeformat {String} optional, a time format (default: HH:mm)
  • datetimeformat {String} optional, a date/time format (default: yyyy-MM-dd HH:mm)
  • height {Number} optional, a height of the element (default: undefined)
  • parent {String} optional, jQuery selector for auto setup of height (can be window, parent or custom)
  • margin {Number} optional, vertical margin (default: 0)
  • change {String} optional, a path to method method(item, replace_text(new_text)) (executed if some value is changed) and replace_text argumnet is optional

Data declaration:

var form = [];
form.push({ group: 'Personal', label: 'First name', name: 'user.firstname', type: 'string', value: 'Peter', transform: 'capitalize' });
form.push({ group: 'Personal', label: 'Last name', name: 'user.lastname', type: 'string', value: 'Širka', placeholder: 'String' });
form.push({ group: 'Personal', label: 'Age', name: 'user.age', type: 'number', value: 33, min: 30 });
form.push({ group: 'Personal', label: 'Birth date', name: 'user.birth', type: 'date', value: NOW });
form.push({ group: 'Additional', label: 'Newsletter', name: 'user.newsletter', type: 'bool', value: true });
form.push({ group: 'Additional', label: 'City', name: 'user.city', type: 'list', value: 2, items: 'items', dirsearch: 'Search city', dircustom: true });
form.push({ group: 'Additional', label: 'Color', name: 'user.color', type: 'color', value: '#e73323' });
form.push({ group: 'Additional', label: 'Icon', name: 'user.icon', type: 'fontawesome', value: 'fas fa-home' });
form.push({ group: 'Additional', label: 'Emoji', name: 'user.emoji', type: 'emoji', value: '' });

Data properties in data declaration:

  • name {String} an item identifier (required)
  • label {String} a label (required)
  • group {String} a group name (required)
  • type {String} a type (required)
  • placeholder {String} a placeholder (supports few types only)
  • transform {String} for string type only, can contain capitalize, uppercase, lowercase or slug
  • maxlength {Number} for string type only
  • validate {RegExp/String} for string type only, can contain email, phone or url
  • min {Number} for number type only
  • max {Number} for number type only
  • inc {Number/String} increments a value according to the value, targeted for number or date (can contain 1 day or -1 day) type only
  • required {Boolean} for type string, number or date
  • dirsearch {String/Boolean} a placeholder for list type only, boolean disables search
  • dircustom {Boolean} enables a custom value for list type only
  • dirkey {String} a key name for label/name, targeted for list type only (default: name)
  • dirvalue {String} a key name for value, targeted for list type only (default: id)
  • items {Object Array/String} items for list type only, string can contain a path to Array or URL address to search

Allowed types in data:

  • string
  • bool
  • number
  • date
  • list
  • color
  • emoji
  • fontawesome

Missing types:

  • datetime
  • time
  • file
  • months

Good to know

The component extends the Array by adding:

  • invalid {Boolean} field determines if the value is invalid (default: undefined)
  • changed {Boolean} field determines if the value has been changed (default: undefined)
  • prev {???} field contains an initial value

Author