Bridging Bryntum JavaScript to OS Components

Elevate Your OutSystems UI: Bridging Bryntum JavaScript to OS Components

1. September 2025
Júlio Pereira
OutSystems Developer in UDDAN
Live in Portugal
26 Years

2. 3
Table of contents
01 What is Bryntum?
02 Bryntum Gantt
03 Bryntum Scheduler Pro
04 First versions of Bryntum in O11
05 Bryntum in O11
06 Bryntum in ODC
07 Demo Bryntum in OutSystems

3. What is Bryntum?
Júlio Pereira 16/09/2025

4. What is Bryntum
●Company that develop UI components
●Based in Stockholm, founded in 2009
●25+ employees
●UI components for over 5000 companies in 80+ countries
●Samsung, Apple, Intel, BMW, Netflix, etc …
5

5. What is Bryntum
●6 UI components:
○Gantt*
○Scheduler
○Scheduler Pro*
○Grid
○Calendar
○Task Board
6

6. What is Bryntum
●UI componentes easy to integrate with:
○JavaScript
○Vue
○Angular
○React
○Salesforce
●And what about OutSystems?
7

7. Bryntum Gantt
Júlio Pereira 16/09/2025

8. Bryntum Gantt
●“The fastest JS Gantt chart”
○Performance-optimized, fully customizable Gantt chart
●“Fully flexible customization”
●“The world’s most flexible Gantt chart”
○A Gantt chart encapsulates an enormous amount of complexity.
9

9. Bryntum Gantt
●“Best-in-class scheduling engine”
○The Gantt engine efficiently handles asynchronous scheduling for any number of tasks
●“Customizable task editor and menu”
○The built-in task editor is made to be easily extended and customized.
●“Integrations and exports”
○integrates with other tools and offers versatile export options
10

10. Bryntum Gantt
●https://bryntum.com/products/gantt/examples/
11

11. Bryntum Scheduler Pro
Júlio Pereira 16/09/2025

12. Bryntum Scheduler Pro
●“A professional scheduling component”
○JavaScript UI component that helps you plan with precision by accounting for resource
availability, dependencies, and constraints
●“Avoid over-allocating your resources”
●“Customize task editing”
13

13. Bryntum Scheduler Pro
●https://bryntum.com/products/schedulerpro/examples/
14

14. First versions of Bryntum in O11
Júlio Pereira 16/09/2025

15. First versions of Bryntum in O11
●3 Application
○Bryntum Core
○Bryntum Gantt
○Bryntum Scheduler Pro
●Bryntum Core
○Core
○Core_Library
○Integrations
○Theme
○Component_BL
16

16. First versions of Bryntum in O11
●Bryntum Gantt
○Gantt
○Library
●Bryntum Scheduler Pro
○Scheduler Pro
○Library
17

17. First versions of Bryntum in O11
●Extensive JS Files
●Complexe OS Actions
●Extensive number of Client and Server actions
●A lot of static entities
18

18. First versions of Bryntum in O11
●Too complex to maintain
●Too complex to implement
●Too complex to explain
19

19. First versions of Bryntum in O11
●Let’s take a look in first implementation of Brynyum in O11!
20

20. Bryntum in
O11
Júlio Pereira 16/09/2025

21. Bryntum in O11
●Now we have clear versions of the Gantt and the Scheduler Pro
●Only 2 Applications
○Bryntum Gantt
○Bryntum Scheduler Pro
●15 Client Actions (1 per Event Handle)
○We can add more if we want
●5 Static Entities
22

22. Bryntum in O11
●Simple Client Actions
●Simple Additional JS and easy to maintain
○The only JS that we need to change if when we want to add a new event handles
23

23. Bryntum in O11
●Let’s take a look on this new and awesome implementation of Bryntum in O11!
24

24. Bryntum in ODC
Júlio Pereira 16/09/2025

25. Bryntum in ODC
●Since the Gantt and Scheduler Pro was a JS component, they work for both O11 and ODC.
●Only small changes to work in ODC, but only in OutSystems logic
●Same events, static entities and JS.
26

26. Demo Bryntum in
OutSystems
Júlio Pereira 16/09/2025

27. Demo Bryntum in OutSystems
●Gantt
○https://gsuit-dev.outsystemscloud.com/BryntumGanttDocumentation/?_ts=63893122886403728
6
●Scheduler Pro
○https://gsuit-dev.outsystemscloud.com/BryntumDocumentation/SchedulerProDocumentation
28

28. Thank You
Júlio Pereira
16/09/2025

29. Question?
Júlio Pereira
16/09/2025

30. Bryntum in a real use case
●Gantt with a lot of tasks
●A lot of new fields in the tasks
●Need to customize task edit, grid, and the gantt itself
31