export function internalTransferForm(form: FormTs) {
// Internal Transfer Request Form - Employee Mobility
// Demonstrates: Textbox, Dropdown, MatrixQuestion, StarRating, Slider, EmojiRating, dynamic labels
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Internal Transfer Request',
computedValue: () => 'Apply for a new role or department within the organization.',
customStyles: {
backgroundColor: '#4f46e5',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Current Position
// ============================================
const currentSection = form.addSubform('current', {
title: 'Current Position'
});
currentSection.addRow(row => {
row.addTextbox('employeeName', {
label: 'Your Full Name',
placeholder: 'Enter your name',
isRequired: true
}, '1fr');
row.addTextbox('employeeId', {
label: 'Employee ID',
placeholder: 'e.g., EMP-12345',
isRequired: true
}, '1fr');
});
currentSection.addRow(row => {
row.addTextbox('currentTitle', {
label: 'Current Job Title',
placeholder: 'Your current role',
isRequired: true
}, '1fr');
row.addDropdown('currentDepartment', {
label: 'Current Department',
options: [
{ id: 'engineering', name: 'Engineering' },
{ id: 'product', name: 'Product' },
{ id: 'design', name: 'Design' },
{ id: 'marketing', name: 'Marketing' },
{ id: 'sales', name: 'Sales' },
{ id: 'customer-success', name: 'Customer Success' },
{ id: 'hr', name: 'Human Resources' },
{ id: 'finance', name: 'Finance' },
{ id: 'operations', name: 'Operations' },
{ id: 'legal', name: 'Legal' },
{ id: 'it', name: 'IT' },
{ id: 'other', name: 'Other' }
],
isRequired: true
}, '1fr');
});
currentSection.addRow(row => {
row.addTextbox('currentManager', {
label: 'Current Manager Name',
placeholder: 'Your direct supervisor'
}, '1fr');
row.addInteger('tenureMonths', {
label: 'Months in Current Role',
min: 0,
max: 240,
placeholder: 'e.g., 18',
isRequired: true
}, '1fr');
});
// ============================================
// SECTION 2: Desired Position
// ============================================
const desiredSection = form.addSubform('desired', {
title: 'Desired Position'
});
desiredSection.addRow(row => {
row.addTextbox('targetTitle', {
label: 'Target Job Title/Position',
placeholder: 'Position you are applying for',
isRequired: true
}, '1fr');
row.addDropdown('targetDepartment', {
label: 'Target Department',
options: [
{ id: 'engineering', name: 'Engineering' },
{ id: 'product', name: 'Product' },
{ id: 'design', name: 'Design' },
{ id: 'marketing', name: 'Marketing' },
{ id: 'sales', name: 'Sales' },
{ id: 'customer-success', name: 'Customer Success' },
{ id: 'hr', name: 'Human Resources' },
{ id: 'finance', name: 'Finance' },
{ id: 'operations', name: 'Operations' },
{ id: 'legal', name: 'Legal' },
{ id: 'it', name: 'IT' },
{ id: 'other', name: 'Other' }
],
isRequired: true
}, '1fr');
});
desiredSection.addRow(row => {
row.addRadioButton('transferType', {
label: 'Type of Transfer',
options: [
{ id: 'lateral', name: 'Lateral Move (same level)' },
{ id: 'promotion', name: 'Promotion (higher level)' },
{ id: 'exploration', name: 'Career Exploration (different function)' }
],
orientation: 'horizontal',
isRequired: true
});
});
desiredSection.addRow(row => {
row.addTextbox('jobPostingId', {
label: 'Job Posting ID (if applicable)',
placeholder: 'e.g., JOB-2024-001'
}, '1fr');
row.addDatepicker('availableDate', {
label: 'Earliest Available Start Date',
minDate: () => new Date().toISOString().split('T')[0],
isRequired: true
}, '1fr');
});
// ============================================
// SECTION 3: Motivation
// ============================================
const motivationSection = form.addSubform('motivation', {
title: 'Motivation & Fit'
});
motivationSection.addRow(row => {
row.addEmojiRating('excitementLevel', {
label: 'How excited are you about this opportunity?',
preset: 'mood',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
motivationSection.addRow(row => {
row.addCheckboxList('transferReasons', {
label: 'Primary reasons for seeking this transfer:',
options: [
{ id: 'growth', name: 'Career growth opportunity' },
{ id: 'skills', name: 'Better use of my skills' },
{ id: 'learning', name: 'Learn new skills' },
{ id: 'challenge', name: 'Seeking new challenges' },
{ id: 'team', name: 'Work with specific team/leader' },
{ id: 'location', name: 'Location/schedule preferences' },
{ id: 'impact', name: 'Greater business impact' },
{ id: 'passion', name: 'Align with personal passion' }
],
orientation: 'vertical',
max: 3
});
});
motivationSection.addSpacer({ height: '16px' });
motivationSection.addRow(row => {
row.addTextarea('motivationStatement', {
label: () => {
const transferType = desiredSection.radioButton('transferType')?.value();
if (transferType === 'promotion') return 'Why are you ready for this promotion?';
if (transferType === 'exploration') return 'What draws you to this new career direction?';
return 'Why are you interested in this position?';
},
placeholder: 'Explain your motivation and what you hope to achieve...',
rows: 4,
isRequired: true
});
});
// ============================================
// SECTION 4: Skills Self-Assessment
// ============================================
const skillsSection = form.addSubform('skills', {
title: 'Skills Self-Assessment'
});
skillsSection.addRow(row => {
row.addMatrixQuestion('skillsMatrix', {
label: 'Rate your proficiency in these areas:',
rows: [
{ id: 'technical', label: 'Technical/Functional Skills', isRequired: true },
{ id: 'communication', label: 'Communication Skills', isRequired: true },
{ id: 'leadership', label: 'Leadership/Management', isRequired: true },
{ id: 'problem-solving', label: 'Problem Solving', isRequired: true },
{ id: 'collaboration', label: 'Team Collaboration', isRequired: true },
{ id: 'adaptability', label: 'Adaptability/Learning', isRequired: true }
],
columns: [
{ id: 'beginner', label: 'Beginner' },
{ id: 'intermediate', label: 'Intermediate' },
{ id: 'advanced', label: 'Advanced' },
{ id: 'expert', label: 'Expert' }
],
fullWidth: true,
striped: true
});
});
skillsSection.addSpacer({ height: '16px' });
skillsSection.addRow(row => {
row.addTextarea('relevantExperience', {
label: 'Describe relevant experience and qualifications for this role:',
placeholder: 'Include specific achievements, projects, certifications...',
rows: 4,
isRequired: true
});
});
// ============================================
// SECTION 5: Current Role Satisfaction
// ============================================
const satisfactionSection = form.addSubform('satisfaction', {
title: 'Current Role Feedback',
customStyles: () => {
const satisfaction = satisfactionSection.ratingScale('currentSatisfaction')?.value();
if (satisfaction && satisfaction >= 4) return { backgroundColor: '#d1fae5', padding: '16px', borderRadius: '8px' };
if (satisfaction && satisfaction <= 2) return { backgroundColor: '#fee2e2', padding: '16px', borderRadius: '8px' };
return { padding: '16px', borderRadius: '8px', border: '1px solid #e5e7eb' };
}
});
satisfactionSection.addRow(row => {
row.addRatingScale('currentSatisfaction', {
label: 'Overall satisfaction with your current role',
preset: 'satisfaction',
size: 'md',
alignment: 'center'
});
});
satisfactionSection.addRow(row => {
row.addTextarea('currentRoleFeedback', {
label: () => {
const satisfaction = satisfactionSection.ratingScale('currentSatisfaction')?.value();
if (satisfaction && satisfaction <= 2) return 'What challenges are you experiencing in your current role?';
if (satisfaction && satisfaction >= 4) return 'What do you enjoy most about your current role?';
return 'Share any feedback about your current role:';
},
placeholder: 'Your feedback...',
rows: 2,
isVisible: () => satisfactionSection.ratingScale('currentSatisfaction')?.value() !== null
});
});
// ============================================
// SECTION 6: Logistics & Expectations
// ============================================
const logisticsSection = form.addSubform('logistics', {
title: 'Logistics & Expectations'
});
logisticsSection.addRow(row => {
row.addRadioButton('salaryExpectation', {
label: 'Salary Expectations',
options: [
{ id: 'same', name: 'Maintain current salary' },
{ id: 'increase', name: 'Expecting an increase' },
{ id: 'flexible', name: 'Flexible based on role' },
{ id: 'discuss', name: 'Prefer to discuss' }
],
orientation: 'vertical'
});
});
logisticsSection.addRow(row => {
row.addSlider('salaryFlexibility', {
label: 'If seeking an increase, what range are you flexible within?',
min: 0,
max: 30,
step: 5,
unit: '%',
showValue: true,
defaultValue: 10,
isVisible: () => logisticsSection.radioButton('salaryExpectation')?.value() === 'increase'
});
});
logisticsSection.addRow(row => {
row.addRadioButton('managerAwareness', {
label: 'Is your current manager aware of this application?',
options: [
{ id: 'yes', name: 'Yes, they are aware and supportive' },
{ id: 'informed', name: 'Yes, they know I am exploring' },
{ id: 'no', name: 'No, please keep confidential initially' }
],
orientation: 'vertical',
isRequired: true
});
});
// ============================================
// SECTION 7: Request Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Transfer Request Summary',
isVisible: () =>
!!currentSection.textbox('employeeName')?.value() &&
!!desiredSection.textbox('targetTitle')?.value()
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const name = currentSection.textbox('employeeName')?.value() || '';
const currentTitle = currentSection.textbox('currentTitle')?.value();
const currentDept = currentSection.dropdown('currentDepartment')?.value();
const targetTitle = desiredSection.textbox('targetTitle')?.value();
const targetDept = desiredSection.dropdown('targetDepartment')?.value();
const transferType = desiredSection.radioButton('transferType')?.value();
const excitement = motivationSection.emojiRating('excitementLevel')?.value();
const availableDate = desiredSection.datepicker('availableDate')?.value();
if (!name || !targetTitle) return '';
const transferLabels: Record<string, string> = {
'lateral': 'Lateral Move',
'promotion': 'Promotion',
'exploration': 'Career Exploration'
};
const excitementEmojis: Record<string, string> = {
'sad': '😢', 'down': '😔', 'neutral': '😐', 'happy': '😊', 'excited': '🤩'
};
let summary = '📋 Transfer Request Summary\n';
summary += '═'.repeat(32) + '\n\n';
summary += `👤 Employee: ${name}\n`;
if (currentTitle && currentDept) {
summary += `📍 Current: ${currentTitle} (${currentDept})\n`;
}
if (targetTitle && targetDept) {
summary += `🎯 Target: ${targetTitle} (${targetDept})\n`;
}
if (transferType) {
summary += `📊 Type: ${transferLabels[transferType] || transferType}\n`;
}
if (availableDate) {
summary += `📅 Available: ${new Date(availableDate).toLocaleDateString()}\n`;
}
if (excitement) {
summary += `\n${excitementEmojis[excitement] || '😊'} Excitement Level: ${excitement}`;
}
return summary;
},
customStyles: () => {
const transferType = desiredSection.radioButton('transferType')?.value();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (transferType === 'promotion') return { ...baseStyles, backgroundColor: '#dbeafe', borderLeft: '4px solid #3b82f6' };
if (transferType === 'exploration') return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
return { ...baseStyles, backgroundColor: '#f3f4f6', borderLeft: '4px solid #6b7280' };
}
});
});
// Final confirmation
summarySection.addSpacer({ height: '16px' });
summarySection.addRow(row => {
row.addCheckbox('acknowledgment', {
label: 'I confirm that the information provided is accurate and I understand the transfer process',
isRequired: true
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Transfer Request',
isVisible: () => summarySection.checkbox('acknowledgment')?.value() === true
});
form.configureCompletionScreen({
type: 'text',
title: 'Transfer Request Submitted',
message: 'Your internal transfer request has been submitted successfully. HR will review your application and you will receive an update within 5-7 business days. Good luck with your career move!'
});
}