Template Components

nick-adams
Nick Adams
10 Jan 2024  • 12 mins read

Template Components serve as the foundation for creating your templates. They encompass various types of template structures, including headings, dividers, and essential input fields such as text fields and tables.

When your project users utilise your templates to generate forms, they can interact with some of these components within ProjectDeck Grids on the Project Pages. Components that can be viewed in a ProjectDeck grid format include single-line input, number, dropdown, date picker, and single-choice components. All components, including those not listed above, can be viewed in the form view.

You can access template components from the “Components” tab within the ProjectDeck Template Designer.

The image below illustrates all the components available for use in your template designs.

ProjectDeck-template-designer-all-components

Structure Components

Four components are categorised as “Structure” components, designed to organise your templates systematically and provide supporting information. These structure components are explained below:

ProjectDeck-template-designer-structure

Header Component

The image below displays the header component configurator. Use the header component to create headers that segment your templates into user-friendly sections.

ProjectDeck-template-designer-header-component

You can input both a header and a sub-header or leave either blank to achieve different effects. Once you are satisfied with your header component, click Save to incorporate it into your template. Alternatively, click Cancel to exit the component without making changes.

Paragraph Components

The image below illustrates the paragraph component configurator. The paragraph component allows you to include paragraph text to provide explanations within your template, guiding and assisting your project users.

ProjectDeck-template-designer-paragraph components

You can enter rich text and apply formatting such as bold, italics, bullet points, and colours to achieve the desired appearance. After configuring your paragraph component, click Save to add it to your template. Alternatively, click Cancel to exit the component without changes.

Divider Component

The image below represents the divider component located beneath a paragraph component. The divider component offers a straightforward way to insert a horizontal line in your template, enhancing the clarity of different sections for your project users.

ProjectDeck-template-designer-divider component

Spacer Component

The image below shows the spacer component beneath a paragraph component. The spacer component allows you to customise the spacing between various components to achieve the desired template appearance. If the default spacing suits your needs, there’s no requirement to use the spacer component.

ProjectDeck-template-designer-spacer component

Input Components

Ten components are classified as “Input” components, designed for the template designer to incorporate information fields for project users to complete. These input components are detailed below:

ProjectDeck-template-designer-input

Single Line Input

The image below presents the single-line input component configurator. This component is ideal for requesting brief text information from your project users.

ProjectDeck-template-designer-single-line -lnput

Options available when configuring this component include:

  1. Title of your input field (Required)
  2. Add help text to this component (Optional)
  3. Require a response from project users when completing this input field (Optional)
  4. Include a separate field to allow additional comments from project users when completing this input field (Optional)

Additionally, you can remove or duplicate this component using the buttons at the top of the designer panel.

After configuring your component, click Save to incorporate it into your template. Alternatively, click Cancel to exit the component without making changes.

Multi-Line Input

The image below showcases the multi-line input component configurator. This component is designed for collecting longer, rich-text information from your project users.

ProjectDeck-template-designer-multi-line-input

Options available when configuring this component include:

  1. Title of your input field (Required)
  2. Plain text / rich text selector (Required)
  3. Add help text to this component (Optional)
  4. Require a response from project users when completing this input field (Optional)
  5. Include a separate field to allow additional comments from project users when completing this input field (Optional)

Similarly, you can remove or duplicate this component using the buttons at the top of the designer panel. After configuring your component, click Save to add it to your template. Alternatively, click Cancel to exit the component without making changes.

Number

The image below illustrates the number component configuration. This component is suitable for requesting integer or currency format number information from your project users.

ProjectDeck-template-designer-number

Options available when configuring this component include:

  1. Title of your input field (Required)
  2. Convert to a currency (Optional)
  3. Add help text to this component (Optional)
  4. Require a response from project users when completing this input field (Optional)
  5. Include a separate field to allow additional comments from project users when completing this input field (Optional)

You can also remove or duplicate this component using the buttons at the top of the designer panel. After configuring your component, click Save to include it in your template. Alternatively, click Cancel to exit the component without making changes.

Date Picker

The image below displays the date picker component configuration. This component is employed for gathering date information from your project users.

ProjectDeck-template-designer-date-picker

Options available when configuring this component include:

  1. Title of your input field (Required)
  2. Add help text to this component (Optional)
  3. Require a response from project users when completing this input field (Optional)
  4. Include a separate field to allow additional comments from project users when completing this input field (Optional)

As with other components, you can remove or duplicate this component using the buttons at the top of the designer panel. After configuring your component, click Save to integrate it into your template. Alternatively, click Cancel to exit the component without making changes.

Dropdown

The image below presents the dropdown component configuration. This component is used to request a single response from a list provided to your project users.

ProjectDeck-template-designer-dropdown

Options available when configuring this component include:

  1. Title of your input field (Required)
  2. List of items that your project users may select from (Required)
  3. Add help text to this component (Optional)
  4. Require a response from project users when completing this input field (Optional)
  5. Set a default answer from the list of items (modifiable by project users) (Optional)
  6. Include a separate field to allow additional comments from project users when completing this input field (Optional)

You can also remove or duplicate this component using the buttons at the top of the designer panel. After configuring your component, click Save to include it in your template. Alternatively, click Cancel to exit the component without making changes.

Single Choice

The image below showcases the single-choice component configuration. This component is utilised for requesting a single response from a list of options provided to your project users.

ProjectDeck-template-designer-single-choice

Options available when configuring this component include:

  1. Title of your input field (Required)
  2. List of options that your project users may select from (Required)
  3. Add help text to this component (Optional)
  4. Require a response from project users when completing this input field (Optional)
  5. Set a default answer from the list of items (modifiable by project users) (Optional)
  6. Include a separate field to allow additional comments from project users when completing this input field (Optional)

You can also remove or duplicate this component using the buttons at the top of the designer panel. After configuring your component, click Save to integrate it into your template. Alternatively, click Cancel to exit the component without making changes.

Multiple Choice

The image below depicts the multiple-choice component configuration. This component is designed for requesting one or more responses from a list of options provided to your project users.

ProjectDeck-template-designer-multi-choice

Options available when configuring this component include:

  1. Title of your input field (Required)
  2. List of options that your project users may select from (Required)
  3. Add help text to this component (Optional)
  4. Require a response from project users when completing this input field (Optional)
  5. Include a separate field to allow additional comments from project users when completing this input field (Optional)

Similarly, you can remove or duplicate this component using the buttons at the top of the designer panel. After configuring your component, click Save to include it in your template. Alternatively, click Cancel to exit the component without making changes.

Table

The image below demonstrates the table component configuration. This component is employed for requesting tabular data from your project users.

ProjectDeck-template-designer-table

Options available when configuring this component include:

  1. Title of your table (Required)
  2. Toggle switches for including row and/or column headers (Optional)
  3. Add help text to this component (Optional)
  4. Require a response from project users when completing this input field (Optional)
  5. Lock table structure – this prevents project users from altering the table’s structure, useful for maintaining consistent data export from ProjectDeck (Optional)
  6. Include a separate field to allow additional comments from project users when completing this input field (Optional)

As with other components, you can remove or duplicate this component using the buttons at the top of the designer panel. After configuring your component, click Save to incorporate it into your template. Alternatively, click Cancel to exit the component without making changes.

Attachment

The image below illustrates the attachment component configuration. This component serves two main purposes:

  1. Admin users can attach files that may be updated by project users.
  2. Project users can attach their files as needed.

ProjectDeck-template-designer-attachment

Options available when configuring this component include:

  1. Title of your input field (Required)
  2. Add help text to this component (Optional)
  3. Require a response from project users when completing this input field (Optional)
  4. Include a separate field to allow additional commentary from project users when completing this input field (Optional)

Like other components, you can remove or duplicate this component using the buttons at the top of the designer panel. After configuring your component, click Save to include it in your template. Alternatively, click Cancel to exit the component without making changes.

Document

The image below presents the Microsoft 365 component configuration. This component is designed for uploading Microsoft Word, Excel, or PowerPoint files. Project users can collaboratively complete these documents within their forms.

ProjectDeck-template-designer-document

Options available when configuring this component include:

  1. Title of your input field (Required)
  2. Choose a Microsoft document to upload (Required)
  3. Add help text to this component (Optional)
  4. Include a separate field to allow additional commentary from project users when completing this input field (Optional)

You can remove this component using the button at the top of the designer panel. After configuring your component, click Save to incorporate it into your template. Alternatively, click Cancel to exit the component without making changes.

Was this article helpful?

Was this article helpful?

Hidden
Hidden

Was this article helpful?

Hidden
Hidden

Related help articles

  • No credit card required
  • Unlimited time on Free Plan