AUTOMAIT

KNOWLEDGE BASE

ARTICLES
TUTORIALS

The Form Designer

In the Forms menu available when logged into AUTOMAIT, you will see a link in the Form Designer menu that says New Form. When you click on New Form, you will be presented with a box asking for the Title and Description of the new form. You must give your form a name before you can begin, but you can change that name later if needed. Once you’ve filled out the field(s), click Create Form.

 

The Form Designer editor has an admin panel on the right that allows you to select which field types you would like to add to your form. To add a form field to your form simply drag it onto the canvas, either above or below another field, or to either side, to create a column style layout. A form can hold up to 4 columns.

 To reorder fields on your form, drag and drop them to arrange them in the desired order with the handle in the left upper corner of each field.

You may edit individual form fields by clicking the specific field. This will display the field settings in the admin panel. There are 4 tabs to choose from, each containing a set of powerful settings. The tabs are: General / Appearance / Advanced / Conditional Logic (not all field types support conditional logic)

Check the tooltips for further explanation on how to work with Field Settings.

The form settings interface consists of several tabs. Each tab consists of options and settings for the form.

The Form Settings consist of many different features relating to the Layout, Button, Restrictions, Scheduling, Save & Continue and Options. Check the tooltips in the Form Designer editor for more explanation on how to use the settings.

When you have finished designing and building your data capture form, it’s time to display it to your users. It’s very easy to display the form in a page you create, using the UI Designer. Simply create a new page and select the ‘Shortcode’ widget. 

Drag the widget onto the canvas and paste in the shortcode of your form. The Form ID can be found in the Forms list where you’ll see the ID in one of the columns.

Use the ID to enter into the shortcode box along with the Gravity Form shortcode, so it looks something like this (replace the ID number with your own): 

Another way of adding a Form to a page is to use the Gravity Form Styler widget in the UI Designer. With this, you can both select the Form you wish to display, but at the same time you are able to style the form as well. For more details see the article on Styling a Form.

To use the Styler widget, locate it in the UI Designer. Drag it onto the canvas.

In the Gravity Form Styler / Content / General tab, use the drop down menu to choose the form you would like to display.

The Flow Designer

AUTOMAIT provides a way for business process owners to implement their own workflow processes using simple drag and drop configuration. 

The purpose of this introduction is to give you a sense of how the automated workflows work so you can start piecing together in your mind the different features you’ll need to configure your workflow.

The End-User Experience

The User Interface works perfectly in the dashboard but it also works equally well in the front-end pages of your site using the shortcode. This allows you to use the styling of your choice and let external users participate in the workflows.

The Flow Designer includes a complete user interface which works out-of-the-box without any configuration beyond assigning appropriate permissions to users. The following sub-menu items include:

  • Inbox: This is where users come to perform their pending tasks such as approval or input.
  • Submit: A central place to publish all your workflow forms. Users select the form they’d like to submit. The administrator can decide which forms to publish on the submit page.
  • Status: The repository for workflow entries. Entries can be filtered by id, form, date and status.
  • Activity: A log of everything that happens and how long it took.

An example of the inbox with a couple of vacation requests pending approval.

An example of the Status page:

See the documentation on permissions to see how to give users access to these pages.

You don’t have to use this built-in admin UI if you don’t want to. Each of these pages is available via a shortcode so you can use them in the front-end. 

See the documentation on using the shortcode for further details.

Workflow Steps

AUTOMAIT processes are built using Workflow Steps. Each Step is responsible for controlling a set of tasks such as approval, user input, sending notifications or integrating with third-party systems such as MailChimp. The following steps are built-in to the Flow Designer:

  • Approval – Read more about configuring a simple approval process.
  • User Input – See an example of a user input step.
  • Notification – Sends any of the Forms notifications.
  • Webhook – Sends data to other systems.

You can add as many steps to your process as you like, and use each step type as many times as you need.

Note

The Flow Designer handles the management of the status for you so you can concentrate on the flow of the process.

Workflow Steps are form-specific, so they are configured in the workflow tab on the form settings page for each form. Here’s an example of a vacation request workflow involving an employee, department managers and the HR department:

The Assignee Field

In some processes it’s not possible to know who should be assigned to a step or an email until the moment the form is submitted. In these cases we have a couple of options. One way to do it is to let the user to decide exactly who should be assigned. The Assignee Field is a field that can be added to a Form which can be used to allow users choose from a list of roles and users. The Assignee Field can then be used in the configuration of the approval or user input steps.

You can find the Assignee Field in the Workflow Fields section of the Form Editor.

The Assignee Field can also be used as the destination for emails in some steps such as the approval and user input steps. 

Conditional Routing

Another way to configure dynamic step assignment is to configure routing. Routing works the same way as routing in Forms Notifications. It looks like this:

In this example, the step is assigned to a different manager (AUTOMAIT user account) depending on the value of the Department field (Dropdown).

Workflow Emails

Workflow Emails are similar to Forms Notifications except they are tied to a step and will be triggered only in that step. The following steps allow emails to be configured for different events:

Approval Step

  • Assignee Email
  • Rejection Email
  • Approval Email

User Input Step

  • Assignee Email

Emails can be sent to:

  • a specific user account.
  • a specific user role. Note the email will be sent to all users in the role so take care to select the correct role.
  • a user or role specified in an Assignee Field.
  • an email address entered in an email field.
  • the user who submitted the form. (Only enabled when the form setting ‘require user to be logged in’ is activated.)
  • conditional routing (see above)

It’s also possible to configure Forms Notifications by using the event setting along with the conditional logic setting. The Flow Designer adds an event for each step type and an event for Workflow Complete:

Next Steps

There are often many ways to implement the same workflow so once you’re aware of each of the features you’ll be able to get more creative with your solution.

When a new workflow is created, the Start and Complete settings will appear at the top and bottom of the step list. They are used to define global settings that apply to the entire workflow and after the workflow is complete.

Note: for workflows created before version 2.5, the Start and Complete steps are not added automatically – they can optionally be added like adding workflow steps.

The Workflow Start Settings

The Start settings, like workflow steps, has a conditional logic setting. However, unlike workflow steps, the conditional logic applies to the entire workflow. If the condition is met, then the workflow will be processed. If the condition is not met, then none of the workflow steps will be processed and the final status will be set to complete.

The Pending Message setting will display a message to the form submitter when the entry is viewed via the status page. This message will not be displayed if the form submitter is an assignee of the current step – use the step instructions instead.

The Default Display Fields setting controls which fields will be displayed to the form submitter when the entry is viewed via the status page. Note that all fields will be displayed if the user has permission to view all entries.

 

The Workflow Complete Settings

The Workflow Complete settings control the behaviour of the entry when the workflow is complete.

The Complete Message will be displayed to the form submitter when the entry is viewed via the status page.

The Default Display Fields setting controls which fields will be displayed to the form submitter when the entry is viewed via the status page. Note that all fields will be displayed if the user has permission to view all entries.

First, create a form that should be used for the approval process. Then in the Form Settings – Workflow tab, define the following settings:

1. Give the step a Name to uniquely identify it in the list of steps.

2. Select ‘Approval’ from the Step setting.

3. Assign the user who should approve the entry in the Select Assignees setting. Click on the user to move it to the list of approvers.

4. Configure the emails for this step. The assignee email will be sent as soon as the step starts to advise the assignee that there’s a pending task waiting in their inbox. The Rejection email will be sent in the case of rejection, and the Approval email will be sent if the entry is approved.

5. Finally, define the next step in the Workflow. In the case of rejection, the default setting is to stop the Workflow. In the case of approval, the default setting is, ‘next step in list’. If there are no more steps in the list, then the Workflow will be considered complete.

The complete step configuration should look something like this. In your case, you will have different user accounts.

Selecting Display Fields

By default all fields will be displayed, but you can use the “Display Fields” setting to specify which fields should be displayed.

Sending Assignee Reminder Emails

The assignee email has a “Send Reminder” setting.

When activated, the assignee email will be sent once more after the specified number of days. Once sent, the reminder email will not be sent again.

Scheduling Steps

All steps can be scheduled to begin after a specific delay, or on a specific date. The entry will be ‘queued’ until it’s time to start the step.

Step Expiration

Approval steps can be scheduled for expiration. Once a step expires, the entry will be sent to the step configured in the Next step setting(s). The Expiration settings in the Approval Step allow for the status to be specified once the step has expired.

Step Due Date

Approval steps can have a due date specified. Once a step has passed the due date, the entry will be highlighted with the chosen color on any inboxes.

The due date can also be communicated through the {current_step} merge tag modifiers {current_step:due_date} and {current_step:due_status}.

The Revert Button

The Approval Step has a Revert setting, which will activate a third option in addition to Approve and Reject. The Revert button allows the assignee to send the entry directly to a User Input step without changing the status. Enable this setting to show the ‘Revert’ button next to the ‘Approve’ and ‘Reject’ buttons, and specify the User Input step the entry will be sent to.

The Revert setting will only appear if the workflow has at least one User Input step.

Once enabled, the ‘Revert’ button will appear on the workflow detail page next to the ‘Approve’ and ‘Reject’ buttons.

First, create a form to use for this Workflow. The go to the Form Settings – Workflow tab to configure your User Input Step. Click on the ‘Add New’ button to add a new Workflow Step. Configure the following settings to set up the User Input step.

  1. Give the step a Name to uniquely identify it in the list of steps.
  2. Select ‘User Input‘ from the Step setting.
  3. Assign the entry to the user whose input is required in the Select Assignees setting. Click on the user in the list of users on the left to move it to the list of assignees on the right.
  4. Define which of the fields should be editable by clicking on the field in the list on the left to move it to the list of editable fields on the right.
  5. If any of the fields have conditional logic, then the “Enable field conditional logic” setting will be available. Leave this setting deactivated to override the conditional logic and display all the selected editable fields.
  6. The editable fields will be highlighted if the “Highlight Editable Fields” setting is selected. Options for highlighting are: green triangle and green background.
  7. Select the appropriate assignee policy.
  8. Optionally add instructions to the top of the page for this step.
  9. Select the display fields that should appear on this step.
  10. Select the option for the default status. User Input Steps can be submitted immediately (complete) or saved for later (in progress).
  11. The Workflow note is a special field above the ‘Update’ button. The content of this field is not stored in the entry, it’s added to the timeline. You can choose to make the note required depending on the status.
  12. If the Email setting enabled, an email will be sent to the assignee informing them that there is a task pending in their inbox. Enable the reminder setting to resend the email after a specified number of days.
  13. The expiration setting allows you to set a time limit for this step.
  14. Select the next step in the Workflow once this step is complete. If there are no more steps in the list, then the Workflow will be complete

Example Screenshots of the User Input step

Editable fields highlighted with a green background

Editable fields highlighted with a green triangle

Scheduling Steps

All steps can be scheduled to begin after a specific delay or on a specific date. The entry will be ‘queued’ until it’s time to start the step.

Step Expiration

User Input Steps can be scheduled for expiration. Once a step expires, the entry will be sent to the step configured in the Next Step setting(s). The Expiration settings in the User Input Step allow for the status to be specified once the step has expired.

Step Due Date

User Input steps can have a due date specified. Once a step has passed the due date, the entry will be highlighted with the chosen color on any inboxes. 

The due date can also be communicated through the {current_step} merge tag modifiers {current_step:due_date} and {current_step:due_status}.

Update User Step

The Update User Step is a very powerful step which can update the profile of any user. 

Care must be taken to design workflows that ensure that only authorized users perform updates to user profiles. For example, add an approval step before the Update User step.

The Update User step can update the user account of the form submitter (the created_by field), the current user (e.g. of a User Input step), the selected user in a User field, or the account looked up using the value of an email field.

The following profile properties can be updated: First Name, Last Name, Nickname, Display Name, Email Address, Roles and Custom User meta. 

The Roles setting allows the roles to be replaced completely by a new set of roles or additional roles can be added to the user’s existing roles.

How to setup outgoing webhook steps with response mapping

I is possible map the JSON values sent in the response to field values. This happens before the workflow moves on to the next step so you can define what happens next in the workflow depending on the response of an external API. For example, your webhook may request approval status from an external API, store the result in a field value and send a conditional notification based on the result.

Response Mapping Webhook Examples

APIs are a fundamental part of the open web which allow different web sites / servers to share data. Whether you own/manage an external application or you need to connect with or want to use one of many public APIs to return JSON responses, the possible uses of the response mapping feature of the outgoing webhook step are nearly endless. The examples provided below are meant to help you understand how to implement an outgoing webhook step with response mapping. The particular details of your form and API request/response format will require slight changes to fit your use case.

  • EU VAT Number Validation
  • Automatic Translation of Entry Values
  • Postal Code / Zip Code Lookup
  • Currency Conversion

EU VAT Number Validation

vatlayer.com offers an API for checking that an EU VAT number is valid. They currently offer a free plan which you can use for testing. So, at any point in your workflow after the initial form submission, you can configure an Outgoing Webhook step to check that a VAT number is valid and then populate field values with the registered company name and address.

The following Outgoing Webook step will connect to the vatlayer API and lookup the VAT number in field ID 1.  The {:1} is the merge tag for field ID 1 and the API key for the service is hidden. The Response Field Values will look up the company_name and company_address values in the response and save them in the Company Name and Company Address form fields.

Here’s what the workflow entry detail page looks like after entering Amazon’s VAT number in a User Input step followed by the webhook step:

Automatic Translation of Entry Values

The  deepl.com API provides a translation API so we can use it to translate submitted values. Whereas the vatlayer API provides all of the response data at the top level of the JSON, deepl has a more complex structure so we need to drill down into the response to grab the right values.

Here’s an example response from the deepl API:

    “translations”: [ 

        { “detected_source_language”: “ES”, “text”: “Hello World!” } 

    ] 

}

In order to retrieve the translated text we need to use the key “translations\0\text” – we use the zero because the value for translations is an array and we need to target the first element in that array.

Postal Code / Zip Code Lookup

zippopotam.us offers a free API which lets you lookup full or partial zip codes / postal codes for over 60 countries. It returns multiple data points including the latitude / longitude including USA, Spain and Canada.

Here’s the response from the zippotam.us API:

In order to retrieve the place name we need to use the key “places\0\place name” – we use the zero because the value for places is an array and we need to target the first element in that array.

Our example form ( zippopotam-sample-form2.json – unzip and import the form) uses the {Country:2:value} merge tag for field ID 2 with the value modifier and the {ZipPost:1} merge tag for field ID 1 to build the outgoing URL.

The result lets you reduce the amount of data your customers have to enter without sacrificing on the key information you need to make business decisions. The result should be increased engagement in your form/workflow and a better business process that saves you time and money.

As you can see all this is configured with zero custom code.

Currency Conversion

Currency exchange APIs could be integrated to your workflow to allow you to store near real-time exchange rates at the time a form or step was completed. This example ( form currency-conversion-api.json  – unzip and import the form) shows how you can use merge tags within the response field key to dynamically select certain elements from the JSON response.

Here’s the response from currencylayer.com API. Notice that the key for the quotes require both the source and destination currency identifier.

If your form has the needed currency identifiers as field values you can use the merge tag to define which specific quote you would like to store.

When the webhook step is run the exchange rate is stored into a field for later calculations. Using this snippet would also let you make calculations at the end of the webhook step for subsequent notifications to display.

The Incoming Webhook can be used in two ways:

  1. After form submission at any point in the workflow, to hold entries on a step until a trigger is received from an external system.
  2. To create an entry in a form from an external system. This will trigger the workflow automatically. 

See the links the bottom of this page for further information.

Incoming Webhook – Workflow Step

The Incoming Webhook Step is a feature of the Incoming Webhook which allows workflows to wait until receiving the input of an external system.

Adding an Incoming Webhook Step

  1. Select Incoming Webhook as the step type.
  2. Enter a name for your application. This is just informational.
  3. Enter a unique API Key or accept the default value. The API key is used to authenticate each request. This value should generally not be changed after saving. Warning: if there are any entries on this step then changing this setting will result in the entries getting stuck in the workflow and unable to proceed.
  4. Enter a unique API Secret which will be used to authenticate the request. It’s good practice to change this secret periodically.
  5. Determine if you want the step to map any values from the incoming request into field values in the entry.

Once an entry hits an Incoming Webhook step it waits until an authenticated request is received.

Request Field Mapping 

The step settings include an option for Field Mapping which opens up many more potential integration options for the Flow Designer. If you are familiar with the Outgoing Webhook step setup, you will find this new setting very familiar.

  • The default (None), will process the workflow onto the next step as soon as a valid request is received. This is valuable when your entry workflow only needs to know that a 3rd party system (or other form using an Outgoing webhook step) has completed a task before proceeding.
  • The new setting (Select Fields) lets you define a field mapping between a request key and entry field. When a valid request is received containing data in the body as either form-data or application/json, the mapped field values will attempt to be stored into the entry. This enables 3rd party systems which have updated data for the entry to pass the data in via the incoming webhook step.

Incoming Webhook – Create an Entry

Incoming Webhooks are a feature of the Incoming Webhook, and allow entries to be created for forms by external systems.

If your workflow starts with a form submitted by a user, then you will not need this feature. You can use the Incoming Webhook Workflow Step instead to pause the workflow until an external system sends a request. See the link at the bottom of this page for further detail.

How to Set Up an Incoming Webhook to Create an Entry

An Incoming Webhook will create an entry in a form when a POST request is received at an endpoint that is defined in the feed.

An incoming Webhook can be created from the form settings page. Multiple webhooks can be added which will allow multiple systems to create entries for the same form.

Webhook URL: This is a read-only field which displays the URL for the Webhook. It contains the ID of the webhook plus the key. Copy and paste this URL into your external system.

Webhook name: Name this webhook so you can identify it in the list of webhooks for this form.

Key: Define a unique key for this webhook. This will make the URL difficult to guess and help to keep your webhook secure. If someone gets hold of this URL they would be able to create entries. However, if this is not secure enough for your use case then you should consider adding some custom code to verify the authenticity of the request. See the Helpscout example below for further details.

Field Values: Map the keys of the values in the request to fields on the form. See the link at the bottom of this page for further details on the field mapping.

Example: Helpscout Webhooks

The following example will create an entry an entry when a rating is received in HelpScout.

Once you have the Incoming Webhook URL you can add it to the Callback Url setting in your Helpscout Webhook app like this:

Every time you receive a rating in Helpscout, the webhook request will be sent to your Incoming Webhook URL and an entry will be created.

Once the entry has been created by the webhook, then the workflow will be triggered automatically. For example, you could add a notification step which sends an email if the rating is not “good”, and a Slack step which sends all the “good” ratings to your support team Slack channel.

Download the sample form: helpscout-ratings-webook.json

Helpscout includes a security feature for their webhooks so that you can verify the authenticity of the request by checking the hash. Here’s a snippet which will verify the request. You’ll need to add the HELPSCOUT_WEBHOOK_SECRET_KEY constant to your wp-config.php file and edit the feed ID.

Importing and Exporting

Incoming Webhooks are exported and imported automatically with the form when the form is exported and imported.

Incoming WebHook – Field Mapping

Request Type

The system which is sending data to the incoming webhook in one of 3 formats:

     – POST with form-data in the body of the request

     – POST with form-data in the body of the request with a Content-Type header = application/json

     – POST with raw JSON in the body of the request with a Content-Type header = application/json

Request Sanitization not Request Validation

All incoming request values are sanitized based on their field type regardless of whether you use version 1 or 2 of the Gravity Forms Web/REST API. This prevents script injections and other technically bad data from being submitted through the incoming webhook field mapping to your form entries. However, it does not validate the request values submit for required status or format. 

What does that mean exactly? 

If you have a dropdown field type set as required with options of A, B, C, D or E, mapping that field for a request it:  

     – WOULD prevent “<script>alert(‘Doing bad things’)</script>” from being stored to DB in a bad format. 

     – WOULD NOT prevent “Banana” from being stored. 

Choice and Complex Field Types

Some field types that can have multiple selections (ex. checkboxes), or have sub-fields (ex. address), can have request values mapped to the entire field or individual data elements. The following settings field values and JSON show how they could be set as part of a raw JSON request. 

Unavailable Field Types

The majority of field types in the standard, advanced and workflow sections of the form editor are available for request mapping. A few, listed below, are not available at this time. Please contact AUTOMAIT Support if you have a use case that would benefit from them being added to a future release of the add-on. 

     – File Uploads 

     – Any Post Fields (Title, Content, Excerpt, Tags, Category, Images, Custom Field) 

     – Any Pricing Fields (Product, Quantity, Options, Shipping, Total 

Mapping array values and complex objects

Values inside arrays or complex objects can be mapped to fields by using a backslash to drill down into the structure. For example, people\0\name would map “Steve” to the field if the following JSON is received:

{people: [ “Steve”, “Jamie” ] }

E-Signature Workflow Step

Administrators can add workflow steps at any point in the process to collect legally binding document signatures using the E-Signature functionality.

E-Signature Form (Feed) Settings

Add an E-Signature feed from the E-Signature forms settings tab. It will look something like this:

Test the form by submitting an entry for signature.

The E-Signature Step Settings

Once all the above is installed, configured and working then you’re ready to add your workflow step. You can add a signature step at any point in the workflow. For example, you might want to collect the signature in the middle of a workflow after some user input and approval steps and then end the process perhaps with a PayPal payment step.

When you select the E-Signature step type, the settings will appear below. The settings allow you to select the assignees, configure an assignee email, display instructions, select the display fields and select the next step just as you would for any workflow step.

The settings will look something like this:

The E-Signature Workflow Step – Entry Detail

When the assignee opens the entry detail page from the inbox, he/she will see the invitation status in the workflow box and the “Review & Sign” button. The button will open a new window with the standalone document ready to sign. The step will complete immediately after the document is signed.

The “Review & Sign” button will only appear if the email address of the step assignee is the same as the email address of the document signer defined by the Signer E-mail setting in the E-Signature feed settings (see above). 

If the email address of the assignee is different than the document signer email address, then the ‘Preview’ button will be displayed. The Preview button will open the standalone document, but it will not be possible to sign the document. This allows users to be assigned to the step in order to oversee the signing process. For example, a sales person can be assigned to the step along with the client. The client will be able to sign the document and the salesperson will see the entry in the inbox, check the status of the signature and resend the invitation (requires permissions to open the WP E-Signature plugin settings).

Email Notifications

There are three places where email notifications can be configured, and choosing the best option can be confusing. This guide will help you choose the right approach for each step in your workflow.

Assignee Emails

Some steps have built-in email notification settings which help to keep the step configuration in one place. The Approval and User Input steps have email settings which, when enabled, will notify assignees when they are assigned to the step. The Approval step also has ‘Approval’ and ‘Rejection’ email settings. These email notification settings should be sufficient for most workflows.

Notification Steps

You may find that the email configuration in the step settings don’t offer you sufficient flexibility – perhaps you need to send to additional recipients or in certain situations, following special conditional logic. In these cases you may need to add a Workflow Notification Step. The notification step allows you to send notifications that were created in the Forms Notifications tab. Select the notifications you’d like to send in this step. The notification does not have to be active in the Forms notifications tab in order to send, but the conditional logic will be processed.

The Workflow Notification step also contains a ‘workflow notification’ setting which allows you to configure another email notification. This setting might seem like unnecessary duplication given that notifications can be created in the Forms Notifications tab however, there is one important difference. The ‘workflow notification’ setting allows you to send emails to your AUTOMAIT users, all the users in a role, all the assignees in an assignee field and the entry creator.

The Form Designer Notifications

Forms notifications are configured in the Notifications tab of the Form Settings. if you’ve not configured Forms notifications before, then you should start by reading this introduction in the Form Designer article on configuring Notifications. You may find that the previous two options are not sufficient, perhaps you’d like to send to a specific email address that is not contained in one of the fields. In this case you can configure a Forms notification to fire on a workflow event.

The Flow Designer adds a number of events to the notification event setting:

  1. Workflow: Approved or Rejected
  2. Workflow: User Input
  3. Workflow: Complete

The Workflow: Approved or Rejected event will fire whenever a an entry is approved or rejected regardless of the step and regardless of the status. Use the conditional logic setting to target either the ‘approved’ or ‘rejected’ status of a specific step. You may also need to specify the ‘Workflow Step’ to prevent the notification from sending at later steps.

The Workflow: User Input event fires whenever a user updates an entry in a User Input step, regardless of the step and regardless of whether the step was marked as complete or ‘in progress’. You can target specific conditions using the conditional logic.

The Workflow: Complete event fires whenever a workflow is complete regardless of final status. You can target specific conditions using the conditional logic.

Changing the order of steps

You can change the order of steps at any time by dragging the step in the step list to the desired slot.

The Workflow Fields

You can find the Workflow Fields in the Form Editor toolbox:

When you add a Workflow Field to the form you can use it in the configuration of a Workflow step. For example, you can assign a step to the select user in the User Field. Or send an approval email to all the users in the role selected in the Role field.

The User Field

The User Field is a Drop Down field that displays a list of all the User accounts on your  AUTOMAIT platform. The User Field supports conditional logic so you can show or hide other fields based on the value selected in the User Field. It has the same options as a Drop Down Field.

Note: When setting the default value via dynamic population or the merge tag, User Field expects a numeric ID

The Multi-User Field

The Multi-User field works like the standard Multi-Select field and shares the same options as the single User field. It allows multiple users to be selected from the list of users. The Multi-User fields can be selected as an assignee in the Step Settings and the selected users are treated as if they were selected in the step settings. This means that the assignee policy applies to all the selected users. So, if the assignee policy is set to “all assignees must complete the step”, then all the users selected in the Multi-User field must complete the step in addition to any other assignees selected in the step settings.

The User field and the Multi-User field support the “enhanced UI” setting. When activated on the Multi-User field, the field will look like this in the form:

The Role Field

The Role Field is a Drop Down field that displays a list of all the Roles on your AUTOMAIT platform. The Role Field supports conditional logic so you can show or hide other fields based on the value selected in the Role Field. It has the same options as a Drop Down Field.

Note : When setting the default value via dynamic population or the merge tag, Role Field expects a ‘role name’.

The Assignee Field

The Assignee Field is an advanced workflow field that can be added to a Form and can be used to allow users to choose between Users, Roles and other Assignee fields. The Assignee Field does not support conditional logic, but it can be very useful in custom development where you may want to offer different types of assignees.

The User and Role fields support conditional logic whereas the the Assignee field supports multiple assignee types. 

When you add an Assignee field to the form, it will look like a standard dropdown field but it will have all the Users and Roles in the list ready to be selected.

Note: This field is a bit more complex, it expects the type plus the ID, e.g user_id|2 or role|administrator or email|test@test.com.

Configuring the field in a Workflow Step

After you’ve added the Workflow Field to the form, you’ll need to use it in the configuration of a Workflow Step. For example, assign an approval step to the user selected in the Assignee Field.

You can also select the Assignee Field for the destination of the approval and rejection emails.

The Discussion Field

It’s already possible to use the Notes field to add comments to the timeline, however, the timeline can get a bit crowded, and sometimes it’s useful to manage conversations within the entry or add multiple conversations. The Discussion Field provides a way for users to maintain a conversation inside a form field itself, which means it can be used in merge tags, conditional logic and exported along with the rest of the entry values.

Adding a Discussion Field to a Form

Drag the Discussion Field from the Workflow Fields Toolbox to your form.

The Field Settings are identical to the Paragraph Field:

This means that the form submitter can initiate a discussion. If you hide the field using the Visibility setting (admin only), then it will not be available on the front-end form, but it will be visible in all the workflow steps. The field also supports conditional logic. Note: If you use conditional logic you’ll probably want to enable ‘Field Conditional Logic’ in the User Input step settings.

Discussion Fields in a Workflow

Discussion fields can only be updated in a User Input step. So, if you want users to contribute to the discussion, they need to be assigned to a User Input step. An Approval step will simply display the discussion, it is not currently possible to add a comment to the discussion on an Approval step.

When an assignee opens the entry detail page, the Discussion Field in a User Input will look like this:

If you set up a loop between User Input steps you can get a conversation going.

Tip: Assign conditional logic to one of the steps to allow the loop to end based on the value of another field.

Here’s what it’ll look like at the end of the workflow:

When discussions are longer than 10 messages a View more/less button will appear to toggle the display of the older messages. 

Merge Tags

The Merge Tag for the discussion field supports two modifiers: Latest and Limit. Examples:

{my discussion field:3} – displays the entire discussion.

{my discussion field:3: latest } – displays the latest message in the discussion. This is great if you want to send only the latest message in an email to another assignee.

{my discussion field:3: limit=4 } – displays the latest 4 messages in the discussion.

The Simple E-signature Field

You can add a Signature field to your form. Add a User Input workflow step and make sure the Signature field is editable.

When the assignee opens the entry, the signature field will be ready to sign.

Workflow Management

The Status Page

The Status page is the place to find all your submitted Workflows. By default users will only see their own forms. Administrators will see all forms.

The following screenshot show the status page in the WordPress admin UI. The appearance of the status shortcode on the front-end of your site will vary according to your theme.

You can filter by Status, ID, Workflow Form, or Date. Sort the columns by clicking on the column header. Sorting is not supported for the Workflow Form column.

The number of entries per page can be changed in the screen options:

When you filter by form you’ll see additional information for pending workflows. For steps with multiple assignees, person icons will be used to give a quick glance at the status. Click on the icons for further details.

Filter by form and step to display columns for all the assignees.

Exporting the status list

The status list can be exported by clicking on the export button below the table in the admin UI. When you click on the export button, a CSV file will be generated for you based on the current filter. When it’s ready you’ll be able to download it and save it to your computer. You can open the CSV file in any spreadsheet application. In some software, you may need to convert the text to columns – please consult your spreadsheet application for details.

Inbox, workflow details – Restarting or cancelling a workflow

Administrators can cancel the Workflow for an entry or restart the Step, or entire Workflow.

On the Workflow detail page, administrators will see a box with the available admin tasks for the current entry. If a Step or Workflow is restarted, then all emails will get resent just as if the step was starting for the first time.

Users without Administrator capabilities will not see the box with the admin task options.

The Submit Page

The Submit page displays a convenient list of all the available workflow forms to logged in users. Users can initiate workflows by submitting forms from this page just as they can from any page on the site. This is what it looks like in the Admin UI:

This page is mostly useful for sites that use only the Admin UI and don’t use the shortcode in the front-end. However, there is a shortcode which provides a way to display the submit page on any WordPress page. See the link to the shortcode documentation at the bottom of this page.

Note that the Submit page menu item will only appear when an administrator has published at least one workflow form in the Workflow Settings page.

The Shortcode

The shortcode displays the Workflow UI in any WordPress page. Use the page attribute to display either the inbox, the status page, the reports page or the submit page. Example:

OR

OR

OR

Important: the shortcodes are intended to be used on different pages – not on the same page.

Once you’ve added the inbox shortcode to a page, the logged-in users will see their pending tasks and they’ll be able to click through to the workflow detail page to perform the task.

Example of the user input step in a page with a sidebar.

Here’s what the inbox looks like in a Desktop browser with two pending tasks:

This is what it looks like in a smaller screen for example in a mobile device:

When the user clicks through to the workflow detail on an approval step, the page looks like this:

And on a smaller screen…

The Status page looks like this:

And on smaller screens it looks like this:

Advanced Shortcode Attributes

The shortcode supports the following attributes for the inbox and status pages:

id_column – show or hide the ID column in the inbox and status pages. For example, hide the ID column:

submitter_column – show or hide the submitter column in the inbox and status pages. For example, hide the submitter column:

step_column – show or hide the step column in the inbox and status pages. For example, hide the step column:

form – constrain the entries to the specified form ID. For example, constrain the entries to the form ID 1:

title – specify a title that will appear on the both the inbox/status list and the entry detail page. For example:  

timeline – show or hide the timeline. Default = true. Example:

step_status – show or hide the step status on the entry detail page. Default = true. Example

workflow_info – show or hide the workflow info. Default = true. Example:

sidebar – Use two columns or one. Default = true. Use false to use just one column. Example

actions_column – show or hide the approval actions column in the inbox page. For example:

due_date – show or hide the due date column. Default = false. Example:

back_link – show or hide the ‘Return to List’ link at top of main column of entry detail view. Example

back_link_text – Customize the text to display when the back_link parameter is set to true. Example

back_link_url – Customize the url to return users to from entry detail page when the back_link parameter is set to true. Example . Very useful if you have pages with Gravity Views included.

The following shortcode attributes require security settings to be enabled in the Workflow->Settings page.

fields – display value values. This is only supported when the form attribute is set, and when the shortcode security setting is enabled in the Workflow->Settings page. 

For example, display columns for fields 1 and 2 from form 1: . Multi-input fields can be added, but you’ll need to know the ID of each input (Gravity Flow Support can help you with that). An example for a name field with the field ID of 6 would be:

display_all – override the capabilities for the current user and display all the entries in the status page. This is only supported when the page attribute is set to “status”. For example:

allow_anonymous – override the capabilities for the current user and display entries to all visitors to the site. For example:

Advanced Shortcode Attributes for the Reports shortcode

When specifying shortcode supports the following attributes :

  • form – Define what form (id) the report should be pre-set to display based upon.
    Example:
  • range – Define what range of entries the report should be pre-set to display: last 3, 6 or 12 months.
    The attribute value would be last-3-months, last-6-months, last-12-months respectively.
    Example:
  • category – Define what category of report should be pre-set to display. The attribute value would be month, assignee or step.
    Example:
  • step_id – Define which step (id) the report should be pre-set to display.
    The form attribute must also be set.
    Example:
  • assignee Define which assignee the report should be pre-set to display.
    To verify syntax:
    • Specify assignee=”user_id|15″ to limit results to user ID 15
    • Specify assignee=”role|administrator” to limit results to assignee based on role type of administrator
    • Specify assignee=”email|john@example.com” to limit results to entries assigned to an email field.

Due Date

The Approval and User Input steps can be configured to have a due date either after a specified delay, or on a specific date.

The Due Date setting in the User Input step looks like this:

Note: If the form has a date field, then the date field option will be available as shown in the screenshot above. This allows steps to expire before or after the date specified in the value of a date field.

The color option allows you to define if the step should be highlighted on Inbox views when the entry is past its due date.

The due date for an active step will show up in the Workflow Info box on the Entry Details screen.

Additional display options for due date details

  • Notifications: via modifiers of the {current_step} merge tag {current_step:due_date} will show the month, day and year {current_step:due_status} will show whether the entry is ‘Pending’ or ‘Overdue’ which is very useful for reminder notifications
  • Inbox shortcode column: Add the due date to your inbox shortcodes:
  • Status shortcode column: Add the due date to your status shortcodes:

Scheduling a step

All steps can be scheduled by activating the Schedule setting. Scheduling can be useful when two steps are being triggered too close together, or when you need to perform a step on specific date.

This feature is particularly useful for so-called “content-dripping” where a series of notification steps are triggered over a number of days or weeks. For example, a customer has signed up for a course that should be delivered by email every day over the course of a week. You’d create 7 steps, each with a delay of 1 day.

Steps can be scheduled to begin after a specified delay in minutes, hours, days or weeks.

Please bear in mind that these delay settings are not exact. There could be an additional delay of up to 15 minutes before the step is actually triggered.

Steps can be also scheduled to begin on a specific date. For example, for an event.

 If you choose to use this feature for email list automation like an ‘auto-responder’, bear in mind that you should include a one-click cancel link in the emails.

Finally, steps can be scheduled to start on, before or after the date in a date field.

Conditional Routing

The “Assign To” setting has two options. The default option is “Select” which allows multiple assignees to be assigned to the step. For example, this allows multiple assignees to approve or edit an entry in parallel, however, the list of assignees is fixed – the assignees will always be the same regardless of the field values.

The second option of the “Assign To”, “Conditional Routing”, also allows multiple assignees to be assigned to the step, however, the list of assignees is generated dynamically depending on the field values.

For example, in a job application process, the assignee of an approval step will depend on the position applied for, so the rules may be set up like this:

  • If the position applied for is ‘Developer’ the IT Manger must approve.
  • If the position applied for is ‘Designer’ Marketing Manager must approve.
  • If the position applied for is ‘Controller’ the Finance Manager must approve.

With Conditional Routing, the “Assign to” setting will look like as shown below :

This example could also be set up using conditional logic on the step (see the link to the article on workflow branches below) however, it’s a little faster this way.

If the condition matches, the assignee will with be added to the step. If no condition matches, then the step will be skipped. If more than one condition matches, then each match will be added.

Engaging Leads through Partial Entries

Partial Entries can be used to create a sequence of emails that is triggered after a form submission has been abandoned. Enable the workflow setting in the Partial Entries Form settings.

This will trigger the workflow when a partial entry is created. It’s generally recommended to delay the workflow until a reasonable amount of time has passed. Use the schedule setting on the Start step to delay the workflow. For example, the following settings will prevent the workflow from starting until 3 hours after the last update of the partial entry, and ensure that the workflow only starts if the email address field has been entered.

When the workflow setting is enabled for the Partial Entries Add-On, then a new step type is available called the Partial Entry Submission step. This step will wait for the final submission of the form. 

If you’d like to send an email to the email address in a field on the form, then assign the step to the email field.

Use the assignee email to send an email with a link to resume the form submission. The {workflow_resume_partial_entry_link} and {workflow_resume_partial_entry_url} merge tags will output a link to the form. Select the page with the form – the link will take the user to this page and pre-populate all the values with the values they had entered when they were completing the form.

The merge tags support the following modifiers: page_id, text, token, assignee, step.

  • page_id:
    Displays partial entry from the specified page id
    Example: {workflow_resume_partial_entry_link:page_id=”2″}
    Note that this will take precedence over the Submission Page step setting.
  • text:
    Displays the text to display for the partial entry
    Example: {workflow_resume_partial_entry_link:text=”Continue your request”}
  • token:
    Enable or disable token access. It is false by default.
  • assignee:
    Reassign the partial entry to other users
    Example: {workflow_resume_partial_entry_link:assignee=”user_id|42″} or {workflow_resume_partial_entry_link:assignee=”role|developer”}
  • step:
    Display the partial entry for the specified step
    Example: {workflow_resume_partial_entry_link:step=”45″}

Put a space between multiple modifiers if needed.

{workflow_resume_partial_entry_link:page_id=”87″ text=”Continue your request”}

If you’d like to send another, different email the next day for example, then define the expiration settings and add another Partial Entry Submission step next in the list.

Also note: Partial Entries won’t have a value for the created_by as the entry is saved via a separate background process in which the user is not logged in. The value created_by will be set when the partial entry is updated when a multi-page form is paged using the next or previous buttons or when it is submitted.

Process Performance Management and Metrics

Reporting

The reports page displays a variety of charts for completed workflows and average duration by month, step, and assignee to help you identify potential bottle-necks in your processes – in real time.

Reports can be filtered by timeframe, form, step and assignee.

Example of a report filtered by form and grouped by month:

Example of a report filtered by form and grouped by assignee – in this case there is only one assignee:

Example of a report filtered by form and grouped by step:

Example of a report filtered by form and by step, and grouped by assignee:

Example of a report filtered by form, by step and by assignee, and grouped by month:

Approve/Cancel Workflows Through Links

One-click approval links

One-click approval links and tokens allow approvers to approve or reject an entry directly from an email without having to open the Workflow detail page.

Links to the admin UI require authentication, whereas links to a page on the front-end with the inbox shortcode do not require authentication. See link below for further information about the shortcode.

Insert the {workflow_approve_link} and {workflow_reject_link} merge tags in the assignee email. The links will expire after 48 hours, but this can be adjusted using the  gravityflow_email_token_expiration_days filter.

Approval links are available only in the approval step assignee email. They’re not available in any other steps, any other emails or Gravity Forms notifications.

Add approval links either by typing the merge tag manually or selecting them from the merge tag list.

If you’re using the inbox shortcode, you’ll need to add the page_id attribute to the merge tag like this:

{workflow_approve_link:page_id=[ID]}

{workflow_reject_link:page_id=[ID]}

e.g. {workflow_reject_link:page_id=5}

You can find the page ID in the URL of the page when you’re editing the page. The page ID is the ‘post’ parameter in the URL.

You can construct your own links by using the URL equivalents:

{workflow_approve_url:page_id=[ID]}

{workflow_reject_url:page_id=[ID]}

Security

One-click approval links that point to the admin UI require authentication. When an assignee clicks on the link they need to log in to the WordPress dashboard. If the assignee already has the authentication cookie on his or her computer then the password prompt will not appear.

However, one-click approval links that point to the front-end inbox shortcode do not require authentication, meaning the assignee will not be prompted to log in to approve or reject an entry. In this case, the the assignee receives a unique URL with a token which allow the assignee to perform the action encoded inside the token. Be aware that anybody who has access to the link can use it to perform the action, so the assignees should be aware of the implications of sharing/forwarding the links.

One-click cancel links

The one-click cancel merge tags allow assignees to cancel the workflow for the entry by clicking on a link in an email. They can be added to any of the workflow messages. The inbox shortcode must be on a page.

{workflow_cancel_link}

You’ll need to set the default inbox page in the settings or add the page_id attribute to the merge tag like this:

{workflow_cancel_link:page_id=[ID]} e.g. {workflow_cancel_link:page_id=5}

You can find the page ID in the URL of the page when you’re editing the WordPress page. The page_id is the ‘post_id’ parameter in the URL.

You can construct your own links by using the URL equivalents:

{workflow_cancel_url:page_id=[ID]}

Adjust the text in the link using the text attribute:

{workflow_cancel_url:page_id=[ID] text=”Unsubscribe”}

Assigning steps to non-users via the email field

Steps can be assigned to the email address value of an email field allowing users without an AUTOMAIT user account to participate in a workflow.

IMPORTANT: Assigning steps to email fields is not as secure as assigning steps to AUTOMAIT users. If you decide to assign steps to email fields, it’s strongly recommended that you don’t expose highly sensitive data.

When a form has email fields, they will appear in the ‘Fields’ section of the list of assignees that can be selected.

As email field assignees can’t login, they can’t use the admin UI, so you’ll need to add the inbox shortcode to a page and use the {workflow_entry_link} or {workflow_entry_url} merge tag in the assignee email to send them a unique URL which they will use to access the workflow. Use the page_id to specify the ID of the WordPress page containing the inbox shortcode. You can find the ID of the page in the URL when you open the page for editing (it’s the post_id parameter). The text attribute is optional.

The unique URL includes a secure access token which authenticates the user using a cookie stored on their computer for as long as their browser is open. Once the browser is closed, the user will need to click on their unique URL again in order to access the entry.

The unique URLs are valid for a duration of 30 days. This can be modified using the gravityflow_email_token_expiration_days filter.

The purpose of the email field is to allow people without user accounts to participate in workflows as assignees. It doesn’t look up the user account with that email address which means that you have to be careful testing – if you’re logged in you’ll see the tasks assigned to your user account.

Adding Direct Links to Workflow Entries for Easy Access

Linking to the workflow entry

You can include links to the workflow entry in assignee and approval notifications by adding the {workflow_entry_link} or {workflow_entry_url} merge tag. By default, this will link through to the workflow entry detail page in the admin UI. 

If you need to link to a page with the inbox shortcode, you’ll need to specify the ID of the page like this:

{workflow_entry_link: page_id=[ID of your page] }

Example:

{workflow_entry_link: page_id=24 }

You can find the page ID in the URL when you’re editing the page with the inbox shortcode (look for &post=XXX where XXX is the ID). You can also specify the link text by using the text attribute:

{workflow_entry_link: page_id=24 text = “View your application form” }

If you need more flexibility with the construction of the URL, you can use the {workflow_entry_url} merge tag which also takes the page_id attribute.

{workflow_entry_url}

OR

{workflow_entry_url: page_id=234}

Email Field Assignees

If the step is assigned to an Email field, then the page_id attribute is required because the assignee won’t be able to access the admin UI. In this case, the link will automatically include a special token which will identify the assignee. It’s important that these URLs are not shared because anyone who receives the URL can use it to participate in the workflow.

Entry Link Tokens for AUTOMAIT Users

By default, entry URLs and links sent to AUTOMAIT users will not include a token and will require the user to log in. However, there are situations in which it might be useful, and sufficiently secure, to allow WordPress users to participate in the workflow without logging in. It’s important to bear in mind that the token is not as secure as logging in, so use this feature with caution. To force the entry link merge tag to add an authentication token to the entry url and link merge tags just add the token attribute and make sure the page_id attribute is set. e.g.

{workflow_entry_url: page_id=234 token=”true”}

Merge Tags

The Flow Designer uses merge tags to allow you to dynamically populate submitted field values and other dynamic information in notification emails, field mappings, content templates and other areas.

A merge tag uses curly braces and looks like this: {workflow_entry_link}. The complete list of merge tags available to each context can be found by clicking the merge tag icon to the right of the text box.

The {created_by:[property]} merge tags

In addition to the merge tags available in the list, there’s another merge tag which can be used to display information for the user account of the entry submitter.

The {created_by:[property]} merge tags will lookup the user account in the created_by field of the current entry and display the specified property. Please note that this is different from the Forms {user:[property]} merge tag which looks up the user account for the current user.

  • :display_nameDisplays the Display Name of the submitting user.  {created_by:display_name}
  • :user_emailDisplays the email of the submitting user.  {created_by:user_email}
  • :user_loginDisplays the user login of the submitting user.  {created_by:user_login}
  • :IDDisplays the ID of the submitting user.  {created_by:ID}

The {assignees} merge tag

The {assignees} merge tags will output the details of the current step’s assignees. The assignee display name, email, and status are displayed by default. The following modifiers can be used to prevent them being displayed

  • :display_nameDisplays the Display Name of the assignee.  {assignees:display_name=false}
  • :user_emailDisplays the email of the assignee.  {assignees:user_email=false}
  • :statusDisplays the assignee status.   {assignees:status=false}

The above modifiers can also be used together  {assignees:display_name=true user_email=false status=true}

The {workflow_note} merge tag

The note merge tag will display the most recent user submitted note. The following modifiers can be used to customize the behaviour of the merge tag.

  • step_idDisplays all the user submitted notes for the specified step, including previous occurrences of the step   {workflow_note:step_id=5}. The step name can also be used instead of the ID.
  • display_nameDisplays the name of the user who submitted the note  {workflow_note:display_name=true}
  • display_dateDisplays the date and time the note was submitted  {workflow_note:display_date=true}
  • history
    Controls whether notes from previous occurrences of the step are displayed.  {workflow_note:step_id=5 history=true}

The above modifiers can also be used together  {workflow_note:step_id=5 display_name=true display_date=true}

The {workflow_timeline} merge tag

The timeline will display the date, user, step and notes from the timeline in a simple, compact list.

{current_step}

The current step supports the following modifiers: duration (time), expiration (date/time), ID, name (default), schedule (date/time), start (date/time) and type.

Examples:

  • {current_step:duration}
  • {current_step:expiration}
  • {current_step:ID}
  • {current_step:name}
  • {current_step:schedule}
  • {current_step:start}
  • {current_step:type}
  • {current_step:due_date} – When a step due date has been specified, this will return the due date.
  • {current_step:due_status} – This will return “Pending” or “Overdue” when compared to the due date if it has been set.

The {workflow_fields} Merge Tag

The {workflow_fields} merge tag supports the following identifiers : empty, value, admin, editable, display. All these modifiers take Boolean values.

Examples :

  • {workflow_fields:empty = false} // Output empty fields.
  • {workflow_fields:value = false} // Output choice values.
  • {workflow_fields:admin = false} // Output admin labels.
  • {workflow_fields:editable = true} // Output the steps editable fields.
  • {workflow_fields:display = true} // Output the steps display fields.

Note: workflow_fields is just a wrapper for the all_fields merge tag. It filters out any field which isn’t set as display only or editable on the current step. Only then their behavior can be modified by using {workflow_fields} identifiers.

The Flow Designer uses merge tags to allow you to dynamically populate submitted field values and other dynamic information in notification emails, field mappings, content templates and other areas.

A merge tag uses curly braces and looks like this: {workflow_entry_link}. The complete list of merge tags available to each context can be found by clicking the merge tag icon to the right of the text box.

The {created_by:[property]} merge tags

In addition to the merge tags available in the list, there’s another merge tag which can be used to display information for the user account of the entry submitter.

The {created_by:[property]} merge tags will lookup the user account in the created_by field of the current entry and display the specified property. Please note that this is different from the Forms {user:[property]} merge tag which looks up the user account for the current user.

  • :display_nameDisplays the Display Name of the submitting user.  {created_by:display_name}
  • :user_emailDisplays the email of the submitting user.  {created_by:user_email}
  • :user_loginDisplays the user login of the submitting user.  {created_by:user_login}
  • :IDDisplays the ID of the submitting user.  {created_by:ID}

The {assignees} merge tag

The {assignees} merge tags will output the details of the current step’s assignees. The assignee display name, email, and status are displayed by default. The following modifiers can be used to prevent them being displayed

  • :display_nameDisplays the Display Name of the assignee.  {assignees:display_name=false}
  • :user_emailDisplays the email of the assignee.  {assignees:user_email=false}
  • :statusDisplays the assignee status.   {assignees:status=false}

The above modifiers can also be used together  {assignees:display_name=true user_email=false status=true}

The {workflow_note} merge tag

The note merge tag will display the most recent user submitted note. The following modifiers can be used to customize the behaviour of the merge tag.

  • step_idDisplays all the user submitted notes for the specified step, including previous occurrences of the step   {workflow_note:step_id=5}. The step name can also be used instead of the ID.
  • display_nameDisplays the name of the user who submitted the note  {workflow_note:display_name=true}
  • display_dateDisplays the date and time the note was submitted  {workflow_note:display_date=true}
  • history
    Controls whether notes from previous occurrences of the step are displayed.  {workflow_note:step_id=5 history=true}

The above modifiers can also be used together  {workflow_note:step_id=5 display_name=true display_date=true}

The {workflow_timeline} merge tag

The timeline will display the date, user, step and notes from the timeline in a simple, compact list.

{current_step}

The current step supports the following modifiers: duration (time), expiration (date/time), ID, name (default), schedule (date/time), start (date/time) and type.

Examples:

  • {current_step:duration}
  • {current_step:expiration}
  • {current_step:ID}
  • {current_step:name}
  • {current_step:schedule}
  • {current_step:start}
  • {current_step:type}
  • {current_step:due_date} – When a step due date has been specified, this will return the due date.
  • {current_step:due_status} – This will return “Pending” or “Overdue” when compared to the due date if it has been set.

The {workflow_fields} Merge Tag

The {workflow_fields} merge tag supports the following identifiers : empty, value, admin, editable, display. All these modifiers take Boolean values.

Examples :

  • {workflow_fields:empty = false} // Output empty fields.
  • {workflow_fields:value = false} // Output choice values.
  • {workflow_fields:admin = false} // Output admin labels.
  • {workflow_fields:editable = true} // Output the steps editable fields.
  • {workflow_fields:display = true} // Output the steps display fields.

Note: workflow_fields is just a wrapper for the all_fields merge tag. It filters out any field which isn’t set as display only or editable on the current step. Only then their behavior can be modified by using {workflow_fields} identifiers.

Creating 'Views'

Getting Started: Choosing a Form and a View Layout

We will start by clicking on the Add View link in the “Views” menu on our Dashboard, then adding our future View title:

 

Next, we need to define the source of information we will use to start designing our View. There are two ways to create a View: Use a Form Preset or using an existing form as the data source for our View.

1) Use a Form Preset

When choosing this option, it means you will use a View preset form instead of an existing form from your Gravity Forms. When you save the View, GravityView will create a new form for you in Gravity Forms. The created form will include all the fields you need for each preset purpose:

2) Choosing a layout for an existing form

If you decide to “use an existing form” to pull information from in order to design your View you will need to select a layout from one of those below:

The Table View and the Listing View are the default View layouts.

Adding Fields to the Multiple Entries and Single Entry Pages

After selecting a View layout, the View Configuration meta box shows up. In this meta box, we will find three tabs at the top which correspond to the three available pages which a View is composed of. 

  • Multiple Entries: this page is the main table of your View, where your form entries will be displayed one after another in separate rows, each row is an entry and each column in a row is a field from your form (assuming you are using the Table View layout).
  • Single Entry: Sometimes your entries have so many fields they don’t fit in your main table, that’s why the Single Entry page exists, to show additional entry fields. 
  • Edit Entry: If you want to edit fields from an entry, you can do that on the Edit Entry page. On this page, you can select which fields from the entry are available for modification. This page can be accessed through a link put on the Multiple Entries page or the Single Entry page.

Now that we established what each of these three tabs (also called screens or pages in the front-end of your website) are used for, we can start adding fields to them.

The Multiple Entries tab

This tab is divided into three sections: 

  1. Above Entries Widgets
  2. Entries Fields
  3. Below Entries Widgets. 

Let’s make a brief stop here to explain two important concepts that we need to understand: Fields and Widgets:

  1. Fields come from your entry, they are the same fields that exist in your form. 
  2. Widgets are tools for your table, like a Search Bar or Pagination links, they are not specifically related to your form or an entry.

This being said, on this tab, you have two main sections to add Widgets ( above and below your table) and just one section to add Fields (your table). Each   field   added to your table, depending on which layout you choose, will become a table column (where each row is an entry).

This is how the Multiple Entries tab will look like on the front-end of your website:

The main difference between the Multiple Entries tab (or page) for the Single Entry and the Edit Entry tab, is that the latter two do not support widgets, just fields.

If your entries contain too much data, it will be wise to display the most important fields in the Multiple Entries page and leave the additional information to the Single Entry page. To do that, you will need to add a link to the Single Entry page in your main table. 

Configuring the Edit Entry screen

The Edit Entry screen is the place on the front-end of your website where the entry creator (or an Administrator) will be able to modify the field values from that specific form submission.

You can choose which fields are editable in the Edit Entry screen.

If you want the user who created the entry to be able to edit the entry, check the “Allow User Edit” checkbox

If the box is not checked, only Administrators and users who have access to editing Gravity Forms entries in the WordPress Dashboard will be able to see the Edit Entry links and edit the entry. 

 

1. Go to All Views

2. Click on the View you would like to Edit

 

3. If your View doesn’t already have an Edit Entry field, add one

For Edit Entry to be possible on a View, there needs to be an Edit Entry field. This will add a link to the edit entry screen on your View.

3.1 Click the Single Entry tab

You can also add an Edit Entry field on the Multiple Entries page.

 

3.2 Click Add Field in the zone where you want the Edit Entry link to appear

 

3.3 Scroll down to “Edit Entry” and click on it

 

You can configure link text and other settings by clicking on the gear icon

Okay, now we’ve added an Edit Entry field. Let’s configure the Edit Entry View layout.

 
 

4. Click on the Edit Entry tab available in the View Configuration box

This step and the steps below only apply to GravityView 1.5 or higher.

 

You will see an empty configuration

When the Edit Entry configuration is empty, all form fields will be displayed as editable. If the Edit Entry tab is configured with fields, then GravityView will only show these fields on the Edit Entry page. 

5. Click the “+ Add Field” button to add a field to be edited.

 

6. Click fields to add them to the configuration

 

In this example, we have added four fields

 

You can drag and drop the fields in the order you desire

 

7. To limit field editing capabilities, click the gear icon

 

You can make fields editable by only Administrators

This is helpful if you have “Allow User Edit” enabled, but you don’t want to allow editing of a field by the user who created the entry. In this example, Administrators will still be able to edit the field in the Edit Entry screen.

 

8. Update the View

Everything is now configured!

 

Visit the View and edit an entry to see the Edit Entry configuration

Let’s take a look at the Edit Entry functionality.

 

What administrators see

All the fields are visible in this screenshot because we’re logged in as administrators.

 

What the Entry Creator sees

The Entry Creator won’t see any of the fields that are limited by role in Step 7. In this example, the Company Name is not visible.

A Single Entry link is a link to a single, select entry. The point of using a Single Entry is to make your landing page view condensed to the user. The user will then just see for example a company name in a list, but when clicking on the Single Entry link,  the user will be able to edit all the entries you have configured. You can link to the single entry in different ways:

1. In Multiple Entries, configure a field to link to the Single Entry

You can click the gear next to a field to access the field settings. Once there, you can check the box labeled Link to single entry (if available; some fields won’t have this).

That will convert the field content into a link, for example, a name. That link will go to the Single Entry view.

2. Add a dedicated Link to Entry field

Click the Multiple Entries tab. Once there, click the + Add Field button.

In the field picker, scroll down until you see a field named Link to Entry. Click on that to add it to your View. That field will now be a link to the Single Entry view.

 

Using the Shortcode

You can embed GravityView in a post or page.

You can embed GravityView Views in posts or pages by using the  shortcode.

Shortcode Parameters

  • id – The ID of the View you want to display (required)
  • page_size – Number of entries to show at a time (Defaults to View setting)
  • sort_field – What form field id should be used to sort? (See note)
  • sort_direction – ASC / DESC
  • search_field – Only display entries with this text in the value (See note)
  • search_value – Only display entries with this text in the value
  • search_operator – Change the type of search to be performed. Default is “contains”, which matches all results that contain the search_value. Possible values include: ‘is’, ‘isnot’, ‘<>’, ‘not in’, ‘in’, ‘>’, ‘<‘, ‘contains’, ‘starts_with’, ‘ends_with’, ‘like’, ‘>=’, ‘<=’
  • start_date – Filter the results by date. This sets a limit on the earliest results shown. In YYYY-MM-DD format. You can now use relative dates.
  • end_date – Filter the results by date. This sets a limit on the latest results shown. In YYYY-MM-DD format. You can now use  relative dates.
  • class – Add a HTML class to the view wrapper
  • offset – This is the start point in the current data set (Count starts with 0)
  • single_title – Define a custom single entry view title (default: post/page title)
  • back_link_label – Define a custom single entry back link label (default: ← Go back)
  • post_id – When using the shortcode in a widget or template, you may want to specify a page where a View is embedded as the base URL for entry links. Default: NULL (added in Version 1.4)
  • detail – Display specific information about a View Read more below

Note: You can find the field ID by looking at each field’s title in the Gravity Forms Form Editor

Examples

This shortcode will display entries for View #123

Only search for “Example” in the field ID #5 for View #123.

Display the View, but have entries link to the post with ID of 40. Instead of yoursite.com/view/123/entry/5/, the entry would link to yoursite.com/post-40-url/entry/5/.

The detail Shortcode Parameter

When the detail parameter is defined when using the  shortcode, the shortcode will output information about the current View. It must be used inside a View’s Custom Content field to display accurate information.

Possible Values

  •  The total number of entries that are in the View. If displaying search results, the number of matched entries. (100 in the below example)
  •  (26 in the below example)
  •  (50 in the below example)
  •  The number of entries that are visible on a single page. If all entries are displayed, then the value will be the same as total_entries (25 entries were displayed in the below example)

E-Signature

 

To use your own logo and branding in the e-signature documents, go to the ‘Customization’ tab in the E-signature / Settings menu. Click the ‘White Label’ option to open the Logo uploader and upload your own logo.

 

You should be redirected the Emails tab where you’ll see the Upload Custom Branding to Email Invites section.

Here’s an explanation of the options you’ll see on this page.

1. Header Image: Here you can upload the logo you want to be displayed on your invitation email and document to be signed. This logo can be added by using the Upload File option or by entering the URL of an image or logo.

This is what it looks like in your signer-invitation email:

To display this logo on the document signing page, check the box for “Display header image on document signing page.”

This is what it looks like when this option is checked:

2. Logo Tagline: The tagline you enter here will appear beneath your logo in the signer invite emails.

3. Footer Text Headline: This text will appear above the footer text in the signer invite emails.

4. E-mail Footer Text: This text will appear in the footer of signer invite emails.

Below these fields you will see an option that allows you to disable this Footer Headline and Footer Text from invite emails.

5. Email Sender: This option determines what information is displayed in the ‘from’ field your signer-invitation emails. (I have Organization Name chosen in my example.)

6. Button Color: This option determines the color of the ‘REVIEW & SIGN’ button in your signer-invitation emails.

7. Success Paragraph Text: This text will appear at the very top of the document after the signer signs.

8. Success Image: This is an image that will appear with the Success Paragraph Text at the very top of the document after the signer signs the document. If you don’t choose your own image or disable the image with the disabling checkbox, you will see the default ‘green check’ that you can see below.

These two messages aren’t included in the final copy of the document or the PDF version, rather they appear only right after the document is signed as a notification for the signer.

9. Cover Page: Selecting this option will display a cover page for the signer when they choose to save the document as a PDF. It is an awesome way to add a little extra professionalism to your signed PDFs.

Create and Send a Basic Document

There are two types of documents you can create with WP E-Signature: the basic document and stand alone document.

This article will tell you about our Basic Document and how you can use it to send signing invitations to your signers via email! 😊 


What is a basic document?

A basic document is usually a more signer-specific document that you create and send directly to your signer(s) via email. A formal invitation to sign your document will arrive for your signer so they can review and sign the document.

A basic document is an excellent tool that allows you to collect multiple dynamic signatures with WP E-Signature!

How to create a basic document

1. Hover over the E-Signature menu > select Add New Document > basic document.

2. Type in your signer’s name and email. (Don’t worry if you make a mistake here, as you can edit this information before you send out the document.)

3. Configure additional settings here as desired:

  • Use the +Add Signer button to add any additional signers you want to this document.
  • Define the signing order by checking Assign Signer Order option and dragging the signers to your desired signing order.
  • Use the +CC Button to CC a user on this document to receive a confirmation email whenever the document is signed with access to the signed PDF.

4. Give your document a title and content. Use our Signer Input Fields if you’d like to require your signer to add data directly onto the document. When you add a Signer Input Field to this document, you’ll be required to assign this field to a specific signer.

Looking to use a form integration with a document? In this case, a stand alone document is the way to go!

5. Once your content is to your liking, you have one last chance to edit the name and email of your signer(s).

6. Lastly, configure your document options, review your document, and click to send it out for signature!

Once you send a document out for signature, your signer will receive an email invitation (like the one below) to review and sign the document.

Your signers will click on ‘review and sign’ and get redirected to the document to sign!

Additional Information

You can use Templates to save the content of a frequently used basic document for future use. Then when you’re ready to send your document again, you can load the template into a basic document and follow the same steps above to send it out for signature!

Using a template for a frequently used basic document can save you a LOT of time and is a great way to add some automation to your basic document workflow!

Adopting Your E-Signature and eSign Contract

To adopt your signature and sign a document, click ‘Sign here‘ and open the ‘Add Signature‘ window.

D5

When adopting your signature you have two signature formatting options to choose from:

  • Drawn Signature
  • Typed Signature

Drawn Signature: If you’d like to draw your signature, click Draw signature and create your drawn signature by using a mouse, your finger or a stylus. If you make a mistake, click Clear to reset the block and give it another shot. 🙂

Typed Signature: Type your name into the text box and choose a font you like, using the Change Font button. When you’re ready, click Adopt and Sign to adopt and save your signature and return to the document.

When the signer clicks the button Adopt and Sign to legally adopt and save their custom digital signature, the signer will be prompted with an option to “Agree” and officially “Sign” the document.

The signer is required to click on “Agree & Sign” button to save the document, if the signer does not click “Agree & Sign” the document will remain unsigned until they do so.

Wordpress Contract Plugin - Agree & Sign

After “Agreeing” and “Signing” the document, it will redirect the signer to the document confirmation screen with a custom message… something like Excellent work! You have successfully signed  this agreement.

In the background a confirmation is forwarded to the Signer and another confirmation email to the document sender (if they requested to be notified whenever a signer signs their document).

When all the signers have completed signing their document, the Admin will receive an email confirming that all parties have completed the signing process and depending on their document options, that email can also have a PDF attached, but the email confirmation will always include a link to the document with the option to download a PDF copy of the document.

All signers will also have the option to download a PDF copy of the documents or printing a copy of the document as well.

Wordpress Contract Plugin - Download PDF

Stand Alone Documents

There are two types of documents you can create with E-Signature: the basic document and stand alone document

This article will tell you about our Stand Alone Document and how you can use it for some serious electronic document signing automations! 😊 

What is a stand alone document?

Our stand alone document type is usually used for a more general document like a Waiver, Non-Disclosure Agreement, Registration Document, etc..

It ‘lives’ on a page of your AUTOMAIT platform and therefore can be visited by your general web traffic and signed with no work from you on the backend at the time of signing. 👍 

  • A stand alone document can be used by itself collecting data in our signer input fields or it can be used with the integrations that E-Signature works with.
  • A stand alone document only collects one dynamic signature per-copy, which means one signer that is always changing. Each signer that visits your stand alone document will see a blank copy of your document to sign.
  • You can use our Approval Signer or Auto-Added Signature features to add a fixed, pre-defined signer to the document (and if you are looking to collect multiple dynamic signatures from two parties that are always changing, you should use a basic document instead.)

How to create a stand alone document

1. Create a new page, give it a title (leaving the content blank), and publish it. This is where your stand alone document will ‘live’.

2. Navigate to E-Signature > add new document > select stand alone document. 

3. Give your document a title and add your content. If you want to collect data from your customer directly on your document, use our Signer Input Fields tool by clicking the pencil icon and adding your desired fields.

4. Finally, configure your document options as desired, and assign your document to the page we created in Step 1 (on the backend, a shortcode is generated and magically inserted into this page).

5. Once your document options are to your liking, publish the document, and get ready to collect electronic signatures!

How to get your stand alone document signed

There are several ways to invite your signers to sign your stand alone document.

  • You can make the page your document lives on accessible to your general web traffic. Example: A gym might have a “Sign Our Waiver” button on their website.
  • You can manually share the URL of the page that the document lives on so your signer can access the document directly. (Since we assigned the document to this page and the shortcode was magically inserted, if you visit the page’s URL the document will now load.) Example: You can text a signer the document URL so they can click and sign.
  • You can use the share/invite button from the backend of the E-Signature plugin. Clicking this option gives you quick access to the document’s URL to copy OR you can type in the name and email of your signer and send them a formal E-Signature invite (see below). Example: a financial company might use this option to send a formal email invitation to sign a stand alone document.

 

Receiving Email Notifications

This process begins when a signer receives an email requesting to electronically sign a document created by you.

The email is sent by AUTOMAIT E-signature on behalf of the sender, with a message and a link to open the document from the sender.

The email should look similar to the one below, however there might be some differences between the color, text and images (based on the sender’s preferences, defined in the customization settings).

If you (the document sender) would like to customize this email, you can using the Upload Logo and Branding Add-on.

After opening the email, click on “Review & Sign“to access the document requesting your signature. It opens up the document in new web browser window so you can review and sign!

How to Set Up Two Factor Authentication for Your Online Contracts

With our Two-Layer Authentication add-on, you can easily add an extra layer of security to your basic E-Signature documents! Follow these easy steps to set up this workflow.

Create a Basic Document

Next, visit E-Signature > add new document > basic document.Add the name and email of your signer.

Add the Second Layer Verification

To enable the second layer of authentication, click on the key icon on the right of the email.

Create Your Unique Access Code

An access code is a code that you (the document sender) will create and can verbally give (or manually text) to your signer. Your signer will still receive an email invitation to sign your online contract like in the regular basic document workflow, but they will not be able to access the document without this code.

Click the access code option and add your custom access code here.

It’s important to note that this feature exists for added security and verification of a signer. We highly recommend that you do NOT provide the access code to your signer via email, as doing so (in a round about way) would defeat the purpose of having an access code in the first place.

If a signer’s email account were to be compromised, the intruder would not be able to gain access to the document without the access code and (after the document is signed) the password that your signer sets up.

E-Signature Invitation Email

After you finish setting up your online contract and you send the document out for signature, your signer will receive an email invitation similar to the one below.

Enter the Access Code to View and Sign Your Online Contract

Once the signer clicks the “REVIEW & SIGN” link found in their custom email invitation, they will be redirected to a page where they will need to FIRST manually enter their email and the access code that you provided to them.

Create and Confirm a New Password to Access the Digital Contract in the Future

After your signer manually enters their email address along with the correct access code from the document sender, they will be prompted to manually create their own password for the contract. This is to ensure that access to the contract remains ONLY for the users that have been granted access in the first place.

Review Document and Sign

The signer will immediately be redirected to the contract to review it, add any required data and sign! After the document is signed, the signer will need to type in their password to view this document in the future.

Audit Trail: Unique Document ID

Unique Document ID Explained
Each document, contract or agreement that is created using WP E-Signature receives a unique document Identifier (or ID). Similar to human DNA, each WP E-Signature generated document has its own unique DNA string. The document identifier is the text and numeric string that identifies the unique (one of a kind) document DNA.

Tamper Resistance Document ID
If the document is ever tampered with or altered in any way (this means un-encrypting the database and changing something as small as a period to a comma within a WP E-Signature agreement) the Document ID will change immediately. Altering any aspect of a live agreement will literally cause the agreement to “self-destruct” until all original contents are exactly as they were at the time of signing.

This added security protects you and your signers and ensures that the terms of a document at the time of signing remain the same for the life cycle of the agreement period.

This tamper resistance feature is made possible with the document DNA and Document ID string.

It is also important to note that the Document ID is never stored in your database, but rather generated on demand each time a document loads so that it cannot be altered and used for future agreements.

UI Designer

  1. In the left side menu of the AUTOMAIT dashboard, click Design UI > Pages > Add New
  2. Enter a title for the new page and select the Template style (select ‘canvas’ layout for a blank template without the Theme navigation menu. Otherwise, choose one of the other template types)
  3. Click Edit with UI Designer to enter the UI Designer

The Main Elements

The AUTOMAIT UI Designer uses three main building blocks: SectionsColumns, and Widgets.

Sections are the largest building blocks, and inside them are groups of ColumnsColumns sit inside of Sections and are used to house the WidgetsWidgets are placed inside of Columns.
You control the SectionColumn, and Widgets with their handle.

section handle

 

Editing

To edit the SectionColumn, or WidgetRight Click their handle. 

Editing

 

Section

  1. Click the  icon to create a Section, or click the  icon to use a pre-designed Page or Block from our library
  2. Set your Column structure 
  3. Right click to Edit, Duplicate, Copy, Delete etc. 
  4. Use the Section handle to: add a section, drag a section, or delete.

 

Column

  1. Set the Columns Width. You can do it under Layout, or drag the dashed line between the Columns.
  2. To add more Columns Right Click > Add New Column
  3. Insert Widgets to your Columns

 

Widget

  1. Insert Widgets inside your Columns
  2. A Widget width is set by the Column width

Preview & Publish your page

Go to the bottom panel:

  1. To preview click the  icon. 
  2. If you are satisfied with the result, go ahead and click the  button. 
  3. Click ‘Have a Look‘ to view the published page

Note: The Preview link is different than the actual page link


Save Draft

In UI Designer you can edit a Published page and save your work as Draft. That means that you will not ruin your published page while saving your work as Draft.

  1. Click the arrow next to Update / Publish
  2. Choose Save Draft

How To Adjust Settings For Mobile, Tablet, and Desktop

Many editable features have a MobileTablet, and Desktop settings.  Most common uses include: Text size, Margin and Padding of elements etc.

  1. Look for the Viewport Icon viewport icon next to the individual element you wish to control. 
  2. Click the specific device icon for which you want to edit its settings.
device

Controlling Responsive Background Images and Borders

Background images in UI Designer are automatically device-responsive, but you also have control over more options for each device.

  1. Background Image: You can choose a different background image for each device if needed, whether it is a size-appropriate version of the same image, or a completely different image altogether.
  2. Background Image Display Options: You can select a different image position, attachment, repeat, and size for each device. In this way, you have more control over which area of the image is displayed on different device sizes.

Visibility 

You can choose to Show Hide a Section according to the device.

  1. Go to Section Setting > Advanced > Responsive
  2. Set your visibility preferences, choosing from Hide on DesktopHide on Tablet, or Hide on Mobile.
visibility preferences

When hiding an element, and switching to the view it’s hidden on, you will see that this element is “muted”. This gives you a clear indication that this element will be hidden on the live site, but still enables you to edit it as needed. 

You can edit that specific area in the responsive mode in which it is not hidden. For example, if the element is visible on mobile but hidden on desktop and tablet, you will be able to edit the element in the mobile view.

Change Mobile & Tablet Breakpoints

You can set the mobile and tablet breakpoint values.

  1. From any UI Designer page, click the hamburger menu in the upper left corner of the Widget Panel, then navigate to Site Settings > Settings > Breakpoints, and set the breakpoint value for mobile and tablet
  2. Save your changes
  3. Go to UI Designer > Tools > General Tab > Regenerate CSS, click Regenerate Files

Columns Ordering

This feature reverses the ordering of columns.

To use Columns Ordering go to Section Setting > Advanced Responsive Reverse Columns and set it to Yes.

Device Preview

Switch between Desktop, Mobile or Tablet views by clicking on the corresponding icons on the bottom of the panel.


Help! I Changed Something While In Mobile Preview, And It Changed On Desktop Too! Why?

  • You can’t delete an element (widget, column, or section) while previewing one mode (mobile, for example), and expect it to only be deleted from that type of device. Deleting elements will delete them across all devices. You can, however, use the element’s Responsive Visibility feature by going to the element’s Advanced > Responsive tab and enabling any of its visibility options (Hide on Desktop, Hide on Tablet, or Hide on Mobile). While the element won’t be deleted on those devices, it will be hidden.
  • You can’t move elements around while previewing one mode, and expect them to only be moved for that type of device. Moving elements around in any preview mode will move them across all devices. One exception to this is the Section > Advanced > Responsive > Reverse Columns feature, which does move columns to their reverse position.
  • If an element doesn’t have a Viewport Icon next to it, changing that element in one preview mode will change it across all devices.

How to Create, Edit, & Style Columns

Columns can be manipulated and styled either via the options in the UI Designer Panel on the left or by right-clicking the Column handle and choosing from the context menu that pops up.

Right-Click Options

If you wish to add a new column or duplicate a column, right-click a column handle and choose either Add New Column or Duplicate from the context menu. You can also copy and paste a column into another section using Copy and Paste options here, or you can copy and paste only the style (without the content) from one column to another. Clicking Navigator here will open the Navigator already set to that particular column. And of course, clicking Delete here will delete the column.

If you click Edit Column, the column’s options will be displayed in the UI Designer Panel to the left with all of the following options available to you.

Layout

  1. Column Width (%): Set your Columns Width
  2. Vertical Align: Set your Column Content’s vertical alignment. This way, you will be able to stick the content of all the columns of a section to the bottom, the middle of the top, or “stretch to fill” to align columns with unequal heights. Choose from Top, Middle, Bottom, Space Between, Space Around, Space Evenly
  3. Horizontal Align: This extends the ability of the inline positioning and lets you horizontally align the inline widgets that are placed in the same row. Choose from Start, Center, End, Space Between, Space Around, Space Evenly
  4. HTML Tag: Set an HTML Tag for your column.

 

Space Definitions

  • Space Between – Widgets start and end at the edge of the column, with equal space between them
  • Space Around – Widgets are spaced equally, and the edges are half the size of the space between widgets
  • Space Evenly – Widgets have equal space between, before and after them

 

Style

Background

Background Type: Choose between Classic (which allows you to set a background color or image), Gradient (allowing you to set a color gradient background), or an image Slideshow background.


 

Background Overlay (available if a Background Type is chosen)

  1. Background Type: Choose between Classic or Gradient
  2. Blend Mode: Set a Blend Mode
  3. CSS Filters: Add Blur, Brightness, Contrast, and Saturation

 

Border

  1. Border Type: Set a Border Type
  2. Border Radius: Set your Border Radius
  3. Box Shadow: Add a Box Shadow

 

Typography

Set Typography Colors for the section

Note: The ‘Set Typography’ colors won’t work if Default Colors are enabled.


 

Advanced

Advanced

  1. Margin: Set the section Margin
  2. Padding: Set the section Padding
  3. Z-index: Set the Z-Index.
  4. Entrance Animation: Click the dropdown to choose an animation.
  5. CSS ID: Set a CSS ID for your column
  6. CSS Classes: Set CSS Classes for your column
  7. Responsive: Show or Hide column on Desktop, Tablet, or Mobile

 

Responsive

  1. Reverse Columns: Slide to reverse your columns order (Great for Mobile)
  2. Visibility: Show or Hide your section on Desktop, Tablet, or Mobile

The Decision Manager

Creating tables in AUTOMAIT dashboard

Tables can be created from AUTOMAIT dashboard without pre-defining any data source, by describing the table structure and filling in the values in cells manually through an editor. To do this, you can use the Table Creation Wizard, it also allows importing CSV, Excel or Google Spreadsheets data to editable Tables. Table data for tables created this way will be stored in the database, will always be editable, and can utilize the benefits of server-side processing.

How to create a Simple table in the Decision Manager

‘Simple tables’ can be anything but simple, though, as you can now merge cells, style each cell differently, add star ratings to cells, and so much more.

Until now, creating manual tables was the simplest process in the plugin – you would choose the number of columns, column types, editor input type, predefined values, and so on.

With simple tables, we’ve simplified the process, so to create this table you need to choose the first option on the list – „Create a simple table from scratch“, and click on Next in the bottom right corner.

The next step is to define the table’s name, number of columns and number of rows.

Unlike Manual tables, you don’t need to define column types or choose editor input types for these tables, as Simple tables accept everything, and you’re able to rearrange columns and rows with a simple drag and drop feature. We’ll get to that later on.

After you choose your table’s name and set up the number of columns and rows, simply click on „Generate table“ button, and you’ll be taken to your new, empty table, like the one you see on the left.

You’re welcome to style the table as you want, even before adding content in it, but for this example, we’ll add some AMD and Intel processors’ specifications.

Table Preview – Below every table, you will see how the table will look like on front-end on desktops, tablets and mobile devices. Previews are not live, so when you format the table, you’ll need to click on “Save Changes” in the top right section of the screen in order to see the changes in the preview windows.

Table settings

Just like all other table types, Simple tables have table settings tabs above the table: Edit DataDisplay, and Responsive. This new table type doesn’t have many settings in there (that’s partly why we named them “Simple” tables), but we’ll introduce each tab to you, one by one, in the section below.

Edit Data

Edit Data tab is where you edit the table’s contents, formatting and style. Above the table, you can see available table tools. Most of you understand these tools, but we’ll break them down real quick, in order to help all newbies diving into tables.

 
Let’s stop there for a bit and apply some of these table settings in the table we just created. We’ll apply bold text and set colors you see above to the first row, and we’ll underline the manufacturer in the first column.

CPU

ManufacturerModelSpeedNo. of coresTechnology
AMDRyzen 9 3900XT3.8GHz127nm
AMDRyzen 7 3800XT3.9GHz87nm
Inteli7-1165G72.8GHz410nm
Inteli7-10700K3.8 GHz814nm

There are no limitations to this, so you can play around with background and text colors – formatting each cell individually:

CPU

ManufacturerModelSpeedNo. of coresTechnology
AMDRyzen 9 3900XT3.8GHz127nm
AMDRyzen 7 3800XT3.9GHz87nm
Inteli7-1165G72.8GHz410nm
Inteli7-10700K3.8 GHz814nm

Also, as you can see in the table above, all cells are currently aligned to the middle both vertically and horizontally, so let’s continue explaining available table tools.

  • 12. Word Wrap
  • 13. Insert Link
  • 14. Insert Media
  • 15. HTML code
  • 16. Shortcodes
  • 17. Star Rating
  • 18. Clear Table
  • 19. Merge Cells

A: Word wrap into new lines of the same cell
B: Overflow over next cell(s)
C: Clip – cut off the text when it reaches the cell’s border with …

Selection_999(2001)
 

Most tools are also available if you right-click on the table.

An advantage of this table type is the ability to reorder and resize rows and columns freely. To reorder them, simply click on rows or columns you wish to move, and you’ll see the cursor change to a hand. Then you can drag and drop the selection, as shown in the GIF below:

Table can be navigated through using keyboard shortcuts as well:

Navigation:
Arrow Up ↑ – move to the cell above the current active cell (if it exists)
Arrow Down ↓ – move to the cell below the current active cell (if it exists)
Arrow Left ← – move to the cell on the left of the current active cell (if it exists)
Arrow Right → – move to the cell on the right of the current active cell (if it exists)
Tab – move to the cell on the right side of the current active cell (if it exists)
Tab + Shift – move to the cell on the left side of the current active cell (if it exists)
Home – Move to the first cell in a row
End – Move to the last cell in a row
Ctrl + Home – move to the first cell in a column
Ctrl + End – move to the last cell in a column

Selection:
Ctrl + A – select all
Shift + Arrow Up ↑ – extend selection of the cell above
Shift + Arrow Down ↓ – extend selection of the cell underneath
Shift + Arrow Right → – extend selection of the cell on the right
Shift + Arrow Left ← – extend selection of the cell on the left
Shift + Home – select all cells in the row to the left, including the current cell
Shift + End – select all cells in the row to the right, including the current cell
Ctrl + Shift + Home – select all cells in the column to the top including the current cell
Ctrl + Shift + End – select all cells in the column to the bottom including the current cell

Editor:
Enter – open/close cell editor
F2 – open cell editor
Esc – cancel editing and close cell editor
Backspace – empty cell
Delete – empty cell
Ctrl + C – copy cell‘s content
Ctrl + X – cut cell‘s content
Ctrl + V – paste cell‘s content
Ctrl + Enter – fill all selected cells with edited cell‘s value
Ctrl + Z – undo
Ctrl + Y – redo

Display

The “Display” tab provides 4 options.

  • Table Title check-box allows you to have the title of the table displayed above it, and it is enabled by default. You can see “CPU” in the star-rating example above, which represents the table’s title above the page.
  • Header checkbox, when enabled, marks the first row of your table as columns’ header. Its default background color is set to light-gray, but you can change that freely using the table tools above the table.
    If you have merged cells in first and second column, this option will become unavailable automatically.
  • Stripe Table checkbox paints odd rows in light gray, so it’s easier to follow columns through a row. That feature is enabled by default in other table types, but with Simple tables, you can choose whether you’re going to use it.
  • Cell Padding (in px). Here you can set the padding inside all cells. The default value is 10px.

Responsive

The “Responsive” tab also provides 4 options.

Enabling the responsive mode basically pivots columns into rows. If you don’t enable the option to use the first row as table header, each cell will be located in a separate row.

When column headers are enabled, on tablets and mobiles the table is split into 2 columns and as many rows as there are columns, only repeated for every new row in the table. For example, when Responsive mode and column headers are enabled, the table will look like this on tablets and mobiles.

Also, when this is enabled, „Scrollable“ and „Limit table width“ check-boxes will be disabled. These two features work just like in any other Table, so if you enable „Scrollable“, „Limit table width“ will disappear, and if you enable „Limit table width“ a new option – „Word Wrap“ will be enabled, and „Scrollable“ will disappear from the page.

Horizontal scroll allows you to scroll through the table horizontally, which may come in handy for larger tables.

Limit Table Width sets the table’s width to fit the page, widget or the container in which the table is added.

When vertical scroll is enabled, you will be able to set its height on the page.

The number defined here is in pixels, so there‘s no need to add „px“ at the end.

Additional Notes

To add these tables on front-end, you can use the shortcode next to the title:

Or you can use blocks in classic and Gutenberg editors, or within page builders:

How to create editable tables manually

Creating tables

One of most common uses of Tables is to create tables, and fill them with data taken from the AUTOMAIT dashboard, without accessing or having any pre-existing data source available (Excel, CSV, Google Spreadsheet, MySQL DB, etc.). The editable table you create will be stored in MySQL, and you will be able to edit it at an any later time, or make it available for editing from the front-end.

We’ll go through the table creation process together, and explain all the available options as we proceed.

To start creating a table manually, open your AUTOMAIT dashboard, go to Tables -> Create a Table, choose the second option “Create a table manually”, and click “Next“:

Configure table structure

You will be shown the wizard step that will assist you to create the table structure (Note: if during any step, you notice that you’ve made a mistake, click “Previous” and go back):

Going through the elements in detail:

  1. Table name input – here you can define a table name that will enable you to identify this table among any other Tables. This table name can be redefined at any later time.
  2. Number of columns input – provide the number of columns that your table will have (e.g. enter 10, if you plan to have 10 columns). Another option you can use to change the column numbers is to add them with the button (element #9) or remove them with the X button (element #8). You can always add or remove columns later, after the table has been created.
  3. Column block – column blocks represent columns of your future table; one block stands for one column.
  4. Column header – with this input, you define the header that will identify the column; it will be visible in the frontend.
  5. Column type – this input defines the data type of the column, the filter type for the column, and the editor input type.
  6. Editor predefined value. This is an optional input, that allows you to define a default value of the column which will be pre-filled in the editor inputs, and in the filter inputs (this can be disabled). If the column type is One-line selectbox, or Multi-line selectbox, and some possible values are defined (see point #7), this input will become a dropdown of the possible values.
  7. Possible values. This is a “taggable” input, which appears only for One-line selectbox and Multi-line selectbox types. Here you can define all the possible values, separating them with a comma.
  8. “X” / Remove column block button. This button removes a column block. Using it can be more convenient than changing the column number with an input.
  9. Add column button. This button adds one more column block.
  10. Create the table. This is a dropdown button with options to choose an editor type. After choosing one, it creates the table on the MySQL side, creates a Table, and opens the chosen editor type, from which you can start editing the table data.

Column type options:

  • One-line string. This is the most “simple” text type. It is suitable for short strings. The generated column will have a “string” (“text”) data type, a one-line text input filter type, and a one-line text input editor input type in the editor.
  • Multi-line string. This text type option is suitable for longer strings. The generated column will have a string data type, a one-line text input filter type, and a multi-line editor (“memo”) input type.
  • One-line selectbox. This option is for columns, in which cells can have one of several possible options as a value (e.g. colors: “red”, “green”, “blue”). The generated column will have a string data type, a select box filter, and a select box editor input.
  • Multi-line selectbox. This option is for columns, in which cells can have several of possible options as a value at one time (e.g. purchased modules: module 1, module 2, module 3). The generated columns will have a string data type, a select box filter, and a multi-selectbox editor input.
  • Integer. This option is for integer numeric columns. The generated column will have an integer data type, a number filter, and a text/numeric editor input.
  • Float. This option is for float numeric columns. The generated column will have a float data type, a number filter, and a masked text/numeric editor input.
  • Date. This option is for date columns. The generated columns will have a date data type, a date range filter, and a datepicker editor input.
  • DateTime.  This option is for DateTime columns, when both the date and the time is necessary. The column will have a DateTime data type, a DateTime range filter, and a DateTime editor input.
  • Time. This option is for having the time stored in the column in either a 12H or 24H format. The column will have a Time data type, a Time range filter and a Time editor input.
  • URL link. This option is for URL link columns. The generated columns will have a URL link data type, a text filter, and a text editor input with URL validation.
  • E-mail link. This option is for E-mail columns. The generated columns will have an e-mail link data type, a text filter, and a text editor input type with E-mail address validation.
  • Image. This option is for image columns. The generated columns will have an Image data type, no filter, and a text editor input.
  • Attachment. This option is for attachment columns. The generated columns will have a “URL link data type”, no filter, an a “Browse media library” input to attach files.

Configuring an example table

Let’s configure an example table and fill it in with some data.

We use this configuration for columns (a dummy clients table):

  1. Company name, type: a one-line string
  2. Sector, type: a one-line selectbox, possible values are: “Architecture, Business Consulting, Construction, Technology, IT”
  3. Yearly revenue, type: float
  4. Client since, type: date

When you have finished configuring the table, click “Create the table”. A dropdown will open with options to open the table in a standard editor or an Excel-like editor.

Inserting table on post or page

Once you’ve filled in some values in the table, the procedure of inserting it in your post or page is simple. Open (or create a new) post or page, place the cursor in the position where you would like to insert the table, click the “Insert a wpDataTable” button in the editor, and locate the newly-created table.

Another option is to copy&paste the table shortcode manually (you can see it in the back-end editor).

That’s it! Not complicated at all!

Creating editable tables by importing data from Excel, CSV or Google Spreadsheets

 

In this tutorial, we will learn how to create editable tables from an Excel or CSV imported data, or from a Google Spreadsheet using DataTables WordPress plugin. Let’s watch a live demo of the imported table first, and then go through the steps needed to create it.

In many cases, you might have an initial file with the table data, but this table needs to be regularly updated (e.g. if it is a price list, a catalog, etc.). wpDataTables has two options here for you:

  1.  Creating tables linked to existing data source, in which case you will upload the file and initialize the table, whereupon it will be read every time on page load. Then you can overwrite this file to update the data. Such tables won’t be editable within WordPress, and if they are larger than 3000-5000 rows, the page load and generation time will be slow.
  2. Importing table data to WordPress. The initial data will be read and imported from the provided file or a Google Spreadsheet. You can select to skip certain columns, or add columns. You can edit both the structure and the data within the table at an any point later, but the table won’t be synced with the source file as is the case with the first option; e.g., if you change something in CSV or in source Google Spreadsheet, your Table data will stay the same because the data will be already imported to the database.

In this tutorial, we will learn how to create a editable tables from an Excel or CSV imported data, or from a Google Spreadsheet. Let’s watch a live demo of the imported table first, and then go through the steps needed to create it.

 
CompanyPhone numberCreation dateSector
Cursus In Incorporated(002) 4572644125/11/2003IT
Adipiscing Company(00606) 774200822/09/2005IT
Adipiscing Lacus Corporation(05646) 468313108/07/2008IT
Pede Company(04752) 414533924/12/2007IT
Ut Cursus Luctus Institute(068) 4024152302/01/2002IT
Felis Limited(001) 9149796113/07/2004IT
Sit Amet Industries(087) 1737034615/01/2013IT
Non Arcu Vivamus Associates(0406) 8275465121/05/2015IT
Blandit Congue In Limited(07333) 615507202/08/2010IT
Tortor Company(035889) 95680304/04/2008IT
 

Create a wpDataTable and import your CSV file

Go to Rules & Metrics -> Create a Table and choose Create a table by importing data from data source option.

File upload

The next step will be to locate the file you want to import using the WordPress Media Library. Click on the “Upload” button to open the Media Library and choose your CSV or Excel file:

We will use this CSV file to create an editable table. You can download it and use it as well. Importing Excel files is also supported (XLS, XLSX).

To get from Excel to AUTOMAIT, you can either upload the file using the Media Library, or browse the file that was previously uploaded. After selecting the file click the “Choose file” button.

Google Spreadsheet Configuration

If you want to use a Google Spreadsheet first you need to prepare the table data in a Google Spreadsheet. Then Go to File -> Publish to the web and click “Publish”. Copy this link from your browser since you will use it in Tables and paste it in “Input file path or URL”.

 

Table configuration

Now, Tables will need to “take a look” at the source to initialize the table structure before we can create the actual Table. To do this, click “Next”. Tables will initialize the column metadata and show you the pre-import table setup screen:

In this screen, you can configure the columns that will be imported, reorder the columns, or skip some columns during the import. You can also change the data type, and even add more columns.
The table name input will be used for Table name that will help you to identify it later, and can optionally be displayed in the page above the table.
To reorder the columns during the import, drag & drop the column blocks with the mouse.
To remove (ignore) some columns during the import, just click the “trash can” button in the top right of the column block.
To add a column, click the “Add column” button after the column blocks.

For each column you can redefine/define:

Column header – this is a header that will be shown above each column.

Type – this is a single selectbox that defines the column data type, editor input type for the back-end (and front-end) editor, and the filter type.
Possible options:

  • One-line string. This is the simplest text type suitable for short strings. The generated column will have a “string” (“text”) data type, a one-line text input filter type, and a one-line text input editor input type in the editor.
  • Multi-line string. Another option for a text type. This is suitable for longer strings. The generated column will have a string data type, a one-line text input filter type, and a multi-line editor (“memo”) input type.
  • One-line selectbox. This is an option for columns, where cells can have one of several concurrent options as a value (e.g. colors: “red”, “green”, “blue”). The generated column will have a string data type, a select box filter, and a select box editor input.
  • Multi-line selectbox. This is an option for columns, where cells can have several concurrent options as a value (e.g. purchased modules: module 1, module 2, module 3). The generated columns will have a string data type, a select box filter, and a multi-selectbox editor input.
  • Integer. This is an option for integer numeric columns. The generated column will have an integer data type, a number filter, and a text/numeric editor input.
  • Float. This is an option for float numeric columns. The generated column will have a float data type, a number filter, and a masked text/numeric editor input.
  • Date. This is an option for date columns. The generated columns will have a date data type, a date range filter, and a datepicker editor input.
  • URL link. This is an option for URL link columns. The generated columns will have an URL link data type, a text filter, and a text editor input with URL validation.
  • E-mail link. This is an option for E-mail columns. The generated columns will have an e-mail link data type, a text filter and a text editor input type with E-mail address validation.
  • Image. This is an option for image columns. The generated columns will have an Image data type, no filter, and a text editor input.
  • Attachment. This is an option for attachment columns. The generated columns will have a “URL link data type”, no filter, and a “Browse media library” input to attach files.

Default value. This is an optional input, where you can define a default value of the column which will be pre-filled in the editor inputs, and in the filter inputs (which can be disabled). If the column type is One-line selectbox, or Multi-line selectbox, and some possible values are defined (see point #7), this input will become a dropdown of the possible values.

Possible values. This is a “taggable” input, which appears only for One-line selectbox and Multi-line selectbox types. Here you can define all the possible values separating them with a comma.

Data preview shows the data preview (first 4 cells) for the initialized columns. Data preview does not show up for manually added column blocks.

To create the Table, click the “Create table” button. A dropdown will appear, where you can choose whether you prefer to open the table in the standard editor, or in an Excel-like editor. After choosing one, the Table will be generated, and you will be redirected to the back-end editor.

Creating editable tables in the Decision Manager

 

There are 2 primary ways to create editable Tables:

  • Create the tables manually or 
  • Import the table data from Excel or CSV

Tables created manually with Table Constructor are back-end editable by default; to allow front-end editing, simply open the “Editing” tab in the table configuration settings, click the  “Allow editing” option, and click the “Apply” button (the ID column and the table name will be pre-configured for this type of tables by default).

Your front-end users will then be able to edit the table data.

Frontend editing

wpDataTables Configurating Editable Tables

When the table is saved, and inserted in the post or page, the look of the table in the front-end is slightly different from that of a typical non-editable table. You’ll see three new buttons in the TableTools section of the table (or just these three if you didn’t enable TableTools for this Table).

Manual tables will be always editable on the table configuration page, and you will always see these three buttons independently from the “Allow editing” feature.

It is also possible to select a row in the table by clicking on it. When you do so, the row will become highlighted (you can change the highlight color along with other table colors in the table settings page).

To make editing possible, you need to choose editor input types for the columns we want to allow users to edit. For this, you need to open the column configuration panel by clicking on “Column settings” button wpDataTables column settings or by clicking the “Complete column list”  button wpDataTables complete column list which enables you to open the column configuration for each column you want to make editable. Then, you need to make a selection in “Editor input type” dropdown under the “Editing” tab.

When the editor input types are chosen and saved, you can return to the table front-end (open the post or page where you inserted the table), choose any row, and click “Edit“; or click “New” to create a new entry. You will see an editor popup. The popup is responsive, so it will work correctly on mobile and tablet devices as well.

  • In the left side of the editor popup you will see the names of the columns.
  • On the right side of the editor popup you will see the editor inputs for the cells.
  • On the bottom side, you will see the control and navigation buttons. Cancel – discards all changes and closes the editor popup.
    • << Prev – selects the previous row of the table, unless the first one is selected. If necessary, it switches to the previous page, and puts the data from this row in the front-end editor. Changes that were not saved will be discarded.
    • Next >> – selects the next row of the table, unless the last one is selected. If necessary, it switches the table to the next page, and puts the data from this row to the front-end editor inputs. Changes that weren’t saved will be discarded.
    • Apply and add new – saves the data from the editor in the current row, it doesn’t close the popup, but opens a new editor with the blank input fields.
    • OK – saves the data from the editor in the current row, and closes the editor popup.
    • Right top “X” button is equal to “Cancel” – this discards all unsaved changes and closes the popup

When you click “Save” or “OK“, data is first validated and then sent to MySQL engine. If the data is invalid, or MySQL returns an error, you will see an error message which tells you which field is problematic and what you need to change.

While the data saving is in progress, you will see an overlay indicating that the process is going on in the background. If the data is sent correctly, you will see a success message.

wpDataTables Configurating Editable Tables

Calculating totals, minimum, maximum and average values in Tables

For many cases, it is useful to calculate a sum, average, minimum and maximum of all the values for a given column. For example, total sales within a month, the total price of products in an order, calculating maximum profit, minimum wage, average grade etc. the Decision Manager supports a sum / totals, average, minimum and maximum row for numeric columns, see this table as an example, and try to filter it by a date range to see how the totals recalculate:

DateHeinekenAmstelTuborgCarlsberg
09/01/2019956441299268
10/01/2019534279987524
11/01/2019713956898343
12/01/2019748416137466
09/02/2019239967629453
10/02/2019822326753800
11/02/2019522367215138
12/02/2019528721623320
09/03/2019483609689451
10/03/2019290435476984
 ∑ = 54,387∑ = 55,148∑ = 57,774∑ = 52,211
 Avg = 543.87Avg = 551.48Avg = 577.74Avg = 522.11
 Min = 105Min = 108Min = 106Min = 104
 Max = 997Max = 967Max = 1,000Max = 984
 

Adding all these features is simple. In the column settings, click on the Data tab and check the Calculate checkboxes for the selected column you want to calculate these functions.

Calculation functions

If these checkboxes are checked for at least one row, a functions row will appear in the bottom.
Functions are recalculated on table redraw (i.e. when you filter).

Also take note of the shortcode below each calculated function.

Calculating shortcode

By pasting the shortcode, you can display the results of the functions somewhere outside the table, or you can paste this code in a cell belonging to another table.
To achieve this you will need to check the Parse shortcodes option on the wpDataTables Settings page.

Calculating shortcode2
  1. Go to your AUTOMAIT dashboard, Rules & Metrics
  2. Click on Settings
  3. Check the “Parse shortcodes” checkbox
 
 

Formula (calculated) columns

If your dataset used for Table creation is not comprehensive – if for example, it shows only the price without VAT tax, or you need a column showing a result of calculation based on other columns’ cell values, you can use the formula (calculated) columns.

See this table: “Tax” and “Difference” columns do not exist in the dataset. They are calculated “on the fly” using the formula columns feature.

RegionTypeNet costCatalog costTaxDifference
ABTyneside flat93,474102,82118,507.7827,854.78
ABTyneside flat57,50863,25911,386.6217,137.62
ABTyneside flat28,32631,1595,608.628,441.62
AlajuelaApartment76,98484,68215,242.7622,940.76
ANTerraced house38,22942,0527,569.3611,392.36
AndalucíaTyneside flat83,48591,83416,530.1224,879.12
BAGarden flat53,86159,24710,664.4616,050.46
BATerraced house67,92974,72213,449.9620,242.96
BCGarden flat99,087108,99619,619.2829,528.28
BCFlat47,77452,5519,459.1814,236.18
 
  
 

Add a formula column

Any table can have a formula column. To add one, you can click the “Add a formula column” button:

Formula Image

Formula constructor

After you click the “Add formula a column” button, you will see a popup formula constructor. It has a fixed name ‘formula_1’, ‘formula_2’, etc. – depending on the amount of formulas that you added.

The formula constructor popup has several main elements:

  1. Columns that can be used in the formula. Please note that only numeric (float and integer columns) can be used in formula columns.
  2. Formula. The created formula itself.
  3. Supported operators. Formulas in Tables support all arithmetic operators, brackets to define the calculation order, and trigonometric operators.
  4. Preview button and preview section. Once you prepare the formula, you can click this button to see the result for the first 5 rows of your table to verify the calculation is correct.

Additionally, there is an explanation text on the top.

You can use columns (values for each cell will be inserted), or number values. Only numeric columns are allowed (non-numeric will be parsed as 0). Basic math operations and brackets are supported. Example: col1*((col2+2)-col3*sin(col4-3)).

Formula image 3

To calculate the “Tax” column in the above example, we can simply use the catalog cost column value, multiply it by some number, and click “Save“.

Formula image 4

Now let’s change the displayed header of the formula column. To do that, click the button for column settings.

Formula Image 5

Enter the new value in the “Displayed header” input in the first tab column setting and click apply.

Formula image 6

If you want to change the formula for a calculation you can go to the “Data” tab and click on the “Open Formula Editor” button.
After you click on THE “Open Formula Editor” button, the formula constructor popup will appear. You can use it to adjust the formula that is used for calculation.

Formula image 7

Formula columns can be easily deleted by clicking the “Delete” button in the column header area in the live table preview.

There are several limitations when using formula columns in Tables:

  1. One formula column cannot be used in another. This limitation can be avoided by using nested calculations.
  2. In tables with server-side processing formula, columns cannot be used for grouping, filtering, and sorting. Basically, formulas are calculated only for the rows that are immediately visible; Therefore, it’s not possible to “know” the values for currently invisible rows. Please note that this also applies to the “Manual” tables, as they also use server-side processing by default. Also, of course, it is not possible to edit the cells generated by formulas in the editable tables.
  3. Adding a sum in the sum row for formula columns is not yet supported.
  4. Using calculation functions in formula columns is not possible
 

How to create charts with a simple wizard

 

See the steps needed to create a responsive chart in AUTOMAIT using the Chart Creation Wizard of the Decision Manager, a very easy step-by-step generator.

On each step you can go back to change the settings. In the “Formatting and preview” step, you can see a live chart preview, so you can check if you’re satisfied with the look of the chart before saving it and inserting it to a WordPress post or page. You can see the current step in the upper part of the screen in the breadcrumbs.

Chart title & type

To open the Chart Creation Wizard, open your AUTOMAIT dashboard and go to Rules & Metrics -> Create a Chart, where you will define a chart name that will help you to identify it later, and choose one of the render engines – Google ChartsHighcharts or Chart.js.

Creating charts with wpDataTables
Creating charts with wpDataTables

When you choose the rendering engine, the Decision Manager will show a list of possible chart types, the list varies depending on the engine. For this example, we will use the Highcharts area chart. After you choose the chart, click Next to go to the next step.

Data source

On the “Data source” step you will need to define the table that will be used as the data source for the new chart. This is done with a simple selectbox.

Creating charts with wpDataTables

Data range

Creating charts with wpDataTables

On the “Data range” step, you will need to provide the data range for the future chart. This consists of several blocks. The first block is the Column range picker.

In the column range picker, you can select the table columns that will be used in the future chart. In the left container you can see a list of all the columns that the table has, with their names and data types. The items of this list can be clicked to be selected; also, there are “Select all” and “Deselect all” shortcuts above them. The right container represents the list of columns that will be used in the chart. The items in this list can be drag&dropped for reordering. Add allAdd selectedRemove selectedRemove all buttons are between the two containers. These allow adding columns to the chart or removing them. The right container also displays hints if an incorrect amount or incorrect type of columns for the chosen chart type was selected (e.g., it shows that there are not enough columns added for the selected chart type).

Next block is the Row range picker block:

The Decision Manager allows you to choose not only the columns that will be used in the chart in the WordPress front-end, but also the rows. By default, it is set to “All rows“, but you can choose individual rows or row ranges as well. For this, choose “Pick range” in the dropdown, and click on the “Range picker…” button that appears.

Creating charts with wpDataTables

When you click on the “Range picker…” button, the row range picker popup will appear.

Range picker shows the data of your table, and you can select the cells that you would like to use in the chart there.

There are 2 options to pick a range:

  • Click&drag (Excel-like): click on a cell that you want to set as a range start, and move your mouse (e.g., diagonally) to the cell that you want to set as the range end. It will also override the columns you chose in the column range picker if the column set will be different.
  • Use checkboxes above the columns and to the left of rows. All rows and columns that have checkboxes checked are for the range. Column range can be overridden with this option as well.

When you’re done, click “OK“, and the range will be saved (see the hint below the dropdown which will show the number of selected rows).

The last option on this step is the “Follow table filtering” checkbox. It is available only if you choose to use “All rows” in the “Row range” selectbox.

wpDataCharts follow table filtering

Formatting and previewCreating charts with wpDataTables

When the data range is chosen, you can click Next to proceed. The next step is “Formatting and preview“. Changes that are made on the chart are instantly visible on the chart that is rendered on the right side of the screen. The formatting step is divided into categories representing different chart elements.

In the first category you can change basic chart options like:

  • Chart width – The width of the chart
  • Chart height – The height of the chart.
  • Responsive width – If you tick this, chart width will always adjust to 100% of the width of the container
  • Group chart – If you tick this checkbox, the values of the rows with the same label will be summed up and rendered as a single series. If you leave it unticked, all the rows will be rendered as a separate series.
  • Background color – The background color for the tooltip.
  • Border width – The pixel width of the outer chart border.
  • Border color – The color of the outer chart border.
  • Border radius – The corner radius of the outer chart border.
  • Zoom type (Highcharts only) – This decides in which dimensions the user can zoom by dragging the mouse.
  • Panning (Highcharts only) – Allows panning in a chart. This is best used with Pan key to combine zooming and panning.
  • Pan key (Highcharts only) – Allows setting a key to switch between zooming and panning.
  • Plot background color – The background color or gradient for the plot area
  • Plot background image  (Highcharts only) – The URL for an image to use as the plot background.
  • Plot border width – The pixel width of the plot area border.
  • Plot border color – The color of the inner chart or plot area border.
  • Font size (Chart.js and Google Charts only) – The default font size, in pixels, of all text in the chart.
  • Font name (Chart.js and Google Charts only)- The default font face for all text in the chart.

In the “Series” category you can customize actual series options for series that are used in the chart:

  • Label
  • Color
  • Curve type (Google Line Chart only, Chart.js Line and Area)
  • 3D (Google Pie Chart only) – If true, a three-dimensional chart is displayed.
Creating charts with wpDataTables
Creating charts with wpDataTables

The “Axes” section describes chart axes options; the X(H) axis or category axis and the Y(V) axis or value axis. Options that are available for axes are:

  • Grid
  • Grid line style (Highcharts only) – The dash or dot style of the grid lines
  • Horizontal axis label – Name of the horizontal axis
  • Horizontal crosshair (Highcharts and Google Charts only)- Configures a horizontal crosshair that follows either the mouse pointer or the hovered point lines
  • Horizontal axis direction  (Google Charts only)
    – The direction in which the values along the horizontal axis increase. Specify -1 to reverse the value order
  • Vertical axis label – Name of the vertical axis
  • Vertical crosshair – Configures a vertical crosshair that follows either the mouse pointer or the hovered point lines
  • Vertical axis direction (Google Charts only) – The direction in which the values along the vertical axis increase. Specify -1 to reverse the order of the values
  • Vertical axis min value – The minimum value of the axis
  • Vertical axis max value – The maximum value of the axis
  • Invert – Enables inverting the axes, so that the x axis is vertical, and the y axis is horizontal

The chart’s main title options:

  • Show/Hide Chart title
  • Title floating (Highcharts and Google Charts only)- When the title is floating, the plot area will not move to make space for it
  • Title align  (Highcharts only) – The horizontal alignment of the title
  • Subtitle  (Highcharts only) – The chart’s subtitle
  • Subtitle align  (Highcharts only) – The horizontal alignment of the subtitle
Creating charts with wpDataTables
Creating charts with wpDataTables

Options for the tooltip that appears when the user hovers over a series or point:

  • Enable/Disable Tooltip
  • Background color (Highcharts and Chart.js only)  – The background color for the tooltip
  • Border width (Highcharts only)  – The pixel width of the tooltip border
  • Border color (Highcharts only) – The color of the tooltip border
  • Border radius (Highcharts and Chart.js only) – The radius of the rounded border corners
  • Shared tooltip (Highcharts and Chart.js only) – When the tooltip is shared, the entire plot area will capture mouse movement or touch events
  • Value prefix (Highcharts only) – A string to prepend to each series’ y value
  • Value suffix (Highcharts only) – A string to append to each series’ y value

The legend is a box containing a symbol and name for each series item or point item in the chart:

  • Enable/Disable Legend (Highcharts and Chart.js only)
  • Background color (Highcharts only) – The background color of the legend
  • Title (Highcharts only) – A title to be added on top of the legend
  • Layout (Highcharts only) – The layout of the legend items
  • Align – The horizontal alignment of the legend box within the chart area
  • Vertical align – The vertical alignment of the legend box
  • Border width (Highcharts only) – The width of the drawn border around the legend
  • Border color (Highcharts only) – The color of the drawn border around the legend
  • Border radius (Highcharts only) – The border corner radius of the legend
  • Legend position – The position of the legend. Possible values are ‘top’, ‘left’, ‘bottom’ and ‘right’
Creating charts with wpDataTables
Creating charts with wpDataTables

The “Exporting” category defines the exporting module that allows your users to download the chart as PDF, PNG, JPG or SVG vector images (Highcharts only):

  • Enable/Disable Exporting
  • Data labels – Add data labels to improve readability of the exported chart
  • File name – The filename, without extension, to use for the exported chart
  • Width – The width of the original chart when exported
  • Button align – Alignment for the export button
  • Button vertical align – The vertical alignment of the export button
  • Button color – The color of the symbol’s stroke or line
  • Button text – A text string to add to the individual button

Credits label in the lower right corner of the chart

  • Enable/Disable Credits
  • Credits href – The URL for the credits label
  • Credits text – The text for the credits label

You can experiment with the settings and click Next to see the chart preview. If you’re not satisfied, you can always go back and change these settings:

Creating charts with wpDataTables

Save and get shortcodeCreating charts with wpDataTables

When you’re satisfied with the preview, click Next again so your chart will be saved in the WordPress database, and a shortcode will be generated for you. Click on the shortcode button, and the shortcode will be directly saved to your clipboard. 

Insert the Chart in your page 

To insert the chart in a page you simply copy the generated shortcode, and insert it in your page where you need it.

The Integration Manager

Integrately is an integration service that specializes in creating self-service automated integrations between the web’s most widely used apps. AUTOMAIT has partnered with Integrately and the core capabilities of AUTOMAIT are of course integrateable with all the 325+ apps that Integrately connects to.

As a AUTOMAIT customer, you get access to all of Integrately’s most advanced features and an unlimited number of integrations. 

IMPORTANT: To access the advanced Integrately features, you need to create a free account with Integrately. When having done so, please let us know in a support ticket and we will set up your Advanced Integrately account.

To visit the Integrately support and read the help documentation, please follow this link

User Management & Access

The AUTOMAIT platform’s User Management module consists of 4 sections related to the management of users on your platform.

The sections are Users, Invite User(-s), User Access and Email Sending & Log. 

With these elements you will be able to invite and manage users on your AUTOMAIT platform. In the following articles, we will be going more into each of the sections.

The Users section is where you (the Automation Officer) can get an overview of the users on your AUTOMAIT platform.

There are 4 standard roles set up on the platform. 2 roles for business developers and/or business process owners/managers called Automation Officer and Automation Manager, respectively. 1 role named Operators for anyone in your organization assigned to any workflow (access to specific workflows can be granted at both role and individual user level and at each workflow step, in accordance with your business procedures). And 1 role for external participants called Customer. This role is directed at external users to your organization that you build self-service areas to (as with the Operator role, individual access permissions  can be set in the Content Control section as well as the Categories section).

 

Both the Automation Officer and Automation Manager  roles can access the AUTOMAIT dashboard and work on business automations for your organization. But only the Automation Officer can access the Account section and the Users section.

This is because this section grants you permission to change user roles by adding or removing roles to users.

The Automation Manager however, will have access to the other User Management modules, and will be able to invite users, set access permissions for your organization or customers and view the email log. You can of course request us to change that via a support ticket).

The Invite Users section allows you to invite users to join your AUTOMAIT platform, to either work on automations or participate in workflows.

 

The Invite Users section consists of a few elements, all of course aimed at onboarding users on your platform. The Invite Users element almost introduces itself. Simply invite users to sign up on your platform by adding their email addresses in the invite box. Add one email address per line and click ‘Send Invitation’. The invitees will now receive a link to register on your platform.

The ‘Email Template’ elements let’s you customize the message for the users signing up:

And with the Registration Template you are able to change the labels in the sign up process for your users, if you would like to do so:

The User Access section let’s you manage who can access which specific pages on your platform. This is done on a user role level, meaning that for example when creating individual self-serve areas, you need to add to the permissions by using ‘Views’ (editable only by user submitted by) and/or password protect a specific page and give the user the password (see further below how to password protect a page).

 

When creating individual self-service areas, the easiest way to do so is by creating a new page in the UI Designer, and protect that page with a password. The password can. then be sent to the user who needs to be able to log into that specific page.

 

In the Email Sending & Logs section, you will be able to track the emails that your AUTOMAIT platform is sending out. Most often this will be notification and confirmation emails related to an automated workflow you have set up.

This section also allows you to send out emails from your platform. This feature will most often be used to test the platforms email sending capabilities but can also be used to send an email to a recipient.