This is the multi-page printable view of this section. Click here to print.

Return to the regular view of this page.

Actions

Action fields are one category of controls and include the fields that allow user interface actions like buttons or links.

Getting started with Action controls

There are four types of Action fields:

  • Button - Buttons can be used to allow user interaction and to enable rules to be applied to actions taken by users. Applying rules to buttons can help to create smart, dynamic forms that follow business logic, without the need for coding. See Rules and Button control to learn more.

  • Link - Link fields can be used to create custom links to forms. These can be external links. See Link control for more information.

  • Image - Image fields can be used to display images, either statically or from file fields. Go to Image control to find out more.

  • Signature - Signature fields provide a very neat way to electronically sign-off on a form or process. To learn more, go to Signature control.

To add an Action field to a Kianda form:

  1. Open an existing process by going to Administration > Designer in the left side menu and clicking on a process, or create a new process in Designer. See Create First Process to learn how to create your first process.

    Open process in Designer

  2. Once you have opened your process, select the form you want to work on (so that the Edit Form button Pen icon is shown).

    In this example, a Training Request form has been selected:

    Select form

  3. Click on Controls in the left-hand pane so the Controls menu expands to show the four categories of Controls (fields): Input, Layout, Actions and Custom.

  4. Click on Actions to see the four types of Action fields: Button, Link, Image and Signature.

    Actions menu in the Controls panel

  5. Click on the Action field type you want to insert.

    For example, to insert an Image field:

    • Click on Image
    • A New field - Image dialog box opens automatically, giving you a range of options for your new Image field.
    • Once you complete this dialog box and click OK, the new Image field is inserted into your form. To learn more about the Image field, go to Image control.

    Image dialog box

How to edit, move and delete Action fields

To edit whatever type of Action field you have added to your form:

  1. Select the field (by either clicking on the field name or on the field’s drag handle button Drag handle button).

  2. Click on the Edit Field button (Pen icon) Pen button.

  3. The Edit Field dialog box will open, giving you a different range of options to make changes to the Action field - such as changing the Title of the field - depending on the type of Action field you are working with.

To move an Action field, simply:

  1. Select the field’s Drag handle button Drag handle button.

  2. Drag and drop the Action field wherever you want to move it within your form.

    For example, the ‘Training Documentation’ Link field shown here can be moved in the form by selecting the drag handle button and dragging and dropping it wherever you want to put it:

    Move link field example

To delete an Action field from your form:

  1. Select the Action field (by either clicking on the field’s title or its drag handle button Drag handle button).
  2. Click on the Bin/Trash button Bin icon.
  3. Click on OK to confirm.

How to view and edit Action control Field Properties

To view or edit an Action control’s Field properties:

  1. Select the Action field (by either clicking on the field title or on the field’s drag handle button Drag handle button).

  2. The Field Properties associated with the Action field will be displayed (and can be changed) in the Field properties menu on the right-hand side.

    Field properties associated with a Link field

    For example, the Field properties associated with a Link field titled ‘Training Documentation’ are shown here:

    • Field type - The type of field, in this case a Link field.
    • Title - The Title of the field, in this case ‘Training Documentation’.
    • Show title - If this is selected, the field title will be shown in the form.
    • Required - If this is selected, the field will be mandatory for the form user to complete (and a red star will be shown next to the field title to denote this).
    • Enabled - If this is selected, the user will be able to edit the field.
    • Visible - If this is selected, the field will be visible in the form.
    • Layout - The width of the blue bar can be adjusted to change the width of the field as it appears on a PC or mobile phone (to view the Mobile layout, click on the expand button Expand button to the right).

​ For more details, go to Field Properties.

Saving changes and version history

Make sure to save any changes you make by clicking on the Save button Save. You will always have the option to revert back to previous versions of your form by clicking the Design Version History Version button button in the top right corner.

What’s next Idea icon

We have briefly introduced each of the four types of Action fields. Now let’s look at each of these Action fields in more detail:

1 - Button control

Button fields can be used in forms to allow user interface actions. Often, rules are applied to buttons so that actions are automatically executed once the user clicks on the button. In this way, Button fields with rules can be used to trigger a sequence of events. To learn more about rules, go to Rules.

For example, as part of an Employee Appraisal Process, a manager may complete a Performance Plan form for each employee, setting out their Key Performance Areas and goals. It could be useful to add a button to this form - titled ‘Schedule Meeting’ - that will automatically schedule a performance review meeting between the manager and the employee at a pre-determined date in the future. We will keep this example in mind as we learn more about using Button controls.

How to get started

To add a Button field to a Kianda form:

  1. Open an existing process by going to Administration > Designer in the left side menu and clicking on a process, or create a new process in Designer. See Create First Process to learn how to create your first process.

    Open process in Designer

  2. Once you have opened your process, select the form you want to work on (so that the Edit Form button Pen icon is shown).

    In this example, a Performance Plan form has been selected:

    Select form

  3. Select the area within the form where you want to insert the new Button field - in our example, we will select the panel containing the ‘Schedule performance plan review meeting’ information.

    Select panel to insert Button

  4. Click on Controls in the left-hand pane, and, from the four categories of Controls (Input, Layout, Actions and Custom), click on Actions.

  5. Select Button from the four types of Action fields: Button, Link, Image and Signature:

    Actions menu insert Button

  6. A New field - Button dialog box will automatically open, giving you options for your new Button field:

    Button field dialog box

  7. Title - You can change the name of the Button from the default ‘Button 1’.

  8. Name (Unique) - This is a unique name for the Button and inherits a camel case version of the entered Title.

  9. Help text - You can insert text to help the form user. If you add help text, a question mark Help text icon icon will appear next to the field title and, if the user clicks on this, they will see the help text you have inserted.

  10. Custom CSS class name - You can type the name of a CSS class to allow the Button to inherit specific styles defined in the Global CSS file.

  11. Button size - You can choose the size of the Button ranging from XL (extra large) to XS (extra small). By default, the Button size is medium.

  12. Block button - If you choose Yes, the button will span the entire width of the button’s allocated space. If you choose No, an additional field called Align button will appear that allows you to select what direction the Button aligns to. By default, the Button is aligned to the center.

    align button

  13. Color scheme - You can choose a colour for your new Button field from six options.

  14. Icon - You can choose an icon to appear on your Button by clicking on the down arrow to the right and scrolling to select the icon you want to use (or can opt not to add an icon).

Button dialog box icon options

  1. Show in form body - Select Yes if you want your Button to be shown in the Form.

  2. Enable button security - Select Yes if you want to limit who can see the Button you are adding to the form.

    Button dialog box enable button security

    If you select Yes, two additional options are displayed: Add security and Allow anonymous link.

    When you click on Add security, a new line appears with the options Field security and Select user(s) or groups:

    Buttons add security

    In Field security, you can choose from three options in terms of who will be able to view the Button you are inserting:

    Button visibility options

    (i) If you choose to limit the Button visibility to a ‘User or group’, you can then select the user(s) or groups you want to be able to see the Button in the ‘Select user(s) or groups’ box.

    (ii) If you choose to limit the Button visibility to a ‘User picker field’, you then select the User picker field in the ‘Select a userpicker field’ box:

    Button visibility limited to User picker field

    This will limit the visibility of the Button to the user(s) selected in that User picker field.

    (iii) If you choose to limit the Button visibility to ‘Form owner(s)’, you then select the form in the ‘Select a form’ box - only the owner(s) of the selected form will be able to view the new Button you are inserting:

    Button visibility limited to Form owners

    The second main option in terms of Button security is ‘Allow anonymous link’:

    • If you choose Yes, this will mean that the Button field will be visible when the form is accessed via an anonymous link.

    • If you choose No, anyone accessing the form from an anonymous link will not be able to see the Button field.

    Anonymous links can be useful if, for example, you want members of the public to complete your form without needing to log into Kianda. To learn more about how you can create anonymous links to a form that can be shared with external users, see Anonymous form link.

  3. Once you complete the New field - Button dialog box, click OK and the new Button field is added to your form.

In our example, if we changed the Button field title to ‘Schedule Meeting’ and chose a green colour scheme and ‘people’ icon, set button size to small and aligned the button to the right, our new Button could look like this when added to our ‘Performance Plan’ form:

Button example titled Schedule Meeting

  • You may then decide to add rules to your new Button field - to learn more, go to Rules. The rules we add will be executed in the order in which they are listed under Rules in the right hand pane.

    For example, we could add a series of rules to our new Schedule Meeting button:

    Button field example with rules

    In our example, the sixth rule is a Meeting Request rule which will mean that, once the Schedule Meeting button is clicked, an automated email will be sent to the employee scheduling a performance review meeting - to learn more, go to Meeting request rule.

How to edit, move and delete Button fields

To edit a Button field:

  1. Select the Button field (by either clicking on the field name or on the field’s drag handle button Drag handle button).

  2. Click on the Edit Field button (Pen icon) Pen button.

  3. The Edit Field dialog box will open (with the Button title you chose reflected in the dialog box name), enabling you to choose from the same range of options as appear in the New field - Button dialog box (as already discussed in How to get started).

    Button field dialog box

To move a Button, simply:

  1. Select the Button’s Drag handle button Drag handle button.

  2. Drag and drop the Button wherever you want to move it within your form.

    For example, the ‘Schedule Meeting’ Button could be moved from where it was automatically added at the bottom of the panel to the location where we want it to go:

    Move Button field example

To delete a Button from your form:

  1. Select the Button (by either clicking on the Button’s title or its drag handle button Drag handle button).
  2. Click on the Bin/Trash button Bin icon.
  3. Click on OK to confirm.

How to view and edit Button field properties

To view or edit a Button’s Field properties:

  1. Select the Button field (by either clicking on the field title or on the field’s drag handle button Drag handle button).

  2. The Field Properties associated with the Button field will be displayed (and can be changed) in the Field properties menu to the right.

    Field properties associated with a Button

    For example, the Field Properties associated with a Button field titled ‘Schedule Meeting’ are shown here and include:

    • Field type - The type of field, in this case a Button.
    • Title - The Title of the field, in this case ‘Schedule Meeting’.
    • Show title - If this is selected, the Button field title will be shown in the form.
    • Required - If this is selected, the Button will be mandatory for the form user.
    • Enabled - If this is selected, the user will be able to edit or interact with the field.
    • Visible - If this is selected, the Button will be visible in the form.
    • Layout - The width of the blue bar can be adjusted to change the width of the Button as it appears on a PC or mobile phone (to view the Mobile layout, click on the expand button Expand button to the right).

​ For more details, go to Field Properties.

Saving changes and version history

Make sure to save any changes you make by clicking on the Save button Save. You will always have the option to revert back to previous versions of your form by clicking the Design Version History Version button button in the top right corner.

What’s next Idea icon

Now that you’ve learned about Button controls, find out more about the other types of Action fields you can add to Kianda forms:

2 - Image control

Image fields can be used to insert and display images, either statically or images captured from File upload fields. For example, you may wish to insert an image at the top of your form or may wish to enable form users to annotate an image.

How to get started

To add an Image field to a Kianda form:

  1. Open an existing process by going to Administration > Designer in the left side menu and clicking on a process, or create a new process in Designer. See Create First Process to learn how to create your first process.

    Open process in Designer

  2. Once you have opened your process, select the form you want to work on (so that the Edit Form button Pen icon is shown).

    In this example, a Training Approval form in an Education Request Process has been selected:

    Select form to insert an Image field

  3. Select the area within the form where you want to insert the Image field - in our example, we will select the first panel in the form - Training Details:

    Select panel to insert Image field

  4. Click on Controls in the left-hand pane, and, from the four categories of Controls (Input, Layout, Actions and Custom), click on Actions.

  5. Select Image from the four types of Action fields: Button, Link, Image and Signature:

    Actions menu insert Image

  6. A New field - Image dialog box will automatically open, giving you options for your new Image field:

    Image field dialog box

  7. Title - You can change the name of the Image field from the default ‘Image 1’. In our example, we could change the title to ‘Employees’.

  8. Name (Unique) - This is a unique name for the new field and inherits a camel case version of the entered Title.

  9. Help text - You can insert text to help the form user. If you add help text, a question mark Help text icon icon will appear next to the field title and, if the user clicks on this, they will see the help text you have inserted.

  10. Custom CSS class name - You can type the name of a CSS class to allow the Image to inherit specific styles defined in the Global CSS file.

  11. Image source - You can choose to insert the image either from an Image URL or from a File field within the form. Different additional options will be available to you, dependent on the Image source you choose.

    (i) If you choose Image URL as the Image source, insert the URL for the image into the Image URL field:

    Image source Image URL

    Then complete the Image max height and Image max width options:

    • Image max height - Insert the maximum height (in pixels) for your new Image field by either manually inserting a number or using the up down arrows Up down arrows buttons to the right of the field.

    • Image max width - Insert the maximum width (in pixels) for your new Image field by either manually inserting a number or using the up down arrows Up down arrows buttons to the right of the field.

    When you’ve completed the New field - Image dialog box and clicked OK, your new Image field will be inserted at the bottom of the area you selected - in our case, at the bottom of the first panel in the Training Approval form:

    Image field inserted with URL as Image source

    (ii) If you choose File field as the Image source, three additional options will be displayed below the ‘Image max height’ and ‘Image max width’ options - Enable image annotations, Display images inline and Enable quick remove image:

    Image source File field

    To use a File field as the Image source, you must first have inserted a File Upload field into your form and it must hold an image file.

    In our example, you could insert a File Upload field titled ‘Image file’ into the panel where you want to insert the new Image field and then browse to find an image you have saved on your computer:

    Insert File upload field to hold an image

    You could choose to make this File Upload field invisible to form users, by ensuring the Visible checkbox is not selected in the Field Properties menu to the right.

    If you want to allow form users to make annotations on the Image, make sure to select Yes to the Allow file override option in the New field - File dialog box. To learn more about File Upload fields, see File Upload field.

    Once the File Upload field has been added to the form and it contains the image file you want to use, you can then insert an Image field and, in the dialog box, choose File field as your Image source, click into the File field and select the field containing the image:

    Image with File field as Image source

    Then complete the Image max height and Image max width fields:

    Image source as File field and max height and max width inserted

    In our example, if we inserted an Image field using a File field as the Image source (and choose not to make the File field visible to form users), the new Image field could look like this once inserted in our form:

    Image example inserted using a File field as the Image Source

    You have three additional options if you choose File field as your Image source:

    • Enable image annotations - If you choose Yes, this will enable both you (as the Form Designer) and the end user (the form user) to make annotations to the Image - such as adding a text comment or inserting a shape.

      To make annotations to the Image as the Form Designer, choose Yes to ‘Enable image annotations’ and after clicking OK at the bottom of the New field - Image dialog box, click on the new Image field that has been added to your form:

      Click on image to annotate as form designer

      When you click on the Image, a new pop-up box will open, with an Annotate Image button at the top right:

      Click on image to annotate and Annotate button displays

      Click on this Annotate Image button and a menu will display with a range of options for annotating the image:

      Menu for annotating an Image field

      The options available for annotating the image include:

      ​ - Undo the last annotation Image annotation undo button

      ​ - Draw a rectangle Image annotation draw a rectangle button

      ​ - Draw a circle Image annotation draw a circle

      ​ - Write some text Image annotation Write some text button

      ​ - Draw an arrow Image annotation draw an arrow button

      ​ - Pen tool Image annotation pen tool button (which allows you to do a free hand drawing on the image)

      ​ - Redo the last undone annotation Image annotation Redo last undone annotation button

      An end user completing the form will be able to make annotations to the image in the same way - by clicking on the Image in the form and then clicking the Annotate Image button to view the menu.

      When you have made the changes you want to the image, click on the green Save button Image annotation green Save button. This annotation will then be visible in the image in your form.

      If you choose Yes to Enable image annotations, another option is shown - Keep original image:

      Enable image annotations Keep original image sub-option

      If you choose Yes for Keep original image, when the Image field is annotated, both the original image and annotated image will be shown side by side and will both be saved in the location you chose as the ‘Destination’ in the File Upload field.

    • Display images inline - Select Yes if you want the Image field to appear in line with the text in your form.

    • Enable quick remove image - If you select Yes, a Bin/Trash button Bin icon will be available to the form user at the bottom of the Image field in the form, enabling them to delete the image by clicking on it.

      Image quick remove button

  12. When you have finished selecting the options you want for your new Image field in the New field - Image dialog box, click OK and the Image will be added to your form.

  13. You can preview how the image will look to an end user by first saving the changes you’ve made to your form (by clicking on the Save button Save) and then clicking the Preview Preview button button.

    In our example, if we added an Image field to our Training Approval form and choose a File field as the Image source and to allow the user to make annotations to the image - it could look like this to user completing the form on their mobile phone:

    Preview Image field on a mobile phone

    If you chose to enable image annotations, the form user can click on the image, click on the Annotate image button Annotate image button and then use the options in the menu to make annotations on the image and save these.

How to edit, move and delete Image fields

To edit an Image field:

  1. Select the Image field (by either clicking on the field name or on the field’s drag handle button Drag handle button).

  2. Click on the Edit Field button (Pen icon) Pen button.

    Edit Image field

  3. The Edit Field - Image dialog box will open (with the Image field title you chose reflected in the dialog box name), enabling you to choose from the same range of options as appear in the New field - Image dialog box (as already discussed in How to get started).

    Image edit field dialog box

To move an Image field, simply:

  1. Select the Image field’s drag handle button Drag handle button.

  2. Drag and drop the Image field wherever you want to move it within your form.

    For example, when we added the ‘Employees’ Image field to the first panel in the Training Approval form, it was automatically inserted at the bottom of the panel - if we want it to show at the top of the panel, we can simply drag the image to the top of the panel and drop it there:

    Move Image field example

To delete an Image field from your form:

  1. Select the Image field (by either clicking on the field’s title or drag handle button Drag handle button).
  2. Click on the Bin/Trash button Bin icon.
  3. Click on OK to confirm.

How to view and edit Image control Field properties

To view or edit an Image control’s Field properties:

  1. Select the Image field (by either clicking on the field title or on its drag handle button Drag handle button).

  2. The Field Properties associated with the Image field will be displayed (and can be changed) in the Field properties menu to the right.

    Field properties associated with an Image field

    For example, the Field Properties associated with an Image field titled ‘Employees’ are shown here and include:

    • Field type - The type of field, in this case an Image field.

    • Title - The Title of the field, in this case ‘Employees’.

    • Show title - If this is selected, the Image field title will be shown in the form.

    • Required - If this is selected, the field will be mandatory for the form user.

    • Enabled - If this is selected, the user will be able to edit or interact with the field.

    • Visible - If this is selected, the Image field will be visible in the form.

    • Layout - The width of the blue bar can be adjusted to change the width of the Image field as it appears on a PC or mobile phone (to view the Mobile layout, click on the expand button Expand button to the right).

      For more details, go to Field Properties.

Saving changes and version history

Make sure to save any changes you make by clicking on the Save button Save. You will always have the option to revert back to previous versions of your form by clicking the Design Version History Version button button in the top right corner.

What’s next Idea icon

Now that you’ve learned about Image controls, find out more about the other types of Action fields you can add to Kianda forms:

3 - Link control

Link fields can be used to add custom links to forms, including external links.

For example, as part of an Employee Appraisal Process, a manager may complete a Performance Plan form for each employee, setting out their Key Performance Areas and goals. It could be useful to add a Link Field to this form that links to the company’s Employee Handbook. We will keep this example in mind as we learn more about using Link controls.

How to get started

To add a Link field to a Kianda form:

  1. Open an existing process by going to Administration > Designer in the left side menu and clicking on a process, or create a new process in Designer. See Create First Process to learn how to create your first process.

    Open process in Designer

  2. Once you have opened your process, select the form you want to work on (so that the Edit Form button Pen icon is shown).

    In this example, a Performance Plan form within an Employee Appraisal Process has been selected:

    Select form

  3. Select the area within the form where you want to insert the new Link field - in our example, we will select the first panel in the ‘Employee Information’ section of the form.

    Select panel to insert Link field

  4. Click on Controls in the left-hand pane, and, from the four categories of Controls (Input, Layout, Actions and Custom), click on Actions.

  5. Select Link from the four types of Action fields: Button, Link, Image and Signature:

    Actions menu insert Link

  6. A New field - Link dialog box will automatically open, giving you options for your new Link field.

    Link field dialog box

  7. Title - You can change the name of the Link field from the default ‘Link 1’. In our example, we will change the title to ‘Employee Handbook’.

  8. Name (Unique) - This is a unique name for the new field and inherits a camel case version of the entered Title.

  9. Help text - You can insert text to help the form user. If you add help text, a question mark Help text icon icon will appear next to the field title and, if the user clicks on this, they will see the help text you have inserted.

    In our example, we could insert this help text:

    Link field help text “Click here to open the latest version of the Employee Handbook”

    The user will then be able to view this help text by clicking on the question mark icon Help text icon next to the Link field title:

    Link field sample help text

  10. Custom CSS class name - You can type the name of a CSS class to allow the Link to inherit specific styles defined in the Global CSS file.

  11. Link target - You can choose to have the link either open as a New tab or open in the Same tab the form user is currently in.

  12. Default URL - This is where you can insert the URL you want the user to be brought to when they click on the Link field.

  13. Once you complete the New field - Link dialog box, click OK and the new Link field is added to your form.

In our example, if we changed the default Link field title to ‘Employee Handbook’ and inserted help text (as shown previously), our new Link field could look like this when added to our ‘Performance Plan’ form:

Link field example titled Employee Handbook

To edit a Link field:

  1. Select the Link field (by either clicking on the field name or on the field’s drag handle button Drag handle button).

  2. Click on the Edit Field button (Pen icon) Pen button.

    Edit Link field

  3. The Edit Field - Link dialog box will open (with the Link field title you chose reflected in the dialog box name), enabling you to choose from the same range of options as appear in the New field - Link dialog box (as already discussed in How to get started).

    Link field Edit field dialog box

To move a Link field, simply:

  1. Select the Link field’s drag handle button Drag handle button.

  2. Drag and drop the Link field wherever you want to move it within your form.

    For example, we could move the ‘Employee Handbook’ Link field by selecting its drag handle and dragging and dropping it wherever we want within our Performance Plan form:

    Move Link field example

To delete a Link field from your form:

  1. Select the Link field (by either clicking on its title or its drag handle button Drag handle button).
  2. Click on the Bin/Trash button Bin icon.
  3. Click on OK to confirm.

To view or edit a Link control’s Field properties:

  1. Select the Link field (by either clicking on the field’s title or drag handle button Drag handle button).

  2. The Field Properties associated with the Link field field will be displayed (and can be changed) in the Field properties menu to the right.

    Field properties associated with a Link control

    For example, the Field Properties associated with a Link control titled ‘Employee Handbook’ are shown here and include:

    • Field type - The type of field, in this case a Link field.
    • Title - The Title of the field, in this case ‘Employee Handbook’.
    • Show title - If this is selected, the Link field title will be shown in the form.
    • Required - If this is selected, the Link field will be mandatory for the form user.
    • Enabled - If this is selected, the user will be able to edit or interact with the field.
    • Visible - If this is selected, the Link field will be visible in the form.
    • Layout - The width of the blue bar can be adjusted to change the width of the Button as it appears on a PC or mobile phone (to view the Mobile layout, click on the expand button Expand button to the right).

​ For more details, go to Field Properties.

Saving changes and version history

Make sure to save any changes you make by clicking on the Save button Save. You will always have the option to revert back to previous versions of your form by clicking the Design Version History Version button button in the top right corner.

User tips Target icon

If you want the Link to be automatically emailed to someone once the form user clicks on the Submit button, for example, you could apply a Send email rule to the Submit button and reference the Link field in an expression in the email.

Rules allow actions based upon conditions resulting from user interaction with fields. To learn about the different types of rules that you can apply go to Rules, to learn about expressions see Expression builder or for more information specifically about the Send email rule, see Send email.

What’s next Idea icon

Now that you’ve learned about Link controls, find out more about the other types of Action fields you can add to Kianda forms:

4 - Signature control

A Signature control can be used in a form to capture a user’s electronic signature. This can be particularly useful in a form that needs to be signed off as part of an approval process.

For example, a manager may complete a Performance Plan form for each employee, setting out their Key Performance Areas and goals. It could be useful to add two Signature fields to this form - titled ‘Manager Signature’ and ‘Employee Signature’ - to record the Manager and Employee each signing off on the Performance Plan. We will keep this example in mind as we learn more about using Signature fields.

How to get started

  1. To add a Signature field to a Kianda form:

    1. Open an existing process by going to Administration > Designer in the left side menu and clicking on a process, or create a new process in Designer. See Create First Process to learn how to create your first process.

      Open process in Designer

    2. Once you have opened your process, select the form you want to work on (so that the Edit Form button Pen icon is shown).

      In this example, we have opened an Employee Appraisal Process and selected a Performance Plan form within it:

      Select form

    3. Select the area within the form where you want to insert the new Signature field(s) - in our example, we want to insert one new Signature field below the ‘For Manager’ table and a second new Signature field below the ‘For Employee’ table in our Performance Plan form:

      Select form section to insert Signature field

    4. Click on Controls in the left-hand pane, and, from the four categories of Controls (Input, Layout, Actions and Custom), click on Actions.

    5. Select Signature from the four types of Action fields: Button, Link, Image and Signature:

      Actions menu insert Signature

    6. A New field - Signature dialog box will automatically open, giving you options for your new Signature field:

      Signature field dialog box

    7. Title - You can change the name of the Signature field from the default ‘Signature 1’. In our example, we can change it to ‘Manager Signature’.

    8. Name (Unique) - This is a unique name for the new field and inherits a camel case version of the entered Title.

    9. Help text - You can insert text to help the form user. If you add help text, a question mark Help text icon icon will appear next to the field title and, if the user clicks on this, they will see the help text you have inserted.

      For example, we could insert this Help text to go with our new ‘Manager Signature’ Signature field:

      Signature field help text

    10. Custom CSS class name - You can type the name of a CSS class to allow the Signature to inherit specific styles defined in the Global CSS file.

    11. Signature pad height (pixels) - You can choose the height of the signature in pixels. To do this, either manually type in the number of pixels you want the height to be or use the up and down arrows Up down arrows to the right.

    12. Signature color - You can choose the colour for the signature itself, i.e. the name of the user electronically signing the form. To do this, click on the field and then either:

      (i) use the slider to move between colours and click on the palette to choose a particular hue

      (ii) click on the dropper icon Signature colour dropper icon and then choose a colour from your open PC window(s)

      (iii) type in the R G B value if you know the colour you want to use

      Signature colour

    13. Signature thickness - Insert a numerical value for how thick you want the signature font to be. By default, this is set to 2.

    14. Start signing button text - You can choose the text you want to appear on the Signature field button. By default, the text is ‘Start Signing’ but you can change this to whatever you want.

    15. Re-Sign button text - You can choose the text you want to appear on the ‘Re-Sign’ button. This ‘Re-Sign’ button appears after the user has clicked the Start signing button and completed the dialog box and it enables the user to replace or override the original signature they input. By default, the text is ‘Re-sign’ but you can change this to whatever you want.

      In our example of adding a Signature field titled ‘Manager Signature’, once the manager has signed, the ‘Re-sign’ button will be shown:

      Re-sign button showing after completing Signature field

    16. Show username and signing time - Select Yes to show the Kianda username of the person who has electronically signed with the Signature field and the time they signed at (per the local time settings on the user’s Kianda account).

      Signature showing username and signing time

    17. Require user authentication - Select Yes to require user authentication for the user clicking the Signature field button to sign the section/form. If you select Yes, an additional option will display - Authenticate via SSO.

      Signature user authentication option

      If you then choose Yes for authenticating the user via Single Sign-on, an initial pop-up box will appear to check whether the user is signed in and, after clicking on the Signature button a second pop-up will appear to confirm the user’s credentials.

      If you choose No for Authenticate via SSO, a pop-up appears requiring the user to confirm their login credentials.

    18. Hide sign by textbox - Select Yes if you want to hide the sign by textbox.

      For example, if we choose Yes for this option for our new ‘Manager Signature’, when the user clicks the ‘Start signing’ button and the pop-up box opens, they will just see an area where they can either choose Signature (with an electronically generated signature) or Draw or Upload (to draw or upload their signature):

      Signature pop up with sign by textbox hidden

      If we choose No to Hide sign by textbox, when the user clicks Start signing they will see a ‘Sign by’ textbox at the top of the pop-up that appears:

      Signature pop up including Sign by textbox

    19. Allow override sign by - Select Yes if you want to allow override of the signature inserted in the Signature field. If you choose Yes, an additional option will be shown - Default title of sign by:

      Signature field allow override sign by option

      If you select Yes to ‘Allow override sign by’ and then click into the ‘Default title of sign by’ field, you can then select a field to be used to populate the default name in the Signature field. For example, you could select a User picker field within your form as the ‘Default title of sign by’ - this would then mean that the user that is selected in that User picker field will be the default name shown in the Signature field.

    20. Hide default signature tab - Select Yes if you want to hide the default signature tab (where an electronic signature is automatically generated). If you choose Yes, the next option - Auto save signature - will no longer be available to you.

      In our example, if we select No to hiding the default signature tab, the user will see the electronically generated signature:

      Default signature tab shown

    21. Auto save signature - Select Yes if you want to auto save the signature.

    22. Button icon - You can choose an icon to appear on your Signature field button (or can opt not to have an icon on it). Click on the down arrow to the right of the field and select the icon you want from several hundred icons in the dropdown list.

    23. Button color - Choose the colour you want for your Signature field button. The options are Navy, Green, Blue, Amber, Red or White.

    24. Sign dialog button text - You can choose the text to appear on the button at the bottom right of the Signature dialog box. By default, the text is ‘OK’ but you can change this to whatever you want.

    25. Once you complete the New field - Signature dialog box, click OK and the new Signature field will be added to your form.

      In our example, if we insert a new Signature field titled ‘Manager Signature’, it will be added to the bottom of the Performance Plan form and look like this:

      Inserted Signature field

    26. By default, the Title of the new Signature field will not be shown but you can change this by selecting the the field and checking the Show title checkbox in the Field properties menu to the right.

      Show Signature field title

    27. You can then click on the new Signature field within the form to see how it will appear to users.

      In our case, we can click on the ‘Start Signing’ Manager Signature button to see the dialog box that will appear when the form user clicks on it:

      Signature preview dialog box

      The user can choose between a system-created Signature or to Draw or Upload their own version. If you click on Draw or Upload you can see how the user can either sign on the dotted line (and click on Clear at any stage to erase a mistake) or click on Upload handwritten signature and browse for a file.

      Signature Draw or Upload option

      Click on the OK button to close the dialog box.

    28. You may decide to add rules to your Signature field - to learn more about the different categories of rules available, go to Rules. The rules we add will be executed in the order in which they are listed under Rules in the right hand pane.

    How to edit, move and delete Signature fields

    To edit a Signature field:

    1. Select the Signature field (by either clicking on the field name or on the field’s drag handle button Drag handle button)

    2. Click on the Edit Field button (Pen icon) Pen button

      Edit Signature field

    3. The Edit Field dialog box will open (with the Signature field title you chose reflected in the dialog box name), enabling you to choose from the same range of options as appear in the New field - Signature dialog box (as already discussed in How to get started).

      Signature edit field dialog box

    To move a Signature field, simply:

    1. Select the Signature field’s Drag handle button Drag handle button.

    2. Drag and drop the Signature field wherever you want to move it within your form.

      For example, we can move the ‘Employee Signature’ Signature field from where it was automatically added at the bottom of the panel to the location where we want it to go:

      Move Signature field

      In our example, if we moved the two Signature fields we inserted in the Performance Plan form - one titled ‘Manager Signature’ and a second titled ‘Employee Signature’ - to go under the ‘For Manager’ and ‘For Employee’ sections, they could look like this:

      Signature example

    To delete a Signature field from your form:

    1. Select the Signature field (by either clicking on the field’s title or its drag handle button Drag handle button).
    2. Click on the Bin/Trash button Bin icon.
    3. Click on OK to confirm.

    How to view and edit Signature field properties

    To view or edit a Signature control’s Field properties:

    1. Select the Signature field (by either clicking on the field title or drag handle button Drag handle button).

    2. The Field Properties associated with the Signature field will be displayed (and can be changed) in the Field properties menu to the right.

      Field properties associated with a Signature field

      For example, the Field Properties associated with a Signature field titled ‘Manager Signature’ are shown here and include:

      • Field type - The type of field, in this case a Signature field.
      • Title - The Title of the field, in this case ‘Manager Signature’.
      • Show title - If this is selected, the Signature field title will be shown in the form.
      • Required - If this is selected, the Signature field will be mandatory for the form user.
      • Enabled - If this is selected, the user will be able to edit or interact with the field.
      • Visible - If this is selected, the Signature field will be visible in the form.
      • Layout - The width of the blue bar can be adjusted to change the width of the Signature field as it appears on a PC or mobile phone (to view the Mobile layout, click on the expand button Expand button to the right).

    ​ For more details, go to Field Properties.

    Saving changes and version history

    Make sure to save any changes you make by clicking on the Save button Save. You will always have the option to revert back to previous versions of your form by clicking the Design Version History Version button button in the top right corner.

    What’s next Idea icon

    Now that you’ve learned about the Signature control, find out more about the other types of Action fields you can add to Kianda forms: