Nach einer längeren Preview-Phase von 6 Monaten veröffentlichte Microsoft Anfang Sommer 2017 die Production Ready Variante der JavaScript APIs zu den Visio Services, vorerst auf ihrer Cloud-Plattform Office 365. Damit ist es nun nicht nur möglich, Visio-Dokumente anzuzeigen, sondern diese auch kontextuell und interaktiv zu verwenden. Für die Bearbeitung von Visio-Dokumenten ist jedoch nach wie vor die Desktop-Anwendung zu verwenden.
Die Lücke schliessen
Visio ist Microsofts Standardlösung für Prozess-, Fluss-, Ablaufdiagramme sowie für alle anderen Arten von schematischen Diagrammen und Zeichnungen. Ursprünglich ein eigenes Unternehmen, wurde es im Jahr 2000 von Microsoft übernommen. Visio gehört im weitesten Sinne zur Office-Palette, muss jedoch separat lizenziert werden. Mittels Visio-Service in der Cloud (Office 365) oder On-Premise (SharePoint) können Visio-Dateien auch Nutzern zur Verfügung gestellt werden, welche kein Visio auf ihrem lokalen Rechner installiert haben. Während andere Teile der Office Suite (wie z.B. Word) die APIs zur Interaktion mit Office-Dokumenten oder gar deren Bearbeitung im Web-Browser schon länger zur Verfügung stellen, waren diese bisher bei Visio nicht vorhanden.
Diese APIs sind Schnittstellen, welche einen direkten Zugriff auf ein bestimmtes Programm zur Verfügung stellen. Es wird ermöglicht, auf Services im Internet zuzugreifen, Daten zu beziehen, zu modifizieren oder zu verändern. Mit der Veröffentlichung der API kann Visio im Bezug auf den Funktionsumfang zu seinen Produkt-Geschwistern etwas aufschliessen.
Es geht vorwärts
Die Einbettung von Visio zur simplen Darstellung in den SharePoint Plattformen unserer Kunden – ob Cloud oder On Premise – funktioniert gut, nur kann damit keine Interaktion erzeugt werden. Diese wird jedoch vermehrt von Kunden gefordert. Wir sind erfreut, dass Microsoft mit den Visio Service APIs endlich versucht, diese Lücke zu schliessen.
Die nun veröffentlichten Schnittstellen bieten inbesondere auch bei QM-Portalen basierend auf SharePoint, in denen häufig Visio-Diagramm für die Visualisierung von Prozessen benutzt werden, einen echten Mehrwert.
Microsoft hat mit der Live-Schaltung der APIs beispielsweise einen Use Case veröffentlicht, der die Kommentare eines Visio-Dokuments in einer Kommentarleiste anzeigt. Ein weiteres mögliches Szenario ist die Darstellung von Details eines Diagrammbestandteils als zusätzliche Information in einem Tooltipp oder einem Infopanel neben dem Diagramm.
Die Redmonder setzen hierbei ganz auf die Community, welche die Schnittstellen weiterentwickeln und neue Ideen einfliessen lassen soll, weshalb die API auch als Open-Source-Lösung frei zur Verfügung steht. Um die APIs nutzen zu können, muss aber natürlich Office 365 oder SharePoint lizenziert werden. Dennoch haben die letzten Projekte wie z.B. PnP gezeigt, dass sich dies durchaus auszahlt. Die Qualität und Stabilität der Releases hat seit Microsofts Eintritt ins Cloud Business und dem stärkeren Einbezug der Nutzer ihrer Produkte als Mitentwickler markant zugenommen.
Neue Funktionen kommen laufend hinzu
Trotz dieser Veröffentlichung – die Möglichkeiten der Schnittstellen sind nach wie vor begrenzt. Ist aktuell die Nutzung nur auf SharePoint und „read only“ möglich, verspricht Microsoft in Zukunft, die APIs auf der ganzen Office 365 Plattform zur Verfügung zu stellen und auch die Bearbeitung via API zu ermöglichen. Der Zeitpunkt hierzu wurde noch nicht bekannt gegeben. Microsoft verfolgt auf seiner Cloud-Plattform seit längerem den Ansatz, Produkte laufend zu erweitern. Auch ist die Web-Version keinesfalls ein Ersatz zu den Desktop-Produkten. Dies soll aber auch gar nicht so sein, denn primär sollen die Schnittstellen dazu dienen, Endbenutzer besser, effizienter und interaktiver bei ihrer täglichen Arbeit zu unterstützen.
Anwendungsbeispiel: Shape Daten anzeigen
Es werden über den ShapeSelection Changed Event die Shape Daten geladen und in einem HTML Container angezeigt.
Shape Daten in Visio-File:
Anzeige Info HTML auf Page:
<div id="infoContainer" />
<script src='https://appsforoffice.microsoft.com/embedded/1.0/visio-web-embedded.js' type='text/javascript'></script>
<script type="text/javascript" src="https://xxxxx.sharepoint.com/sites/visioAPI/SiteAssets/ioz.visiotest.js"></script>
Iframe Container für Visio-File anzeigen:
<div id="visioFrame" style="width:100%; height:800px;" />
Script:
var textArea = document.getElementById('infoContainer');
var visioFrame = document.getElementById('visioFrame');
var url = 'https://xxxxxxxx.sharepoint.com/:u:/r/sites/visioAPI/_layouts/15/doc.aspx?sourcedoc=%7B365bcf9d-f38a-4cd5-afe3-71b7b7011cc1%7D&action=embedview';
// APIs are enabled for EmbedView action only.
url = url.replace("action=view","action=embedview");
url = url.replace("action=interactivepreview","action=embedview");
url = url.replace("action=default","action=embedview");
var session = new OfficeExtension.EmbeddedSession(url, { id: "embed-iframe",container: visioFrame });
session.init().then(function () {
// Initilization is successful
textArea.innerHTML = "Initilization is successful";
OfficeExtension.ClientRequestContext._overrideSession = session;
Visio.run(function (ctx) {
var document1 = ctx.document;
var page = document1.getActivePage();
eventResult1 = document1.onSelectionChanged.add(
function (args){
var shapes = page.shapes;
shapes.load();
return ctx.sync().then(function () {
for(var i=0; i<shapes.items.length;i++)
{
var shape = shapes.items[i];
if ( shape.select == true)
{
//textArea.value = shape.id + ': ' + shape.text;
var shapeDataItems = shapes.getItem(shape.id).shapeDataItems;
shapeDataItems.load();
textArea.innerHTML = '';
return ctx.sync().then(function() {
for (var i = 0; i < shapeDataItems.items.length; i++)
{
textArea.innerHTML += '<b>' + shapeDataItems.items[i].label +':</b> ' + shapeDataItems.items[i].value + '<br />';
}
});
}
}
});
});
// Empty sync is needed, as run() needs to return a promise.
return ctx.sync();
}).catch(function(error) {
console.log(error);
});
});
Ergebnis:
Bei einem Klick auf ein Shape werden nun die Shape Daten in einem Container angezeigt.
Leassons Learned
- Die API funktioniert nur für die Embedded View (URL Parameter &action=embededview)
- Gut dokumentiert (https://dev.office.com/reference/add-ins/visio/visio-javascript-reference-overview)
Beitrag teilen