Certification Application

A multi-step StepForm wizard for applying to a professional certification, demonstrating sequential steps, cross-step validation, conditional fields, and progress tracking.

Requirements

• 4 steps: Eligibility, Course History, Exam Scheduling, Review
• Sequential navigation (must complete each step before proceeding)
• Progress tracking based on required fields
• Draft saving support
• Cross-field date validation
• Conditional accommodation details

Complete Implementation

import 'package:vyuh_feature_forms/vyuh_feature_forms.dart';
import 'package:vyuh_feature_forms/dsl/form_builder.dart';

StepForm buildCertificationApplication() {
  return StepForm(
    title: 'Professional Certification Application',
    isSequential: true,
    trackProgress: ProgressTrackingType.required,
    allowDrafts: true,
    showStepStatus: true,

    steps: [
      _buildEligibilityStep(),
      _buildCourseHistoryStep(),
      _buildExamSchedulingStep(),
      _buildReviewStep(),
    ],
  );
}

Step 1: Eligibility

Form _buildEligibilityStep() {
  return FormBuilder(title: 'Eligibility')
    .description('Verify your eligibility for the certification program')

    // Personal Information
    .text('full_name', title: 'Full Legal Name')
      .required('Name is required')
      .minLength(2)
    .text('email', title: 'Email Address')
      .required('Email is required')
      .email('Please enter a valid email')

    .phone('phone', title: 'Phone Number')
      .required('Phone is required')


    // Professional Background
    .select('experience_level', title: 'Professional Experience')
      .option('entry', title: 'Entry Level (0-1 years)')
      .option('junior', title: 'Junior (1-3 years)')
      .option('mid', title: 'Mid-Level (3-5 years)')
      .option('senior', title: 'Senior (5-10 years)')
      .option('expert', title: 'Expert (10+ years)')
      .required('Please select your experience level')

    .select('education', title: 'Highest Education')
      .option('high_school', title: 'High School')
      .option('associate', title: 'Associate Degree')
      .option('bachelor', title: 'Bachelor\'s Degree')
      .option('master', title: 'Master\'s Degree')
      .option('doctorate', title: 'Doctorate')
      .required()


    // Employer (optional)
    .text('employer', title: 'Current Employer')
      .placeholder('Optional')

    .text('job_title', title: 'Job Title')
      .placeholder('Optional')


    // Terms
    .boolean('meets_prerequisites', title: 'I confirm I meet the minimum prerequisites')
      .required('You must confirm you meet prerequisites')

    .build();
}

Step 2: Course History

Form _buildCourseHistoryStep() {
  return FormBuilder(title: 'Course History')
    .description('Document your completed training and study hours')

    // Completed courses (multi-select)
    .select('completed_courses', title: 'Completed Courses')
      .option('FUND101', title: 'Fundamentals 101')
      .option('FUND102', title: 'Fundamentals 102')
      .option('ADV201', title: 'Advanced Concepts')
      .option('ADV202', title: 'Advanced Applications')
      .option('SPEC301', title: 'Specialization Track')
      .option('SPEC302', title: 'Specialization Project')
      .option('PRAC401', title: 'Practicum')
      .multiple()
      .required('Select at least one completed course')

    // Study hours
    .number('lecture_hours', title: 'Lecture Hours')
      .integerOnly()
      .required()
      .min(0)

    .number('lab_hours', title: 'Lab/Practice Hours')
      .integerOnly()
      .required()
      .min(0)

    .number('self_study_hours', title: 'Self-Study Hours')
      .integerOnly()
      .required()
      .min(0)


    // Total (formula)
    .formula('total_hours',
      title: 'Total Study Hours',
      expression: 'lecture_hours + lab_hours + self_study_hours')


    // Certifications held
    .text('existing_certifications', title: 'Existing Certifications')
      .multiline(3)
      .placeholder('List any relevant certifications you already hold')

    // Recommendation
    .text('recommender_name', title: 'Professional Reference Name')
      .required('A professional reference is required')

    .text('recommender_email', title: 'Reference Email')
      .required()
      .email()


    .build();
}

Step 3: Exam Scheduling

Form _buildExamSchedulingStep() {
  return FormBuilder(title: 'Exam Scheduling')
    .description('Schedule your certification examination')

    // Exam type
    .select('exam_format', title: 'Exam Format')
      .option('in_person', title: 'In-Person at Test Center')
      .option('online', title: 'Online Proctored')
      .required('Please select an exam format')

    // Test center (shown for in-person)
    .select('test_center', title: 'Test Center')
      .option('center_downtown', title: 'Downtown Testing Center')
      .option('center_university', title: 'University Campus')
      .option('center_tech', title: 'Tech Park Center')
      .showWhen(When.fieldEquals('exam_format', 'in_person'))
      .required()

    // Date selection
    .dateTime('preferred_date', title: 'Preferred Exam Date')
      .dateOnly()
      .required('Please select an exam date')

    .dateTime('alternate_date', title: 'Alternate Date')
      .dateOnly()


    // Time preference
    .select('time_preference', title: 'Time Preference')
      .option('morning', title: 'Morning (9:00 AM)')
      .option('afternoon', title: 'Afternoon (2:00 PM)')
      .required()


    // Accommodations
    .boolean('needs_accommodations', title: 'I need testing accommodations')
    .text('accommodation_details', title: 'Accommodation Details')
      .showWhen(When.fieldTrue('needs_accommodations'))
      .multiline(3)
      .required('Please describe the accommodations you need')
      .placeholder('Describe any accommodations needed (extended time, separate room, etc.)')

    // Special requests
    .text('special_requests', title: 'Special Requests')
      .multiline(2)
      .placeholder('Any other requests or notes')

    .build();
}

Step 4: Review & Submit

Form _buildReviewStep() {
  return FormBuilder(title: 'Review & Submit')
    .description('Please review your application and confirm')

    // Confirmation checkboxes
    .boolean('confirm_accuracy', title: 'I confirm all information provided is accurate and complete')
      .required('You must confirm the accuracy of your application')
    .boolean('accept_exam_policies', title: 'I accept the examination policies and code of conduct')
      .required('You must accept the exam policies')
    .boolean('accept_retake_policy', title: 'I understand the retake policy (90-day waiting period)')
      .required('You must acknowledge the retake policy')
    .boolean('accept_fees', title: 'I agree to the examination fee of \$250')
      .required('You must agree to the fee')

    // Digital signature
    .text('digital_signature', title: 'Digital Signature (Full Name)')
      .required('Please type your full name as a digital signature')
      .minLength(2)
    .dateTime('signature_date', title: 'Date')
      .dateOnly()
      .required()


    .build();
}

Usage

class CertificationPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final stepForm = buildCertificationApplication();

    return Scaffold(
      appBar: AppBar(title: Text('Certification Application')),
      body: vyuh.content.buildContent(context, stepForm),
    );
  }
}

Step Flow

What This Demonstrates

Feature	Usage
StepForm	4-step sequential wizard
Progress tracking	Required field completion tracking
Draft saving	allowDrafts: true for partial saves
Multi-select	Completed courses selection
Formula field	Total study hours computation
Conditional visibility	Test center for in-person, accommodations detail
Cross-field dates	Alternate date after preferred date
Boolean confirmations	Review step with required checkboxes
Secure patterns	Digital signature verification
Row layout	3-column study-hours layout with row item spans

Next Steps

• Enrollment Form -- Single-form example
• Evaluation Survey -- Slider-based survey
• Multi-Step Forms -- StepForm guide