Footnote for FormEngine

Engines Form Engine
1

What is the right way to show a sidenote text about required fields (*) in the form. My suggestion is to customize FormEngine and add a static HTML at the very bottom.

Is it the right way to do it and when yes, how to customize it?

Thanks.

2

Hi Dimitri,

  • If the point is only to show a side note text as an Error Message to announce that the field is required, then you should use the SME to add a Validation Rule for the required field and then you can specify the error message within the validation rule.

  • In case you want to show an Info Message for a specific field then you need to use the Ui Designer and edit the field you want by adding a Hint.

  • Otherwise if you would like to customize the Form Engine to show a field with a side note, I would suggest customizing the TextLineStateless within the Widget Map and returning your customized field with a side note message, we already have something similar on Widgets → Text Field.

const createWidgetMap = (activityId: string): WidgetMap => {
    return {
        ...DefaultWidgetMap,
        TextLineStateless: (tProps: TextLineStatelessProps) => {
            return <TextField{...tProps} activityId={activityId}/> //The Customized Field from the Widgets
        }
    };
};
3

Hey aakel,

Thanks for the quick reply.
I want to display some text at the bottom of the form - just before the footer. So it applies to the whole form, not just one field. I also want the text to always be visible, not only on error.

Option 3 works, but unfortunately it places the widget multiple times in different places on the form. Is it possible to change the view of Form Engine?

4

Now worries,

Regarding (placing the widget multiple times in different places) I would suggest adding an annotation to the field you want to replace (via the UI Designer) check here, then render your customized widget based on the added annotation, if you would like to show plain text only I would suggest using one of these two Widgets (Text Output, Tag).

5

Not sure if it works this way for me. I need to render the text on a form, rather on a field. So basically each form has the text at the end. Is it possible?

6

Ok now I understand better,
I’m not sure about this but I would suggest customizing the Screen within the form model which contains a prop called footerBox where you can render your plain text.

7

Thank you for your help aakel.
I ended up with a custom form engine:

...
TaskForm(props) {
            return (
                <TaskForm
                    {...props}
                    formModelMap={{
                        ...DefaultFormModelMap,
                        Form: { component: CustomFormEngineComponent }
                    }}
                ></TaskForm>
            );
        }
...

and the component:

export function CustomFormEngineComponent(props) {
    const localizer = useLocalizer();
    return (
        <>
            <DefaultFormModelMap.Form.component
                {...props}
            ></DefaultFormModelMap.Form.component>
            <div>
                {localizer(RESOURCE_KEYS.features.form.requiredHint)}
            </div>
        </>
    );
}
8

Happy to help,
Thank you for sharing!