Data privacy notice

 

When this content is loaded, usage information is transmitted to Vimeo and may be processed there.

 

             

Form widget: navigation bar

Modified on Fri, 21 Jul, 2023 at 2:54 PM

Overview

The plugin provides a new widget in the designer, which allows to easily insert a navigation bar on form pages. The widget uses settings that can be individually configured in the designer with regard to the naming of the links and the pages to which they refer. By clicking on previous pages in the widget, you can jump back to them.

The navigation bar widget can be placed in the header or footer of the form, so it only needs to be configured once. Otherwise, a navigation bar widget must be inserted on each page on which one is to be visible and configured accordingly. In this case, it is advisable to carry out the configuration once and then copy the configured widget and insert it on the other pages or to store the configuration in a data source and select this as the source in Options.


Example of an inserted navigation bar in the header of a form.


Installation

The plugin can be installed as a client plugin or system plugin. Instructions for installing plugins can be found here.


Configuration

The following properties can be configured on widgets of this type:


Style

In this area, for navigation bar widgets, only the positioning of the description texts of the pages entered under options can be determined relative to the progress bar element above.


Label

This element has no additional settings in the Label section.

Within the label, the number of the Current Page in the list and the number of pages configured in the widget can be inserted using the {1} and {2} placeholders.


Optionen

Possible configuration of the selection options of a navigation bar widget to be used.

Navigation bar widgets have an additional Options area. Here the pages visible in the navigation bar and the names to be displayed for the respective form page can be defined.

For each form page to be displayed, a line with the visible description text and the technical name of the page must be entered. Optionally, the title attributes of the description texts can be defined in the Title column. In addition to configuring the options directly on the widget, it is also possible to use a CSV data source. This can be selected in the Data Source selection element.


Word-/PDF-Export

By default, the widget is configured so that it does not appear in the Word/PDF export. It does not make sense to change this setting, as only the label text can be exported and no replacement of placeholders takes place in the Word/PDF export.


Possible CSS adjustments

To individualise the appearance of the widget, adjustments can be made via CSS.
For example, the colour of the progress bar can be adjusted as follows:

.XNavigationBar .active .xnav-view, .XNavigationBar .active-before .xnav-view {
    background-color: red;
}


Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article