Quik! offers the ability to add a custom field to a form and add values into that field. Custom fields can be used to add annotations to a form, write short messages, or for any other reason a user might want to include extra information either adjacent to or on top of existing fields. See the screenshots below for instructions on how to add custom fields to a form:

Located the custom field button to the left of the ‘Clear' and 'Reset' buttons. This button should only be visible when it is configured to appear (see Sample Code section below)-- it is off by default. In the screenshots below, the button is named 'Edit’.

2. Upon clicking this button an 'Edit Mode' will be enabled. All buttons in the top navigation become hidden and three new buttons appear in their places. New buttons are: 'Add Field', 'Cancel', and 'Save'.

3. Clicking the 'Add Field' button will generate a new custom field in the center/top of the wrapper. Hovering your cursor over the custom field box will change the user's cursor to that of a 'Move Tool'. Click on the field to drag it to where you want to position it on the form. Clicking the red "X" will delete the field.

4. Moving your cursor to the sides or corners of the custom field box will change the cursor to that of a 'Vertical Adjust Tool', a 'Horizontal Adjust Tool', or a 'Diagonal Adjust Tool'. Clicking and moving the cursor at these points will drag the sides or corners to follow the cursor in order to resize the 'Custom Field' box. Notice that the red 'X' will disappear and reappear depending on the click state of the mouse.

5. When you have added, positioned, and sized, the field, click the 'Save' button. Clicking the 'Save' button in the top navigation area will save all changes made in 'Edit Mode' and then exit you from 'Edit Mode'. All custom fields created are now added to the form as opaque white rectangular fields. These new fields are now capable of text input like any other existing field on the form. (See the new Name box in the screenshot below)

6. Alternatively, you may not want to save your newly added custom field. Clicking the 'Cancel' button in the top navigation area will discard all changes made in 'Edit Mode', thereby exiting 'Edit Mode' and returning to the original form.

There is a method in the QuikFormsEngine class called SetCustomFieldEditor that enables/disables this feature. By default, it is off. This method takes an object of class CustomFieldEditorSettings as parameter. Its properties are described In the table below:

Property	Type	Default Value	Description

Property	Type	Default Value	Description
ShowButton	bool	false	Shows/Hide the button
ButtonTooltipText	string	Create and manage custom annotations for this form.	The tooltip text of the button
ButtonName	string	Annotations	The name of the button that is displayed in the form's header

Sample Code

REST

{
  "HostFormOnQuik": true,
  "QuikFormID": "12",
  "CustomFieldEditorSettings": {
     "ShowButton": true,
     "ButtonTooltipText": "Add a custom field",
     "ButtonName": "Custom Field"
  }
}

VB.NET

Dim customFieldSettings = New CustomFieldEditorSettings()
customFieldSettings.ShowButton = True
customFieldSettings.ButtonName = "Edit Form"
'No Tooltip specified. Let's leave the default value.
objQFE.SetCustomFieldEditor(customFieldSettings)

C#

var customFieldSettings = new CustomFieldEditorSettings();
customFieldSettings.ShowButton = true;
customFieldSettings.ButtonName = "Edit Form";
//No Tooltip specified. Let's leave the default value.
objQFE.SetCustomFieldEditor(customFieldSettings);

Quik! API Guide

Configuring Custom Fields

Sample Code

REST

VB.NET

C#

Related pages