Skip Navigation

Custom Form

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.

custom form

Usage

In order to be used, the CustomForm has to be imported:

import {CustomForm} from 'sabre-ngv-custom-forms/components/CustomForm';

Same as in case the of Custom Forms Service 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. Example of string definition in a defined format:

const initialCustomFormState = 'firstName, lastName, title, email*';

Example of definition as a dedicated data object:

import {CustomForm} from 'sabre-ngv-custom-forms/interfaces/form/CustomForm';

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 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, errors: []};
}

Communication between Custom Form Component and Red App component that contains it is facilitated by two methods: onFormChange and onErrorsChange. Both are executed whenever the state of the custom form changes.

The full declaration of Custom Form may look like this:

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

Properties

The following properties can be defined for custom form component:

Property Description

customFormSchema

Initial schema for the custom form.

onFormChange

Method that will be called after value change of any field of the custom form. Contains current form model, including current field values.

onErrorsChange (optional)

Method that supports custom error handling. Contains list of field validation errors, it consists of pairs field id and error message.

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.