Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
tutorial:dev:how_to_create_eav_face_type [2017/09/13 13:56] tomiskar |
tutorial:dev:how_to_create_eav_face_type [2019/02/04 09:29] tomiskar |
||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ====== Dynamic form - creating a new attribute renderer ====== | ||
+ | |||
+ | In this tutorial we will describe how to create a new [[devel: | ||
+ | |||
+ | A new render will be used for a persistent type '' | ||
+ | |||
+ | ===== What do you need before you start ===== | ||
+ | |||
+ | * You need to install CzechIdM 7.4.0 (and higher). We have CzechIdM installed for this tutorial on server '' | ||
+ | |||
+ | Source codes for this tutorial can be found in the [[https:// | ||
+ | |||
+ | |||
+ | ===== 01 Create a renderer component ===== | ||
+ | |||
+ | We will use '' | ||
+ | Radio form component is not implemented in core components yet, so we are using simple radio inputs. | ||
+ | |||
+ | <code javascript> | ||
+ | import React from ' | ||
+ | // | ||
+ | import { Advanced } from ' | ||
+ | |||
+ | /** | ||
+ | * Priority form value component. Doesn' | ||
+ | * - multiple | ||
+ | * - confidential | ||
+ | * - placeholder | ||
+ | * - helpBlock | ||
+ | * - validation | ||
+ | * - required | ||
+ | */ | ||
+ | export default class PrioritySelectFormAttributeRenderer extends Advanced.AbstractFormAttributeRenderer { | ||
+ | |||
+ | constructor(props, | ||
+ | super(props, | ||
+ | // prepare radio value | ||
+ | this.state = { | ||
+ | value: null | ||
+ | }; | ||
+ | } | ||
+ | |||
+ | /** | ||
+ | * Fill form value field by persistent type from input value | ||
+ | * | ||
+ | * @param | ||
+ | * @param | ||
+ | * @return {FormValue} | ||
+ | */ | ||
+ | fillFormValue(formValue, | ||
+ | formValue.longValue = rawValue; | ||
+ | // TODO: validations for numbers | ||
+ | return formValue; | ||
+ | } | ||
+ | |||
+ | /** | ||
+ | * Returns value to ipnut from given (persisted) form value | ||
+ | * | ||
+ | * @param | ||
+ | * @return {object} value by persistent type | ||
+ | */ | ||
+ | getInputValue(formValue) { | ||
+ | return formValue.longValue; | ||
+ | } | ||
+ | |||
+ | /** | ||
+ | * Filled form value | ||
+ | * | ||
+ | * @return {FormValue} | ||
+ | */ | ||
+ | toFormValue() { | ||
+ | const { values } = this.props; | ||
+ | // | ||
+ | return this.fillFormValue(this.prepareFormValue(values ? values[0] : null), this.state.value); | ||
+ | } | ||
+ | |||
+ | /** | ||
+ | * Set value on radio is clicked (changed) | ||
+ | * | ||
+ | * @param {event} event | ||
+ | */ | ||
+ | setValue(event) { | ||
+ | this.setState({ | ||
+ | value: event.target.value | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | renderSingleInput() { | ||
+ | const { attribute, readOnly, values } = this.props; | ||
+ | const singleValue = this.state.value || this.toInputValue(values); | ||
+ | // create radio inputs | ||
+ | const inputs = []; | ||
+ | for (let i = 1; i <= PrioritySelectFormAttributeRenderer.RADIO_COUNT; | ||
+ | inputs.push( | ||
+ | <label className=" | ||
+ | <input | ||
+ | name={ attribute.name } | ||
+ | type=" | ||
+ | readOnly={ readOnly || attribute.readonly } | ||
+ | value={ i } | ||
+ | defaultChecked={ singleValue === i }/> { i } | ||
+ | </ | ||
+ | ); | ||
+ | } | ||
+ | // raw bootstrap styles are used in this example (Basic radio component should be created instead) | ||
+ | return ( | ||
+ | <div className=" | ||
+ | <label className=" | ||
+ | <div className=" | ||
+ | { inputs } | ||
+ | </ | ||
+ | </ | ||
+ | ); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | PrioritySelectFormAttributeRenderer.RADIO_COUNT = 5; | ||
+ | </ | ||
+ | |||
+ | ===== 02 Register renderer component ===== | ||
+ | |||
+ | Component is created, now we need to register her in [[https:// | ||
+ | |||
+ | Add component into module' | ||
+ | |||
+ | <code javascript> | ||
+ | ... | ||
+ | module.exports = { | ||
+ | ... | ||
+ | ' | ||
+ | ... | ||
+ | { | ||
+ | ' | ||
+ | ' | ||
+ | ' | ||
+ | ' | ||
+ | ' | ||
+ | ' | ||
+ | } | ||
+ | ... | ||
+ | ] | ||
+ | }; | ||
+ | ... | ||
+ | </ | ||
+ | |||
+ | ===== 03 Define form attribute ===== | ||
+ | |||
+ | We can select renderer for some dynamic form atribute with peristent type '' | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | On identity detail in tab more information, | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ===== Advanced ===== | ||
+ | |||
+ | Renderer name can be localized. See '' | ||