Form Builder
Form Builder allows for the creation of UX components with which human agents can interact.
Form Builder supports multiple pages, each of which can display multiple components. Form Builder is used within the get_component() within a code point.
Example
Form Builder with multiple pages and components
async function get_component() {
return {
"component_name": "form_builder",
"pages": [
{
header: "Define Inputs",
instructions: "Inputs determine when this knowledge will be available to be considered",
fields: [
{
id: "inputs",
title: "Inputs",
component: "path_evaluator",
instructions: "All input criteria must be met for the knowledge to be considered. Use '_this' for the root of entity paths.",
required: true,
default_value: default_inputs,
allow_custom: true,
paths: knowledge_default_input_paths
}
]
},
{
header: "Define Criteria",
instructions: "Criteria determine when this knowledge should be selected",
fields: [
{
id: "criteria",
title: "Criteria",
component: "select_tags",
instructions: "Agents evaluate criteria against conversation context to determine if knowledge is relevant",
default_value: default_criteria,
options: [],
allow_custom: true
}
]
},
{
header: "Select Actions",
instructions: "Choose actions to take when this knowledge is selected",
fields: [
{
id: "actions",
title: "Actions",
component: "select_tags",
instructions: "",
default_value: default_actions,
options: action_names,
required: false,
allow_custom: false
}
]
},
{
header: "Select CRM Tags",
instructions: "Choose CRM tags to apply when this knowledge is selected",
fields: [
{
id: "crm_tags",
title: "CRM Tags",
component: "select_tags",
instructions: "",
default_value: default_crm_tags,
options: knowledge_default_crm_tags,
required: false,
allow_custom: false
}
]
},
{
header: "Select Custom Fields",
instructions: "Choose CRM Custom Fields to apply when this knowledge is selected",
fields: [
{
id: "contact_reason",
title: "Contact Reason",
component: "select",
instructions: "Required if an Inform action is taken.",
default_value: default_contact_reason,
options: [],
required: false,
allow_custom: false
},
{
id: "solution",
title: "Solution",
component: "select",
instructions: "Required if an Inform action is taken.",
default_value: default_solution,
options: [],
required: false,
allow_custom: false
},
{
id: "escalation_team",
title: "Escalation Team",
component: "select",
instructions: "Optional - The desired team if escalation is necessary",
default_value: default_escalation_team,
options: [],
required: false,
allow_custom: false
}
]
},
{
header: "Define Metadata",
instructions: "Complete metadata for this knowledge",
fields: [
{
id: "name",
title: "Name",
component: "text_input",
instructions: "Name must start with `knowledge_`, be unique, and cannot contain spaces",
default_value: default_name,
reg_ex: "^knowledge_[a-z0-9_]+$",
required: true
},
{
id: "friendly_name",
title: "Friendly Name",
component: "text_input",
instructions: "A friendly name for the knowledge. Max of 100 characters.",
default_value: default_friendly_name,
required: true
},
{
id: "description",
title: "Description",
component: "text_input",
instructions: "A description of the knowledge. Max of 200 characters.",
default_value: default_description,
required: true
}
]
},
{
header: "Define Response Blurb",
instructions: "Set a blurb to be used for Agent conversation responses",
fields: [
{
id: "response_blurb",
title: "Response Blurb",
component: "markdown_editor",
instructions: "Use 'No response needed' if no response is required.",
default_value: default_response_blurb,
size: 30,
required: true
}
]
},
{
header: "Confirm",
instructions: "Confirm creation of this knowledge",
fields: [
{
id: "disposition",
title: "Create this knowledge?",
component: "radio_group",
instructions: "",
required: true,
options: [
{
"value": "write",
"label": "Yes, write this Point"
},
{
"value": "revise",
"label": "No, revise this Point"
},
{
"value": "cancel",
"label": "No, close this task"
}
]
}
]
},
],
friendly_name: _token.friendly_name,
data_token: {
"temp.inputs": "inputs",
"temp.criteria": "criteria",
"temp.actions": "actions",
"temp.crm_tags": "crm_tags",
"temp.custom_fields.contact_reason": "contact_reason",
"temp.custom_fields.solution": "solution",
"temp.custom_fields.escalation_team": "escalation_team",
"temp.response_blurb": "response_blurb",
"temp.name": "name",
"temp.knowledge_friendly_name": "friendly_name",
"temp.knowledge_description": "description",
"temp.disposition": "disposition",
}
};
};
Pages
Form Builder supports one or more pages. Pages include a header, instructions, and components. Components are defined within the fields array.
{
"component_name": "form_builder",
"pages": [
{
header: "Define Inputs",
instructions: "Inputs determine when this knowledge will be available to be considered",
fields: [
{
id: "inputs",
title: "Inputs",
component: "path_evaluator",
instructions: "All input criteria must be met for the knowledge to be considered. Use '_this' for the root of entity paths.",
required: true,
default_value: default_inputs,
allow_custom: true,
paths: knowledge_default_input_paths
}
]
}
]
}
Components
Components are defined within the fields array in pages. The outputs of components, such as the values a user selects or inputs, can be written to the data token by mapping the desired path within the data token to the id of the component within the data_token key.
data_token: {
"temp.inputs": "inputs",
"temp.criteria": "criteria",
"temp.actions": "actions",
"temp.crm_tags": "crm_tags",
"temp.custom_fields.contact_reason": "contact_reason",
"temp.custom_fields.solution": "solution",
"temp.custom_fields.escalation_team": "escalation_team",
"temp.response_blurb": "response_blurb",
"temp.name": "name",
"temp.knowledge_friendly_name": "friendly_name",
"temp.knowledge_description": "description",
"temp.disposition": "disposition",
}
Form Names
A friendly name for the form can be displayed in the portal task pane by passing the desired name to the friendly_name key.
friendly_name: _token.friendly_name;
Updated 3 months ago