This is the legacy documentation of Project-level Custom Applications, which is in maintenance mode. Visit the new documentation for Org-level Custom Applications.


Custom Form Modal Page


Custom Form Modal pages are a variation of the <FormModalPage> that allow to pass custom control elements via formControls. This is useful in case the modal page needs different control elements than the default ones (primary and secondary buttons).


import { CustomFormModalPage } from '@commercetools-frontend/application-components';
title="Lorem ipsum"
subtitle={<Text.Body>{'Lorem ipsum ...'}</Text.Body>}
topBarCurrentPathLabel="Lorem ipsum"
<CustomFormModalPage.FormSecondaryButton onClick={handleCancel} />
<CustomFormModalPage.FormPrimaryButton onClick={handleConfirm} />
<CustomFormModalPage.FormDeleteButton onClick={handleDelete} />
<TextField {...textFieldFormProps} />


isOpenboolean-Indicates whether the page is open or closed. The parent component needs to manage this state.
titlestring-The title of the page.
subtitlenode or string--The subtitle of the page, usually a React component. If a string is passed, it's rendered as a paragraph.
onClosefunction--Called when the page closes: click on overlay, click on close button, press ESC. If the function is not provided, the page cannot be closed by any of the listed options.
levelnumber1The level indicates the stack position of the modal page, progressively increasing the z-index position (combined with the baseZIndex) as well as the spacing from the left side of the page.
baseZIndexnumber1000The base z-index value to be applied to the overlay container, incremented by 1 according to the level prop.
zIndexnumber-The z-index value to be applied to the overlay container. This value overrides the normal z-index value calculated from the baseZIndex and level props. If you provide this value, you would need to take care of providing a proper z-index based on the stacked level.
topBarCurrentPathLabelstringThe title propLabel to appear as the current path of the top bar of the modal
topBarPreviousPathLabelstring"Go Back" (translated)Label to appear as the previous path of the top bar of the modal
childrennode-Content rendered within the page. If the content is long in height (depending on the screen size) a scrollbar will appear.
formControlsnode--Pass a React.node with form controls. You can use the pre-made form buttons exposed by this component or you can use your own.
getParentSelectorfunction--The function should return an HTML element that will be used as the parent container to hold the modal DOM tree. If no function is provided, it's expected that an HTML element with the id="parent-container" is present in the DOM. In the NODE_ENV=test environment, the default HTML element is body.
hideControlsbool-falseHides the form controls.
shouldDelayOnClosebool-trueSets whether the ModalPage should delay calling its onClose function to allow the closing animation time to finish. This can be turned off if the developer is controlling the ModalPage only through the isOpen prop, and not abruptly mounting/unmounting it or one of its parent elements. You might also want to turn this off if you need to display a Prompt (for example to save changes) on the ModalPage before navigating out of it, as this option makes the Modal close itself before onClose is called.
afterOpenStylesstring or object--Overwrite the default styles of afterOpen. You can pass a "class name" or a CSS-in-JS style object. This should be used only in cases the default styles are causing some layout issues.

Static properties

Form Control Buttons

Pre-configured form control buttons to easily re-use them in the custom controls.

CustomFormModalPage.FormPrimaryButton = FormPrimaryButton;
CustomFormModalPage.FormSecondaryButton = FormSecondaryButton;
CustomFormModalPage.FormDeleteButton = FormDeleteButton;


This is a convenience proxy export to expose pre-defined Intl messages defined in the @commercetools-frontend/i18n package. The Intl messages can be used for button labels.

// other props...
// other props...