[Old form engine] Transform value for UI

Engines
1

Hi!

In Cosmo, we are still on FormEngine 21.3.x.
For one field, we would like to render a different value than the one saved in the document, i.e. transform the value.

Specifically, in the document, I need to save an insurer ID number, but in the UI, I would like to show the insurer’s name (based on dynamic retrieval from the database).

Is there a way to achieve this?

2

There are three possible solutions (ordered by complexity). Please consider the more suitable solution for you project.

  1. It is possible to add another field that contains the insurer’s name in addition to the insurer’s id. This would be suitable if the insurer should never be set in the form. However, keep in mind that the id has to be updated if the name is changed and vice versa (e.g. on the server).

  2. Define the insurer’s id as an external enumeration (string), where the id is the key and the name is the label. Here you have to provide an external enumeration provider that handles these kind of information.

  3. The most flexible and complex solution is to create a custom input that handles all the necessary stuff.

3

In Chefsculinar we needed a AutoComplete Input, but I think it should be the same:

export default class CustomReactWidgetFactory extends DefaultReactWidgetFactory {

    constructor(context: ApplicationContext, fieldConfig: Map<string, React.ComponentType<CustomInputProps>>) {
        super();
        this._inputWidgetFactory = new CustomInputWidgetFactory(context, fieldConfig);
    }
}

class CustomInputWidgetFactory extends DefaultInputWidgetFactory {
    constructor(private context: ApplicationContext, private fieldConfig: Map<string, React.ComponentType<CustomInputProps>>) {
        super(true, false);
    }

    createStringInput(props: BufferedTextLine.PropsType, hint?: string, key?: React.Key, onValueChange?: () => void): React.ReactElement<{}> {
        if (this.fieldConfig.has(props.id)) {
            const C: React.ComponentType<CustomInputProps> = this.fieldConfig.get(props.id);
            return <C {...props} context={this.context}/>;
        }
        return super.createStringInput(props, hint, key, onValueChange);
    }
}

const customInput = new Map<string, React.ComponentType<CustomInputProps>>();
        customInput.set("a12-Agent-F18", UsernameAutocomplete);
this.customFormWidgetFactory = new CustomReactWidgetFactory(this.props.context, customInput)


export type CustomInputProps = ContextComponentProps & BufferedTextLine.PropsType;
export class UsernameAutocomplete extends React.Component<CustomInputProps, {}> {
... <--put here your logic to render the other field-->
}

The FormEngine has the "renderer" in EngineOptions:

return new ReactRenderer(
                this.props.customFormWidgetFactory,
                {
                    converters: new OverviewConverters(this.props.context.user.locale),
                    localizerService: this.localizerService,
                    localizableFactory
                }
            );

alternate: implement a ConversionService like we have OverviewConverters.
import { ConversionService } from “@com.mgmtp.a12/validation-api/lib/main/conversion/api”;

Maybe this give you an Idea.

4

Thanks! I eventually went with the ExternalEnumeration which worked quite well. Although the ConversionService sounds intriguing.