NorthStar CCM Form Editor

Getting Started

Overview

Enterprise Website offers a way to create well-formatted forms that can be used and customized as your business or organization requires. Forms in NorthStar CCM can be interactively created and designed as .efd files. This type of files consists of forms that capture the data filled out by users. The fields that build up the form can be easily build and customized by using the Form Editor.

Accesing Forms Editor

The Forms Editor can be accessed either by creating a new form from the Projects module, or by opening the edit mode from the Form Preview page.

To create a new form:

1. Starting from the home screen, access Projects;
2. Click the New button in the toolbar, and choose Form;
3. Enter a relevant name for your form and click Ok. You will then be redirected to the Form Editor.

To access the form preview:

1. Starting from the Project Details page, select the form (the .efd file format) you want to edit;
2. Click the Edit button in the toolbar;
3. You will be redirected to the Form Editor.

Understanding the Form Editor Layout

Before you start customizing your forms within the Form Editor, it is important to take some time to familiarize yourself with the interface and terminologies used to describe what options are available.

Within the Form Editor, you will be able to find the following units:

• Design Surface: the dedicated region in the Form Editor that you will use to add and remove content. This is the central and largest area of the screen and it will display how your form will look like as you design it.

• Sidebar: positioned on the left side of the screen, provides access to all the form components, styles, data source, and other settings.

• Toolbar Options: at the editing time, it might be necessary to consider the following options:

  • Save: Use the Save ( ) button to save changes made to the current document template.
  • Undo: Use the Undo ( ) button to move one step back in the undo chain.
  • Redo: Use the Redo ( ) button to move one step forward.`
  • Save Test Data: Use the Save test data ( ) button to complete your form with data and save it to an xml file to use it later in communication.
  • Preview: Select the Preview button to see how your form looks like on a Desktop, Tablet or Mobile.
  • Save As: Use the Save as button from the More ( ) menu to save the form in a new location within the workspace.
  • Go to Folder: Use the Go to Folder button from the More ( ) menu to go back to the folder where this form is located.
  • Share: Use the Share button from the More ( ) menu to generate a public link, that can be copied and send to other NorthStar CCM users with which you may want to share it. This option allows you to make the form public.
  • Download: Use the Download button from the More ( ) menu to download the form on your local machine.
  • Versions: Use the Versions button from the More ( ) menu to view a list with all the different form versions created. You will also be able to view and modify comments for each version or upload a new one.
  • Dependencies: Use the Dependencies button from the More ( ) menu to view all the directly-connected files with the form and also the files where it is used, in a separate tab.
  • Copy: Use the Copy button from the More ( ) menu to copy the form to a different folder within the workspace.
  • Move: Use the Move button from the More ( ) menu to move the form to a different folder within the workspace.
  • Delete: Use the Delete button from the More ( ) menu to delete the form all together, but not until your confirmation of deletion.
  • Rename: Use the Rename button from the More ( ) menu to provide a new name for your form. Form fields should be named for what they are as a type, not how they work. Otherwise, the names can become too confusing. The name must not contain special characters, except digits and underscores. You should choose a name that can be easy to read and understand. For example, fname, lname, job_type_dropdown, textarea1, male_radiobox etc.

Online Editor

The Online Editor proposes a set of tabs that can be accessed to configure different types of settings when editing a form template. In the editor, there are five available tabs that can be accessed directly from the left sidebar, each one with a different purpose:

• Components - populating the form template with several fields.
• Style - styling the fields inserted in your form template.
• Data - assigning a data source to insert dynamic fields into the template.
• Languages - setting up multiple language translations.
• Settings - configuring settings related to fields, pagination, lookup, validation, etc.

Components

When building a form in NorthStar CCM Platform, you will need to add different form fields to achieve the desired output. Form body contains field components of which behavior can be controlled from the Style tab in the sidebar.

Form Fields Table

To find out more information on each form field, in particular, select the field you need from the table below:

Page	Text	Label	Hyperlink	Radio	Checkbox Group	Number	Currency
Time	Password	File Picker	Rating	NorthStar CCM Authentication	Google Address	XML Field	Group
Text Area	Separator	Contact Field	Dropdown	Checkbox	Date	Rich Text	Datetime
Contact Id	Repeating Section	Image Picker	Structured Data	Script	Google Map	Subform	Signature

Adding a Form Field

Follow the steps below to insert a field into a form template:

• In the Form Editor, select the Components tab from the Sidebar.
• Within the Components section, select the form field you want to add to the form, then drag and drop it into the design surface. Use the More and Less ( ) buttons to quickly find the components you need.
• Once a new form field was added to the form, it will appear in the Form section of the Sidebar.

Editing a Form Field

There are multiple ways to edit a field in the online editor:

• Select the form field you want to edit from the design surface. Select the Settings ( ) button from the form menu visible at the top-left corner. You will be redirected to the Style tab in the Sidebar where you can customize the form field.
• In the Form Editor, select the form field you want to edit from the design surface. Then, select the Style tab from the Sidebar and start customizing its style.

Style

For configuring fields' properties within the template, Style Menu from the Sidebar is the first choice. There you will find properties related to the selected field, from the corresponding type of field to.

To view all the available properties for each one of the component inserted in a form template, access the Field Styles section.

Data

The Data tree in the Form Editor should mimic the one in the Template Editor. Additionally, the fields inserted within the template can be edited as common form components from the Settings ( ) contextual menu once you select the field. Therefore, you can set a data source for your email template by following the steps below:

Assigning Data Sources

Follow the steps below to assign a data source to your form:

• In the Form Editor, select the Data tab in the Sidebar.
• Select the Browse ( ) button to navigate the file system and add a data input to your form field.
• Once added, notice the Data Tree view that appears under the Fields section. To add fields to your form, select the component and drag and drop it into the design surface.

Languages

For form templates you can set up multiple language translations, meaning that during the rendering process, a specific translation can be applied and all of the static text in your document will be replaced using the translation you set up.

Creating a Translation

Follow the steps below to add a translation:

• In the Form Editor, select the Languages tab in the Sidebar.
• Click on the + button and choose a new language from the dropdown list.
• The selected language will be shown in the Sidebar. To translate the text select the language to access the Language Properties dialog.
• Next, choose the phrase you want to translate, then type in manually the translated text under Translation column.
• To remove a language, select the Delete Language button from the Language Properties dialog.

Form Settings

In this section, you will learn how to specify some general settings for a form template. When you design such a template, firstly, you can configure some options such as marking the required fields that have to be completed by users, enabling the validation before going to the next page of the same form and others. All these options can be set up before actually build up the form by dragging and dropping the fields into the template.

Configuring Forms

Please follow the steps below to configure your form:

• In the Form Editor, select the Settings tab in the Sidebar.

• Next, you can configure various properties of your form according to your needs. Note that before making any changes, you have to start by typing the name of the form page on which you want to bring modifications to, under the Name box.

  • Mark required fields: Selecting this option will show a * next to the field names that are required to be filled in. The null value or the blank space will not be accepted.
  • Use ReCaptcha: This option activates a service that protects your website from spam and abuse.
  • Validate before going to next page: This option will make sure that the information on the current form page is valid before allowing the user to move to the next page.
  • Hide lookup button: When checking this feature, the search symbol will be removed, but this does not prevent from the usage of lookup mechanism.
  • Save data in ISO standard: When checking this feature, the form data will be saved according to ISO standards.
  • Pagination Type: This option helps you in choosing the view of form pages. Choosing the Tabs option will show tabs at the top of the form allowing easy access between the form pages, if any changes need to be made. Choosing the Pager option will remove the tabs from the top and you will need to use the continue and back buttons to navigate when filling out the form.

Form Fields

Form fields are different types of input elements, such as checkboxes, radio buttons, text fields, etc.

Field Components

In this section, you can explore all the fields available in a form, together with all their corresponding properties.

Form Field Page

The starting point of any form is a Page. A Page is what contains different form fields, each new form will start off with one page. However, you can add multiple pages to your form to match what your layout template will look like.

Page Properties

Caption	Name

Form Field Text

The most generic data entry field type on an NorthStar CCM form is the text field. The Text field allows you to capture text type data, such as letters, numbers or symbols.

Text Properties

Caption	Caption Position	Name	Validation	Visibility
Read-only	Required	Default Value	Description	Placeholder
Mask	Data Field Binding	Lookup Button Visibility	Permissions

Form Field Hyperlink

Creates a field with the Hyperlink data type to store hyperlink addresses in a form.

Hyperlink Properties

Caption	Caption Position	Display Text	Url	Visibility

Form Field Label

Adding a Label will help with organizing the form and breaking pages into sections.

Label Properties

Caption	Visibility

Form Field Contact Field

By default, adding a Contact Field will let you insert NorthStar CCM contacts by their first names. The values are valid if there is a NorthStar CCM Account Integration mapped in Administrator Settings.

Contact Field Properties

Caption	Caption Position	Contact Field	Visibility	Read-only
Required	Default Value	Description	Placeholder	Permissions

Form Field Contact Id

Adding a Contact Id will let you insert NorthStar CCM contacts by their ids. The values are valid if there is a NorthStar CCM Account Integration mapped in Administrator Settings.

Contact Id Properties

Caption	Caption Position	Name	Visibility	Read-only	Required	Default Value
Description	Placeholder	Permissions	Mask	Data Field Binding	Validation	Lookup Button Visibility

Form Field Dropdown

Adding a Dropdown Field will allow you to add multiple choices for the user to select from. Having options in a Dropdown list instead of the free-form textbox will ensure that the data that is coming in is exactly what you are looking for.

Items

Once you have configured the Dropdown field, you will need to add Items for the different options. By default, NorthStar CCM will add 3 generic Items that you can select to edit. You can update the Caption and Value of the items.

The value of the Item will be what is translated to the XML generated by the form. This is the value that will be used in the Publisher template to configure things like conditional sections, also this value is what will be presented on the file output.

For example, the Caption might read "M" and the Value might be "Male".

To add a new Item:

1. In the Sidebar, navigate to the Components tab and scroll down to the Form list.
2. Select the Dropdown element you want to edit, and click the + button, next to its name.

Dropdown Properties

Caption	Caption Position	Name	Visibility	Multiple
Max Items	Read-only	Required	Default Value	Description
Data Field Binding	Permissions

Form Field Number

Adding a Number as a form field will restrict the input values only to numerical type and will provide also stepper arrows to allow users to sequentially increase or decrease the value. This type of field includes a built-in validation to reject non-numerical entries.

Number Properties

Caption	Caption Position	Name	Visibility	Read-only
Required	Default Value	Description	Placeholder	Permissions

Form Field Currency

This form field has a built-in validation that specifies the format for US currency.

Currency Properties

Caption	Caption Position	Name	Mask	Visibility
Read-only	Required	Default Value	Description	Placeholder
Permissions

Form Field Time

Adding a Time field will allow the user to add a specific time to the Form. This could be the time it was filled out or the time a client should expect a fix completed.

Time Properties

Caption	Caption Position	Name	Visibility	Time Format
Read-only	Required	Default Value	Description	Placeholder
Permissions

Form Field Password

Adding a Password field will allow the end user to enter a password with security enabled.

Password Properties

Caption	Caption Position	Name	Visibility	Read-only
Required	Default Value	Description	Validation	Placeholder
Permissions

Form Field File Picker

Adding a File Picker to a Form will allow the user to select a file to be added to the email that is being set through the workflow. This file will be in addition to the file that is created from the form.

File Picker Properties

Caption	Caption Position	Name	Visibility	NorthStat CCM Files
Local Files	Extensions	Read-only	Required	Description
Default Value	Permissions

Form Field Signature

Adding a Signature to a Form will allow the user to customize a digital signature to be added to the document.

Signature Properties

Caption	Caption Position	Name	Visibility	Read-only	Agreement
Recipient Name	Recipient Role	Underline	Description	Placeholder

Form Field Rating

The Rating field allows users to rate a statement out of 5 stars.

Rating Properties

Caption	Caption Position	Name	Visibility	Icon
Scale	Read-only	Required	Default Value	Description
Permissions

Form Field NorthStar CCM Authentication

Adding a NorthStar CCM Authentication Form widget will allow the user to provide their user information. This can be used as an extra authentication for forms.

NorthStar CCM Authentication Properties

Name	NorthStar CCM URL	Username	Environment	Read-only

Form Field Google Address

Adding a Google Address field will allow your users to start typing an address and have it offer suggestions using Google.

You will need to make sure to provide a Google Map API.

Goggle Address Properties

Caption	Caption Position	Name	Visibility	Read-only
Required	Default Value	Description	Permissions

Form Field XML Field

An XML Field is a field that displays the content located in the XML Data Source without the need to add XSLT code to match the specific tags.

XML Field Properties

Name	File

Form Field Group

Adding a group will help organize your data in the form considering different criteria.

Group Properties

Caption	Name	Data Field Binding

Form Field Text Area

A text area field can be used to provide extra space for the user to add content without providing additional formatting options such as with a Rich Text field.

Text Area Properties

Caption	Caption Position	Name	Visibility	Rows
Read-only	Required	Default Value	Description	Placeholder
Permissions

Form Field Separator

Adding a separator will help isolate elements within the form page.

Separator Properties

Visibility

Form Field Radio

Adding Radio buttons to a form will allow the user to see all of the options they have, and only allow them to select 1.

Items

Once you have configured the Radio field, you will need to add Items for the different options. By default, NorthStar CCM will add 3 generic Items that you can select to edit. You can update the Caption and Value of the item.

The value of the Item will be what is translated to the XML generated by the form. This is the value that will be used in the Publisher template to configure things like conditional sections, also this value is what will be presented on the file output.

For example, the Caption might read "M" and the Value might be "Male".

To add a new Item:

1. In the Sidebar, navigate to the Components tab and scroll down to the Form list.
2. Select the Radio element you want to edit, and select the + button, next to its name.

Radio Properties

Caption	Caption Position	Name	Visibility	Read-only
Required	Default Value	Description	Permissions

Form Field Checkbox Group

Adding Checkboxes to a form will allow the user to select multiple options, unlike a Dropdown list or Radio Buttons.

Items

Once you have configured the Checkbox Group field, you will need to add Items for the different options. By default, NorthStar CCM will add 3 generic Items that you can select to edit. You can update the Caption and Value of the item.

The value of the Item will be what is translated to the XML generated by the form. This is the value that will be used in the Publisher template to configure things like conditional sections, also this value is what will be presented on the file output.

For example, the Caption might read "M" and the Value might be "Male".

To add a new Item:

1. In the Sidebar, navigate to the Components tab and scroll down to the Form section.
2. Select the Checkbox element you want to edit, and select the + button, next to its name.

Form Field Checkbox

Adding a Checkbox to a form will allow the user to enable one single option.

Checkbox Properties

Caption	Caption Position	Name	Visibility	Read-only
Required	Default Value	Description	Permissions	Data Field Binding

Form Field Date

Adding a Date Field will allow a user to select a date from a calendar or manually type one in.

Date Properties

Caption	Caption Position	Name	Visibility	Date Format
Separator	Read-only	Required	Default Value	Description
Not Before Current Date	Limits	Placeholder	Permissions

Form Field Rich Text

A Rich Text Field will allow the user to format the content of the field, using paragraphs, lists and additional font choices.

Rich Text Properties

Caption	Caption Position	Name	Visibility	Read-only
Required	Permissions	Default Value	Description	Toolbar

Form Field Datetime

Adding a Datetime Field will allow a user to select a date and a time from a date & time picker or manually type the values in.

Datetime Properties

Caption	Caption Position	Name	Visibility	Date Format
Separator	Time Format	Read-only	Required	Default Value
Description	Not Before Current Date	Limits	Placeholder	Permissions

Form Field Repeating Section

Adding a Repeating Section to the Form will allow the user to fill out the information within the section multiple times.

For example, if the Form was for an order, the repeating section might have information pertaining to products, and the user would be able to fill this out multiple times depending on how many different products they wanted.

To add Field Types:

1. In the Sidebar, navigate to the Components tab and scroll down to the Form section.
2. Select the repeating section you want to edit, click the + button, next to its name and select the field type you want to insert.

Repeating Section Properties

Caption	Name	Visibility	Read-only
Required	Data Field Binding	Add Button Template

Form Field Image Picker

Adding an Image Picker to a Form will allow the user to select an image file to be added to the email that is being set through the workflow. This file will be in addition to the file that is created from the form.

Image Picker Properties

Caption	Caption Position	Name
Visibility	Required	Permissions

Form Field Structured Data

Adding a Structured Data set will allow you to set up a section of the form for the user to fill document content in a structured or restricted manner.

Structured Data Properties

Caption	Name	Visibility	Schema

Form Field Script

Adding a custom script will allow you inject a JScript snippet into the form to further customize the form to your needs. You can add a script to set advanced custom validations, field visibility options, restrictions on content and much more. A JavaScript file can be either uploaded by selecting Browse button or directly written down in the provided Script text box.

For more information about working with scripts please reach out to our support team (engagecxsupport@mhcautomation.com).

Form Field Google Map

NorthStar CCM will allow you to insert a Google Map directly into your form. It is important to note that this field is a purely visual one for the form.

You will need to make sure to provide a Google Map API.

Google Map Properties

Caption	Caption Position	Visibility	Map Type	Default Value

Form Field Subform

In the form editor, you are able to add subforms to the form template. Subforms are similar to content fragments in a document template. These are able to be reused in multiple forms so that you do not need to re-create the same section multiple times. Also subforms will allow to easily update them in a single location which will be automatically updated across all the forms using this type of field.

Subform Properties

Path	Name	Visibility

Field Styles

In this section, all field properties are gathered and described in detail.

Caption

The caption for your form field will be shown in the Form editor as well as in the Communication Module when a user is filling it out. This caption should convey what the user should be typing in the field, for example, Employee Name.

Caption Position

Select where the Caption should be shown in relation to the drop down list, either to the left or on top of the list.

Name

The text in the Name field will be the default value for the field and will show both in the Form that is being filled out and the Layout Template preview. This information should be the default answer for this field.

Validation Property

A validation type can be selected to ensure that the user fills in the textbox with the correct information. The following validation options are available; Alphabetic, AlphaNumeric, Currency, Email, Name, Numeric, URL, Year.

Is Visible

If the Is Visible option is selected then by default, the field will be visible to the end user when filling out the form. Optionally, you can select the Hide If button to set a specific condition, using other form fields, that when met will hide the current form field.
If the Is Visible option is not selected then by default, the field will be invisible to the end user when filling out the form. Optionally, you can select the Show If button to set a specific condition, using other form fields, that when met will display the current form field.

Read-only

This option will make the selected field unable to be edited. This option is helpful if you have data that you need to have displayed in the form and the corresponding template but you do not want the person filling out the form to have the ability to edit it. For example, customer ID.

Required

Depending on the needs of your forms the form field that is added may not always need to be filled in. Toggling off the Required option will allow the user to successfully fill out the form without needing to fill in this field.

Default Value

The form editor allows you to apply a formula or add parameters that will be used as a value of the Field. You can choose from one of the predefined parameters or you can create your own formula using the fx button.

Description

Adding a description is helpful to ensure that the user fully understands what the field is looking for. It is important to note, that the description will not automatically be added to the Layout Template. If you wish to have this description visible on the final document it will need to be manually added to the Layout Template in the Publisher.

Placeholder

Provide a place holder for the field. A place holder can act as an example of what the user should enter in the text box without affecting the value stored in the XML file.

Toolbar

Property that holds all the parameters for the rich text's toolbar (Undo, Redo, Align Text, Clear formatting, etc.) and manages their visibility in the form.

Agreement

Add a customized signature agreements and terms text.

Recipient Name

You can add name, email information or other data of the recipient to be displayed under the signature itself.

Recipient Role

Recipient roles are used to map to the automatic anchor tags in your output documents.

Underline

Insert an underline to suggest the place where the signature must be drown.

Mask

The form editor allows you to set a mask that will be used for the value of the Field. You can choose from one of the predefined options or you can create your own using the @ symbol to mask letters, # for numbers and * for both.

Permissions

This option allows you to manage permissions for filling the field. Here you can specify users or group of users that you want to write in the selected field. For example, to allow only users included in the Administrator group to complete the current textbox, select Administrators. To read more information about Users and Groups, please visit the Admin chapter.

Data Field Binding

This option defines how the values in a business object should be bound to the fields shown in the UI and allows you to select from the data source output in order to populate the current field with existing values by auto-completing.

Lookup Button Visibility

This option allows you to enable or disable the search icon that appears on the right side of a field and help you populate the current field with values from data source added before.

Contact Field

This option allows you to select the default Contact Field and will show in the Form that is being filled out and the Layout Template preview. This information should be the default answer for this field. New Contacts fields can be added from the Admin.

Url

A field or expression that evaluates to a URL in a HTTP protocol.

Display Text

A field or expression that evaluates to a Text (e.g. encapsulating a Hyperlink URL: click here).

Multiple

If the Multiple option is enabled, the field allows you to make multiple selections from the same dropdown list of items. Otherwise, you can do only one selection when completing the form.

Max Items

Set the max number of items to pull from a data source if one is set up to populate the values for the Dropdown.

Time Format

You can select to either have the time in an AM/PM format or a 24-hour format.

Browse NorthStar CCM files

Toggling on this option will allow the user to search through the files stored in NorthStar CCM Workspaces.

Browse local files

Toggling on this option will allow the user to search through files on their local machine instead of only files that are stored in NorthStar CCM.

Allowed Extensions

Here you can write all the file extensions which you want to add using the File Picker. For example, if you want to add PDF files, write *.pdf.

Icon

Choose the icon you would like to use for the rating, by default, this option is set to Stars but there are a total of 4 icons to select from.

• Stars
• Thumbs
• Hearts
• Lightbulbs

Scale

You will need to select the top number for the scale of the rating, by default, this number is set to 5.

NorthStar CCM URL

You can provide the NorthStar CCM URL or leave it blank and the form will populate it with the current NorthStar CCM environment URL.

Username

Provide a default Username, or leave it blank and let the user fill it in.

Environment

Provide a default Environment, or leave it blank and let the user fill it in.

Test File

You can upload an XML file for testing operations from your local machine or within the Project folder.

Rows

You will need to provide a number of rows of text to allow in the form field; by default, this number will be 3.

Date Format

You can select from one of 3 predefined formats for the date to be presented in. * mm/dd/yyyy * dd/mm/yyyy * yyyy/mm/dd

Separator

You have the option to select from 3 predefined separators for the date components.

Not before the current date

The Date Picker will restrict the range of the date period by setting the lower limit after the current date.

Limits

You are able to set limits for the date that can be selected when filling out the calendar filed in the form. To insert a limit for either Not Before or Not After a certain date, type the date into the field or select the calendar button to select the date.

Add Button Template

Here you will have the ability to modify the add button. You can change the text, font weight and style, text and background color.

Schema

Select a schema (.asl) file to be used. If you do not have a .asl file created reach out to our support team (engagecxsupport@mhcautomation.com) for assistance in creating one.

Map Type

Select the map type to be used in the form. These types mirror the standard options available when using Google Maps.

Path

Specify the NorthStar CCM location of the subform you want to add.