MS Teams Avatar / Präsens

[stephan14x]

Hallo Zusammen,

hab mal eine ganz einfache Teams presence integration für die aktuelle Znuny 7.0.19 zusammengeschustert.

Umfang:

• Oben rechts neben den Agenten Initialen ist ein Login Button / die Teams Info des Agenten nach dem Login

• Im Ticket Zoom gibt es eine Anzeige des Kunden

• Bei den Ticket Artikeln wird statt des Avatars das Teams Profilbild samt Präsents Info angezeigt

• Immer wenn man auf eines der Profilbilder zeigt kommt eine Person Card

So schaut das aus:



Implementierung:

Das ganze läuft über das Microsoft Graph Toolkit und ein paar Änderungen an den Template Dateien.

• Im Entra ID eine App registrieren und TENANTID und CLIENTID notieren.

• Die Registrierung als single tenant app reicht

• Folgende Tempalte Dateien nach Custom kopieren

Code: Select all

mkdir -p /opt/znuny/Custom/Kernel/Output/HTML/Templates/Standard/AgentTicketZoom/ArticleRender/
cp /opt/znuny/Kernel/Output/HTML/Templates/Standard/HTMLHead.tt /opt/znuny/Custom/Kernel/Output/HTML/Templates/Standard/
cp /opt/znuny/Kernel/Output/HTML/Templates/Standard/Header.tt /opt/znuny/Custom/Kernel/Output/HTML/Templates/Standard/
cp /opt/znuny/Kernel/Output/HTML/Templates/Standard/AgentTicketZoom/TicketInformation.tt /opt/znuny/Custom/Kernel/Output/HTML/Templates/Standard/AgentTicketZoom/
cp /opt/znuny/Kernel/Output/HTML/Templates/Standard/AgentTicketZoom/ArticleRender/MIMEBase.tt /opt/znuny/Custom/Kernel/Output/HTML/Templates/Standard/AgentTicketZoom/ArticleRender/

Folgender Code kommt in den html head in der HTMLHead.tt z.B. ab Zeile 16
Das lädt das Graph Toolkit, hier müssen auch CLIENTID und TENANTID Eingetragen werden

Code: Select all

<script type="module">
    import { registerMgtComponents, Providers, Msal2Provider } from 'https://unpkg.com/@microsoft/mgt@4';    
    Providers.globalProvider = new Msal2Provider({
        clientId: 'CLIENTID',
        authority: 'https://login.microsoftonline.com/TENANTID'
    });    
    registerMgtComponents();
</script>

Weiter zur Header.tt, dort habe ich zwischen Zeile 22 und 23 folgendes eingefügt um den Login Button anzuzeigen:

Code: Select all

<li><mgt-login show-presence></mgt-login></li>

In der TicketInformation.tt habe ich in Zeile 22 das hier eingefügt um die Infos des Kunden anzuzeigen.

Code: Select all

<mgt-person person-query="[% Data.CustomerID | html %]" view="threelines" person-card="hover" show-presence></mgt-person>

Und zu guter Letzt die MIMEBase.tt, da habe ich den Inhalt des Avatar Bereichs ab Zeile 174 angepasst, deshalb der Codeblock vorher/nachher zum Vergleich.

Vorher / Original:

Code: Select all

                <div class="Avatar">

                    [% IF Config("Frontend::AvatarEngine") == 'Gravatar' && Data.SenderImage %]
                                                                                    
                                               
                        <div class="ArticleSenderImage">
                            <img src="[% Data.SenderImage | url %]" title="[% Data.From | html %]" />
                        </div>
                    [% ELSE %]
                        <div class="ArticleSenderInitials">
                            <span>[% Data.SenderInitials | html %]</span>
                        </div>
                    [% END %]
                </div>

Angepasst:

Code: Select all

                <div class="Avatar">         
                    [% email = Data.ArticleFields.Sender.Value | html %]
                    [% SET matched_email = email.match('([\\w\\.\\-]+@[\\w\\.\\-]+)') %]
                    [% IF matched_email.size > 0 %]
                        <div class="ArticleSenderImage">
                            <mgt-person person-query="[% matched_email.0 %]" person-card="hover" show-presence></mgt-person>
                        </div>
                    [% ELSE %]
                        <div class="ArticleSenderInitials">
                            <span>[% Data.SenderInitials | html %]</span>
                        </div>
                    [% END %]
                </div>

Sinnvoll wäre es natürlich als Paket das dann Gravatar ersetzt...
Wenn jemand was anderes in die Richtung 365 gebastelt hat und teilen möchte, gerne her damit.

Feedback ist immer willkommen.

Stephan

[zzz]

Hallo Stephan,

ich finde die Idee super!

Genau, paketieren wäre update-freundlicher.

Idealerweise über eine neue Engine und ohne das Überschreiben von bestehenden Dateien. Das Backend für Avatare ist leider nicht modular, weswegen letzteres etwas aufwendiger wäre. Zudem könnte man die Pflege der Entra-Konfiguration ins Backend verlagern (und sich ggf. sogar an die OAuth 2.0-Schnittstelle hängen). Ob das den Aufwand wert wäre, ist aber eine andere Frage

Das Bild in der Sidebar hätte ich jedoch in die Kundenbenutzer-Informationen gepackt.

Als Community-Projekt aber auch so gut zu gebrauchen!

Viele Grüße
Emin

[stephan14x]

Hallo Emin,

Ideen habe ich noch mehr, würde gerne eine Teams Termin Planung einbauen, entweder als eigene Aktion wie Notiz und Anruf usw. oder im Notiz Dialog integriert. Mal schauen was da geht, ich muss mich mal tiefer in die Backend Logik einarbeiten...

In wie weit man die OAuth2 Schnittstelle dafür verwenden kann weiß ich gerade nicht, die muss ich mir erst mal anschauen.
Ich vermute aber stark das diese Application Permissions verwendet und das geht mit Graph Toolkit erst mal nicht, da das komplett Clientseitig mit msal.js läuft und das unterstütz nur Delegated Permissions. Das wäre natürlich alles besser im Backend implementiert...

Ein wichtiger Punkt für mehr MS integration im Backend wäre eine Unterstützung für die Agent (und Customer) Anmeldung über Microsoft identity platform (Azure AD jetzt Entra ID), gibt es da schon irgendwo was?

Wo ich das in der Sidebar hin mache habe ich auch überlegt, inhaltlich wäre Kundeninformation der richtige Ort, ich wollte es aber im Blick habe und das macht einem die neue Skin etwas schwer, die ist mir mit dem Platz sehr großzügig.

Deine Modern Skin würde ich da bevorzugen, aber ich vermute die gibt es nicht für Znuny 7?

Stephan

[zzz]

Hallo Stephan,

Znuny verwendet für die Mails Microsoft Graph. Mit dem Toolkit habe ich bisher nicht gearbeitet; das ist aber ein guter Hinweis.

SSO für Agenten und Kunden funktioniert bei Microsoft Entra ID „ganz normal“ über SAML. Das wahrscheinlich bekannteste Modul für Apache wäre Mellon.

Den ModernSkin gibt es – zumindest als öffentliche Version – noch nicht für Znuny 7. Wir sind aktuell noch an einigen Feinheiten dran und werden wahrscheinlich noch etwas Zeit benötigen.

Halte die Community gerne auf dem Neuesten mit deinen Entwicklungen rund um Entra/Graph. Mich hat es schon inspiriert .

Viele Grüße
Emin