51黑料不打烊

• 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: 鈥淕ross salary exceeds $50,000鈥�
• Primary action: Show 鈥淎dditional Deduction鈥�
• Alternate action: Hide 鈥淎dditional 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 鈥淩ule 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): 鈥淭ax Calculation Form鈥�
   • Number Input: 鈥淕ross Salary鈥� (Required: Yes, Placeholder: 鈥淓nter annual salary鈥�)
   • Number Input: 鈥淎dditional Deduction鈥� (Required: No, Placeholder: 鈥淓nter additional deductions鈥�)
   • Number Input: 鈥淭axable Income鈥� (Read-only: Yes)
   • Number Input: 鈥淭ax Payable鈥� (Read-only: Yes)
   • Submit button: 鈥淐alculate Tax鈥�

3. Configure initial field properties:

   • Hide 鈥淎dditional Deduction鈥� (set Visible: No in Properties panel)
   • Set 鈥淭axable Income鈥� and 鈥淭ax Payable鈥� to Read-only: Yes

Figure: Initial form structure with basic components configured

Checkpoint: You should have a form with all required fields where 鈥淎dditional Deduction鈥� is hidden and calculated fields are read-only.

Goal: Show 鈥淎dditional 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 鈥淪et Value Of鈥� to 鈥淲丑别苍鈥�

3. Configure the condition:

   • Select 鈥渋s 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 鈥淎dditional Deduction鈥� field from Form Objects

5. Add the Else action:

   • Click 鈥淎dd Else Section鈥�
   • Choose 鈥淗颈诲别鈥� from the Select Action dropdown
   • Select 鈥淎dditional Deduction鈥� field

6. Save the rule: Click Done

Goal: Automatically compute 鈥淭axable Income鈥� and 鈥淭ax Payable鈥� based on user input.

Configure Taxable Income calculation:

1. Select 鈥淭axable Income鈥� field and open Rule Editor

2. Create Mathematical Expression:

   • Click Create 鈫� Select 鈥淢athematical Expression鈥�
   • Build expression: Gross Salary 鈭� Additional Deduction
   • Drag 鈥淕ross Salary鈥� to first field
   • Select 鈥淢颈苍耻蝉鈥� operator
   • Drag 鈥淎dditional Deduction鈥� to second field

3. Save: Click Done

Configure Tax Payable calculation:

1. Select 鈥淭ax Payable鈥� field and open Rule Editor

2. Create Mathematical Expression:

   • Click Create 鈫� Select 鈥淢athematical Expression鈥�
   • Build expression: Taxable Income 脳 10 梅 100
   • Drag 鈥淭axable Income鈥� to first field
   • Select 鈥淢ultiplied by鈥� operator
   • Enter 10 as number
   • Click 鈥淓xtend Expression鈥�
   • Select 鈥渄ivided 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 鈫� 鈥淎dditional Deduction鈥� should remain hidden
   • Enter Gross Salary = 60000 鈫� 鈥淎dditional 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鈥檚 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 鈥淔unction 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鈥檝e 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.