Custom Design

Custom Blocks

This project provides two main sections for developers to customize content through JSON: Service Items on the homepage and Application Service Information on the form page.

Service Items

Service items are categorized by type and relevant agencies. Each item has a unique ID, which is used to obtain form fields for the application service information. The full JSON format is as follows:

{
  "data": [
    {
      "name": "Complaints", // Service item category
      "icon": "", // Icon path for the category
      "agency": [ // Agencies under the category
        {
          "name": "Department of Transportation", // Agency name
          "options": [ // Services provided by the agency
            {
              "id": "a-1", // Service ID
              "title": "Complaints Handled by the Adjudication Office (Local)", // Service title
              "subtitle": "Complaints handled by the Adjudication Office (adjudication venue is Taipei City Traffic Adjudication Office) - Local cases (no documents or copies required)", // Service subtitle
              "type": "Complaints", // Category
              "agency_type": "Department of Transportation" // Agency
            },
            {
              "id": "a-2",
              "title": "Complaints Handled by the Adjudication Office (Other Counties/Cities)",
              "subtitle": "Complaints handled by the Adjudication Office (adjudication venue is Taipei City Traffic Adjudication Office) - Other counties/cities cases (no documents or copies required)",
              "type": "Complaints",
              "agency_type": "Department of Transportation"
            },
            {
              "id": "a-3",
              "title": "Complaints Handled by the Parking Management Office",
              "subtitle": "Complaints handled by the Parking Management Office (reported by the Taipei City Parking Management Office - parking fee chasing and illegal parking cases)",
              "type": "Complaints",
              "agency_type": "Department of Transportation"
            }
          ]
        },
        {
          "name": "Police Department",
          "options": [
            {
              "id": "b-1",
              "title": "Violation Complaints Handled by the Police Department",
              "subtitle": "Violation complaints handled by the Police Department (reported by various precincts of the Taipei City Police Department)",
              "type": "Complaints",
              "agency_type": "Police Department"
            }
          ]
        }
      ]
    }
  ]
}

Service Items - Data

Field	Purpose	Example
name	Service item category	Complaints
icon	Icon path for the category (optional)	https://www.gov.taipei/images/favicon.ico
agency	Agencies under the category	Refer to Service Items - Agency

Service Items - Agency

Field	Purpose	Example
name	Agency name	Department of Transportation
options	Services provided by the agency	Refer to Service Items - Options

Service Items - Options

Field	Purpose	Example
id	Service ID (must be unique)	a-1
title	Service title	Complaints Handled by the Adjudication Office (Local)
subtitle	Service subtitle	Complaints handled by the Adjudication Office (adjudication venue is Taipei City Traffic Adjudication Office) - Local cases (no documents or copies required)
type	Category	Complaints
agency_type	Agency	Department of Transportation

Application Service Information

Application service information defines 7 form field components for developers to freely combine:

1. input text field.

2. select dropdown field.

3. multiple_select multiple selection field.

4. radio_group radio group field.

5. textarea text area field.

6. checkbox_group checkbox group field.

7. date_picker date picker field.

Each field has a key called field, which defines the value corresponding to the key when the form is submitted. Usually, this matches the backend form definition, so consistency is important.

All fields with options should have label and value.

In the JSON, we also need to define submit_target to let the frontend know the URL, request method, and data type for submitting the form to the backend.

This definition can be tailored to match the API format designed to receive the form. Make sure to confirm these fields with the backend API.

The form submission function can be found in the project under src/views/FormPreview.vue in the onSubmitClick method. Developers can integrate their form submission API according to their requirements.

A complete JSON example is provided below. There is no limit to the number of occurrences of each form field, allowing for free combination.

{
  "data": {
    "submit_target": {
      "url": "https://www.gov.taipei/", // Backend URL for form submission
      "method": "POST", // Request method for form submission
      "content_type": "application/json" // Data type accepted by the request
    },
    "form_format": [
      {
        "type": "input", // Form field type
        "label": "Name of the Violating Driver", // Form field label
        "required": true, // Whether the form field is required
        "field": "name" // Key corresponding to the form field value
      },
      {
        "type": "select",
        "label": "Handling Agency",
        "required": true,
        "field": "agency",
        "default_option": "Please select an agency", // Default option, no value, acts as a placeholder
        "options": [ // All options
          {
            "label": "Traffic Adjudication Office",
            "value": "Traffic Adjudication Office"
          }
        ]
      },
      {
        "type": "multiple_select",
        "label": "Complaint Items",
        "required": true,
        "field": "apply",
        "options": [
          {
            "label": "Traffic Accident Complaint",
            "value": "Traffic Accident Complaint"
          },
          {
            "label": "Mismatch of Vehicle Type/Color",
            "value": "Mismatch of Vehicle Type/Color"
          }
        ]
      },
      {
        "type": "radio_group",
        "label": "Send by E-MAIL",
        "required": true,
        "field": "send_by_mail",
        "options": [
          {
            "label": "Yes",
            "value": "Y"
          },
          {
            "label": "No",
            "value": "N"
          }
        ]
      },
      {
        "type": "textarea",
        "label": "Complaint Content",
        "required": true,
        "field": "content"
      },
      {
        "type": "checkbox_group",
        "label": "Application Form",
        "required": true,
        "field": "apply_form",
        "options": [
          {
            "label": "On-site Diagram",
            "value": "On-site Diagram"
          },
          {
            "label": "On-site Photos",
            "value": "On-site Photos"
          }
        ]
      },
      {
        "type": "date_picker",
        "label": "Accident Date",
        "required": true,
        "field": "date"
      }
    ]
  }
}

Application Service Information - Data

Field	Purpose	Example
submit_target	Target information for form submission	Refer to Application Service Information - Submit Target
form_format	Composition of custom form components	Refer to Application Service Information - Form Format

Application Service Information - Submit Target

Field	Purpose	Example
url	Backend URL for form submission	https://www.gov.taipei/
method	Request method for form submission	POST
content_type	Data type accepted by the request	application/json

Application Service Information - Form Format

• input

Field	Purpose	Example
type	Form field type	input
label	Form field label	Name of the Violating Driver
required	Whether the form field is required	true
field	Key corresponding to the form field value	name

• select

Field	Purpose	Example
type	Form field type	select
label	Form field label	Handling Agency
required	Whether the form field is required	true
field	Key corresponding to the form field value	agency
default_option	Default option, no value, acts as a placeholder	Please select an agency
options	All options	Refer to Application Service Information - Options Format

• multiple_select

Field	Purpose	Example
type	Form field type	multiple_select
label	Form field label	Complaint Items
required	Whether the form field is required	true
field	Key corresponding to the form field value	send_by_mail
options	All options	Refer to Application Service Information - Options Format

• radio_group

Field	Purpose	Example
type	Form field type	radio_group
label	Form field label	Send by E-MAIL
required	Whether the form field is required	true
field	Key corresponding to the form field value	apply
options	All options	Refer to Application Service Information - Options Format

• textarea

Field	Purpose	Example
type	Form field type	textarea
label	Form field label	Complaint Content
required	Whether the form field is required	true
field	Key corresponding to the form field value	content

• checkbox_group

Field	Purpose	Example
type	Form field type	checkbox_group
label	Form field label	Application Form
required	Whether the form field is required	true
field	Key corresponding to the form field value	apply_form
options	All options	Refer to Application Service Information - Options Format

• date_picker

Field	Purpose	Example
type	Form field type	date_picker
label	Form field label	Accident Date
required	Whether the form field is required	true
field	Key corresponding to the form field value	date

Application Service Information - Options Format

Field	Purpose	Example
label	Option text	Yes
value	Option value for backend submission	Y