export function onboardingChecklist(form: FormTs) {
// New Hire Onboarding Checklist Form - Employee orientation tracking
// Demonstrates: CheckboxList, MatrixQuestion, StarRating, EmojiRating, RatingScale, ThumbRating, Slider, conditional visibility, computed progress
// ============================================
// STATE FOR PROGRESS TRACKING
// ============================================
const completedTasks = form.state(0);
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'New Hire Onboarding Checklist',
computedValue: () => 'Track and complete onboarding tasks for new employees',
customStyles: {
backgroundColor: '#7c3aed',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: New Hire Information
// ============================================
const employeeSection = form.addSubform('employee', {
title: 'New Hire Information',
customStyles: { padding: '16px', borderRadius: '8px', border: '1px solid #e2e8f0' }
});
employeeSection.addRow(row => {
row.addTextbox('employeeName', {
label: 'Employee Name',
placeholder: 'Full name',
isRequired: true
}, '1fr');
row.addTextbox('employeeId', {
label: 'Employee ID',
placeholder: 'e.g., EMP-2024-001'
}, '1fr');
});
employeeSection.addRow(row => {
row.addTextbox('jobTitle', {
label: 'Job Title',
placeholder: 'Position title',
isRequired: true
}, '1fr');
row.addTextbox('department', {
label: 'Department',
placeholder: 'e.g., Engineering, Sales'
}, '1fr');
});
employeeSection.addRow(row => {
row.addDatepicker('startDate', {
label: 'Start Date',
isRequired: true
}, '1fr');
row.addDropdown('employmentType', {
label: 'Employment Type',
options: [
{ id: 'full-time', name: 'Full-time' },
{ id: 'part-time', name: 'Part-time' },
{ id: 'contractor', name: 'Contractor' },
{ id: 'intern', name: 'Intern' },
{ id: 'temporary', name: 'Temporary' }
],
placeholder: 'Select type'
}, '1fr');
});
employeeSection.addRow(row => {
row.addTextbox('managerName', {
label: 'Manager/Supervisor',
placeholder: 'Reporting manager name',
isRequired: true
}, '1fr');
row.addDropdown('workLocation', {
label: 'Work Location',
options: [
{ id: 'office', name: 'On-site/Office' },
{ id: 'remote', name: 'Fully Remote' },
{ id: 'hybrid', name: 'Hybrid' }
],
placeholder: 'Select location'
}, '1fr');
});
// ============================================
// SECTION 2: Pre-Arrival Tasks
// ============================================
const preArrival = form.addSubform('preArrival', {
title: 'Pre-Arrival Tasks (Before Day 1)',
isVisible: () => employeeSection.textbox('employeeName')?.value() !== null && employeeSection.textbox('employeeName')?.value() !== '',
customStyles: () => {
const tasks = preArrival.checkboxList('preArrivalTasks')?.value() || [];
if (tasks.length >= 5) return { backgroundColor: '#dcfce7', padding: '16px', borderRadius: '8px' };
if (tasks.length > 0) return { backgroundColor: '#fef9c3', padding: '16px', borderRadius: '8px' };
return { padding: '16px', borderRadius: '8px', border: '1px dashed #cbd5e1' };
}
});
preArrival.addRow(row => {
row.addCheckboxList('preArrivalTasks', {
label: 'Complete the following before the employee arrives:',
options: [
{ id: 'offer-signed', name: 'Offer letter signed and returned' },
{ id: 'background', name: 'Background check completed' },
{ id: 'workspace', name: 'Workspace/desk prepared' },
{ id: 'equipment', name: 'Computer/equipment ordered' },
{ id: 'email', name: 'Email account created' },
{ id: 'welcome', name: 'Welcome email sent with Day 1 info' },
{ id: 'buddy', name: 'Onboarding buddy assigned' },
{ id: 'calendar', name: 'First week meetings scheduled' }
],
orientation: 'vertical'
});
});
// ============================================
// SECTION 3: First Day Essentials
// ============================================
const firstDay = form.addSubform('firstDay', {
title: 'First Day Essentials',
isVisible: () => {
const tasks = preArrival.checkboxList('preArrivalTasks')?.value() || [];
return tasks.length > 0;
}
});
firstDay.addRow(row => {
row.addMatrixQuestion('firstDayTasks', {
label: 'First day tasks completion:',
rows: [
{ id: 'welcome', label: 'Welcome meeting with manager', isRequired: true },
{ id: 'tour', label: 'Office/facility tour', isRequired: false },
{ id: 'introductions', label: 'Team introductions', isRequired: true },
{ id: 'workstation', label: 'Workstation setup verified', isRequired: true },
{ id: 'security', label: 'Security badge/access issued', isRequired: false },
{ id: 'parking', label: 'Parking arranged', isRequired: false },
{ id: 'lunch', label: 'Lunch buddy/team lunch', isRequired: false }
],
columns: [
{ id: 'na', label: 'N/A' },
{ id: 'pending', label: 'Pending' },
{ id: 'done', label: 'Done' }
],
striped: true,
fullWidth: true
});
});
// ============================================
// SECTION 4: Equipment & Access
// ============================================
const equipment = form.addSubform('equipment', {
title: 'Equipment & System Access',
isVisible: () => {
const tasks = preArrival.checkboxList('preArrivalTasks')?.value() || [];
return tasks.length > 0;
}
});
equipment.addRow(row => {
row.addMatrixQuestion('equipmentSetup', {
label: 'Equipment and access setup:',
rows: [
{ id: 'laptop', label: 'Laptop/Computer', isRequired: true },
{ id: 'monitor', label: 'Monitor(s)', isRequired: false },
{ id: 'phone', label: 'Phone/Headset', isRequired: false },
{ id: 'email-access', label: 'Email access working', isRequired: true },
{ id: 'vpn', label: 'VPN access (if remote)', isRequired: false },
{ id: 'software', label: 'Required software installed', isRequired: true },
{ id: 'intranet', label: 'Intranet/SharePoint access', isRequired: false },
{ id: 'tools', label: 'Role-specific tools access', isRequired: true }
],
columns: [
{ id: 'na', label: 'N/A' },
{ id: 'pending', label: 'Pending' },
{ id: 'issue', label: 'Issue' },
{ id: 'done', label: 'Done' }
],
striped: true,
fullWidth: true
});
});
equipment.addRow(row => {
row.addTextarea('equipmentNotes', {
label: 'Equipment issues or notes',
placeholder: 'Note any issues, missing items, or special requests...',
rows: 2,
autoExpand: true
});
});
// ============================================
// SECTION 5: Training & Compliance
// ============================================
const training = form.addSubform('training', {
title: 'Required Training (First 30 Days)',
isVisible: () => {
const tasks = preArrival.checkboxList('preArrivalTasks')?.value() || [];
return tasks.length > 0;
}
});
training.addRow(row => {
row.addCheckboxList('trainingCompleted', {
label: 'Mark completed trainings:',
options: [
{ id: 'orientation', name: 'Company orientation' },
{ id: 'security', name: 'Security awareness training' },
{ id: 'harassment', name: 'Anti-harassment training' },
{ id: 'safety', name: 'Safety training (if applicable)' },
{ id: 'compliance', name: 'Compliance training' },
{ id: 'systems', name: 'Systems/tools training' },
{ id: 'role', name: 'Role-specific training' },
{ id: 'policies', name: 'Policy acknowledgments signed' }
],
orientation: 'vertical'
});
});
training.addRow(row => {
row.addSlider('trainingProgress', {
label: 'Overall training completion progress',
min: 0,
max: 100,
step: 10,
defaultValue: 0,
unit: '%',
showValue: true
});
});
// ============================================
// SECTION 6: Key Milestones (First 30 Days)
// ============================================
const milestones = form.addSubform('milestones', {
title: '30-Day Milestones',
isVisible: () => {
const tasks = preArrival.checkboxList('preArrivalTasks')?.value() || [];
return tasks.length > 0;
}
});
milestones.addRow(row => {
row.addMatrixQuestion('milestonesMatrix', {
label: 'Key milestones during first 30 days:',
rows: [
{ id: 'week1-checkin', label: 'Week 1 check-in with manager', isRequired: true },
{ id: 'team-meeting', label: 'Attended team meeting', isRequired: true },
{ id: 'goals-set', label: '30-60-90 day goals set', isRequired: true },
{ id: 'mentor', label: 'Met with mentor/buddy regularly', isRequired: false },
{ id: 'stakeholders', label: 'Key stakeholder meetings', isRequired: false },
{ id: 'first-task', label: 'First task/project assigned', isRequired: true },
{ id: 'feedback', label: 'Initial feedback received', isRequired: false },
{ id: '30day-review', label: '30-day review scheduled', isRequired: true }
],
columns: [
{ id: 'na', label: 'N/A' },
{ id: 'pending', label: 'Pending' },
{ id: 'done', label: 'Done' }
],
striped: true,
fullWidth: true
});
});
// ============================================
// SECTION 7: New Hire Feedback
// ============================================
const feedback = form.addSubform('feedback', {
title: 'New Hire Feedback',
isVisible: () => {
const trainingItems = training.checkboxList('trainingCompleted')?.value() || [];
return trainingItems.length > 0;
},
customStyles: { backgroundColor: '#f8fafc', padding: '16px', borderRadius: '8px' }
});
feedback.addRow(row => {
row.addEmojiRating('onboardingExperience', {
label: 'How is the new hire feeling about their onboarding experience?',
preset: 'satisfaction',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
feedback.addRow(row => {
row.addStarRating('supportRating', {
label: 'Manager/team support during onboarding',
maxStars: 5,
size: 'lg',
alignment: 'center',
showConfettiOnMax: true
});
});
feedback.addRow(row => {
row.addRatingScale('preparedness', {
preset: 'likert-5',
label: 'I feel prepared to do my job effectively',
lowLabel: 'Strongly Disagree',
highLabel: 'Strongly Agree',
alignment: 'center'
});
});
feedback.addRow(row => {
row.addThumbRating('wouldRecommend', {
label: 'Would recommend this company to a friend?',
showLabels: true,
upLabel: 'Yes',
downLabel: 'No',
alignment: 'center',
size: 'lg'
});
});
feedback.addSpacer();
feedback.addRow(row => {
row.addTextarea('feedbackComments', {
label: 'Additional feedback or suggestions for improving onboarding',
placeholder: 'What went well? What could be improved?',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 8: Summary
// ============================================
const summary = form.addSubform('summary', {
title: 'Onboarding Summary',
isVisible: () => feedback.emojiRating('onboardingExperience')?.value() !== null
});
summary.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const name = employeeSection.textbox('employeeName')?.value();
const title = employeeSection.textbox('jobTitle')?.value();
const startDate = employeeSection.datepicker('startDate')?.value();
const manager = employeeSection.textbox('managerName')?.value();
const preArrivalTasks = preArrival.checkboxList('preArrivalTasks')?.value() || [];
const trainingItems = training.checkboxList('trainingCompleted')?.value() || [];
const trainingPct = training.slider('trainingProgress')?.value() || 0;
const experience = feedback.emojiRating('onboardingExperience')?.value();
const support = feedback.starRating('supportRating')?.value();
const recommend = feedback.thumbRating('wouldRecommend')?.value();
const experienceLabels: Record<string, string> = {
'very-bad': 'Very Unhappy',
'bad': 'Unhappy',
'neutral': 'Neutral',
'good': 'Happy',
'excellent': 'Very Happy'
};
let report = `ONBOARDING CHECKLIST REPORT\n`;
report += `${'═'.repeat(30)}\n\n`;
if (name) report += `Employee: ${name}\n`;
if (title) report += `Position: ${title}\n`;
if (startDate) report += `Start Date: ${startDate}\n`;
if (manager) report += `Manager: ${manager}\n`;
report += `\nPROGRESS:\n`;
report += `Pre-arrival tasks: ${preArrivalTasks.length}/8\n`;
report += `Trainings completed: ${trainingItems.length}/8\n`;
report += `Training progress: ${trainingPct}%\n`;
if (experience || support) {
report += `\nFEEDBACK:\n`;
if (experience) report += `Experience: ${experienceLabels[experience] || experience}\n`;
if (support) report += `Support: ${'★'.repeat(support)}${'☆'.repeat(5 - support)}\n`;
if (recommend) report += `Would recommend: ${recommend === 'up' ? 'Yes' : 'No'}\n`;
}
// Overall status
const overallProgress = Math.round((preArrivalTasks.length / 8 + trainingItems.length / 8 + trainingPct / 100) / 3 * 100);
report += `\nOVERALL: ${overallProgress}% complete`;
return report;
},
customStyles: () => {
const experience = feedback.emojiRating('onboardingExperience')?.value();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '13px'
};
if (experience === 'excellent' || experience === 'good') {
return { ...baseStyles, backgroundColor: '#dcfce7', borderLeft: '4px solid #22c55e' };
} else if (experience === 'neutral') {
return { ...baseStyles, backgroundColor: '#fef9c3', borderLeft: '4px solid #eab308' };
} else if (experience === 'bad' || experience === 'very-bad') {
return { ...baseStyles, backgroundColor: '#fecaca', borderLeft: '4px solid #ef4444' };
}
return { ...baseStyles, backgroundColor: '#f8fafc', borderLeft: '4px solid #7c3aed' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Complete Onboarding Checklist',
isVisible: () => feedback.emojiRating('onboardingExperience')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Onboarding Checklist Completed!',
message: () => {
const experience = feedback.emojiRating('onboardingExperience')?.value();
if (experience === 'excellent' || experience === 'good') {
return 'Great job! The onboarding has been completed successfully. The new hire is off to a great start. Continue to check in regularly during their first 90 days.';
}
if (experience === 'bad' || experience === 'very-bad') {
return 'The onboarding checklist has been submitted. The new hire has expressed concerns about their experience. Please schedule a meeting to address any issues promptly.';
}
return 'The onboarding checklist has been completed and saved to the employee record. Continue to support the new hire through their first 90 days.';
}
});
}