Vyuh CDX

Appearance

Field Configuration ​

This guide covers detailed configuration for each field type in the context of an LMS (Learning Management System).

Text Fields ​

Student Name ​

dart
.text('student_name', title: 'Full Name')
  .required('Name is required')
  .minLength(2, message: 'Name must be at least 2 characters')
  .maxLength(100)
  .placeholder('Enter your full name')
  .help('As it appears on your official documents')

Course Description (Multiline) ​

dart
.text('description', title: 'Course Description')
  .multiline(5)
  .maxLength(2000)
  .placeholder('Describe the course content and objectives')
  .help('Markdown formatting is supported')

Password Field ​

dart
.text('password', title: 'Password')
  .secure()
  .required()
  .minLength(8, message: 'Password must be at least 8 characters')
  .pattern(
    r'^(?=.*[A-Z])(?=.*\d)',
    message: 'Must contain uppercase letter and number',
  )

Formatted Input (Student ID) ​

dart
.text('student_id', title: 'Student ID')
  .mask('####-####-####')
  .required()
  .identifier('Must be a valid student ID format')

Number Fields ​

Capacity ​

dart
.number('max_students', title: 'Maximum Students')
  .integerOnly()
  .required()
  .range(min: 1, max: 500, message: 'Must be between 1 and 500')

Credit Hours ​

dart
.number('credit_hours', title: 'Credit Hours')
  .decimal()
  .required()
  .min(0.5, message: 'Minimum 0.5 credit hours')
  .max(12, message: 'Maximum 12 credit hours')

Select Fields ​

Course Level ​

dart
.select('level', title: 'Course Level')
  .option('beginner', title: 'Beginner')
  .option('intermediate', title: 'Intermediate')
  .option('advanced', title: 'Advanced')
  .required()

Department (Grouped Options) ​

dart
.select('department', title: 'Department')
  .optionGroup('Sciences', [
    SelectOption(value: 'cs', title: 'Computer Science'),
    SelectOption(value: 'math', title: 'Mathematics'),
    SelectOption(value: 'physics', title: 'Physics'),
  ])
  .optionGroup('Humanities', [
    SelectOption(value: 'english', title: 'English'),
    SelectOption(value: 'history', title: 'History'),
  ])
  .required()

Prerequisites (Multi-Select) ​

dart
.select('prerequisites', title: 'Prerequisites')
  .option('CS101', title: 'Intro to CS')
  .option('CS201', title: 'Data Structures')
  .option('MATH101', title: 'Calculus I')
  .option('MATH201', title: 'Linear Algebra')
  .multiple()
  .help('Select all that apply')

Boolean Fields ​

Enrollment Options ​

dart
.boolean('is_active', title: 'Active Enrollment')
  .value(true)  // Default to true
  .help('Inactive enrollments will not appear in the student portal')

.boolean('accept_terms', title: 'I accept the terms and conditions')
  .required('You must accept the terms')

DateTime Fields ​

Date Only ​

dart
.dateTime('start_date', title: 'Course Start Date')
  .dateOnly()
  .required()

Time Only ​

dart
.dateTime('class_time', title: 'Class Time')
  .timeOnly()
  .required()

Date and Time ​

dart
.dateTime('exam_datetime', title: 'Exam Date & Time')
  .dateAndTime()
  .required()

Slider Fields ​

Rating ​

dart
.slider('satisfaction_rating', title: 'Overall Satisfaction',
  min: 1, max: 5, divisions: 4)
  .help('1 = Very Unsatisfied, 5 = Very Satisfied')

Progress Percentage ​

dart
.slider('completion_percentage', title: 'Completion',
  min: 0, max: 100, divisions: 20)

Phone Number Fields ​

dart
.phone('emergency_contact', title: 'Emergency Contact')
  .required()
  .placeholder('+1-555-0100')
  .help('Include country code')

File and Image Fields ​

Document Upload ​

dart
.file('transcript', title: 'Upload Transcript')
  .required()
  .help('PDF, DOC, or DOCX format. Maximum 10MB.')

Profile Photo ​

dart
.image('profile_photo', title: 'Profile Photo')
  .help('Square image recommended, at least 200x200 pixels')

Formula Fields ​

Total Cost Calculation ​

dart
.formula('total_cost',
  title: 'Total Cost',
  expression: 'base_fee * (1 + tax_rate / 100)')

Reference Fields ​

Instructor Selection ​

dart
.reference('instructor_id', title: 'Instructor')
  .required()
  .help('Select the lead instructor for this course')

Layout Patterns ​

Two-Column Layout ​

dart
.text('first', title: 'First Name')
.text('last', title: 'Last Name')

Three-Column Layout ​

dart
.text('city', title: 'City')
.select('state', title: 'State')
.text('zip', title: 'ZIP Code')

Mixed Widths ​

dart
.text('address', title: 'Street Address')  // full width (12)
.text('city', title: 'City')
.select('state', title: 'State')
.text('zip', title: 'ZIP')

Next Steps ​