HD Ticket Template: Add support for complex field types (Table Multiselect, Date, Attach)

[IMS94]

Description

The HD Ticket Template system currently only supports basic field types (Link, Select, Check, Data) in the ticket creation UI. Complex field types like Table Multiselect, Date/Datetime, and Attach fall back to a basic text input, making them unusable in templates.

Current Behavior

When a Table Multiselect (or other complex field type) is added to an HD Ticket Template:

1. Backend validation passes - The field can be added to the template without errors
2. Frontend renders incorrectly - Displays as a plain text input instead of the appropriate control
3. Data type mismatch - Template fields are initialized as empty strings, but Table Multiselect expects arrays
4. Poor display - Customer portal shows raw data instead of formatted values

Root Cause

The UniInput component (desk/src/components/UniInput.vue) only explicitly handles a limited set of field types:

// Current logic in UniInput.vue (lines 52-87)
const component = computed(() => {
  if (props.field.url_method) {
    return h(Autocomplete, { options: apiOptions.data });
  } else if (props.field.fieldtype === "Link" && props.field.options) {
    return h(Link, { doctype: props.field.options, filters: props.field.filters });
  } else if (props.field.fieldtype === "Select") {
    return h(Autocomplete, { options: props.field.options.split("\n").map(...) });
  } else if (props.field.fieldtype === "Check") {
    return h(Autocomplete, { options: [{ label: "Yes", value: 1 }, { label: "No", value: 0 }] });
  } else {
    // ALL OTHER FIELD TYPES: Falls back to basic text input
    return h(FormControl, { debounce: 500 });
  }
});

Additionally, in TicketNew.vue (lines 183-187), all template fields are initialized as empty strings:

function setupTemplateFields(fields) {
  fields.forEach((field: Field) => {
    templateFields[field.fieldname] = ""; // String initialization for all types
  });
}

Expected Behavior

Template fields should render with appropriate controls based on their field type. The helpdesk app already has multiselect components (SearchMultiSelect.vue, MultiSelect.vue) and TicketField.vue demonstrates Date/Datetime support using frappe-ui components, but these aren't integrated with the template system.

Field Type Support Matrix:

Field Type	UniInput (Templates)	TicketField (Agent View)	Current Support
Link	Yes	Yes	Fully supported
Select	Yes	Yes	Fully supported
Check	Yes	Yes	Fully supported
Data/Text	Fallback	Yes	Basic support
Date/Datetime	No	Yes	Not in templates
Table Multiselect	No	No	Not supported
Attach	No	No	Not supported

Proposed Enhancement

1. Extend UniInput component to handle additional field types:

   • Table Multiselect: Use existing SearchMultiSelect component
   • Date/Datetime: Use frappe-ui DatePicker/DateTimePicker (already used in TicketField.vue)
   • Attach: Add file upload component
   • Text fields: Use textarea instead of single-line input

2. Update data initialization in TicketNew.vue to use appropriate data types:

   function setupTemplateFields(fields) {
     fields.forEach((field: Field) => {
       if (field.fieldtype === "Table Multiselect" || field.fieldtype === "Table") {
         templateFields[field.fieldname] = [];
       } else if (field.fieldtype === "Check") {
         templateFields[field.fieldname] = 0;
       } else {
         templateFields[field.fieldname] = "";
       }
     });
   }

3. Improve customer portal display in TicketCustomerTemplateFields.vue to format complex values properly

Use Case

Custom fields are commonly added to HD Ticket for business-specific requirements. Examples include:

• Table Multiselect: Selecting multiple affected products, services, or departments
• Date fields: Custom deadlines, scheduled maintenance windows, or follow-up dates
• Attach: Supporting documents, screenshots, or log files at ticket creation time

Currently, these fields cannot be effectively used in templates, limiting the flexibility of the ticket creation workflow for organizations with custom field requirements.

Workaround

Currently, users must:

• Avoid complex field types in templates
• Use Link fields for single selections instead of Table Multiselect
• Rely on post-creation field updates for complex fields
• Manually edit tickets after creation to populate these fields

Additional Context

Existing Components Available:

• desk/src/components/SearchMultiSelect.vue - Sophisticated multiselect with filtering, groups, avatars
• desk/src/components/MultiSelect.vue - Simple pill-based multiselect
• desk/src/components/TicketField.vue - Already supports Date/Datetime with frappe-ui pickers

Evidence of Backend Support:

• HD Team doctype successfully uses Table Multiselect for the "users" field
• The API (api.py) correctly fetches fieldtype metadata
• Backend validation allows these fields to be added to templates

Template System Status:
The hd_ticket_template.json file includes a deprecation notice: "description": "This doctype will be deprecated in the future". If the template system is being replaced, this enhancement may not be needed. However, if templates will continue to be supported, adding complex field type support would significantly improve usability.

Files Involved

• desk/src/components/UniInput.vue - Field rendering logic for template creation
• desk/src/pages/ticket/TicketNew.vue - Template field initialization
• desk/src/pages/ticket/TicketCustomerTemplateFields.vue - Customer portal display
• desk/src/components/TicketField.vue - Reference implementation with Date/Datetime support

Environment

• Frappe Helpdesk: v0.x (main branch)
• Tested with custom fields on HD Ticket doctype
• Issue reproducible in both development and production environments