Plugin-Dokumentation - Widget-Plugin: Navigationsleiste 

Page / - last modified by gru on 17.05.2021, 14:23 

Widget-Plugin: Navigationsleiste 
last modified by gru
on 17.05.2021, 14:23

Table of Contents
Funktionsbeschreibung
Installation
Konfiguration
Base properties
Darstellung
Label
Optionen
CSS classes
Attributes
Available only if
Other
Word-/PDF-Export
Mögliche CSS-Anpassungen

 
Das Symbol für Widgets vom Typ Navigationsleiste im Xima® Formcycle Designer.
Plugin-Download
Content [ Hide ] 
•	Funktionsbeschreibung
•	Installation
•	Konfiguration
•	Darstellung
•	Optionen
•	Word-/PDF-Export
•	Mögliche CSS-Anpassungen
Funktionsbeschreibung
 
Beispiel für eine eingefügte Navigationsleiste im Header eines Formulars.
Das Plugin stellt ein neues Widget im Designer zur Verfügung, welches es erlaubt, auf einfache Art eine Navigationsleiste auf Formularseiten einzufügen. Das Widget verwendet individuell im Designer zu konfigurierende Einstellungen im Bezug auf die Benamung der Links und die Seiten auf die diese verweisen. Durch einen Klick im Widget auf vorangegangende Seiten, kann zu diesen zurückgesprungen werden.
Das Navigationsleisten-Widget kann im Header oder Footer des Formulars platziert werden, wodurch man es nur ein Mal konfigurieren muss. Anderenfalls, muss je ein Navigationsleisten-Widget auf jeder Seite, auf der eins sichtbar sein soll, eingefügt und entsprechend konfiguriert werden. In diesem Fall empfiehlt es sich, die Konfiguration einmalig vorzunehmen und das konfigurierte Widget dann zu kopieren und auf den anderen Seiten einzufügen oder die Konfiguration in einer Datenquelle. zu hinterlegen und diese bei Optionen als Quelle auszuwählen.
Installation
Das Plugin kann als Mandant-Plugin oder System-Plugin installiert werden. Eine Anleitung zur Installation von Plugins finden Sie hier.
Konfiguration
An Widgets dieses Typs können die folgenden Eigenschaften konfiguriert werden:

Base properties
Basic settings for Base properties 
Content [ Hide ] 
•	Base properties
•	Alias
 
User interface for changing basic properties of a form field, such as its name or its width.
 
Elements can be repeated. In this example, the user can enter one or more email addresses.
 
The number of repetitions can also be set automatically, depending on the value of another element. In this example the fieldset with the data of a single child is repeated. There are always as many fieldsets as the number of children the user selected.
The base properties name, width and hidden can be set for each form field.
Base properties
Name	Description	
element	6.3.0+ Element type of the form field. The element type can be changed by selecting another element type in the dropdown menu. The element types an element can be transformed into depend on the original type. Containers and fieldsets can only be transformed into the respective other element type. All other element types can be transformed into any other type, except for containers and fieldsets.	
name	Name of the form field. Only letters and numbers may be used.	
alias	An alternative name for the form element, which may contain any characters. See below.	
width	Width of the form, relative to the width of other form fields on the same row. For example, when placing two form fields next to each, giving both a width of 2 means that both will take 50% of the available width. Setting the width of the first form field to 1, and the width of the second one to 3 results in the first one taking 25% of the available width, and the second one taking 75%. 	
hidden	When checked, the form field will be hidden initially. To show it again, the option visible if can be used, or a Javascript function such as  jQuery.fn.visible. 	
disabled	When checked, the content of the form field cannot be edited.	
Repeat	When this option is activated, the user can freely create any number of copies (repetitions) of this form element. For example, this can be used to let the user enter one or multiple email addresses. Please note that you cannot nest repeated elements: if a container is marked as repeated, none of its containing elements can be repeated.	
Min. repeat	Minimum number of allowed repetitions. When this limit is reached, the user cannot delete any more repeated elements. This is also the inital number of repetitions when the form is opened.	
Max. repeat	Maximum number of allowed repetitions. When this limit is reached, the user cannot add any more repeated elements.	
Repeat trigger	When an element is selected here: The number of repeated elements is automatically set to the value of the selected element. For example: Assume there is a select element or input element that lets the user enter number of children in their household. Also assume there is a fieldset for entering some data of these children. The fieldset is marked as repeated, and the select or input element is set as the repetition trigger. Now when the user enters how many children they have got, fieldsets are removed or created automatically so that there is always one fieldset for each child.	
Hide buttons	6.2.0+  Available only when an element was selected for Repeat trigger. Enable this option to hide the plus and minus buttons for adding and removing repeated elements. Use this option when the number of repeated elements should be controlled only by trigger.	
Alias
When a form is submitted, key-value pairs are sent with the name of the form being the key and the entered text being the value. Within workflow actions or templates, you can access the values of submitted form elements with variables. The name of a form element cannot contain special characters such as accented characters (é or ô). When sending data to web services or when integrating third party systems, it may become neccessary to make use of special characters. In this case, you can set an alias for a form element. This alias does not have any restrictions on which characters you can use.
This form elements does not possess any additional settings for the section Base properties.
Darstellung
In diesem Bereich kann für Navigationsleisten-Widgets nur die Positionierung der unter Optionen eingetragenen Beschreibungstexte der Seiten relativ zu dem sich darüber befindlichen Fortschrittsbalkenelement bestimmt werden.
Label
Basic settings for Label 
This property defines the label text of an element. A label is the text above, below or to the right or left of an element. Not every element has got this property.
 
The label text appears next to a form element. It should be kept short and tell the user what they should enter in this form field.
Name	Beschreibung	
Label	Value of the label. This is the text that is displayed next to the element.	
Alignment	Specifies the position (left, right, above, below) of the label.	
Width (in px)	Distance between label and the element. Applies only when the alignment is set to left.	
Placeholder	Placeholder text, applies only to input fields.	
Title	Tooltip of the item (the HTML title attribute).	
Unit	Text that after an element. Usually this is used for units, such EURO or km.	
This form elements does not possess any additional settings for the section Label.

Innerhalb des Labels kann mithilfe der Plathalter {1} und {2} die Nummer der Aktuellen Seite in der Liste und die Anzahl der im Widget konfigurierten Seiten eingefügt werden.
Optionen
 
Mögliche Konfiguration der zu verwendenen Auswahloptionen eines Navigationsleisten-Widgets.
Navigationsleisten-Widgets verfügen über einen zusätzlichen Bereich Optionen. Hier können die in der Navigationsleiste sichtbaren Seiten und die für die jeweilige Formularseite anzuzeigenden Namen festgelegt werden. 
Für jede anzuzeigende Formularseite ist eine Zeile mit dem sichtbaren Beschreibungstext und dem technischen Namen der Seite einzugeben. Optional können in der Spalte Titel die Title-Attribute der Beschreibungstexte festgelegt werden.
Neben der Konfiguration der Optionen direkt am Widget ist es zudem möglich, eine CSV-Datenquelle zu verwenden. Diese kann im Auswahlelement Datenquelle selektiert werden.

CSS classes
Basic settings for CSS classes 
 
Selecting CSS Classes.
This property lets you select one or many CSS classes for an element. The available CSS classes are read from the CSS in the CSS tab and from the selected CSS theme. When you select or deselect a class, the changes are applied immediately and any layout or design changes are visible in the form. You can also filter the available classes by using the filter at the end of the list.
This form elements does not possess any additional settings for the section CSS classes.

Attributes
Basic settings for Attributes 
Arbitrary custom HTML attributes are deprecated. HTML5 defines so-called data- attributes that can be used to store custom data in HTML elements. For example, it is ok to use the attributes data-price or data-serial-id, but you should not use attributes such as price or serialId.
The panel attributes lets you add custom attributes to the corresponding HTML elements of each form element. You can access them with JavaScript later, or add existing HTML attributes such as the attribute type for <input> elements.
 
This panel lets you add custom HTML attributes that may be needed for custom features implemented via JavaScript.
 
A custom HTML attribute has been added and can be seen when inspecting the generated HTML.
Adding an attribute
To add an HTML attribute, just enter the name and the value of the attribute into one of the columns. A new, empty column will be added automatically.
Deleting an attribute
Click on the   icon to the left to delete an attribute.
Accessing data attributes via JavaScript
If you want to add custom data to an element, use the prefix data- for the name. Additionally, the attribute name should contain no uppercase letters and use dashes to separate words. For example, data-serial-version is a good data attribute, dataSerialVersion is not. When accessing these attributes via JavaScript, remove the dashes and capitalize the first letter of each word.
Assuming the attribute data-serial-version was set to 1aFXc for the element tfSerialVer, you can access this data as follows:
const serialVersion = $("[name='tfSerialVer']").data("serialVersion");
console.log("Serial version is:" , serialVersion);
This form elements does not possess any additional settings for the section Attributes.

Available only if
Basic settings for Available only if 
The property Available only if controls whether elements are displayed or not depending on the current state or user.
Note that when an element is not available, it is never rendered and will not be present anywhere in the HTML. This means that users cannot see the form field or its current data even if they take a look at the source code of the form.
 
This lets you restrict the form field to a certain user group or to a certain state.
When only one state or a user group is selected, the form element is displayed only when the form is in the selected state or viewed by a user of the selected user group. For each state and user group there is also the opposite option to display a form element only when it is not in the selected state or not viewed by the selected user group. For example, when you want display a form element only when a user fills out the form for the first time, you can select the option no state.
If both a state and a user group are selected, the form element is displayed only when the form is both in the selected state as well as opened by a user belonging to one of the selected user groups.
The selection no state means that the form was opened for the first time and not submitted yet.
This form elements does not possess any additional settings for the section Available only if.

Other
Basic settings for Other 
 
Comments can be added for internal use. They will not be visible to the user when they open the form.
You can add a comment for internal use that will not appear anywhere in the form.
This form elements does not possess any additional settings for the section Other.
Word-/PDF-Export
Standardmäßig ist das Widget so konfiguriert, dass es nicht im Word-/PDF-Export auftaucht. Es ist auch nicht sinnvoll, an dieser Einstellung etwas zu ändern, da nur der Labeltext exportiert werden kann und beim Word-/PDF-Export keine Ersetzung der Platzhalter stattfindet.
Mögliche CSS-Anpassungen
Um das Aussehen des Widgets zu individualisieren, können per CSS Anpassungen vorgenommen werden. 
Zum Beispiel kann die Farbe des Fortschrittbalkens folgendermaßen angepasst werden:
.XNavigationBar .active .xnav-view, .XNavigationBar .active-before .xnav-view {
   background-color: red;
}