Diagrams
Simplified Integration
For simple operations when there is no need for external backend:
Advanced Integration
Sequence Diagrams
 | The sequences below are demonstrating general (recommended) sequence of operations. In certain cases, the real implementation can deviate from this workflow. |
General Workflow
Details:
1. User navigates to the Document View of a tracker.
◦ On the Document View, the External Widget can be displayed on the right hand side side-panel.
2. Document View renders the IFrame.
◦ The External Widget is encapsulated into an IFrame.
3. The IFrame invokes the viewUrlof the widget.
◦ The IFrame tries to load the widget UI from the viewURL provided during the widget configuration on Codebeamer.
4. External widget instantiation
5. Get Authentication token
6. Authentication token
7. Get Config
8. External Widget Config
9. Get Base URL
10. Rest API V3 URL
11. Set Widget Height
12. Widget Backend initialization
13. Backend Instance
14. Get Selected Item
15. Item Id
16. Get Item details
17. Get Item details from Codebeamer
18. Item details
19. Additional calculations / External Service calls
20. Item details
21. Result Widget HTML
◦ The widget HTML is filled with the corresponding item details based on the needs.
22. Display Document View
◦ The user can see the correctly filled External Widget for the selected item on the right side-panel.
Selected Item Has Been Changed on Codebeamer
| | Pre-condition: The user is on the Document View page of a tracker item. |
Use Case: The user changes the selected item, for example, on the Trackers Dashboard, thus the External Widget content shall be updated.
Details:
1. Widget creates a callback to be notified about Item selection changes
2. Widget registers the callback on the CB Frontend
3. User changes the Item selection
4. The CB Frontend notifies the External Widget through the registered callback
5. Registers new Item Id internally
◦ Modifies the selected Item Id stored on widget side.
6. Get Item details
7. Get Item details from CB
8. Item details
9. Additional calculations / External Service calls
◦ The widget backend can make additional operations; it can use its own database or even invoke external services which could be necessary for the External Widget operations.
10. Item details
11. Updated Widget HTML
◦ The widget HTML is changing based on the changed Item details.
12. Display updated Document View page
◦ The user can see the updated External Widget Content belongs to the selected Item on CB.
Reload an item in CB
Use Case: The user modifies some property of an item on the External Widget UI. This modification shall be updated in CB.
Details:
1. User makes Item modifications on External Widget.
◦ External widgets can be used for Item updates also. Theoretically, everything is possible which is supported by the Rest API V3.
2. Modification request
◦ Modification request sent from the widget frontend to the widget backend (e.g., POST HTTP request).
3. Corresponding update method
◦ The Backend shall invoke the corresponding update/... method on the Swagger client (which will invoke the corresponding Rest API V3 endpoint).
4. Update result
◦ The update result is the same as in case of the Swagger Client. It is up to the External Widget implementation, how to handle and display a failed update for example.
5. Additional calculations / External Service calls
◦ The widget backend can make additional operations, it can use its own database or even invoke external services which could be necessary for the External Widget operations.
◦ For example, in case of a successful update, the same modifications can be done in different external systems or in its own databases.
6. Result of the update
◦ The backend of the widget notifies the frontend about the update result.
7. Reload Item request
◦ Based on the update result, the External Widget can request an Item reload from the CB UI.
8. Reload Item on CB UI
◦ If the given page supports this Item reload functionality, CB reloads the given item from the DB.
9. Refresh Document View with updated Item
◦ The user can see the modifications done on the External Widget in the CB application.
External Widget Deployment
• In theory, the External widget can be any external web application from the internet which can be included into an IFrame with its URL.
• The current approach for the External Widget deployment is a separate docker container, therefore, every External Widget have its own lightweight docker container.
Demo applications
Angular application
Typescript application
Javascript application