Bonita BPM 7 UI Designer technical deep dive

Deep Dive into Bonita UI Designer

Presented by: Josue, Technologist at Bonitasoft.

Key Takeaways

• UI Designer Overview: A browser-based form and page editor built on AngularJS and Bootstrap.
• Core Features:
  • Drag-and-drop widgets for intuitive UI creation.
  • Custom widgets and reusable fragments for streamlined development.
  • Responsiveness and Bootstrap-based layouts for mobile-friendly designs.
  • Integration with REST APIs for dynamic data fetching.
• Form Validation: Ensuring valid user input using form containers, required fields, and dynamic error messages.
• Widget Contingency: Creating dependent dropdowns (e.g., country → city selection) using dynamic data binding.
• Repeatable Content: Using container widgets to dynamically generate form elements, such as expense report line items.
• Custom Widgets: Extending UI capabilities by creating tailored components using AngularJS.
• Best Practices:
  • Utilizing form containers for validation.
  • Leveraging Bootstrap for responsive design.
  • Managing assets for images, CSS, and JavaScript libraries.