Skip to main content

Customize the toolbars

In the default configuration, the builder shows a navigation and zoombar (the latter is only visible when the form structure is larger than the current viewport). The navigation bar is primarily intended to be the default place for the Save button if there isn't room for it elsewhere in the UI (or when the builder is used as a standalone tool). If you integrate the builder into a custom application, you probably don't need it. For example, you could implement a custom save button in your application UI instead of the navigation bar (or use automatic saving on each change). This chapter shows the different options available for the toolbars and shows how to disable them entirely if you like.

Toolbar options

This table shows the available options and the default value of each option. These options are part of the IBuilderProperties interface used when constructing a new builder instance.

disableLogobooleanDisables the Tripetto logo in the navigation bar.false
disableSaveButtonbooleanDisables the save button in the navigation bar.false
disableRestoreButtonbooleanDisables the restore button in the navigation bar. The restore button restores a form to the previous saved state. So this will undo any changes made to the form since the last save action was called.true
disableClearButtonbooleanDisables the clear button in the navigation bar. When the clear button is pressed, the whole form is removed and a new empty one is created.true
disableEditButtonbooleanDisables the edit button in the navigation bar. The edit button opens the form properties editor where the name, language, description and keywords of the form are managed.false
disableCloseButtonbooleanDisables the close button in the navigation bar. The close button closes the builder and invokes the onClose event event.false
disableTutorialButtonbooleanDisables the tutorial button in the navigation bar.false
previewURLstringSpecifies the URL of a preview page. When set, a preview button will be shown in the navigation bar. When the user clicks that button a new tab/window with the supplied URL is loaded.
supportURLstring | falseSpecifies an URL to a custom help or support page or supply false to disable this button.
disableZoombarbooleanDisables the visual zoombar that is shown when the form exceeds the size of the builder viewport.false
controls"left" | "right"Specifies the location of the navigation and zoombar."right"

Hiding the navigation bar

Use the following configuration to remove the navigation bar:

import { Builder } from "@tripetto/builder";

const builder = new Builder({
disableLogo: true,
disableSaveButton: true,
disableEditButton: true,
disableCloseButton: true,
disableTutorialButton: true,
disableOpenCloseAnimation: true,
supportURL: false,

Hiding the zoombar

Use the following configuration to remove the zoombar:

import { Builder } from "@tripetto/builder";

const builder = new Builder({
disableZoombar: true,

Hiding the subforms navigation bar

When a subform is being opened, a floating navigation bar appears with the name of the subform, a button to edit the name of the form, and a button to close the subform (and return to the parent form). If you don't want to show/use that navigation bar, you can implement the onBreadcrumb event of the builder. Use this event to provide an interactive breadcrumb to the user with controls to edit the name of the subform and to close the subform (so it returns to the parent form).