#dachnug50 | Integration eines Visual Collaboration Tools inn HCL Connections - Visuelle Zusammenarbeit als Bestandteil eines Enterprise Collaboration Systems | Leonardo Malzacher & Simon Meier

1. Integration eines Visual Collaboration
Tools in HCL Connections
Visuelle Zusammenarbeit als
Bestandteil eines Enterprise
Collaboration Systems
Leonardo Malzacher und Simon Meier
{lmalzacher,simeier}@uni-koblenz.de

2. CEIR Research Team
Enterprise Information Management Business Application Systems
Petra Schubert
Professor
Director of CEIR
Business Software
Susan Williams
Professor
Director of CEIR
Social Informatics
Julian Mosen
PhD Candidate
Research Assistant
Social Documents
Söhnke Grams
Postdoc Reseracher
Manager UCT
Benefits of ECS
Sebastian Bahles
Research Assistant
Workspace
Management
Lucas Graf
Student Assistant
Domino Development
Martin Just
PhD Candidate
Research Associate
Cross-System Analysis
Simon Meier
PhD Candidate
Research Assistant
Business Objects
Florian Schumacher
Student Assistant
Content Management
Julia Mannebach
Student Assistant
Domino Development
Jens Alberts
PhD Candidate
Research Assistant
Collaboration Platform
Cornelia Mc Stay
Secretary
Team Assistant
Leonardo Malzacher
Student Assistant
Information Integration
Jennifer Gerbl
PhD Candidate
Research Assistant
Visual Collaboration
Systems

3. Leonardo Malzacher, Simon Meier 4
Agenda
1 Visual Collaboration Tools
Integrationsmöglichkeiten von ausgewählten Visual Collaboration Tools
2
Vergleich der Visual Collaboration Tool APIs
3
Tech Stack
4
Widget-Konfiguration
5
Integration in Connections
6
Verstecken des Miro-Widgets
7
API-Anfragen an Miro
8
Umgesetzte Integration
9
Live Demo
10

4. Leonardo Malzacher, Simon Meier 5
Visual Collaboration Tools
Definition Kernkomponente: Digitales Whiteboard (Board)
Verwalten und Bearbeiten der Boards innerhalb eines
Arbeitsbereichs
Ermöglichen synchrone und asynchrone
Zusammenarbeit
Innerhalb der Boards: Kollaboration mittels
verschiedener visueller Elemente
Erweiterte Funktionalität (Audio- Videochats,
Kommentarfunktion, Umfragen und Zeitgeber)
Entstehung von Anwendungen für die visuelle Zusammenarbeit: Visual Collaboration Tools

5. Leonardo Malzacher, Simon Meier 6
Visual Collaboration Tools (Miro)

6. Leonardo Malzacher, Simon Meier 7
Visual Collaboration Tools (Miro)

7. Leonardo Malzacher, Simon Meier 8
Integrationsmöglichkeiten von ausgewählten Visual Collaboration Tools
Anbieter Board-Einbettung API Webhook IdP Support SAML Besonderheiten
Miro Editieren
✓ ✓
✓ (Okta | Azure AD | OneLogin | ADFS | Jumpcloud | Google | Facebook | Apple |
Slack)
✓
Node.js Bibliothek für API-Nutzung | BoardsPicker | WEB SDK
Mural Editieren ✓ – ✓ (Azure AD | Okta) ✓ Canvas embed SDK | Account chooser SDK | Mural picker SDK
Lucidspark – ✓ – ✓ (Okta | OneLogin | Ping | ADFS | Centrify | Shibboleth | Google) ✓
Stormboard – ✓ – ✓ (Active Directory | Okta | OneLogin| AWS) ✓
Bluescape Editieren ✓ – ✓ (Okta | ADFS | Ping Identity | F5 | Google) ✓
Limnu Editieren in WordPress ✓ – ✓ (Google) –
iObeya – ✓ – ✓ (Azure AD | Google | IBM Verify | Okta | OneLogin) ✓
ConceptBoard Editieren – – ✓ (Azure AD | Google | Facebook) ✓
Creately Statisch – – ✓ (OneLogin | Okta | Azure AD | Google) ✓
Draft Editieren – – ✓ ✓
Klaxoon – – – ✓ (Azure AD | Google | Apple | Facebook | LinkedIn) ✓
Explain Everything – – – ✓ (Google) –
DEON – ✓ – – –
AYOA – – – ✓ (Google | Facebook | Apple) –
Sketchboard Editieren in Notion – – ✓ (Okta | Goolge| Webex | Office 365) ✓
Collusion Statisch – – – –
Collaboard – – – ✓ (ADFS | Google | Apple | Azure AD) ✓
Eraser Editieren – – ✓ (Google | Microsoft) –
Marimba Editieren – – ✓ (Google) –
Invision Freehand Editieren – – ✓ (ADFS | Okta | OneLogin | Azure AD) ✓

8. Leonardo Malzacher, Simon Meier 9
Vergleich der Visual Collaboration Tool APIs
Die Bedingung wird erfüllt
Die Bedingung wird nicht erfüllt
Diese Komponente existiert nicht
✓
⒳

9. Leonardo Malzacher, Simon Meier 10
Tech Stack

10. Leonardo Malzacher, Simon Meier 11
Widget-Konfiguration
/opt/HCL-Shared/connections/customization/communitiesAdmin/widgets-config.xml

11. Leonardo Malzacher, Simon Meier 12
Integration in Connections
https://addons.uniconnect.de/config.nsf/miroWidget.xml

12. Leonardo Malzacher, Simon Meier 13
Integration in Connections
Lade die benötigten Parameter aus Connections (Widget-config)
Erstelle ein Community-JSON-Objekt aus den Daten
Lade die Mitglieder der Community
Erstelle ein User-JSON-Objekt des anfragenden Users aus den Daten
Arbeite mit dem authentifizierten User weiter

13. Leonardo Malzacher, Simon Meier 14
Verstecken des Miro-Widgets

14. Leonardo Malzacher, Simon Meier 15
Verstecken des Miro-Widgets via Customizer
/opt/HCL-Shared/pv-connections/customizations/externalAppEnabler/modifier.js
https://www.uniconnect.de/appreg/apps

15. Leonardo Malzacher, Simon Meier 16
API-Anfragen an Miro
Typ Anfrage Beschreibung URL
POST Create board Erstellt ein Board mit dem
angegebenen Namen, der
Beschreibung und den
Freigabebestimmungen.
https://api.miro.com/v2/boards
PUT Copy board Erstellt eine Kopie eines
vorhandenen Boards. Der Name, die
Beschreibung und die
Freigabebestimmungen können
dabei verändert werden.
https://api.miro.com/v2/boards
GET Get specific board Gibt Informationen über das Board
anhand der board_id zurück.
https://api.miro.com/v2/boards/{board_id}
PATCH Update board Ermöglicht es den Namen, die
Beschreibung und die
Freigabebestimmungen anhand der
board_id zu ändern.
https://api.miro.com/v2/boards/{board_id}
DELETE Delete board Ermöglicht es ein Board anhand der
board_id zu löschen.
https://api.miro.com/v2/boards/{board_id}

16. Leonardo Malzacher, Simon Meier 17
Umgesetzte Integration

17. Leonardo Malzacher, Simon Meier 18
Demo

18. Leonardo Malzacher, Simon Meier 19
Fragerunde
Noch Fragen?

19. University of Koblenz | Institute for Information Systems Research | Center for Enterprise Information Research
Thank you for your attention!
Student Assistant
Center for Enterprise Information Research
University of Koblenz
lmalzacher@uni-koblenz.de
Researcher
Business Application Research Group
University of Koblenz
simeier@uni-koblenz.de
Leonardo Malzacher Simon Meier