Skip to content

Form Input types v2

Jump to bottom
Cheryl M edited this page Mar 14, 2025 · 10 revisions

This document describes the various form input types available in the Chingu Dashboard and how to use them.

Input types are defined here https://github.com/chingu-x/chingu-dashboard-be/blob/dev/prisma/seed/data/input-types.ts

Parse Configs

The parseConfig field in the database stores information on how questions and inputs should be rendered in the frontend. It is located in the question and option choices tables.

Input Types

text

Multi-line text input default (textArea)

input-1

To add an icon to a text input, parseConfig would contain:

{
  "icon": "iconName"
}

[find an image]

shortText

one line text

url

URL input with validation

input-2

radio

Single-choice radio button selection

input-3

In the question configuration, each option includes both a text template like {{greenRocket}} and a corresponding parseConfig object that specifies the icon name and URL. For example, an option might be configured as:

...
{
    text: "{{greenRocket}} We have had a good start!",
    parseConfig: {
        icon: "greenRocket",
        iconUrl: ".../greenRocket.png"
    }
}

When the input type is radio, the frontend can use the parseConfig to replace any template pattern {{iconName}} with the corresponding icon image. This allows for consistent icon mapping and easy icon asset management.

input-4

radioGroup

Group of radio buttons “radio group” is a group of questions (subQuestions in the database), they all have the same choices, and the same question ( question is saved in the “parent” question)

input-5

checkbox

users Multiple-choice checkbox selection

input-6

teamMembersCheckbox

checkboxes with team member, frontend to render the choices, and send selected as text back to the backend, e.g. Jane, Jackson

input-7

number

Numeric input

boolean

This could be a “yes/no”, “true/false” etc question. Each boolean question uses parseConfig to define the labels and their corresponding values.

The question is formatted with choice labels in a template string, followed by the question text:

{{yes,no}}Did you deploy to Production at the end of the sprint?

The parseConfig for this would look like:

...
parseConfig: {
yes: "Yes",
no: "No"
}

Important

Note that in the parseConfig object:

  • The yes property defines the display text for the true value
  • The no property defines the display text for the false value
  • The template labels ({{yes,no}}) must match the parseConfig property names

This format allows you to customize how boolean choices are displayed to users while maintaining consistent true/false mapping in the backend.

input-8

scale

Scale questions use parseConfig and optionGroup to create a numeric rating system with labeled endpoints. The question format combines scale labels within template brackets:

On a scale of 0-10, how likely are you to suggest Chingu to a friend or colleague?

The configuration includes:

{
  "min": "Not Likely",
  "max": "Extremely Likely"
}
optionGroup: {
name: "chingu-scale",
optionChoices: [1,2,3,4,5,6,7,8,9,10]
}

Important

The parseConfig defines the scale's endpoint labels, while the optionGroup creates the numeric choices available to users. The frontend uses this configuration to render a scale from 1-10 where:

  • "Not Likely" labels the minimum end (1)
  • "Extremely Likely" labels the maximum end (10)

input-9

noInputImage

Display-only image with no input

image

noInputText

Display-only text with no input

image

dropdown

image

dropdownCountryCode

This is a special type of dropdown, where choices do not come from the database. For country codes, they will come from the ISO-3166-1 package, populated by the frontend. The frontend will then send the selection to the backend as a "text". We will be able to use the same package to decode the country codes for display, search or sort.

image

dropdownTimezone

This is similar to dropdown country, package used is date-fns-tz

Icons for Options

To add an icon to an option:

[ find an image ]

The parseConfig would contain:

{
  "icon": "checkIcon"
}

Future updates

add to the above after they are implemented

Role-based Visibility for Questions (might not need this)

To hide a question for specific roles:

{{hidden-role: [1, 2]}} This question is hidden from roles 1 and 2

The parseConfig would contain:

{
  "hidden-role": [1, 2]
}

To show a question only for specific roles:

{{applicableForRoles: [3, 4]}} This question is only shown for roles 3 and 4

The parseConfig would contain:

{
  "applicableForRoles": [3, 4]
}

"Other" Option with User Input

To create an "Other" option that allows user input:

{{icon: pencilIcon}} Other (please specify)

The parseConfig would contain:

{
  "icon": "pencilIcon",
  "followup": true
}

When a user selects this option, they will be prompted to provide additional text input.

Option Sorting

Options can be sorted using the order field in the OptionChoice model. Options will be displayed in ascending order based on this field.

Option Descriptions

Options can have descriptions using the description field in the OptionChoice model. These descriptions can provide additional context or explanation for each option.

Role-based Visibility

Questions and options can be conditionally shown or hidden based on user roles. This is implemented using the parseConfig field with either hidden-role or applicableForRoles properties.

Combining Radio and Radio Icon Types

Instead of having separate radio and radioIcon input types, we now use the radio input type with parse options to specify icons:

{{icon: iconName}} Option Text

The icon information is stored in the parseConfig field of the OptionChoice model.

Clone this wiki locally