Custom Form Component

Allows creation of user-defined forms and using them as a React component. The idea behind it is the same as in Custom Forms but instead of showing a modal we expose react component that can be used as a part of Red App UI.

Setup

Same as in case the of Custom Forms first thing that is needed is a declarative definition of the form. It can be either a string in a defined format or a dedicated data object.

const initialCustomFormState: CustomForm = {
    title: 'Passenger Data',
    fields: [
        {
            id: 'firstName'
        },
        {
            id: 'lastName'
        },
        {
            id: 'title'
        },
        {
            id: "email",
            "validation": {
                mandatory: true,
                regex: "^\\w+@\\w+(\\.\\w+)+$",
                error: "Provide a valid email address"
            }
        }
    ]
};

Note	*com.sabre.redapp.example3.web.custom.forms* SDK sample project contains many examples of using the service and shows how to create menus and forms with all available features like field types, field validation, action buttons and layouts.

The difference between Custom Forms Service and Custom Form as a component is that this schema is now provided to the react component imported from sabre-ngv-custom-forms/components/CustomForm. Additionally the custom form schema should be used as a state of external component so values of the form can be accessed.

constructor(props) {
    super(props)
    this.state = {customFormState: initialCustomFormState, myState: '0', errors: []};
}

<CustomFormComponent customFormSchema={this.state.customFormState} ... />

Communication between custom form and Red App component

Communication between Custom Form Component and Red App component that contains it is facilitated by two methods: onFormChange and onError. The first one is obligatory. Both are executed whenever the state of the custom form changes. onFormChange contains current form model, including current field values. The second one contain list of field validation errors, it consists of pairs field id and error message.

The full declaration of Custom Form Component looks like this

<CustomFormComponent
    customFormSchema={this.state.customFormState}
    onFormChange={(form: CustomForm) => {
        this.setState({customFormState: form})
    }}
    onErrorsChange={(errors: FieldError[]) => {
        this.setState({errors: errors})
    }}
/>

Limitations

The current version of the component does not support

action elements of custom form schema, communication, and performing actions are based on state, not button event.
title filed in schema is not supported in any way.
mandatory element validation native for custom form is not supported, it has to be done during onChange method execution.

Note	_com.sabre.redapp.example3.web.application.sidepanel SDK sample project contains example usage of the component and shows how to create it and communicate with parent component.