Modale Dialoge in SharePoint Add-Ins öffnen

SharePoint stellt über JavaScript unter anderen die Möglichkeit zur Verfügung Dialoge mithilfe der JavaScript API zu öffnen. Verwendet man jedoch SharePoint Add-Ins stellt einen dies vor neue Herausforderungen. Da SharePoint Add-Ins über ein iFrame eingebunden werden ist es nicht möglich den Dialog direkt zu öffnen. In dem Fall würde der Dialog nur innerhalb von dem iFrame geöffnet werden und nicht im Kontext der aktuellen Seite. Um sicherzustellen, dass ein Dialog über das iFrame hinaus dargestellt werden kann muss dieser im Kontext der aktuellen Seite geöffnet werden. Dies ist mithilfe von JavaScipt Post Messaes möglich.

Für ein SharePoint Add-In bedeutet dies, dass neben dem Add-In auch eine JavaScript Funktion benötigt wird. Die JavaScript Funktion wird im Kontext von dem Hostweb ausgeführt und nimmt die Anfragen von dem iFrame entgegen. Diese Funktionalität muss mithilfe einer CustomAction im Hostweb bereitgestellt werden. Die Anfragen von dem iFrame können über Post Messages entgegengenommen werden.

Der folgende Codeausschnitt zeigt die Funktionalität die innerhalb der Custom Action im Hostweb benötigt wird.

//Alle Browser und ab Internet Explorer 9
if (typeof window.addEventListener != 'undefined') {

window.addEventListener('message', AppPostMsgHandler, false);
}
//Internet Explorer 8 und älter
else if (typeof window.attachEvent != 'undefined') {

window.attachEvent('onmessage', AppPostMsgHandler);
}

function AppPostMsgHandler(e) {
var messageData = e.data;
if (messageData.type != null) {
if (messageData.type == "OpenDialog") {
SP.UI.ModalDialog.showModalDialog(messageData.options);
}
}
}

Innerhalb von dem Add-In kann die zuvor erstellte Funktion über den folgenden Code ausgeführt werden:

function openDialog(pageUrl, popupTitle, width, height) {
var options, message;
options = { url: pageUrl,
title: popupTitle,
width: width,
height: height};
message = { type: "OpenDialog", options: options };
var target = parent.postMessage ? parent :
(parent.document.postMessage ? parent.document : undefined);
target.postMessage(message, '*');
}