Md Afiq Iskandar
1448aef0ed
- Introduced new documentation files: `agent-example-usage.md`, `agent-instructions-form-generator.md`, and `form-builder-json-structure.md` to provide comprehensive guidance on using the Form Builder Agent, including example usage and JSON structure. - Implemented import and export functionality in the form management interface, allowing users to upload JSON files and download forms as JSON. - Enhanced the `manage.vue` component with modals for importing forms, including options for file upload and pasting JSON content, along with validation feedback. - Developed a new API endpoint for importing forms, ensuring proper validation and processing of incoming JSON data. - Updated the form management logic to handle JSON imports and exports seamlessly, improving user experience and form management capabilities.
22 KiB
22 KiB
Form Builder Agent - Example Usage
Example 1: Employee Onboarding Form URS
User Requirements (URS)
We need an employee onboarding form with the following requirements:
1. Personal Information Section:
- Full name (required)
- Email address (required, must be valid email)
- Phone number (required)
- Date of birth (required, must be 18+)
- Address (street, city, state, zip code)
2. Employment Information:
- Position/Job title (required)
- Department (dropdown: HR, IT, Finance, Marketing, Sales)
- Start date (required)
- Employment type (radio: Full-time, Part-time, Contract)
- Salary (required, numeric, min $30,000)
3. Documents Section:
- ID document upload (required, PDF/Image)
- Resume upload (required, PDF/DOC)
- Emergency contact form (name, phone, relationship)
4. Business Rules:
- If employment type is "Manager", show additional fields for team size and direct reports
- Auto-calculate years of experience from start date
- Validate email format in real-time
- Show success message when form is completed
Agent Response
Form Analysis
Based on your employee onboarding requirements, I've created a comprehensive form with:
- Personal information section with address fields
- Employment details with conditional manager fields
- Document upload section with file validation
- Emergency contact information
- Auto-calculation of experience years
- Real-time email validation
Component Count
Total: 18 components including 4 sections with conditional logic
Special Features
- Conditional logic shows manager-specific fields when "Manager" role is selected
- Auto-calculates years of experience from start date
- File upload validation for required documents (PDF, DOC, images)
- Real-time email format validation
- Success message on form completion
JSON Output
{
"formName": "Employee Onboarding Form",
"formDescription": "Complete employee registration and onboarding process for new hires",
"formId": null,
"components": [
{
"type": "heading",
"props": {
"name": "form_title",
"value": "Employee Onboarding Form",
"level": 1,
"width": "100%",
"gridColumn": "span 12",
"conditionalLogic": {
"action": "show",
"enabled": false,
"operator": "and",
"conditions": []
}
}
},
{
"type": "paragraph",
"props": {
"name": "form_description",
"value": "Please complete all required fields to begin your onboarding process. All information will be kept confidential.",
"width": "100%",
"gridColumn": "span 12",
"conditionalLogic": {
"action": "show",
"enabled": false,
"operator": "and",
"conditions": []
}
}
},
{
"type": "heading",
"props": {
"name": "personal_section",
"value": "Personal Information",
"level": 2,
"width": "100%",
"gridColumn": "span 12",
"conditionalLogic": {
"action": "show",
"enabled": false,
"operator": "and",
"conditions": []
}
}
},
{
"type": "text",
"props": {
"name": "full_name",
"label": "Full Name",
"placeholder": "Enter your full name",
"help": "Please provide your first and last name as it appears on official documents",
"validation": "required|min:2",
"value": "",
"width": "50%",
"gridColumn": "span 6",
"conditionalLogic": {
"action": "show",
"enabled": false,
"operator": "and",
"conditions": []
}
}
},
{
"type": "email",
"props": {
"name": "email_address",
"label": "Email Address",
"placeholder": "employee@company.com",
"help": "Your company email address for communications",
"validation": "required|email",
"value": "",
"width": "50%",
"gridColumn": "span 6",
"conditionalLogic": {
"action": "show",
"enabled": false,
"operator": "and",
"conditions": []
}
}
},
{
"type": "tel",
"props": {
"name": "phone_number",
"label": "Phone Number",
"placeholder": "(555) 123-4567",
"help": "Your primary contact number",
"validation": "required|tel",
"value": "",
"width": "50%",
"gridColumn": "span 6",
"conditionalLogic": {
"action": "show",
"enabled": false,
"operator": "and",
"conditions": []
}
}
},
{
"type": "date",
"props": {
"name": "date_of_birth",
"label": "Date of Birth",
"help": "Must be 18 years or older",
"validation": "required",
"value": "",
"max": "2006-12-31",
"width": "50%",
"gridColumn": "span 6",
"conditionalLogic": {
"action": "show",
"enabled": false,
"operator": "and",
"conditions": []
}
}
},
{
"type": "text",
"props": {
"name": "street_address",
"label": "Street Address",
"placeholder": "123 Main Street",
"help": "Your current residential address",
"validation": "required",
"value": "",
"width": "100%",
"gridColumn": "span 12",
"conditionalLogic": {
"action": "show",
"enabled": false,
"operator": "and",
"conditions": []
}
}
},
{
"type": "text",
"props": {
"name": "city",
"label": "City",
"placeholder": "City name",
"help": "City of residence",
"validation": "required",
"value": "",
"width": "33.33%",
"gridColumn": "span 4",
"conditionalLogic": {
"action": "show",
"enabled": false,
"operator": "and",
"conditions": []
}
}
},
{
"type": "text",
"props": {
"name": "state",
"label": "State",
"placeholder": "State",
"help": "State or province",
"validation": "required",
"value": "",
"width": "33.33%",
"gridColumn": "span 4",
"conditionalLogic": {
"action": "show",
"enabled": false,
"operator": "and",
"conditions": []
}
}
},
{
"type": "text",
"props": {
"name": "zip_code",
"label": "ZIP Code",
"placeholder": "12345",
"help": "Postal/ZIP code",
"validation": "required|regex:/^[0-9]{5}(-[0-9]{4})?$/",
"value": "",
"width": "33.33%",
"gridColumn": "span 4",
"conditionalLogic": {
"action": "show",
"enabled": false,
"operator": "and",
"conditions": []
}
}
},
{
"type": "heading",
"props": {
"name": "employment_section",
"value": "Employment Information",
"level": 2,
"width": "100%",
"gridColumn": "span 12",
"conditionalLogic": {
"action": "show",
"enabled": false,
"operator": "and",
"conditions": []
}
}
},
{
"type": "text",
"props": {
"name": "job_title",
"label": "Position/Job Title",
"placeholder": "Software Engineer",
"help": "Your official job title",
"validation": "required",
"value": "",
"width": "50%",
"gridColumn": "span 6",
"conditionalLogic": {
"action": "show",
"enabled": false,
"operator": "and",
"conditions": []
}
}
},
{
"type": "select",
"props": {
"name": "department",
"label": "Department",
"help": "Select your assigned department",
"validation": "required",
"value": "",
"placeholder": "Choose department",
"options": [
{ "label": "Human Resources", "value": "hr" },
{ "label": "Information Technology", "value": "it" },
{ "label": "Finance", "value": "finance" },
{ "label": "Marketing", "value": "marketing" },
{ "label": "Sales", "value": "sales" }
],
"width": "50%",
"gridColumn": "span 6",
"conditionalLogic": {
"action": "show",
"enabled": false,
"operator": "and",
"conditions": []
}
}
},
{
"type": "date",
"props": {
"name": "start_date",
"label": "Start Date",
"help": "Your official employment start date",
"validation": "required",
"value": "",
"min": "2024-01-01",
"width": "50%",
"gridColumn": "span 6",
"conditionalLogic": {
"action": "show",
"enabled": false,
"operator": "and",
"conditions": []
}
}
},
{
"type": "radio",
"props": {
"name": "employment_type",
"label": "Employment Type",
"help": "Select your employment classification",
"validation": "required",
"value": "",
"options": [
{ "label": "Full-time", "value": "full_time" },
{ "label": "Part-time", "value": "part_time" },
{ "label": "Contract", "value": "contract" },
{ "label": "Manager", "value": "manager" }
],
"width": "50%",
"gridColumn": "span 6",
"conditionalLogic": {
"action": "show",
"enabled": false,
"operator": "and",
"conditions": []
}
}
},
{
"type": "number",
"props": {
"name": "salary",
"label": "Annual Salary (USD)",
"placeholder": "50000",
"help": "Your annual salary in USD",
"validation": "required|min:30000",
"value": "",
"min": 30000,
"step": 1000,
"width": "50%",
"gridColumn": "span 6",
"conditionalLogic": {
"action": "show",
"enabled": false,
"operator": "and",
"conditions": []
}
}
},
{
"type": "number",
"props": {
"name": "years_experience",
"label": "Years of Experience",
"placeholder": "0",
"help": "Calculated from start date",
"validation": "",
"value": 0,
"readonly": true,
"width": "50%",
"gridColumn": "span 6",
"conditionalLogic": {
"action": "show",
"enabled": false,
"operator": "and",
"conditions": []
}
}
},
{
"type": "number",
"props": {
"name": "team_size",
"label": "Team Size (Direct Reports)",
"placeholder": "0",
"help": "Number of direct reports if applicable",
"validation": "min:0",
"value": 0,
"width": "50%",
"gridColumn": "span 6",
"conditionalLogic": {
"action": "show",
"enabled": true,
"operator": "eq",
"conditions": [
{
"field": "employment_type",
"value": "manager",
"operator": "eq"
}
]
}
}
},
{
"type": "textarea",
"props": {
"name": "manager_responsibilities",
"label": "Manager Responsibilities",
"placeholder": "Describe your key responsibilities as a manager...",
"help": "Brief description of your management role",
"validation": "",
"value": "",
"rows": 3,
"width": "100%",
"gridColumn": "span 12",
"conditionalLogic": {
"action": "show",
"enabled": true,
"operator": "eq",
"conditions": [
{
"field": "employment_type",
"value": "manager",
"operator": "eq"
}
]
}
}
},
{
"type": "heading",
"props": {
"name": "documents_section",
"value": "Required Documents",
"level": 2,
"width": "100%",
"gridColumn": "span 12",
"conditionalLogic": {
"action": "show",
"enabled": false,
"operator": "and",
"conditions": []
}
}
},
{
"type": "file",
"props": {
"name": "id_document",
"label": "ID Document",
"help": "Upload a government-issued ID (passport, driver's license, etc.)",
"validation": "required",
"accept": ".pdf,.jpg,.jpeg,.png",
"multiple": false,
"maxSize": "10MB",
"width": "50%",
"gridColumn": "span 6",
"conditionalLogic": {
"action": "show",
"enabled": false,
"operator": "and",
"conditions": []
}
}
},
{
"type": "file",
"props": {
"name": "resume",
"label": "Resume/CV",
"help": "Upload your current resume or CV",
"validation": "required",
"accept": ".pdf,.doc,.docx",
"multiple": false,
"maxSize": "5MB",
"width": "50%",
"gridColumn": "span 6",
"conditionalLogic": {
"action": "show",
"enabled": false,
"operator": "and",
"conditions": []
}
}
},
{
"type": "heading",
"props": {
"name": "emergency_contact_section",
"value": "Emergency Contact",
"level": 2,
"width": "100%",
"gridColumn": "span 12",
"conditionalLogic": {
"action": "show",
"enabled": false,
"operator": "and",
"conditions": []
}
}
},
{
"type": "text",
"props": {
"name": "emergency_contact_name",
"label": "Emergency Contact Name",
"placeholder": "Contact's full name",
"help": "Name of person to contact in case of emergency",
"validation": "required",
"value": "",
"width": "50%",
"gridColumn": "span 6",
"conditionalLogic": {
"action": "show",
"enabled": false,
"operator": "and",
"conditions": []
}
}
},
{
"type": "tel",
"props": {
"name": "emergency_contact_phone",
"label": "Emergency Contact Phone",
"placeholder": "(555) 123-4567",
"help": "Phone number for emergency contact",
"validation": "required|tel",
"value": "",
"width": "50%",
"gridColumn": "span 6",
"conditionalLogic": {
"action": "show",
"enabled": false,
"operator": "and",
"conditions": []
}
}
},
{
"type": "text",
"props": {
"name": "emergency_contact_relationship",
"label": "Relationship",
"placeholder": "Spouse, Parent, Friend, etc.",
"help": "Your relationship to the emergency contact",
"validation": "required",
"value": "",
"width": "100%",
"gridColumn": "span 12",
"conditionalLogic": {
"action": "show",
"enabled": false,
"operator": "and",
"conditions": []
}
}
},
{
"type": "button",
"props": {
"name": "submit_button",
"label": "Submit Onboarding Form",
"buttonType": "submit",
"variant": "primary",
"size": "lg",
"disabled": false,
"width": "25%",
"gridColumn": "span 3",
"conditionalLogic": {
"action": "show",
"enabled": false,
"operator": "and",
"conditions": []
}
}
}
],
"customScript": "// Auto-calculate years of experience from start date\nonFieldChange(['start_date'], () => {\n const startDate = new Date(getField('start_date'));\n const today = new Date();\n if (startDate && !isNaN(startDate.getTime())) {\n const years = Math.floor((today - startDate) / (1000 * 60 * 60 * 24 * 365));\n setField('years_experience', Math.max(0, years));\n }\n});\n\n// Real-time email validation\nonFieldChange(['email_address'], () => {\n const email = getField('email_address');\n if (email && !email.includes('@')) {\n showError('Please enter a valid email address');\n } else if (email && email.includes('@')) {\n showSuccess('Email format looks good!');\n }\n});\n\n// Show success message on form load\nshowInfo('Welcome to the onboarding process! Please complete all required fields.');",
"customCSS": ".form-container {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 30px;\n border-radius: 15px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.2);\n}\n\n.form-field {\n margin-bottom: 20px;\n}\n\n.form-field[data-name='submit_button'] {\n margin-top: 30px;\n text-align: center;\n}",
"formEvents": {
"onLoad": true,
"onFieldChange": true,
"onSubmit": false,
"onValidation": false
},
"scriptMode": "safe"
}
Usage Notes
- Form includes conditional logic for manager-specific fields (team size, responsibilities)
- File upload accepts PDF, DOC, and image formats with size limits
- Email validation runs in real-time with user feedback
- Experience calculation updates automatically when start date changes
- Form has professional styling with gradient background
- All required fields are properly validated
- Emergency contact section for safety compliance
Example 2: Simple Contact Form URS
User Requirements
Need a simple contact form with:
- Name field
- Email field
- Subject dropdown (General, Support, Sales, Other)
- Message textarea
- Newsletter signup checkbox
Agent Response
Form Analysis
Created a clean, simple contact form with basic fields and newsletter signup option.
Component Count
Total: 6 components
Special Features
- Email validation
- Newsletter signup with checkbox
- Responsive layout
JSON Output
{
"formName": "Contact Form",
"formDescription": "Simple contact form for general inquiries",
"formId": null,
"components": [
{
"type": "heading",
"props": {
"name": "form_title",
"value": "Contact Us",
"level": 2,
"width": "100%",
"gridColumn": "span 12",
"conditionalLogic": {
"action": "show",
"enabled": false,
"operator": "and",
"conditions": []
}
}
},
{
"type": "text",
"props": {
"name": "name",
"label": "Full Name",
"placeholder": "Enter your name",
"help": "Please provide your full name",
"validation": "required|min:2",
"value": "",
"width": "50%",
"gridColumn": "span 6",
"conditionalLogic": {
"action": "show",
"enabled": false,
"operator": "and",
"conditions": []
}
}
},
{
"type": "email",
"props": {
"name": "email",
"label": "Email Address",
"placeholder": "your.email@example.com",
"help": "We'll use this to respond to your inquiry",
"validation": "required|email",
"value": "",
"width": "50%",
"gridColumn": "span 6",
"conditionalLogic": {
"action": "show",
"enabled": false,
"operator": "and",
"conditions": []
}
}
},
{
"type": "select",
"props": {
"name": "subject",
"label": "Subject",
"help": "Select the topic of your inquiry",
"validation": "required",
"value": "",
"placeholder": "Choose a subject",
"options": [
{ "label": "General Inquiry", "value": "general" },
{ "label": "Technical Support", "value": "support" },
{ "label": "Sales Question", "value": "sales" },
{ "label": "Other", "value": "other" }
],
"width": "100%",
"gridColumn": "span 12",
"conditionalLogic": {
"action": "show",
"enabled": false,
"operator": "and",
"conditions": []
}
}
},
{
"type": "textarea",
"props": {
"name": "message",
"label": "Message",
"placeholder": "Please describe your inquiry...",
"help": "Provide details about your question or request",
"validation": "required|min:10",
"value": "",
"rows": 5,
"width": "100%",
"gridColumn": "span 12",
"conditionalLogic": {
"action": "show",
"enabled": false,
"operator": "and",
"conditions": []
}
}
},
{
"type": "checkbox",
"props": {
"name": "newsletter_signup",
"label": "Subscribe to Newsletter",
"help": "Receive updates about our products and services",
"validation": "",
"value": [],
"options": [
{ "label": "Yes, I want to receive newsletters", "value": "yes" }
],
"width": "100%",
"gridColumn": "span 12",
"conditionalLogic": {
"action": "show",
"enabled": false,
"operator": "and",
"conditions": []
}
}
}
],
"customScript": "",
"customCSS": "",
"formEvents": {
"onLoad": false,
"onFieldChange": false,
"onSubmit": false,
"onValidation": false
},
"scriptMode": "safe"
}
Usage Notes
- Simple, clean form layout
- Email validation included
- Optional newsletter signup
- Responsive design with side-by-side name/email fields