Form Performance & Best Practices

As forms grow in size and complexity — with multiple listings, dynamic conditions, and remote data sources — it becomes critical to design them with performance and usability in mind.

This guide outlines common bottlenecks and offers best practices to keep your forms fast, user-friendly, and scalable.

Common Performance Bottlenecks

Issue	Cause / Description
Slow form loading	Too many widgets, unfiltered LOVs, or heavy Listings
UI freezing or lag	Listings with large datasets rendered at once
Long field response delay	JEXL expressions doing expensive computation on each keystroke
Over-fetching data	Forms loading unused or irrelevant entities

High-Impact Areas to Watch

1. Listings

• Avoid embedding more than 1–2 listings per page
• Paginate large result sets (default: 20–50 rows)
• Use filters early (e.g., by ID, owner, or status)
• Set readonly: true if the listing is purely informational

2. LOVs (Select Widgets)

• Never load unbounded LOVs (use defaultFilters)
• Prefer autocomplete over full dropdowns for long lists
• Consider setting lazyLoad: true if applicable
• Avoid chaining LOVs unless absolutely necessary

3. JEXL Logic

• Keep expressions short and efficient
• Use isNullOrEmpty(...) defensively to avoid crashes
• Avoid chaining deep $context.form.chars.field.subfield...
• Prefer calculating once and reusing (e.g., via a hidden calculated field)

4. Layout

• Use collapsible cards to delay rendering until expanded
• Split forms into tabs instead of long scrolls
• Avoid deep layout nesting (cards inside tabs inside columns...)

5. Default Values

• Avoid expensive default JEXL computations on load
• Pre-calculate where possible using backend (SpEL or process)

Best Practices Summary

Practice	Why it Matters
Use collapsible: true for long sections	Improves initial rendering performance
Limit total widgets per form	Reduces render tree depth and processing time
Filter LOVs using defaultFilters	Prevents loading massive result sets
Avoid heavy logic in hidden fields	Even hidden fields are evaluated unless handled conditionally
Reuse layout components where possible	Improves consistency and saves time

Pro Debugging Tips

• Enable the JEXL Debug Console to profile expression evaluations
• Use browser dev tools to monitor request payload size and render time
• Track user reports of slow UI and correlate with Listing volume or field count
• Log SpEL evaluations in automation paths to catch bottlenecks

Security & Stability

• Never expose sensitive field logic (e.g., roles, tokens) only on the frontend
• Validate form inputs server-side in workflows (SpEL or BPMN gateways)
• Use readonly and disabled fields for extra control — but don’t rely on them for access control

Bonus: Design for Scale

• Build templates: Create reusable layout blocks
• Modularize: Use tabs for form segmentation (Main, Advanced, SLA, etc.)
• Test under realistic data sizes (customers with 1000+ tickets, etc.)
• Involve QA early in form design for validation