Anzeigen der benutzerdefinierten HTML-Nachrichten in Visio Services in SharePoint Server 2010

  • Artikel

Office Visual - gewusst wie

Zusammenfassung:  Informationen zum Anzeigen von HTML-Inhalten in einem Visio Web Access-Webpart auf einer Microsoft SharePoint Server 2010 Webparts-Seite mithilfe von ECMAScript (JavaScript, JScript)-Code.

Letzte Änderung: Mittwoch, 12. September 2012

Gilt für: Office 2007 | SharePoint Foundation 2010 | SharePoint Server 2010 | Visio 2010 | Visual Studio | Visual Studio 2008 | Visual Studio 2010

Bereitgestellt von:  Eric Schmidt, Microsoft Corporation

Übersicht

Mithilfe des JavaScript-Objektmodell für Visio Services in Microsoft SharePoint Server 2010 können Sie angepasste HTML-Meldungen in einem Visio Web Access-Webpart auf einer SharePoint Server 2010Webparts-Seite anzeigen. Mithilfe des Codebeispiels in diesem Videotutorial (das auf dem Codebeispiel Benutzerdefinierte Fehlermeldungen im SharePoint 2010 SDK basiert) können Sie HTML-Anweisungen erstellen, die vom Benutzer angezeigt oder ausgeblendet werden können.

HinweisHinweis
Sie benötigen in SharePoint Server 2010 die entsprechenden Berechtigungen als Seitendesigner, um dieses Codebeispiel einer SharePoint Server 2010Webparts-Seite hinzufügen zu können. Darüber hinaus muss Visio Services auf der SharePoint Server 2010-Website installiert und aktiviert sein.
Code schreiben

In diesem Videotutorial wird das Verwenden des JavaScript-Objektmodell für Visio Services zum Erstellen eines Visio Web Access-Webparts auf einer SharePoint Server 2010Webparts-Seite beschrieben, über das benutzerdefinierter HTML-Text im Webpart ein- oder ausgeblendet wird, wenn der Benutzer auf eine Schaltfläche klickt. Zum Verwenden des in diesem Videotutorial gezeigten Codebeispiels sollten Sie bereits mit JavaScript vertraut sein.

Bevor Sie mithilfe von JavaScript mit einem Visio-Diagramm auf einer SharePoint-Website interagieren, müssen Sie das Diagramm als Visio-Webzeichnung (.vdw) in einer Dokumentbibliothek der Website speichern.

So speichern Sie eine Visio-Zeichnung als VDW-Datei auf einer SharePoint-Website

  1. Erstellen Sie in Visio die Zeichnung, die Sie auf der SharePoint-Website anzeigen möchten.

  2. Klicken Sie auf der Registerkarte Datei auf Speichern und senden.

  3. Klicken Sie unter Speichern und senden auf Auf SharePoint speichern.

  4. Wählen Sie unter Auf SharePoint speichern den Dateityp Webzeichnung (*.vdw) aus, und klicken Sie auf Speichern unter.

  5. Navigieren Sie zur Dokumentbibliothek auf der SharePoint-Website, auf der Datei angezeigt werden soll, und klicken Sie dann auf Speichern.

Nachdem Sie Ihre Visio-Webzeichnung auf der SharePoint-Website gespeichert haben, müssen Sie eine SharePoint Server 2010Webparts-Seite erstellen, der das Visio Web Access-Webpart hinzugefügt wird.

So erstellen Sie eine Webparts-Seite

  1. Klicken Sie auf der SharePoint-Website, auf der Sie die Zeichnung bereitstellen möchten, im Menü Websiteaktionen auf Weitere Optionen.

  2. Klicken Sie unter Filtern nach auf Seite, dann auf Webpartseite und anschließend auf Erstellen.

  3. Geben Sie auf der Seite Neues Webpart im Feld Name einen Dateinamen für die Seite ein.

  4. Wählen Sie eine Layoutvorlage und den Speicherort aus, an dem Sie die Seitendatei speichern möchten, und klicken Sie auf Erstellen.

Nachdem Sie auf der SharePoint-Website eine Webparts-Seite erstellt haben, können Sie der Webparts-Seite ein Visio Web Access-Webpart hinzufügen und die Visio-Webzeichnung in diesem Webpart öffnen.

So fügen Sie einer Webparts-Seite ein Visio Web Access-Webpart hinzu

  1. Klicken Sie im Menüband für die Serverkomponente auf der SharePoint Server 2010 Webparts-Seite auf Seite bearbeiten.

  2. Klicken Sie in der Zone, in der Sie das Webpart platzieren möchten, auf Webpart hinzufügen.

  3. Klicken Sie in der Liste Kategorien auf Geschäftsdaten.

  4. Klicken Sie auf Visio Web Access und dann auf Hinzufügen.

  5. Klicken Sie auf den Pfeil neben Visio Web Access-Webpartmenü und dann auf Webpart bearbeiten.

  6. Geben Sie die URL der Webzeichnungsdatei (.vdw) ein, die Sie öffnen möchten, und klicken Sie dann auf OK.

Ihre SharePoint Server 2010-Seite muss ein Inhalts-Editor-Webpart für die Aufnahme des JavaScript-Codes enthalten. Im Codebeispiel in diesem Videotutorial stellt das Inhalts-Editor-Webpart zudem eine Anzeigeoberfläche für die Ausgabe Ihres JavaScript-Codes bereit.

So fügen Sie einer Webparts-Seite ein Inhalts-Editor-Webpart hinzu

  1. Wenn sich die Seite noch nicht im Bearbeitungsmodus befindet, klicken Sie im Menüband für die Serverkomponente auf der SharePoint Server 2010 Webparts-Seite auf Seite bearbeiten.

  2. Klicken Sie in der Zone, in der Sie das Inhalts-Editor-Webpart platzieren möchten, auf Webpart hinzufügen.

  3. Klicken Sie in der Liste Kategorien auf Medien und Inhalt.

  4. Klicken Sie in der Liste Webparts auf Inhalts-Editor, und klicken Sie dann auf Hinzufügen.

  5. Klicken Sie auf den Pfeil neben Inhalts-Editor-Webpartmenü und dann auf Webpart bearbeiten.

  6. Geben Sie die URL der zu öffnenden JS-Datei ein, und klicken Sie dann auf OK.

  7. Klicken Sie im Menüband auf Bearbeitung beenden.

Nach dem Hinzufügen des Visio Web Access- und Inhalts-Editor-Webparts zu Ihrer Webparts-Seite können Sie mit dem Erstellen der Datei beginnen, die Ihren JavaScript-Code enthalten soll.

So erstellen Sie in Microsoft Visual Studio 2010 eine neue JavaScript-Datei

  1. Klicken Sie in Visual Studio 2010 auf Datei, zeigen Sie auf Neu, und klicken Sie dann auf Datei.

  2. Klicken Sie im Dialogfeld Neue Datei unter Installierte Vorlagen auf Web.

  3. Klicken Sie in der Liste der Vorlagen auf JScript-Datei und dann auf Öffnen.

  4. Klicken Sie nach Öffnen der Datei auf Datei und dann auf Speichern unter.

  5. Führen Sie im Dialogfeld Speichern unter folgende Schritte aus:

    1. Wechseln Sie zur Dokumentbibliothek auf der SharePoint-Website, auf der sich die Visio-Webzeichnung befindet.

    2. Geben Sie im Feld Dateiname einen Namen für die JavaScript-Datei ein.

    3. Klicken Sie auf Speichern.

Sie können den JavaScript-Code nun der JavaScript-Datei (.js) hinzufügen.

So fügen Sie JavaScript-Code der JavaScript-Datei hinzu

  1. Fügen Sie am Anfang der Datei das folgende HTML-Tag hinzu.

    <script type="text/javascript">

  2. Erstellen Sie mithilfe des folgenden Codes die HTML-Schaltfläche zum Ein- und Ausblenden der benutzerdefinierten HTML-Anweisungen.

    // Use the document.write method to write HTML to the Content Editor Web Part.
document.write('<br><input type="button" id="instructions"' +
    'value="Show instructions" style="width:200px" ' +
    'onclick="toggleInstructions();">');

  3. Fügen Sie den folgenden Code hinzu, um die globalen Variablen für JavaScript zu deklarieren.

    // Declare variables for the Visio Web Access Web Part, the currently 
// displayed page, and the current status of the HTML instructions.
var vwaControl;
var vwaPage;
var instructionsDisplayed;

  4. Fügen Sie mithilfe des folgenden Codes dem AJAX-Ereignis Sys.Application.load einen Handler hinzu.

    // Add the onApplicationLoad handler to the Sys.Application.load event.
Sys.Application.add_load(onApplicationLoad)

  5. Erstellen Sie mithilfe des folgenden Codes die onApplicationLoad-Handlerfunktion. Die Funktion erstellt einen Verweis auf das Visio Web Access-Webpart, indem eine Instanz der Vwa.VwaControl-Klasse erstellt wird, und fügt dem Vwa.diagramcomplete-Ereignis dieses Vwa.VwaControl-Objekts einen Handler hinzu.

    // Capture a reference to an instance of the Visio Web Access Web Part.
function onApplicationLoad() {
    try{
        vwaControl = new Vwa.VwaControl(getVWAWebPartID());
            vwaControl.addHandler("diagramcomplete", onDiagramComplete);
        }
        catch(err){
        }
}

// Get the Web Part ID for the Visio Web Access Web Part.
function getVWAWebPartID() {

    // Iterate through each <div> tag on the page.
    var divArray = document.getElementsByTagName("div");
    var webPartElementID;
    for (var i = 0; i < divArray.length; i++) {
        var node = divArray[i];

        // If the class attribute of the tag is "VisioWebAccess", 
        // return the id attribute of the grandparent tag.
        if (node.className == "VisioWebAccess") {
            webPartElementID = node.parentNode.parentNode.id;
            break;
        }
    }
    return webPartElementID;
}

  6. Erstellen Sie mithilfe des folgenden Codes den Handler für das Vwa.diagramcomplete-Ereignis. Mit dieser Funktion werden die globalen Variablen initialisiert und der Zoom für die derzeit angezeigte Seite im Diagramm festgelegt. Die globale Variable instructionsDisplayed ist auf false festgelegt, um anzugeben, dass die Anweisungen ausgeblendet sind.

    // Assign values to the global variables when the drawing finishes rendering.
function onDiagramComplete() {
    try {
        vwaPage = vwaControl.getActivePage();
        vwaPage.setZoom(-1);
        instructionsDisplayed = false;
    }
    catch(err){
    }
}

  7. Mithilfe des folgenden Codes können Sie eine benutzerdefinierte HTML-Meldung im Visio Web Access-Webpart ein- und ausblenden.

    // Display or hide the custom HTML message over the Visio Web Access Web Part.
function toggleInstructions()
{
    // Check the state of the instructions.
    if (instructionsDisplayed) {

        // If the instructions are displayed, hide them and change the state variable.
        vwaControl.hideCustomMessage();
        instructionsDisplayed = false;
        document.getElementById("instructions").value = "Show instructions";
    }
    else {
        // The instructions are hidden, so display them and change the state variable.
        vwaControl.displayCustomMessage(
            "<h1> Instructions for using this Web Part: </h1>"
            /* Insert your instructions here. */);
        instructionsDisplayed = true;
        document.getElementById("instructions").value = "Hide instructions";
    }
}

  8. Fügen Sie unter dem JavaScript-Code ein schließendes </script>-HTML-Tag hinzu.

Nach Beenden der Bearbeitung der JavaScript-Datei und ihrer Speicherung auf der SharePoint-Website müssen Sie die Datei in das Inhalts-Editor-Webpart auf der Webparts-Seite einfügen.

So fügen Sie die JavaScript-Datei in das Inhalts-Editor-Webpart ein

  1. Klicken Sie auf der SharePoint-Seite auf den Pfeil neben Inhalts-Editor-Webpartmenü und dann auf Webpart bearbeiten.

  2. Geben Sie die URL der einzufügenden JS-Datei ein, und klicken Sie dann auf OK.

Lesen

Visio Services bietet eine neue Möglichkeit zum Anzeigen und Freigeben von Diagrammen und Daten auf einer SharePoint 2010-Website. Außerdem können Sie anpassen, wie diese Diagramme auf der SharePoint-Webparts-Seite angezeigt werden. Das JavaScript-Objektmodell für Visio Services bietet Methoden zum Anzeigen eigener HTML-Inhalte im Visio Web Access-Webpart.

Schreiben von Inhalten in einem Inhalts-Editor-Webpart

Mit dem Beispielcode in diesem Videotutorial wird eine HTML-Schaltfläche zum Ein-und Ausblenden der Anweisungen für das Visio Web Access-Webpart erstellt. Hierfür wird im Beispiel die document.write-Methode des Inhalts-Editor-Webparts zum Erstellen einer HTML-Eingabe von Typ <input> mit dem Attribut type="button" verwendet. (Das Inhalts-Editor-Webpart enthält wie ein HTML-Element vom Typ <frame> ein document-Objekt, über das Sie auf den Inhalt im Geltungsbereich des Webparts selbst zugreifen können.) Bei Auslösen des onclick-Ereignisses der Schaltfläche ruft das Codebeispiel die toggleInstructions-Funktion auf, mit der die benutzerdefinierte HTML-Meldung ein- oder ausgeblendet wird.

Wenngleich die Eingabeschaltfläche zum Ein- oder Ausblenden einer benutzerdefinierten HTML-Meldung in einem Visio Web Access-Webpart nicht nötig ist, müssen Sie mithilfe eines Inhalts-Editor-Webparts auf das JavaScript-Objektmodell für Visio Services zugreifen. Das Inhalts-Editor-Webpart fungiert als Container für Ihr Skript und fügt das Skript auf der Seite ein, sobald die SharePoint-Seite geladen wird.

Hinzufügen eines Handlers zum AJAX-Ereignis Sys.Application.load

Damit Ihr Skript beim Laden der Seite geladen wird, müssen Sie dem AJAX-Ereignis Sys.Application.load einen Handler hinzufügen, der ausgelöst wird, nachdem alle anderen Skripts geladen und die Objekte in der Anwendung erstellt und initialisiert wurden. Im Codebeispiel wird mit dem Sys.Application.load-Ereignis die onApplicationLoad-Funktion aufgerufen.

Die onApplicationLoad-Funktion erfasst zunächst einen Verweis auf das Visio Web Access-Webpart, indem ein neues Vwa.VwaControl-Objekt erstellt wird, das der Variablen vwaControl zugewiesen wird. Anschließend registriert die onApplicationLoad-Funktion die onDiagramComplete-Funktion als Handler für das Vwa.diagramcomplete-Ereignis des vwaControl-Objekts. (Das Vwa.diagramcomplete-Ereignis wird ausgelöst, wenn das Diagramm geladen, aktualisiert oder geändert wird.)

Erfassen eines Verweises auf das Visio Web Access-Webpart

Bevor Sie auf einen Großteil des JavaScript-Objektmodell für Visio Services zugreifen können, müssen Sie zunächst einen Verweis auf die aktuelle Instanz des Visio Web Access-Webparts erfassen, indem Sie eine Instanz der Vwa.VwaControl-Klasse erstellen. Im Codebeispiel wird der Handler für das AJAX-Ereignis Sys.Application.load zum Erfassen dieses Verweises verwendet, indem eine Instanz der Vwa.VwaControl-Klasse erstellt wird.

Die Konstruktormethode für die Vwa.VwaControl-Klasse hat einen Pflichtparameter: die Webpart-ID für das Visio Web Access-Webpart. Diese Webpart-ID im Format WebPartWPQ# ist im id-Attribut des über-übergeordneten <div>-Tags des <div>-Tag enthalten, welches das class="VisioWebAccess"-Attribut für die Webparts-Seite enthält.

HinweisHinweis
Wenn es auf der Webparts-Seite mehrere Visio Web Access-Webparts gibt, sind entsprechende <div>-Tags mit dem class="VisioWebAccess"-Attribut vorhanden.

Es gibt mehrere Möglichkeiten zum Ermitteln der Webpart-ID des Visio Web Access-Webparts:

  • Sie können im Browser den HTML-Quellcode der SharePoint-Webparts-Seite-Seite anzeigen und nach dem Ausdruck class="VisioWebAccess" suchen.

  • Sie können im JavaScript-Code die Webpart-ID beim Laden des Skripts abrufen.

Im Codebeispiel wird die getVWAWebPartID-Funktion zum Abrufen der Webpart-ID des Visio Web Access-Webparts verwendet. Die Funktion erstellt mithilfe der document.getElementsByTagName-Methode ein Array aller <div>-Tags auf der Seite. (Sie können auch die document.getElementsByClassName-Methode verwenden, wenn Ihr Browser diese unterstützt.) Die Funktion durchläuft alle Elemente im Array, bis das erste Element mit dem class="VisioWebAccess"-Attribut gefunden wird, und gibt den über-übergeordneten Knoten dieses Elements zurück.

Erstellen des Handlers für das Vwa.diagramcomplete-Ereignis

Im Codebeispiel initialisiert die onDiagramComplete-Funktion die meisten globalen Variablen und legt den Zoom für die derzeit in der Zeichnung angezeigte Seite fest.

Die Funktion erstellt Instanzen der Vwa.Page-Klasse und erfasst einen Verweis auf die Seite in der vwaPage-Variablen. Ferner legt sie den Ausgangswert der instructionsDisplayed-Variablen so fest, dass die Anweisungen nicht angezeigt werden, wenn die Zeichnung erstmals gerendert wird.

Wenngleich bei diesem Codebeispiel die benutzerdefinierte HTML-Meldung ausgeblendet bleibt, wenn das Rendern der Zeichnung abgeschlossen ist, können Sie dieser onDiagramComplete-Funktion Code hinzufügen, damit die benutzerdefinierte HTML-Meldung angezeigt wird, sobald das Rendern der Zeichnung im Browser abgeschlossen ist. Hierzu muss die VwaControl.displayCustomMessage-Methode des vwaControl-Objekts in der Handlerfunktion für das Vwa.diagramcomplete-Ereignis aufgerufen werden. Die VwaControl.displayCustomMessage-Methode wird im nächsten Abschnitt behandelt.

Anzeigen benutzerdefinierter HTML-Meldungen im Visio Web Access-Webpart

Im Codebeispiel wird durch Klicken auf die HTML-Schaltfläche im Inhalts-Editor-Webpart die toggleInstructions-Funktion aufgerufen, über die die Anweisungen je nach aktuellem Status ein- oder ausgeblendet werden.

Die Funktion bestimmt zunächst, ob die benutzerdefinierte HTML-Meldung angezeigt wird, indem der Wert der instructionsDisplayed-Variablen überprüft wird. Wird die Meldung angezeigt, ruft die Funktion die VwaControl.hideCustomMessage-Methode auf, um die benutzerdefinierte HTML-Meldung zu schließen. Die Funktion ändert anschließend den Wert der instructionsDisplayed-Variablen in false und den Text auf der im Inhalts-Editor-Webpart angezeigten Schaltfläche.

Wenn die benutzerdefinierte HTML-Meldung derzeit nicht angezeigt wird (d. h. die instructionsDisplayed-Variable auf false festgelegt ist), ruft die toggleInstructions-Funktion die VwaControl.displayCustomMessage-Methode auf, um die HTML-Meldung zu schreiben und anzuzeigen. Die VwaControl.displayCustomMessage-Methode hat den einen Pflichtparameter HTML, der eine Zeichenfolge mit der Meldung sein muss, die in wohlgeformter HTML angezeigt wird. Der Inhalt kann aus zahlreichen Typen von HTML-Elementen bestehen, z. B. Listen, Bilder oder Links. Nach Anzeige der HTML-Meldung legt die toggleInstructions-Funktion die instructionsDisplayed-Variable auf true fest und ändert den Text auf der Schaltfläche im Inhalts-Editor-Webpart.

 Anzeigen

Video ansehen

Video anschauen | Dauer: 8:42

Erforschen