IAInputControl

Intelligent Advisor Flows was only made available to select customers, and will not be made Generally Available.

An IAInputControl represents a control that is collecting a single value.

Input controls cover a wide range of use cases, including (but not limited to):

• checkboxes and switches

• text inputs for strings, numbers, and dates

• calendar controls

• split date selectors

• dropdown selectors

• radio button groups

• number sliders

• star rating pickers

The exact type of control determines whether it is appropriate to use the value, textValue or fullControlValue fields.

Underlying these fields are two concepts:

• the session value, and

• the raw value

The session value for a control is a value that is in the appropriate format for the data type for the field and is usable in the session for evaluation purposes.

The raw value for a control can contain the renderer-specific representation of the value as entered by the user. This is typically a string in simple cases, but can be any JSON-compatible content for more complicated cases.

For example, a text input for a data value could have a raw value of "1/1/1970" and a session value of "1970-01-01".

On the other hand, the raw value doesn't necessarily represent a valid value. For example, a text number input could have a raw value of "zero" but a session value of null due to it not being a valid number.

Access to these two underlying concepts are encapsulated in the three fields of the IAInputControl interface:

• value - This field provides access to the session value for the input control. Usage of this field is appropriate for controls that manipulate values directly without any need for interpretation. Examples include checkboxes and sliders.

• textValue - This field works in conjunction with the configured parsers and formatters for the field to update both the raw value and session value for the input control. Examples include freeform text fields that back onto data types such as numbers and dates (it is also valid to use it for freeform text fields for a string field).

• fullControlValue - This field allows full access to both the raw value and session value for more complicated input requirements. Examples include controls such as three component date fields or freeform text fields where the inbuilt parsers/formatters are insufficient.

For choosing the appropriate renderer for a given input control, use the control's schemeId:

function inputFactory(item: IAInputControl<any>) {
    switch (item.schemeId) {
    case "text":
    case "calendar":
        return <TextField control={item}/>;
    case "boolean-checkbox":
        return <BooleanCheckbox control={item}/>;
    case "boolean-radio":
        return <BooleanRadio control={item}/>;
    case "radio":
        return <RecordRefRadio control={item}/>;
    }
}

The following examples are only intended to demonstrate collecting values via some basic inputs. Other considerations such as error reporting and accessibility are not shown here.

A boolean checkbox might be implemented as:

function BooleanCheckbox({control}: InputFieldProps<boolean>) {
    const session: ApplicationSession = useContext(SessionContext);
 
    return <div key={control.id} class="checkbox-field">
        <label><input type="checkbox" disabled={control.isReadOnly} checked={control.value} onInput={evt=>{
                control.value = evt.target.checked;
                session.refresh();
            }}/> {control.text}</label>
    </div>
}

A text input field that is suitable for inputting strings, numbers or dates could be implemented as:

function TextField({control}: InputFieldProps<string|number>) {
    const session: ApplicationSession = useContext(SessionContext);
 
    return <div key={control.id} class="text-field">
        <label for={control.id}>{control.text}</label>
        <input id={control.id} disabled={control.isReadOnly} type="text" value={control.textValue} onInput={evt=>{
                control.textValue = evt.target.value;
                session.refresh();
            }}/>
    </div>
}

Boolean radio buttons could be implemented as:

function BooleanRadio({control}: InputFieldProps<boolean>) {
    const session: ApplicationSession = useContext(SessionContext);
 
    return <fieldset key={control.id} class="radio-field">
        <legend>
            {control.text}
        </legend>
        {control.options.map(opt=>(<label><input type="radio" name={control.id} disabled={control.isReadOnly} checked={control.value == opt.value} onInput={evt=>{
            control.value = opt.value;
            session.refresh();
        }}/> {opt.text}</label>))}
    </fieldset>
}

A radio button group picking from a set of records would be slightly different as:

export function RecordRefRadio({control}: InputFieldProps<IARecordRef>) {
    const session: ApplicationSession = useContext(SessionContext);
 
    return <fieldset key={control.id} class="radio-field">
        <legend>
            {control.text}
        </legend>
        {control.options.map(opt=>(<label><input type="radio" name={control.id} disabled={control.isReadOnly} checked={control.isSelected(opt.value)} onInput={evt=>{
            control.value = opt.value;
            session.refresh();
        }}/> {opt.text}</label>))}      
    </fieldset>
}