Skip to main content

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.


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"
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) {
    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

    onFormChange={(form: CustomForm) => {
        this.setState({customFormState: form})
    onErrorsChange={(errors: FieldError[]) => {
        this.setState({errors: errors})


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.

_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.