Button

Last modified by Sabrina Schulze on 16.01.2019

The icon for form elements of type button.

Functionality

The form element button adds buttons to the current form. Each button element may contain multiple buttons. By default, this element contains two buttons, back and next. To add or delete buttons, go to the section value on the right hand side.

For each button, you can select the action when the user clicks the button. Currently available actions are moving to a different page of the form, submitting the form, or saving the form when the user wishes to continue filling out the form at a later time. For more details, see the section values below.

Base properties

Basic settings for Base properties

User interface for changing basic properties of a form field, such as its name or its width.

The base properties name, width and hidden can be set for each form field.

Base properties

NameDescription
nameName of the form field. Only letters and numbers may be used.
aliasAn alternative name for the form element, which may contain any characters. See below.
widthWidth 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%. 
hiddenWhen 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  visible()
disabledWhen checked, the content of the form field cannot be edited.

Alias

When submitting a form, the form data is send as key-value pairs <name>-<value>. To access the value of a form field from actions or templates, variables can be used.

Form element names are limited to certain characters and may not contain any special characters. When special characters need to be used, for example when forwarding data to a web service. By setting an alias for the form element, arbitrary names can be used.

To assign an alias, select the element in the Xima® Formcycle Designer and set the alias on the basic properties panel.

This form element possesses the following additional properties for the section Base properties.

NameDescription
AlignmentChanges the alignment (left, right, centre) of the buttons.

Base properties

Basic settings for Base properties

User interface for changing basic properties of a form field, such as its name or its width.

The base properties name, width and hidden can be set for each form field.

Base properties

NameDescription
nameName of the form field. Only letters and numbers may be used.
aliasAn alternative name for the form element, which may contain any characters. See below.
widthWidth 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%. 
hiddenWhen 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  visible()
disabledWhen checked, the content of the form field cannot be edited.

Alias

When submitting a form, the form data is send as key-value pairs <name>-<value>. To access the value of a form field from actions or templates, variables can be used.

Form element names are limited to certain characters and may not contain any special characters. When special characters need to be used, for example when forwarding data to a web service. By setting an alias for the form element, arbitrary names can be used.

To assign an alias, select the element in the Xima® Formcycle Designer and set the alias on the basic properties panel.

This form element possesses the following additional properties for the section Base properties.

For every button, text can be added which is shown in the form and the name which is used intern in HTML. You can also determine what happens if you press the buttons.

Value

Basic settings for Value

Value for input fields.
Value for selection fields.
Value for checkboxes.

This property defines the initial value of the element. Depending on the selected item, there are different options to choose from. A detailed description of these options can be found in Help in the respective Item.

This form element possesses the following additional properties for the section Value.

NameBeschreibung
TextThe button's inscription how it is displayed in the form.
NameThe value of the HTML attribute name, which gets the input element in HTML.This name can also be used for accessing buttons in javascript or CSS. For example the CSS [name=btnSubmit] { width:100%;} arranges it so that the button with the name btnSubit occupies the whole width. 
ActionThe action which should get conducted after cklicking on the button.

Add and delete buttons

For deleting a button press the receycle bin   symbol on the leften side.Click on the empty last line to add a button. The order of buttons can be changed by putting the button in another position. 

Existing actions

Everybutton can have an action. Every action can happen with or without checking. Checking the form means to check if all required fields are filled in and if there are no form fields with defective inputs (validation of data types).

The following actions are available.

NameBeschreibung
No actionNo action happens by clicking the button. You can use this option if your own action should get implemented with Javascript. The following example displays a short message if you press the button with the name btnNext.
$('[name=btnNext]').click(function() {
  alert("The button with the name btnNext was pressed.")
})
Page xChanges the corresponding page. For each page in the form ther is a seperate choice.
Page x + checkChanges to the specified page if the current page has no wrong inputs.
SubmitSends the form to the server and then creates a process. The form is also sent even if there are mistakes in the form fields.
Sumbit + checkSends the form only to the server if there are no defective inputs in the form.
Submit no saveSends the form to the server but does not create a process. This action should be used if you process the form data in the workflow but not want to create a lasting process.
Submit no save popupSends the form to the serverand opens the response page as pop-up but does not create a process.  But if there are defective inputs in the form it will not be sent. This action should be used if you process the form data in the worklflow but don't want to inject a permanent process. For the pop-up window usually a file for download is available. Please refer to deliver file.
SaveSaves the form content for later processing on the server. The form will always be sent equal if there are defective form fields or not.
Save + checkSaves the form content for later processing on the server only if the form has no mistakes anymore.

Constraints

Basic settings for Constraints

The constraints panel contains options to check the value of form fields, when form fields should be visible and when they can be edited. Some constraints are available only for some element, see the list of element..

Properties

A form field can be made a required field, requiring the user to enter something or select an option.
NameDescription
hidden ifHides the form fieldm when a certain conditions is satisfied.
visible ifMakes a form field that has been hidden visible again, when a certain condition is satisfied.
read-only ifLocks a form field and disallows any input, when a certain condition is satisfied.
editable ifMake a form field that has been set to read-only editable again, when a certain condition is satisfied.
required ifMarks a form field as a required field, when a certain condition is satisfied.
required groupAvailable only when the form field is a required field. Specifies the required group the form field should belong to. When two or more form fields belong to the same group, at least one of these form fields needs to be filled out, all other fields may remain empty.

Condition

Any condition referring to the value of a form element of type selection uses the value of the option for testing the condition, that has been given to that option in the column value in the values properties panel of the Xima® Formcycle Designer.

You can change a form field's visibility and read-only state depending on the value of another form element. The following conditions are available for the options hidden if, visible if, read-only if, editable if, and required if:

  • has a value
  • equals
  • not equals
  • lower than
  • lower equal than
  • greater than
  • greater equal than
  • between
  • regular expression
You can also select elements with the element picker to the right. Click on the hand-shaped icon and then on the element you would like to use. This comes in handy when editing forms with many form fields.
ConditionDescription
has a value

The conditions evaluates to true when the value of the form field is not empty.

In particular, having a value mean the following for different form elements:

  • for a checkbox, that the checkbox is not checked.
  • for a selection, that some option other than Please select an option has been selected. When the selection field is displayed as a combo box, the first option will be selected by default, unless the selection is a required field, in which case the option Please select an option will be selected by default.
  • for an input field, that at least one character has been entered.
equalsThe condition evaluates to true when the value of the form field equals the given value. Comparisons are case-sensitive.
unequalThe condition evaluates to true when the value of the form field does not equal the given value. Comparisons are case-sensitive.
lower than / lower or equal thanThe condition evaluates to true when the value is lower (or equal) than the specified value.
greater than / greater or equal thanThe condition evaluates to true when the value is greater (or equal) than the specified value.
betweenThe condition evaluates to true when the value is between the specified range, inclusively. The interval must be entered with a dash delete, for example 2-10. Negative numbers must be enclosed in parentheses, eg. (-10) - (- 5).
regexpThe condition evaluates to true when the value matches the specified regexp.

Empty automatically

For the properties hidden if and read-only if, you may choose whether the form field should be emptied automatically when it gets hidden or locked.

For example, consider the case of entering an address. The user can choose between a physical address and a post-office box, and only one input field is visible depending on the user's choice. When the form is submitted, a value should be send only for one of both fields. By selecting the empty automatically options, the input field post-office box will be cleared automatically when the user selects a physical address.

When emptying an element, all sub elements will be emptied as well. This applies to form elements of type page, container, and fieldset.

This form elements does not possess any additional settings for the section Constraints.

Css styles

Basic settings for Css styles

Selecting CSS styles.

The feature allows the selected item to assign one or more CSS classes. The CSS classes shown are read either from the css area or any of the CSS Templates selected in the configuration. After selection of the appropriate CSS class, the property is applied immediately. In the lower part of the properties window, CSS classes can be filtered using existing ones.

This form elements does not possess any additional settings for the section Css styles.

Attributes

Basic settings for Attributes

Custom HTML attributes are deprecated. HTML5 defines so-called data- attributes that can be used to store custom data in HTML elements.

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 recycle bin icon ( ) to the left to delete an attribute.

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.

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 users when they open the form.

You can add a comment for internal use that will not be visible in the form itself.

This form elements does not possess any additional settings for the section Other.

Tags:
Created by superadmin on 28.09.2015
Translated into en by superadmin on 25.05.2016
  
Copyright 2000-2018