\n };\n }\n }, ...]\n }\n }\n}\n```\n\n## FieldInputComponent\n\nCustom React Component for rendering [Formatted Instance](#formated-instance)'s field in Search Form or Create/Edit/Show Form.\n\nProps:\n\nName | Type | Necessity | Default | Description\n---|---|---|---|---\nreadOnly | boolean | optional | false | Whether field value can be changed\nvalue | serializable | mandatory | - | [Persistent field](#persistent-field) value formated to appropriate [UI Type](#ui-type)\nonChange | function | mandatory | - | Handler called when component's value changes.function(<serializable, new field value>) {
...
return; // return value is ignored
}
\nonBlur | function | optional | - | Handler called when component loses focus.function() {
...
return; // return value is ignored
}
\n\n### Embedded FieldInputComponents\n\nIn CRUD Editor here are two embedded FieldInputComponents:\n\nFieldInputComponent | id\n---|---\n[BUILTIN_INPUT](#builtin_input) | \"input\"\n[BUILTIN_RANGE_INPUT](#builtin_range_input) | \"rangeInput\"\n\nFor being treated as embedded, string id must be used. Additionally, the embedded FieldInputComponents can be imported from CRUD Editor package:\n\n```javascript\nimport { BUILTIN_INPUT, BUILTIN_RANGE_INPUT } from '@opuscapita/react-crudeditor';\n```\n\nEmbedded FieldInputComponents also accept all props defined for [FieldInputComponent](#fieldinputcomponent).\n\n#### BUILTIN_INPUT\n\nSingular input field.\n\nprops.type | Description | UI Type | Auto-convertable field types\n---|---|---|---\n`string` | Regular input field which works with strings | UI_TYPE_STRING | FIELD_TYPE_STRING, FIELD_TYPE_BOOLEAN, FIELD_TYPE_DECIMAL, FIELD_TYPE_INTEGER, FIELD_TYPE_STRING_DATE, FIELD_TYPE_STRING_DECIMAL, FIELD_TYPE_STRING_INTEGER\n`checkbox` | Checkbox | UI_TYPE_BOOLEAN | FIELD_TYPE_BOOLEAN\n`date` | [DateInput](https://opuscapita.github.io/react-dates//branches/master/index.html?currentComponentName=DateInput) | UI_TYPE_DATE | FIELD_TYPE_STRING_DATE\n`integer` | Input which accepts only numbers and `-` sign and formats using [i18n](https://github.com/OpusCapita/i18n).formatNumber | UI_TYPE_INTEGER | FIELD_TYPE_STRING_INTEGER, FIELD_TYPE_INTEGER, FIELD_TYPE_BOOLEAN, FIELD_TYPE_STRING\n`decimal` | Input which accepts only numbers and `-` sign and formats using [i18n](https://github.com/OpusCapita/i18n).formatDecimalNumber | UI_TYPE_DECIMAL | FIELD_TYPE_STRING_DECIMAL, FIELD_TYPE_DECIMAL, FIELD_TYPE_BOOLEAN, FIELD_TYPE_STRING\n\n#### BUILTIN_RANGE_INPUT\n\nRange input field.\n\nprops.type | Description | UI Type | Auto-convertable field types\n---|---|---|---\n`string` | Range input which works with strings | UI_TYPE_STRING_RANGE_OBJECT | FIELD_TYPE_DECIMAL_RANGE, FIELD_TYPE_INTEGER_RANGE, FIELD_TYPE_STRING_DATE_RANGE, FIELD_TYPE_STRING_DECIMAL_RANGE, FIELD_TYPE_STRING_INTEGER_RANGE\n`date` | [DateRangeInput](https://opuscapita.github.io/react-dates//branches/master/index.html?currentComponentName=DateRangeInput) | UI_TYPE_DATE_RANGE_OBJECT | FIELD_TYPE_STRING_DATE_RANGE\n`integer` | Range input which accepts only numbers and `-` sign and formats using [i18n](https://github.com/OpusCapita/i18n).formatNumber | UI_TYPE_INTEGER_RANGE_OBJECT | FIELD_TYPE_STRING_INTEGER_RANGE, FIELD_TYPE_INTEGER_RANGE\n`decimal` | Range input which accepts only numbers and `-` sign and formats using [i18n](https://github.com/OpusCapita/i18n).formatDecimalNumber | UI_TYPE_DECIMAL_RANGE_OBJECT | FIELD_TYPE_STRING_DECIMAL_RANGE, FIELD_TYPE_DECIMAL_RANGE\n\n### Default FieldInputComponents\n\nIf you define just a [Field Type](#field-type) in [Model Definition](#model-definition)'s **model.fields.\\.type** (and omit any custom render in **searchableFields** and **formLayout**), the following components will be default for the fields:\n\n#### Common mappings for all Views\n\nField Type | Component | props.type\n---|---|---\nFIELD_TYPE_BOOLEAN | [BUILTIN_INPUT](#builtin_input) | 'checkbox'\nFIELD_TYPE_STRING | [BUILTIN_INPUT](#builtin_input) | 'string'\nFIELD_TYPE_DECIMAL_RANGE | [BUILTIN_RANGE_INPUT](#builtin_range_input) | 'decimal'\nFIELD_TYPE_INTEGER_RANGE | [BUILTIN_RANGE_INPUT](#builtin_range_input) | 'integer'\nFIELD_TYPE_STRING_DATE_RANGE | [BUILTIN_RANGE_INPUT](#builtin_range_input) | 'date'\nFIELD_TYPE_STRING_DECIMAL_RANGE | [BUILTIN_RANGE_INPUT](#builtin_range_input) | 'string'\nFIELD_TYPE_STRING_INTEGER_RANGE | [BUILTIN_RANGE_INPUT](#builtin_range_input) | 'string'\n\n#### Mappings specific to Create/Edit/Show View\n\nField Type | Component | props.type\n---|---|---\nFIELD_TYPE_DECIMAL | [BUILTIN_INPUT](#builtin_input) | 'decimal'\nFIELD_TYPE_INTEGER | [BUILTIN_INPUT](#builtin_input) | 'integer'\nFIELD_TYPE_STRING_DATE | [BUILTIN_INPUT](#builtin_input) | 'date'\nFIELD_TYPE_STRING_DECIMAL | [BUILTIN_INPUT](#builtin_input) | 'string'\nFIELD_TYPE_STRING_INTEGER | [BUILTIN_INPUT](#builtin_input) | 'string'\n\n#### Mappings specific to Search View (searchable fields)\n\nField Type | Component | props.type\n---|---|---\nFIELD_TYPE_DECIMAL | [BUILTIN_RANGE_INPUT](#builtin_range_input) | 'decimal'\nFIELD_TYPE_INTEGER | [BUILTIN_RANGE_INPUT](#builtin_range_input) | 'integer'\nFIELD_TYPE_STRING_DATE | [BUILTIN_RANGE_INPUT](#builtin_range_input) | 'date'\nFIELD_TYPE_STRING_DECIMAL | [BUILTIN_RANGE_INPUT](#builtin_range_input) | 'string'\nFIELD_TYPE_STRING_INTEGER | [BUILTIN_RANGE_INPUT](#builtin_range_input) | 'string'\n\n### FieldRenderComponent\n\nCustom React component for rendering [Formated Instance](#formated-instance)'s [persistent](#persistent-field)/[composite](#composite-field) field value in Search Result listing.\n\nProps:\n\nName | Type | Necessity | Default | Description\n---|---|---|---|---\nname | string | mandatory | - | Field name from [Model Definition](#model-definition)'s **ui.search().resultFields**\ninstance | object | mandatory | - | Entity instance\n\n### TabFormComponent\n\nReact component for a custom rendering of Tab form in create/edit/show Views.\n\nProps:\n\nName | Type | Necessity | Default | Description\n---|---|---|---|---\nviewName | string | mandatory | - | [View Name](#editorcomponent-propsviewname)\ninstance | object | mandatory | - | persistent instance\n[doTransition](#dotransition) | function | optional | - | [Editor State](#editor-state) change handler\n\n### ViewComponent\n\nReact component for a custom View.\n\nProps:\n\nName | Type | Necessity | Default | Description\n---|---|---|---|---\nviewState | object | mandatory | - | Custom [View State](#editorcomponent-propsviewstate)\n[doTransition](#dotransition) | function | optional | - | [Editor State](#editor-state) change handler\n\n### doTransition\n\nThis handler is called when\n\n - active View changes its [State](#editorcomponent-propsviewstate), *name* argument is optional in such case;\n - another [View](#editorcomponent-propsviewname) must be displayed, *state* argument is optional in such case.\n\n```javascript\nfunction ({\n ?name: ,\n ?state: \n}) {\n ...\n return; // return value is ignored.\n}\n```\n\nArguments:\n\nName | Default | Description\n---|---|---\nname | active View Name | To-be-displayed [View Name](#editorcomponent-propsviewname)\nstate | `{}` | Full/sliced to-be-displayed [View State](#editorcomponent-propsviewstate)\n\nIf View State is sliced, not given or `{}`, all not-mentioned properties retain their current values (or default values in case of initial View rendering).\n\n### i18n Translations\n\n[Model Definition](#model-definition)'s **model.translations** object has translations for labels/messages defined in the model. Its shape should correspond to preferred format for [@opuscapita/i18n](https://github.com/OpusCapita/i18n) library.\n\nTranslation keys convention:\n\nTranslation Target | Translation Key | Default translation\n---|---|---\nModel name (shown in the header) | `\"model.name\"` | `\"model.name\"`\nModel tab label | `\"model.tab..label\"` | `titleCase(\"\")`\nModel section label | `\"model.section..label\"` | `titleCase(\"\")`\nModel field label | `\"model.field..label\"` | `titleCase(\"\")`\nModel field hint | `\"model.field..hint\"` | -\nModel field tooltip | `\"model.field..tooltip\"` | -\nCustom [Field Validation Error](#parsing-error-and-fieldinstance-validation-error) | `\"model.field..error.\"` | `error.message \\|\\| error.id`\n[Instance Validation Error](#parsing-error-and-fieldinstance-validation-error) | `\"model.error.\"` | `error.message \\|\\| `\n\n**titleCase()** converts its arugment from camelcase to titlecase, ex. `titleCase(\"maxOrderValue\") === \"Max Order Value\"`.\n\n[React context](https://reactjs.org/docs/context.html) *must* have `i18n` property with [I18nManager](https://github.com/OpusCapita/i18n) as its value.\n\n## Redux Store\n\n### State Structure\n\nEvery view *must* have \"ready\" status defined in its *constants.js* file for [onTransition](#editorcomponent-propsontransition) call to work properly.\n\n```javascript\n{\n common: {\n activeViewName: <\"search\"|\"create\"|\"edit\"|\"show\"|\"error\">,\n },\n views: {\n search: {\n\n /*\n * filter used in Search Result\n */\n resultFilter: {\n : ,\n ...\n },\n\n /*\n * raw filter as displayed in Search Form\n * (may be equal to or different from \"resultFilter\")\n */\n formFilter: {\n : ,\n ...\n },\n\n /*\n * raw filter as communicated to React Components rendering Search fields\n */\n formatedFilter: {\n : ,\n ...\n },\n\n sortParams: {\n field: ,\n order: <\"asc\"|\"desc\", sort order>,\n },\n pageParams: {\n max: ,\n offset: ,\n }\n resultInstances: [{\n : ,\n ...\n }, ...],\n selectedInstances: [\n ,\n ...\n ],\n totalCount: ,\n status: <\"uninitialized\"|\"initializing\"|\"ready\"|\"searching\"|\"deleting\"|\"redirecting\", search view status>,\n\n /*\n * Parsing and Internal Errors -- see relevant subheadings\n * (all other errors are displayed on \"error\" view)\n */\n errors: {\n fields: {\n : [, ...],\n ...\n },\n general: [, ...]\n }\n },\n create: {\n formInstance: {\n : ,\n ...\n },\n formatedInstance: {\n : ,\n ...\n },\n status: <\"ready\"|\"saving\", create view status>\n\n /*\n * Parsing, Field/Instance Validation and Internal Errors -- see relevant subheadings\n * (all other errors are displayed on \"error\" view)\n */\n errors: {\n fields: {\n : [, ...],\n ...\n },\n general: [, ...]\n }\n },\n edit: {\n\n /*\n * instance in its \"canonical state\", i.e. as present on the server\n */\n persistentInstance: {\n : ,\n ...\n },\n\n /*\n * row instance as displayed in Edit Form\n */\n formInstance: {\n : ,\n ...\n },\n\n /*\n * raw instance as communicated to React Components rendering Edit Form fields\n */\n formatedInstance: {\n : ,\n ...\n },\n\n /*\n * Either an array of arrays (representing tabs) -- for tabbed layout,\n * or an array of arrays (representing sections) and objects (representing fields) -- otherwise.\n */\n formLayout: [\n\n /*\n * array representing a tab. Its elements are sections/fields. The array also has props:\n * -- \"tab\", string with tab name,\n * -- \"disabled\", boolean.\n * -- \"component\", optional custom React Component, see TabFormComponent subheading.\n */\n [\n\n /*\n * array representing a section. Its elements are fields. The array also has props:\n * -- \"section\", string with section name.\n */\n [\n\n /*\n * object representing a field.\n */\n {\n field: ,\n readOnly: ,\n component: \n },\n ...\n ],\n ...\n ]\n ...\n ],\n\n /*\n * a ref to array representing active tab - for tabbed form layout,\n * undefined - otherwise.\n */\n activeTab: ,\n\n instanceLabel: ,\n status: <\"uninitialized\"|\"initializing\"|\"ready\"|\"extracting\"|\"updating\"|\"deleting\"|\"redirecting\", edit view status>,\n\n /*\n * Parsing, Field/Instance Validation and Internal Errors -- see relevant subheadings\n * (all other errors are displayed on \"error\" view)\n */\n errors: {\n fields: {\n : [, ...],\n ...\n },\n general: [, ...]\n }\n },\n show: {\n instance: {\n : ,\n ...\n },\n tab: ,\n status: <\"uninitialized\"|\"initializing\"|\"ready\"|\"redirecting\", show view status>,\n },\n error: {\n errors: [{\n code: ,\n ?payload: \n }],\n status: <\"uninitialized\"|\"ready\"|\"redirecting\", error view status>\n }\n }\n}\n```\n\n### Parsing Error and Field/Instance Validation Error\n\n```javascript\n{\n code: 400,\n id: ,\n ?message: ,\n ?args: \n}\n```\n\nBoth plain objects and instances of **Error** may be used. The error *must not* be an instance of system error constructor, like RangeError, SyntaxError, TypeError, etc.\n\n### Internal Error\n\n```javascript\n{\n code: 500,\n id: ,\n message: ,\n ?args: \n}\n```\n\nAll internal errors are plain objects, not instances of **Error**, **InternalError**, **TypeError**, etc.\n\n## *model* Property\n\nEvery view passes *model* property to external React Components it uses. The property is designed for communication with CRUD Editor and is distinct for different views. It's important to explicitly forward the property to children if they are designed to communicate with the editor. *model* property must never be modified by React Components.\n\n*model* property general structure:\n\n```javascript\n{\n /*\n * Dynamic collection of data from Redux store\n * linked with selectors\n * and updated every time the store state changes.\n */\n data: {...},\n\n /*\n * Static collection of event handlers\n * triggering async actions and Redux store state changes.\n */\n actions: {...}\n}\n```\n\n### Search View *model* Property\n\n*model* property structure set by Search View:\n\n```javascript\n{\n data: {\n entityName: .model.name,\n formFilter: state.formFilter,\n formatedFilter: state.formatedFilter,\n isLoading: ,\n pageParams: {\n max: state.pageParams.max,\n offset: state.pageParams.offset\n },\n resultFields: .ui.search().resultFields || ,\n resultFilter: state.resultFilter,\n resultInstances: state.resultInstances,\n searchableFields: [{\n name: ,\n component: ,\n valuePropName: ,\n\n /*\n * Boolean, whether two react components for from-to ranging must be rendered.\n * if true, filter field value consists of two keys, \"from\" and \"to\",\n * and two distinct components are rendered for each of them.\n * NOTE: always false for custom component.\n */\n isRange: \n\n }]\n selectedInstances: state.selectedInstances,\n sortParams: {\n field: state.sortParams.field,\n order: state.sortParams.order\n },\n status: state.status,\n totalCount: state.totalCount\n },\n actions: {\n\n /*\n * Switch to Create View\n * and populate its form fields with .ui.create.defaultNewInstance if exists.\n */\n createInstance(),\n\n /*\n * Delete instances by asynchronously calling the server with\n * .api.delete()\n * and .api.search() to refresh Result Listing.\n * Only Logical Key fields are required, all others are ignored.\n deleteInstances([{\n : ,\n ...\n }, ...]),\n\n /*\n * Load an instance in Edit View.\n * Only Logical Key fields of the instance are required, all others are ignored.\n */\n editInstance({\n instance: {\n : ,\n ...\n },\n ?tab: \n }),\n\n /*\n * Clear all filter fields without Result Listing change.\n */\n resetFormFilter(),\n\n /*\n * Make .api.search() call to the server and display response in Result Listing.\n */\n searchInstances({\n ?filter: {\n : ,\n ...\n },\n ?sort: ,\n ?order: <\"asc\"|\"desc\", sort order>,\n ?max: ,\n ?offset: \n }),\n\n toggleSelected({\n instance: \n selected: ,\n }),\n toggleSelectedAll(),\n\n /*\n * Usually called with form field's onChange event. Result Listing is not automatically changed.\n */\n updateFormFilter({\n name: ,\n value: