File

packages/core/src/lib/field/field.ts

Implements

FieldConfigProperty

Index

Properties

Optional autofocus
Optional beforeSave
class
Optional filterable
Optional filterOperator
Optional filterPopClass
Optional form
Optional hidden
Optional hideFormLabel
Optional hideFormLabelIfEmpty
Optional icon
id
Optional input
Optional label
Optional maxItems
Optional output
Optional placeholder
Optional property
Optional required
Optional sortable
Optional type
Optional validate
values
Optional view

Constructor

constructor(property: string, config: FieldConfigProperty)

Defined in packages/core/src/lib/field/field.ts:55

A Field is constructed by assigning the given config and the property to itself

Parameters :

Name	Type	Optional
property	`string`	No
config	`FieldConfigProperty`	No

Properties

Optional autofocus

Type : boolean

Defined in packages/core/src/lib/field/field.ts:13

If true, the field will autofocus after view init

Optional beforeSave

Type : function

Defined in packages/core/src/lib/field/field.ts:21

Custom clean function to prepare for save

class

Type : string

Default value : ''

Defined in packages/core/src/lib/field/field.ts:43

Class string

Optional filterable

Type : boolean

Defined in packages/core/src/lib/field/field.ts:49

if false, the field will not be filterable in a list

Optional filterOperator

Type : string

Defined in packages/core/src/lib/field/field.ts:31

The operator to use for filtering: exact, search, any etc.. see ec.sdk doc

Optional filterPopClass

Type : string

Defined in packages/core/src/lib/field/field.ts:33

Defines the class for the filter pop, e.g. in list header. DEPRECATED

Optional form

Type : boolean

Defined in packages/core/src/lib/field/field.ts:39

Wether or not the field should appear in default forms

Optional hidden

Type : boolean

Defined in packages/core/src/lib/field/field.ts:11

If true, the field will not be visible anywhere

Optional hideFormLabel

Type : boolean

Defined in packages/core/src/lib/field/field.ts:35

If true, the form input label will always be hidden

Optional hideFormLabelIfEmpty

Type : boolean

Defined in packages/core/src/lib/field/field.ts:37

If true, the form input label will be hidden if no value is set

Optional icon

Type : string

Defined in packages/core/src/lib/field/field.ts:53

Icon name that should be associated with the field

Type : string

Defined in packages/core/src/lib/field/field.ts:45

id for form labels

Optional input

Type : any

Defined in packages/core/src/lib/field/field.ts:23

Custom Component to display form input *

Optional label

Type : string | boolean

Defined in packages/core/src/lib/field/field.ts:29

Label for Inputs. Defaults to property name. If false, the label is empty.

Optional maxItems

Type : number

Defined in packages/core/src/lib/field/field.ts:51

Defines the maximum of visible item (for tags view or similar). Defaults to 10

Optional output

Type : any

Defined in packages/core/src/lib/field/field.ts:25

Custom Component to display value *

Optional placeholder

Type : string

Defined in packages/core/src/lib/field/field.ts:27

Placeholder in inputs

Optional property

Type : string

Defined in packages/core/src/lib/field/field.ts:9

The name of the field's property

Optional required

Type : boolean

Defined in packages/core/src/lib/field/field.ts:7

Tells if the field is required in forms

Optional sortable

Type : boolean

Defined in packages/core/src/lib/field/field.ts:47

if false, the field will not be sortable in a list

Optional type

Type : string

Defined in packages/core/src/lib/field/field.ts:15

The field's type

Optional validate

Type : function

Defined in packages/core/src/lib/field/field.ts:19

Custom Validation function

values

Type : any[]

Default value : []

Defined in packages/core/src/lib/field/field.ts:41

Possible Values e.g. in a select

Optional view

Type : string

Defined in packages/core/src/lib/field/field.ts:17

The field's view

Methods

getComponent

getComponent(occasion?)

Defined in packages/core/src/lib/field/field.ts:82

Returns the component for the given occasion

Parameters :

Name	Optional
occasion	Yes

Returns : any

getLabel

getLabel()

Defined in packages/core/src/lib/field/field.ts:71

Returns the fields label

Returns : string | true

getPlaceholder

getPlaceholder()

Defined in packages/core/src/lib/field/field.ts:67

Returns placeholder if any

Returns : string | true

getView

getView(occasion?)

Defined in packages/core/src/lib/field/field.ts:78

Returns the view for the given occasion

Parameters :

Name	Optional
occasion	Yes

Returns : any

Indexable

[key: string]:        any

Defined in packages/core/src/lib/field/field.ts:53

wildcard for custom config values

Field

A Field represents a property of an Object, without a specific value. It is used to describe a column or field of one or multiple equally structured objects. The field config (see FieldConfigProperty) can contain different transformation methods, such as:

resolve: This method is used to resolve the field value from the object body. It runs before all other transformation methods.
display: Transforms the resolved value to a human readable output. It is used for e.g. in list cells.
group: Should return a value that is suitable for grouping multiple different values together, like in a list.

Example Usage:

const field = new Field('name', {
    resolve: (body) => body.value.name,
    display: (value) => value.toUpperCase(),
    group: (value) => value.length + ' Buchstaben',
    sort: (value) => value.length
    });
const name = field.resolve({value:{name:'bobby'}}); // 'bobby'
field.display(name); // => 'Bobby'
field.group(name); // => '5 Buchstaben'
field.sort(name); // => 5

The above example is of course only viable to show the concept. When using the components as a whole, those methods will be called automatically from Item, List or Form.

import { FieldConfigProperty } from '../config/field-config-property.interface';

export class Field implements FieldConfigProperty {
  /** Tells if the field is required in forms */
  required?: boolean;
  /** The name of the field's property */
  property?: string;
  /** If true, the field will not be visible anywhere */
  hidden?: boolean;
  /** If true, the field will autofocus after view init */
  autofocus?: boolean;
  /** The field's type */
  type?: string;
  /** The field's view */
  view?: string;
  /** Custom Validation function */
  validate?: (value, field) => any;
  /** Custom clean function to prepare for save */
  beforeSave?: (value?, field?, body?) => any;
  /** Custom Component to display form input **/
  input?: any;
  /** Custom Component to display value **/
  output?: any;
  /** Placeholder in inputs */
  placeholder?: string;
  /** Label for Inputs. Defaults to property name. If false, the label is empty. */
  label?: string | boolean;
  /** The operator to use for filtering: exact, search, any etc.. see ec.sdk doc */
  filterOperator?: string;
  /** Defines the class for the filter pop, e.g. in list header. DEPRECATED */
  filterPopClass?: string;
  /** If true, the form input label will always be hidden */
  hideFormLabel?: boolean;
  /** If true, the form input label will be hidden if no value is set */
  hideFormLabelIfEmpty?: boolean;
  /** Wether or not the field should appear in default forms */
  form?: boolean;
  /** Possible Values e.g. in a select */
  values: any[] = [];
  /** Class string */
  class = '';
  /** id for form labels */
  id: string;
  /** if false, the field will not be sortable in a list */
  sortable?: boolean;
  /** if false, the field will not be filterable in a list */
  filterable?: boolean;
  /** Defines the maximum of visible item (for tags view or similar). Defaults to 10 */
  maxItems?: number;
  /** Icon name that should be associated with the field */
  icon?: string;
  /** wildcard for custom config values */
  [key: string]: any;

  /** A Field is constructed by assigning the given config and the property to itself*/
  constructor(property: string, config: FieldConfigProperty) {
    if (config) {
      Object.assign(this, config);
    }
    Object.assign(this, { property: property });
    this.id = `${this.property}_${Date.now()}`;
  }

  /** Returns placeholder if any */
  getPlaceholder() {
    return this.placeholder || this.label || this.property;
  }
  /** Returns the fields label */
  getLabel() {
    if (this.label === false) {
      return '';
    }
    return this.label || this.property;
  }
  /** Returns the view for the given occasion */
  getView(occasion?) {
    return this[occasion + 'View'] || this.view;
  }
  /** Returns the component for the given occasion */
  getComponent(occasion?) {
    return this[occasion + 'Component'];
  }
}

File

Implements

Index

Properties

Methods

Constructor

Properties

Methods

Indexable

Field

result-matching ""

No results matching ""