Breadcrumb
ICustomFormsService
Allows creating user defined forms and menus in a declarative way.
ICustomFormsService complements IFormsService, which allows opening and prepopulating Sabre defined forms.
Usage
In order to be used, the ICustomFormsService has to be imported:
import { ICustomFormsService } from 'sabre-ngv-custom-forms/services/ICustomFormsService';
Once imported, it can be obtained in a standard way:
const service: ICustomFormsService = getService(ICustomFormsService);
The service provides two methods:
openForm(form: string | CustomForm, title?: string): Promise<CustomFormRs>;
openMenu(menu: string | CustomMenu, title?: string): Promise<string | null>;
These methods take as a parameter declarative definition of the form/menu and optionaly a title (when the first argument is a string).
Due to the type of the first parameter - it can be either a string in a defined format or a dedicated data object - the service provides two types of the API - text API (string) and structure API (data object). Both APIs can be used interchangeably, but the text API does not support all features that are available in structure API - it is a subset of structure API and is intended to simplify the creation of basic forms.
Note
|
Detailed information about the service, its usage, form field types and structure of the data objects are available in SDK TypeScript Api Documentation in sabre-ngv-custom-forms web module.
|
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. |
Forms API
Allows creation of user defined forms in a simple declarative way.
Basic form
By default all fields are of type text and are optional (filling the field is not mandatory to submit the form).
Labels are generated from the field IDs - each part of the camel-case ID is treated as a separate word in the label.
|
![]() |
|
Structure API allows defining custom labels, which are not generated from the field IDs.
|
![]() |
|
Mandatory Fields
Fields can be marked as mandatory. Form cannot by submited if mandatory fields are empty.
|
![]() |
|
Advanced Field Validation
Content of the text fields can be validated with regular expressions.
Regular expressions validation can be used together with mandatory field validation.
Form cannot by submited if there are validation errors.
Custom error message can be provided.
|
![]() |
|
Warning
|
Regex validation is performed only if a field has a value, empty fields are not validated. |
Field Types
Different field types can be defined in JSON object or added as a dash-separated suffix to the field ID in the text API.
TEXT (default) Options: |
|
![]() |
|
||
CHECKBOX Options: |
|
![]() |
|
||
DATE Options: |
|
![]() |
|
||
DROPDOWN Options: |
|
![]() |
|
||
RADIO Options: |
|
![]() |
|
||
CODE Options: |
|
![]() |
|
||
{domain}_CODE Options: See |
|
![]() |
|
||
PARAGRAPH Options: |
|
![]() |
|
||
SEPARATOR |
|
![]() |
|
Fields prepopulation
Structure API allows opening the forms with prepopulated fields by filling 'value' property in the the data object. Fields of all types with 'value' property can be prepopulated.
|
![]() |
|
Action buttons
When the form is submitted, returned object contains action
field which indicates which button was selected to close the form.
By default OK
and Cancel
buttons are displayed which return ok
and cancel
actions.
It is possible to define custom buttons with custom actions that will replace default buttons.
Wen custom buttons are defined it is mandatory that ok
and cancel
actions are still present.
These are default actions that are used when a form is closed with X' button, `Esc
key, or Ctrl+Enter
keys.
Labels for actions are optional and if not provided are generated the same way as labels for form fields or menu items.
|
![]() |
|
Layouts
By default fields are layout on the form one be one in one column.
Custom layouts can be defined with CSS grid-template-areas. Layouts are based on IDs of the form fields. The given layout does not affect the tab order over the form.
|
![]() |
|
Description
For each field for which there is a label, you can also define a field description. The field description is rendered as an icon to the right of the label (the description is visible when you hover over the icon).
|
![]() |
|
Icons
For some of the fields (see Field Types section) it is possible to define an icon. The Font Awesome icon name is expected (e.g. "fa-cog"). Icons are rendered inside the HTML input, to the left of the text.
The icon is rendered differently for PARAGRAPH
field and additionally it supports the icon styles
used in banners: Info
, Warning
, Success
, Error
.
|
![]() |
|
Placeholders
For some of the input fields (see Field Types section) it is possible to define a placeholder. It specifies a short hint that describes the expected value of the field. This short hint is displayed in the input field before the user enters a value.
|
![]() |
|
Advanced Sample
|
![]() |
Menus API
Allows creation of user defined menus in a simple declarative way.
Labels, if not provided, are generated from the ID the same way as in forms - each part of the camel-case ID is treated as a separate word in the label.
Structure API allows custom labels for menu items.
openMenu
method returns ID of the selected item or null if menu is closed without any selection, e.g. with X
button or with Esc
key.
Menus may contain items of types:
-
MENUITEM - default type for menu
-
SEPARATOR - used for visually divide menu items, cannot be selected
|
![]() |
|