ĂÛ¶čÊÓÆ”

• Condition → Action (When/Then)

  code language-text
  WHEN Gross Salary > 50000 THEN Show "Additional Deduction"

  Best for conditional visibility and progressive disclosure.

• Action ← Condition (Set If/Only if)

  code language-text
  SET Taxable Income = Gross Salary - Deductions IF Deductions are applicable

  Best for calculations and data transformations.

• If → Then → Else (Alternate action)

  code language-text
  IF Income > 50000 THEN Show "High Income" fields ELSE Show "Standard Income" fields

  Best for branching logic and mutually exclusive flows.

• Condition: “Gross salary exceeds $50,000”
• Primary action: Show “Additional Deduction”
• Alternate action: Hide “Additional Deduction”
• Result: Users see only the fields that apply to them

Essential permissions and setup:

• AEM as a Cloud Service: Authoring access with form editing permissions
• Universal Editor: Installed and configured on your environment
• Rule Editor extension: Enabled via Extension Manager
• Form editing permissions: Ability to create and modify form components in Universal Editor

Verification steps:

1. Confirm you can access Universal Editor from your AEM Sites console
2. Verify you can create and edit form components
3. Check that the Rule Editor icon appears when selecting form components

Required knowledge and skills:

• Universal Editor proficiency: Experience creating forms with text inputs, dropdowns, and basic field properties
• Business logic understanding: Ability to define conditional requirements and validation rules for your specific use case
• Form component familiarity: Knowledge of field types (text, number, dropdown), properties (required, visible, read-only), and form structure

Optional for advanced usage:

• JavaScript fundamentals: Required only for creating custom functions (data types, functions, basic syntax)
• JSON understanding: Helpful for complex data manipulation and API integrations

Assessment questions:

• Can you create a basic form with text inputs and a submit button in Universal Editor?
• Do you understand when fields should be required vs optional in your business context?
• Can you identify which form elements need conditional visibility in your use case?

Important: The Rule Editor extension is not enabled by default in Universal Editor environments.

Activation steps:

1. Navigate to the Extension Manager in your AEM environment
2. Locate the “Rule Editor” extension in the available extensions list
3. Click Enable and confirm the activation
4. Wait for the system to refresh (may take 1-2 minutes)

Verification:

• After enabling, the Rule Editor icon appears when you select a form component:

Figure: Rule Editor icon appears when you select form components

To open the Rule Editor:

1. Select a form component in Universal Editor.
2. Click the Rule Editor icon.
3. The Rule Editor opens in a side panel.

Figure: Rule Editor interface for editing component rules

Rule Editor interface overview

Figure: Complete Rule Editor interface with numbered components

• Component title and rule type: Confirms the selected component and active rule type.

• Form Objects and Functions panel:

  • Form Objects: hierarchical view of fields and containers for referencing in rules
  • Functions: built-in math, string, date, and validation helpers

• Panel toggle: Show/hide the objects and functions panel to increase workspace

• Visual rule builder: Drag-and-drop, dropdown-driven rule composer

• Controls: Done (save), Cancel (discard). Always test rules before saving.

When a component already has rules, you can:

• View: See rule summaries and logic
• Edit: Modify conditions and actions
• Reorder: Change execution order (top to bottom)
• Enable/Disable: Toggle rules for testing
• Delete: Remove rules safely

• When: Primary rule for complex conditional behavior (Condition → Action ± Else)
• Hide/Show: Controls visibility based on a condition (progressive disclosure)
• Enable/Disable: Controls whether a field is interactive (for example, disable Submit until required fields are valid)

• Set Value Of: Auto-populate values (for example, dates, totals, copies)
• Clear Value Of: Remove data when conditions change
• Format: Transform display formatting (currency, phone, date) without altering stored values

• Validate: Custom validation logic, including cross-field checks and business rules

• Mathematical Expression: Compute values in real time (totals, tax, ratios)

• Set Focus: Move focus to a specific field (use sparingly)
• Set Property: Modify component properties dynamically (placeholder, options, etc.)

• Submit Form: Programmatically submit the form (only after validations pass)
• Reset Form: Clear and reset to initial state (confirm before use)
• Save Form: Save as draft for later (long forms, multi-session)

• Invoke Service: Call external APIs/services (handle loading and errors)
• Add/Remove Instance: Manage repeatable sections (for example, dependents, addresses)
• Navigate To: Route to other forms/pages (preserve data before navigation)
• Navigate Among Panels: Control wizard step navigation and skipping
• Dispatch Event: Trigger custom events for integrations or analytics

This example demonstrates conditional visibility and automatic calculations.

Figure: Tax calculation form with intelligent conditional fields

You will build a form that:

1. Adapts to user input by showing relevant fields
2. Calculates values in real time
3. Validates data to improve accuracy

• Rule 1: Conditional display

  code language-text
  WHEN Gross Salary > 50,000 THEN Show "Additional Deduction" ELSE Hide "Additional Deduction"

• Rule 2: Taxable Income calculation

  code language-text
  SET Taxable Income = Gross Salary - Additional Deduction (Only when Additional Deduction applies)

• Rule 3: Tax Payable calculation

  code language-text
  SET Tax Payable = Taxable Income × 10% (Simplified flat rate)

Objective: Build the base form with all fields and initial settings.

1. Open Universal Editor:

   • Navigate to AEM Sites console, select your page, click Edit
   • Ensure you have the Universal Editor properly configured

2. Add form components in this order:

   • Title (H2): “Tax Calculation Form”
   • Number Input: “Gross Salary” (Required: Yes, Placeholder: “Enter annual salary”)
   • Number Input: “Additional Deduction” (Required: No, Placeholder: “Enter additional deductions”)
   • Number Input: “Taxable Income” (Read-only: Yes)
   • Number Input: “Tax Payable” (Read-only: Yes)
   • Submit button: “Calculate Tax”

3. Configure initial field properties:

   • Hide “Additional Deduction” (set Visible: No in Properties panel)
   • Set “Taxable Income” and “Tax Payable” to Read-only: Yes

Figure: Initial form structure with basic components configured

Checkpoint: You should have a form with all required fields where “Additional Deduction” is hidden and calculated fields are read-only.

Goal: Show “Additional Deduction” field only when Gross Salary exceeds $50,000.

1. Select the Gross Salary field and click the Rule Editor icon

2. Create a new rule:

   • Click Create
   • Change rule type from “Set Value Of” to “Włó±đČÔ”

3. Configure the condition:

   • Select “is greater than” from the dropdown
   • Enter 50000 in the number field

4. Set the Then action:

   • Choose â€ÂÙłóŽÇ·É” from the Select Action dropdown
   • Drag or select “Additional Deduction” field from Form Objects

5. Add the Else action:

   • Click “Add Else Section”
   • Choose “HŸ±»ć±đ” from the Select Action dropdown
   • Select “Additional Deduction” field

6. Save the rule: Click Done

Goal: Automatically compute “Taxable Income” and “Tax Payable” based on user input.

Configure Taxable Income calculation:

1. Select “Taxable Income” field and open Rule Editor

2. Create Mathematical Expression:

   • Click Create → Select “Mathematical Expression”
   • Build expression: Gross Salary − Additional Deduction
   • Drag “Gross Salary” to first field
   • Select “MŸ±ČÔłÜČő” operator
   • Drag “Additional Deduction” to second field

3. Save: Click Done

Configure Tax Payable calculation:

1. Select “Tax Payable” field and open Rule Editor

2. Create Mathematical Expression:

   • Click Create → Select “Mathematical Expression”
   • Build expression: Taxable Income × 10 Ă· 100
   • Drag “Taxable Income” to first field
   • Select “Multiplied by” operator
   • Enter 10 as number
   • Click “Extend Expression”
   • Select “divided by” operator
   • Enter 100 as number

3. Save: Click Done

Verify your implementation by testing the complete flow:

1. Preview the form: Click the preview mode in Universal Editor

2. Test the conditional logic:

   • Enter Gross Salary = 30000 → “Additional Deduction” should remain hidden
   • Enter Gross Salary = 60000 → “Additional Deduction” should appear

3. Test calculations:

   • With Gross Salary = 60000, enter Additional Deduction = 5000
   • Verify Taxable Income = 55000 (60000 - 5000)
   • Verify Tax Payable = 5500 (55000 × 10%)

Figure: Completed tax calculator with conditional fields and automatic calculations

Success criteria: The form should dynamically show/hide fields and calculate values in real-time as users type.

Ideal scenarios for custom functions:

• Complex calculations: Multi-step computations not easily expressed in the Mathematical Expression rule
• Business-specific validations: Custom validation logic specific to your organization or industry
• Data transformations: Format conversions, string manipulations, or data parsing
• External integrations: Calls to internal APIs or third-party services (with limitations)

Benefits of custom functions:

• Reusability: Write once, use across multiple forms and rules
• Maintainability: Centralized logic that’s easier to update and debug
• Performance: Optimized JavaScript execution compared to complex rule chains
• Flexibility: Handle edge cases and complex scenarios not addressed by standard rules

File location: All custom functions must be defined in /blocks/form/functions.js in your Edge Delivery Services project.

Development workflow:

1. Function design

   • Use descriptive, action-oriented function names
   • Define clear parameter types and return values
   • Handle edge cases and invalid inputs gracefully

2. Implementation

   • Write clean, well-commented JavaScript
   • Include input validation and error handling
   • Test functions independently before integration

3. Documentation

   • Add comprehensive JSDoc comments
   • Include usage examples and parameter descriptions
   • Document any limitations or dependencies

4. Deployment

   • Export functions using named exports
   • Deploy to your project repository
   • Verify build completion before testing

Example implementation:

/**
 * Concatenates first and last name with proper formatting
 * @name getFullName
 * @description Combines first and last name, handles edge cases like missing values
 * @param {string} firstName - The person's first name
 * @param {string} lastName - The person's last name
 * @returns {string} Formatted full name or empty string if both inputs are invalid
 */
function getFullName(firstName, lastName) {
  // Handle null, undefined, or empty string inputs
  const first = (firstName || '').toString().trim();
  const last = (lastName || '').toString().trim();

  return `${first} ${last}`.trim();
}

/**
 * Calculates the number of days between two dates
 * @name days
 * @description Computes absolute difference in days, handles various date input formats
 * @param {Date|string} endDate - End date (Date object or ISO string)
 * @param {Date|string} startDate - Start date (Date object or ISO string)
 * @returns {number} Number of days between dates, 0 if inputs are invalid
 */
function days(endDate, startDate) {
  // Convert string inputs to Date objects
  const start = typeof startDate === 'string' ? new Date(startDate) : startDate;
  const end = typeof endDate === 'string' ? new Date(endDate) : endDate;

  // Validate date objects
  if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) {
    return 0;
  }

  // Calculate absolute difference in milliseconds, then convert to days
  const diffInMs = Math.abs(end.getTime() - start.getTime());
  return Math.floor(diffInMs / (1000 * 60 * 60 * 24));
}

// Export functions for use in Rule Editor
export { getFullName, days };

Figure: Adding custom functions to the functions.js file

Integration steps:

1. Add function to project

   • Create or edit /blocks/form/functions.js in your project
   • Include your function in the export statement

2. Deploy and build

   • Commit changes to your repository
   • Ensure the build process completes successfully
   • Allow time for CDN cache updates

3. Access in Rule Editor

   • Open Rule Editor for any form component
   • Select “Function Output” in the Select Action dropdown
   • Choose your custom function from the available functions list
   • Configure function parameters using form fields or static values

4. Test thoroughly

   • Preview the form to verify function behavior
   • Test with various input combinations including edge cases
   • Verify performance impact on form loading and interaction

Figure: Selecting and configuring custom functions in the Rule Editor interface

Best practices for function usage:

• Error handling: Always include fallback behavior for function failures
• Performance: Profile functions with realistic data volumes
• Security: Validate all inputs to prevent security vulnerabilities
• Testing: Create test cases covering normal and edge cases

• Minimize rule complexity; split large logic into small, focused rules
• Order rules by frequency (most common first)
• Keep rule sets per component manageable
• Prefer reusable custom functions over duplicating logic

• Provide clear validation and inline feedback
• Avoid jarring visual changes; use show/hide thoughtfully
• Test across devices and layouts

• Test with edge cases and known values
• Verify across browsers
• Document intent behind complex rules, not just mechanics
• Maintain a rule inventory for large forms
• Use consistent naming for components and rules
• Version custom functions and test in non-production environments

• Verify component names and references
• Check execution order (top to bottom)
• Validate conditions with known values
• Inspect browser console for blocking errors

• Review operators and grouping (AND/OR)
• Test expression fragments individually
• Confirm data types (numbers vs strings)

• Simplify deeply nested conditions
• Profile custom functions
• Minimize external calls inside rules
• Use specific selectors and references

• Confirm file path: /blocks/form/functions.js
• Ensure named exports are correct
• Confirm the build includes your changes
• Clear browser cache after deployment
• Validate parameter types and error handling

• Confirm the Rule Editor extension is enabled
• Select a supported component
• Use a supported browser (Chrome, Firefox, Safari)
• Verify you have required permissions

Important limitations

Summary

The Rule Editor in Universal Editor transforms static forms into intelligent, responsive experiences that adapt to user input in real-time. By leveraging conditional logic, automated calculations, and custom business rules, you can create sophisticated form workflows without writing application code.

Key capabilities you’ve learned:

• Conditional logic: Show and hide fields based on user input to create focused, relevant experiences
• Dynamic calculations: Automatically compute values (taxes, totals, rates) as users interact with the form
• Data validation: Implement real-time validation with clear, actionable feedback messages
• Custom functions: Extend capabilities with JavaScript for complex business logic and integrations
• Performance optimization: Apply best practices for maintainable, efficient rule development

Value delivered:

• Enhanced user experience: Reduce cognitive load with progressive disclosure and intelligent form flows
• Reduced errors: Prevent invalid submissions through real-time validation and guided input
• Improved efficiency: Automate calculations and data entry to minimize user effort
• Maintainable solutions: Create reusable, well-documented rules that scale across your organization

Business impact:

Forms become powerful tools for data collection, lead qualification, and user engagement. The Rule Editor enables non-technical authors to implement sophisticated business logic, reducing development costs while improving form completion rates and data quality.