> For the complete documentation index, see [llms.txt](https://documentation.connexica.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://documentation.connexica.com/pages-reports/projects.md). # 10. Projects ## 04. Projects To view all available Projects, click **Open** under the **Projects** header. ## Project Options To create a copy of a Project and all forms contained within that Project, click the **Copy** icon at the bottom of the Project tile. This will create a new Project called "Copy of \". To create an export of a Project to use as a backup or to import into another CXAIR instance, click the **Export** icon at the bottom of the Project tile. This will download a `.cxforms` file to your local machine. To import an exported `.cxforms` file, click **Import Forms** at the top of the page to open the import options. Click **Select File** and browse for the `.cxforms` file. If importing individual forms rather than Projects, use the **Project** drop-down list to select the destination of the imported form. ## Managing Created Forms Once a form has been created, it is displayed in the corresponding Project page. To copy a form between different Projects, click the **Copy** icon. Enter a new name in the **Name** textbox and select a destination project from the **Project** drop-down list. Click the **Export** icon to export the report as a portable `.cxforms` file that can be imported using the options detailed above. When a form has been published as part of one or more campaigns, the number of scheduled campaigns are listed for the Project. Click this text to display the **Select Campaign** dialog box, where individual campaign schedules can be altered and submissions viewed. Clicking the **X** icon will remove the campaign along with all associated submissions. For information regarding the distribution of created forms, please proceed to the \[Publishing Forms]\(doc:Technical Documentation.CXFORMS.05. Publishing Forms.WebHome) chapter. ### Displaying Deleted Forms To force the screen to show deleted forms, run the following in the browser console: ```javascript showDeleteForms(); ``` {% hint style="warning" %} This function must only be used under advice from Connexica. Please contact support should this be required. {% endhint %} ## Creating a Project {% stepper %} {% step %} ### Create the project In the Projects page, click **Create Project**. Enter the required name in the **Name** textbox and enter an optional description in the **Description** textbox. {% endstep %} {% step %} ### Save the project Click **Create Project** and the newly created project will now be shown in the Projects page. {% endstep %} {% step %} ### Edit or delete the project To change the name or description, click **Edit** under the name of the project and click **Save Project** to apply changes. To delete a project, click **Delete**. A project can only be deleted when it does not contain any forms. {% endstep %} {% endstepper %} ## Creating a Form Clicking **Open** under the name of the project will display all forms currently created. {% stepper %} {% step %} ### Create the form Click **Create Form**. Enter the required name in the **Name** textbox and enter an optional description in the **Description** textbox. {% endstep %} {% step %} ### Configure form options Enable the **Allow Attachments** option to present a file upload dialog box to recipients when submitting a form, facilitating the ability to upload supplementary files as part of a submission. When recipients upload an attachment, a description textbox limited to fifty characters is available for each file. The permitted file types are controlled by the system administrator. Enabling the **Show Print Button** will add a customisable **Print** button to the form which allows recipients to convert the form in its current state of completion to PDF format ready for printing. To allow the form to be submitted multiple times, enable the **Allow multiple submissions** option. When disabled, recipients can only submit the form once. {% endstep %} {% step %} ### Edit the form To change the name, title or description click **Edit** under the name of the form and click **Save Form** to apply the changes. {% endstep %} {% endstepper %} ### Design Process To design a form, click **Design** under the name of the form that has been created. Forms are designed using the drag and drop interface. To add fields to a form, click and hold an element from the toolbox and drop it onto workspace grid. #### Toolbox Items | Item Name | Description | | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Text | Simple text box to allow strings to be captured by a form submission. | | Number | Allows numbers to be captured by a form submission. Non-numeric inputs are not registered. | | Email | A string based field that auto-validates to ensure it follows an email format. | | Currency | Only allows numeric input and auto-formats as 2 decimal places. Choose from Stirling, Euros and Dollars. | | Label | Simple Label to provide commentary, titles etc to a form. | | Time | Time control to capture, by default, hours, minutes and seconds. Format can be overridden. | | Date | Date control to capture date. Format can be overridden. | | Date Time | Date time control to capture date and time. Format can be overridden. | | Signature | Freehand input box. These inputs are stored as image and an object that allows editing and will not be readable in the **Query** screen. | | Upload | Allows users to upload files into CXAIR. These files will be visible as a URL in the **Query** screen for users to download locally. | | Table | Table provides a way of providing everything from simple multi input values to more complex set-ups with multiple field types. When a **Table** field has been added, two additional options are available: **Edit Columns** and **Edit Rows**. Click **Edit Columns** to edit the column **Width** along with each column's **Type** and **Format**. Click **Edit Rows** to edit the row **Height** and to reveal the **Hide Row Labels** and **All rows have the same height** options. These checkboxes control the visibility of row labels and set a standardised row height across the table, respectively. | | Slider | Slider control provides a simple way of allowing users to select a numeric value between a minimum and maximum limit. | | Popup | This creates a button that triggers a popup. The popup can be used to provide information to users of the CXFORM. | To save the current form, click the **Save** icon at the top of the screen. Hovering the cursor over an added field will reveal the **Cog** icon. Hover over this icon to reveal the **Edit Field** option, where the parameters for the field can be modified. To create an exact copy of the field on the current page complete with all configuration options, click **Copy Field**. The **Send to Step** option allows a field to be moved or copied to a different step of the form. Select the required action from the **Operation** radio buttons and the required step from the **Destination** drop-down list. Click **Apply** to complete this action. To remove a field, click the **Remove Field** icon. Enable the **Snap to Grid** option to constrain the movement of fields to a grid for ease of alignment. Disable this option for free-form positioning of fields. Click the **Edit Background** icon to add an image to the background of the form. Drag the required image onto the page to add it to the form and resize the image to the required size. Use the **Opacity** slider to specify how prominently the image will be displayed or click **Remove Background** to delete the uploaded image. Click the **Design Screen** icon to return to the form builder. The background image is only displayed when in the **Edit Background** or **Preview** screen. #### Steps Multiple steps can be added to a form, allowing respondents to complete the questions in predefined sections. Click the **+** icon to create additional steps and click the **Edit** icon that appears when hovering the cursor over a step to change the step's **Name** and **Description** or click the **Delete** icon to remove a step. When steps are created, **Next** and **Previous** buttons are added and can be moved into the desired position on the form. #### Tab Order When filling in a form, pressing the **Tab** key on a keyboard is a fast way of navigating between the different questions. Due to the drag-and-drop nature of form creation, the internet browser may not automatically detect the correct order of the questions. By clicking the **Tab Order** icon, the elements can be reordered to ensure the correct sequence is followed when the **Tab** key is pressed. #### Field Options | Option | Applicable To | Description | | ------------------------ | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Name | Label, Text, Checkbox, Radio Button, Drop List, Currency, Table, Signature | The name that will be displayed in CXAIR. | | Display Name | Label, Text, Checkbox, Radio Button, Drop List, Currency, Table, Signature | The name that will be displayed on the form. | | Text | Label | The displayed text on the form. | | Required | Text, Checkbox, Radio Button, Drop List, Currency, Signature | Makes the completion of the field mandatory for the form to be completed. | | Show Validation Messages | Text, Checkbox, Radio Button, Drop List, Currency, Signature | Displays messages to the end-user if the entry does not match what is set in the **Format** option. For example, incorrect email address format. | | Hidden Until Review | Text, Checkbox, Radio Button, Drop List, Currency, Table, Signature | Hides the field, allowing reviewers to annotate completed forms. | | Visible | Text, Checkbox, Radio Button, Drop List, Currency, Table, Signature | If enabled, the field will be visible to users completing the form. Disable this option to hide fields for auditing purposes. | | Read Only | Text, Checkbox, Radio Button, Drop List, Currency, Table, Signature | If enabled, the field will be visible but cannot be modified. Use in conjunction with the **Default** option to specify contents. | | Not Submitted | Text, Checkbox, Radio Button, Drop List, Currency, Table, Signature | Allows a field to be displayed, but the value will not be included in the submission. | | Help | Text, Checkbox, Radio Button, Drop List, Currency, Table, Signature | Displays the entered text below the displayed field on the form. | | Tooltip | Text, Checkbox, Radio Button, Drop List, Currency, Table, Signature | Displays the entered text when the cursor is hovered over the field. | | Key | Text, Checkbox, Radio Button, Drop List, Currency, Table, Signature | When enabled, the field will appear as an extra column in the submissions screen. | | Format | Text | Allows the textbox to act as **Text**, **Date**, **Number** or **Email** entry. If **Date** is chosen, the **Date Format** can be selected from the resulting drop-down list. | | Data Mapping | Text | Choose an entry from the contacts to map to the specific field, allowing pre-population of specific fields when the form is distributed. | | Format Numbers | Text, Checkbox, Radio Button, Drop List, Currency, Table | Formats numeric values as *#,*#\*#*0*. For example, `1000000` will be displayed as `1,000,000`. | | Default | Text, Drop List | The text that is displayed in the field before it is completed by the user. | | Elements | Checkbox, Radio Button, Table | The displayed name for the choice titles. Enter the required text and click **Add**. | | Options | Checkbox, Radio Button, Table | The displayed name for the individual choices. Enter the required text and click **Add**. | | Hide None | Radio Button, Drop List | If enabled, the **None** option will be hidden from selection for each choice. | | Display Vertically | Radio Button, Checkbox | Displays entries vertically when enabled. This is especially useful when entries contain a large number of characters. | | Currency | Currency | Specify the currency used. | | CSS Classes | Label, Text, Checkbox, Radio Button, Drop List, Currency, Table, Signature | Assign a specific style class to the field. Whatever is entered must be prefixed with **cx\_** and the class name for the field must begin with an upper-case letter. | | Z-Index | Label, Text, Checkbox, Radio Button, Drop List, Currency, Table, Signature | This value controls the order in which fields are rendered on-screen. Fields with a higher Z-Index number appear on top of fields with lower Z-Index numbers. | | Dependencies | Label, Text, Checkbox, Radio Button, Drop List, Currency, Table | Specify the elements and the subsequent conditions that must be met before this element is active when viewing the form. This can be used to create conditions based on CXAIR users and groups when viewing the form in Pages by setting the action to **Visible** or **Editable** then selecting the groups or users from the lists below. Move the desired users or groups between the **Available Users** list and the **Current Selected** list to activate this option. The **Original Submitter** value at the top of the list allows conditions to be created based on who originally submitted the form. For example, selecting **Editable** then applying the condition to the **Original Submitter** will restrict edit privileges to only the user who submitted the form originally for this element. | #### Applying CSS Click the **Edit CSS** icon to open the **Edit Style** window. Enter the required CSS code and click **Save** to apply it to the entire form, or click the **X** icon to cancel. Applied CSS is only shown when previewing a form. CSS is entered in the following format: ```css .alpaca-control { background: #ff0000 !important; color: #00ff00 !important; font-weight: bold !important; font-size: 16pt !important; } ``` **CSS Classes** | Field | CSS | | ------------------------------ | -------------------------------- | | Label | `.alpaca-control-label` | | Controls (Text, Droplist) | `.alpaca-control` | | Radio Button and Checkbox Text | `.fieldGroup label` | | Checkbox | `.alpaca-field.checkbox` | | Radio Button | `.alpaca-field.radio` | | Help Text | `.helpText` | | Buttons (All) | `.alpaca-form-button` | | Button (Submit) | `.alpaca-form-button-cxsubmit` | | Button (Previous) | `.alpaca-form-button-cxprevious` | | Button (Next) | `.alpaca-form-button-cxnext` | | Progress Bar | `.progress-bar` | | Steps (Wizard) | `.nav li` | **Common Attributes** | Option | Attribute | Argument | Example | | ----------------- | ----------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------- | | Font Size | `font-size` | Measured in absolute pt (points) or comparative em |

16pt = 16 point size

1.5em = 150% size

| | Text Colour | `color` | Colour input via hex code | **#FF0000** = Red | | Background Colour | `background` | Colour input via hex code | **#FF0000** = Red | | Border Colour | `border-color` | Colour input via hex code | **#FF0000** = Red | | Border Width | `border-width` | Measured in pixels | **2px** = Two pixels wide | | Bold Text | `font-weight` | Input via CSS property |

normal = Standard Weight

bold = Bold weight

| | Underlined Text | `text-decoration` | N/A | **underline** | **Note:** To prevent the default styling options overwriting any changes made, append the following to the attribute line: ```css !important ```