Eine Einführung für SharePoint-Entwickler. Praktische Übung

Transkript

1 Eine Einführung für SharePoint-Entwickler Praktische Übung Übungsanleitung SPCHOL308 Entwickeln eines Menübands für die SharePoint 2010-Benutzeroberfläche und von Dialogfeldanpassungen VB

2 Dieses Dokument wird wie besehen bereitgestellt. Die in diesem Dokument enthaltenen Informationen und Ansichten, einschließlich URLs und Verweise auf Internetwebsites, können ohne vorherige Ankündigung geändert werden. Das Risiko der Nutzung liegt bei Ihnen. Mit diesem Dokument erhalten Sie keine Rechte am geistigen Eigentum an einem Microsoft-Produkt. Sie sind berechtigt, dieses Dokument zu kopieren und für eigene interne Referenzzwecke zu nutzen Microsoft. Alle Rechte vorbehalten.

3 Inhalt SPCHOL308 ENTWICKELN EINES MENÜBANDS FÜR DIE SHAREPOINT 2010-BENUTZEROBERFLÄCHE UND VON DIALOGFELDANPASSUNGEN... 2 Übungsziel... 2 Weitere Ressourcen... 2 Erste Schritte... 2 Anmelden beim virtuellen Computer... 2 Speicherorte... 2 Voraussetzungen für diese praktische Übung... 3 Kopieren von Codebeispielen aus einem Word-Dokument... 3 Codeausschnitte... 4 Übung 1: Hinzufügen einer benutzerdefinierten Schaltfläche zum Menüband... 5 Aufgabe 1: Anzeigen der Website... 5 Aufgabe 2: Erstellen eines leeren SharePoint 2010-Projekts... 6 Aufgabe 3: Hinzufügen des Schaltflächencodes zum Projekt... 8 Aufgabe 4: Bereitstellen der Projektmappe Übung 2: Zugreifen auf Listendaten über JavaScript und das Clientobjektmodell, die in einem Dialogfeld angezeigt werden Aufgabe 1: Erstellen eines neuen Projekts und Hinzufügen eines Webparts Aufgabe 2: Hinzufügen von Skriptcode zum Zugreifen auf bzw. Rendern von SharePoint-Listendaten Aufgabe 3: Bereitstellen und Testen des Webparts Übungszusammenfassung Seite 1

4 SPCHOL308 Entwickeln eines Menübands für die SharePoint 2010-Benutzeroberfläche und von Dialogfeldanpassungen Voraussichtliche Zeit zum Durcharbeiten dieser Übung: 30 Minuten Für diese Übungen sind Visual Studio 2010 und SharePoint Foundation 2010 erforderlich. Diese Anwendungen sind auf dem in dieser Übung verwendeten virtuellen Computer installiert. Übungsziel Ziel dieser praktischen Übung ist das Vermitteln, wie das neue SharePoint-Menüband geändert werden kann und die Interaktion mit dem Clientobjektmodell und Dialogfeldsystem erfolgt. Erweitern des SharePoint-Menübands durch Hinzufügen einer neuen Schaltfläche Erstellen eines Webparts, das unter Verwendung des neuen Clientobjektmodells mit clientseitigem Code arbeitet, um ein Dialogfeld für Benutzer anzuzeigen, in das mithilfe des neuen Dialogfeldsystems Daten eingegeben werden können Weitere Ressourcen Zu dieser Übung gehören die folgenden weiteren Ressourcen: Diese Übungsanleitung Quellcode SPCHOL308_Manual_VB.docx Completed\VB\Ex1 Completed\VB\Ex2 Dieses Dokument Vervollständigter Übungscode in VB Ressourcen Resources\VB Verschiedene andere im Verlauf dieser Übung verwendete Ressourcen Erste Schritte Anmelden beim virtuellen Computer Melden Sie sich beim virtuellen Computer als der folgende Benutzer an: Benutzername: Administrator Kennwort: Speicherorte Zu dieser praktischen Übung gehören verschiedene weitere Ressourcen an festen Speicherorten. Standardmäßig wird vorausgesetzt, dass C:\Content Packs\Packs\SharePoint 2010 Developer Labs 1.0\SUPPORTING FILES\SPCHOL308\Resources das Basisverzeichnis dieser praktischen Übung ist. Der standardmäßige Arbeitsordner für diese Übung ist \SPHOLS\SPCHOL308. Seite 2

5 Voraussetzungen für diese praktische Übung Wechseln Sie zum Basisverzeichnis Supporting Files\SPCHOL308\Resources dieser praktischen Übung, und führen Sie das PowerShell-Skript optimize.ps1 aus: 1. Klicken Sie mit der rechten Maustaste auf optimize.ps1, und wählen Sie Mit PowerShell ausführen aus: Abbildung1: Ausführen des PowerShell-Skripts 2. Hierdurch wird ein PowerShell-Fenster zum Ausführen des Skripts geöffnet. Warten Sie ab, bis die Ausführung des PowerShell-Skripts beendet und das PowerShell-Fenster geschlossen wurde: Abbildung 2: PowerShell-Fenster, in dem das Skript ausgeführt wird Kopieren von Codebeispielen aus einem Word-Dokument Das Kopieren und Einfügen von Code aus diesem Word-Dokument in Visual Studio ist nur bei Abschnitten mit formatiertem Code sicher. Beispiel: Console.WriteLine("Dieser Code ist sicher") Nicht in diesen Abschnitten enthaltener Code kann Unicode- oder andere unsichtbare Zeichen erhalten, die keinen gültigen XML- oder C#-/VB-Code darstellen. Beispiel: Seite 3

6 Console.WriteLine ( Dieser Code ist NICHT sicher!! ) Codeausschnitte Sie können auch mit Codeausschnitten arbeiten, um den in dieser Übung benötigten Code einzufügen. So verwenden Sie den für diese Übung benötigten Codeausschnitt Klicken Sie mit der rechten Maustaste an der Stelle auf die Codedatei, an der Sie den Codeausschnitt einfügen möchten. Wählen Sie Codeausschnitt einfügen aus. Abbildung 3: Einfügen des Codeausschnitts Wählen Sie im Katalog Eigene Codeausschnitte einen Codeausschnitt aus. Seite 4

7 Übung 1: Hinzufügen einer benutzerdefinierten Schaltfläche zum Menüband In dieser Übung ergänzen Sie das Menüband um eine eigene selbstdefinierte Schaltfläche, über die serverseitiger Code ausgeführt wird. Sie können diesen Ansatz auch verfolgen, um Schaltflächen, Gruppen, Registerkarten oder sogar das gesamte Menüband hinzuzufügen bzw. zu ersetzen. Sie verwenden eine Visual Studio 2010-Projektmappe und stellen sie auf dem lokalen SharePoint-Server bereit. Über die Schaltfläche wird ein JavaScript-Dialogfeld mit der Nachricht Hello World eingeblendet. Aufgabe 1: Anzeigen der Website Sehen Sie sich zunächst an, wie die Website mit dem standardmäßigen Menüband aussieht, bevor Sie eine Schaltfläche hinzufügen. 1. Öffnen Sie Internet Explorer, und navigieren Sie zu 2. Wählen Sie im Navigationsbereich (dem Schnellstartbereich) auf der linken Seite im Menü Dokumente die Bibliothek Freigegebene Dokumente aus. Abbildung 4: Freigegebene Dokumente Seite 5

8 3. Wählen Sie im Menüband auf der eingeblendeten Registerkarte Bibliothekstools die Registerkarte Dokumente aus. Abbildung 5: Registerkarte Dokumente 4. In diesem Menüband wird die neue Schaltfläche angezeigt, die Sie in dieser Übung erstellen. Aufgabe 2: Erstellen eines leeren SharePoint 2010-Projekts Im Rahmen dieser Aufgabe werden eine Projektmappe und ein Projekt erstellt. Die Aufgabe umfasst die verbleibende Entwicklungsarbeit in dieser Übung. 1. Öffnen Sie Visual Studio 2010, indem Sie im Startmenü Alle Programme, dann Microsoft Visual Studio 2010 und danach Microsoft Visual Studio 2010 auswählen. 2. Wählen Sie im Menü Datei die Option Neu und dann Projekt aus. 3. Erweitern Sie im Dialogfeld Neues Projekt im Menü Installierte Vorlagen auf der linken Seite die Elemente Visual Basic, dann SharePoint und schließlich Wählen Sie dann in der Projekttypliste im mittleren Bereich des Bildschirms den Projekttyp Leeres Projekt aus. 4. Geben Sie dem Projekt den Namen RibbonDemo. 5. Ändern Sie den Speicherort in C:\SPHOLS\SPCHOL308\VB\Ex1\. 6. Klicken Sie auf OK. 7. Der Assistent zum Anpassen von SharePoint wird angezeigt. 8. Geben Sie für Welche lokale Site soll für das Debugging verwendet werden? die Adresse ein. Seite 6

9 9. Wählen Sie für Wie lautet die Vertrauensebene für diese SharePoint-Lösung? die Option Als Farmlösung bereitstellen. Abbildung 6: Assistent zum Anpassen von SharePoint 10. Klicken Sie auf Fertig stellen, um den Anpassungs-Assistenten abzuschließen. Seite 7

10 11. Die neue Projektmappe wird von Visual Studio hinzugefügt. Abbildung 7: RibbonDemo im Projektmappen-Explorer Aufgabe 3: Hinzufügen des Schaltflächencodes zum Projekt 1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf RibbonDemo, und wählen Sie Hinzufügen und dann Neues Element... aus. 2. Erweitern Sie im Dialogfeld Neues Element hinzufügen im Menü Installierte Vorlagen auf der linken Seite die Elemente Gemeinsame Elemente, dann SharePoint und schließlich Wählen Sie dann im mittleren Bereich des Bildschirms den Elementtyp Leeres Element aus. Seite 8

11 3. Lassen Sie den Namen EmptyElement1 unverändert. Abbildung 8: Neues Element hinzufügen - RibbonDemo Seite 9

12 4. Klicken Sie auf OK, um das Element dem Projekt hinzuzufügen. Abbildung 9: Elements.xml 5. Löschen Sie den Inhalt der Datei Elements.xml. 6. Fügen Sie der Datei Elements.xml den folgenden Code hinzu. Sie finden eine Kopie dieser Datei im Ordner Supporting Files\SPCHOL308\Resources\VB. <?xml version="1.0" encoding="utf-8"?> <Elements xmlns=" <CustomAction Id="DemoHelloWorldButton" RegistrationId="101" RegistrationType="List" Location="CommandUI.Ribbon" Sequence="5" Title="Hello World"> <CommandUIExtension> <CommandUIDefinitions> <CommandUIDefinition Location="Ribbon.Documents.Manage.Controls._children"> <Button Id="Ribbon.Documents.New.Controls.DemoHelloWorldButton" Alt="Hello World Ribbon Button" Sequence="10" Command="Demo_HelloWorld" Image32by32="/_layouts/images/ribbondemo/demobutton.png" LabelText="Hello World Demo" Seite 10

13 TemplateAlias="o1"/> </CommandUIDefinition> </CommandUIDefinitions> <CommandUIHandlers> <CommandUIHandler Command="Demo_HelloWorld" CommandAction="javascript:alert('Hello World!');" /> </CommandUIHandlers> </CommandUIExtension> </CustomAction> </Elements> Codeausschnitt: Eigene XML-Ausschnitte spchol308_ex1_xml Abbildung 10: Aktualisierte Datei Elements.xml 7. Beachten Sie den Bildverweis, denn dieses Bild, das Sie als Nächstes hinzufügen, wird im Menüband angezeigt. 8. Beachten Sie ferner das Befehlsskript, bei den es sich um das JavaScript-Skript handelt, das bei Klicken auf die Schaltfläche ausgeführt wird, die Sie dem Menüband hinzufügen. Seite 11

14 9. Fügen Sie der Projektmappe einen Ordner hinzu, der dem Bildordner im SharePoint- Layoutverzeichnis zugeordnet wird, in dem das Schaltflächenbild abgelegt werden kann. Klicken Sie mit der rechten Maustaste auf den Projektknoten RibbonDemo, und wählen Sie Hinzufügen und dann Zugeordneter SharePoint-Ordner "Bilder" aus. Abbildung 11: Hinzufügen eines zugeordneten Ordners Seite 12

15 10. Der Ordner Bilder wird mit einem Unterordner für die hinzuzufügende Schaltfläche angezeigt. Abbildung 12: Ordner Bilder 11. Fügen Sie die Datei DemoButton.png hinzu, indem Sie mit der rechten Maustaste auf den Ordner RibbonDemo klicken und dann Hinzufügen und danach Vorhandenes Element... auswählen. 12. Navigieren Sie im eingeblendeten Dialogfeld zu C:\Content Packs\Packs\SharePoint 2010 Developer Labs 1.0\SUPPORTING FILES\SPCHOL308\Resources, und wählen Sie die Datei DemoButton.png aus. Abbildung 13: Bild DemoButton Seite 13

16 Aufgabe 4: Bereitstellen der Projektmappe 1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf RibbonDemo, und wählen Sie Bereitstellen aus. Abbildung 14: Bereitstellen der Projektmappe 2. Die Projektmappe wird auf der SharePoint-Website bereitgestellt. 3. Öffnen Sie einen Webbrowser, und navigieren Sie zur lokalen SharePoint-Website: 4. Geben Sie die folgenden Informationen ein, wenn Sie aufgefordert werden, sich zu authentifizieren: Benutzername: administrator Kennwort: 5. Klicken Sie im linken Navigationsbereich auf Freigegebene Dokumente, um die Bibliothek Freigegebene Dokumente zu öffnen. Seite 14

17 Abbildung 15: Link Freigegebene Dokumente 6. Klicken Sie im SharePoint-Menüband auf die Registerkarte Dokumente. Abbildung 16: Registerkarte Freigegebene Dokumente 7. Das SharePoint-Menüband sollte nun die hinzugefügte Schaltfläche Hello World enthalten. Abbildung 17 - Schaltfläche Hello World Demo Seite 15

18 8. Klicken Sie im Menüband auf die Schaltfläche Hello World Demo, um das JavaScript-Dialogfeld zu Hello World einzublenden. Abbildung 18 - Demo Hello World In den letzten Minuten haben Sie das SharePoint-Menüband um eine neue selbstdefinierte Schaltfläche ergänzt. Seite 16

19 Übung 2: Zugreifen auf Listendaten über JavaScript und das Clientobjektmodell, die in einem Dialogfeld angezeigt werden In SharePoint 2010 gibt es verschiedene Objektmodelle, über die Entwickler auf den Server zugreifen können. Das Clientobjektmodell ist ein vereinheitlichtes Modell, das über Web- und WCF-Dienste, eine Client-API (JavaScript) und REST dieselben oder ähnliche Konzepte auf dem Server nutzt. Dies ebnet den Weg für anspruchsvollere Anwendungen, da es erheblich einfacher wird, von Clientcomputern und anderen Computern in der Infrastruktur auf SharePoint-Daten zuzugreifen. In dieser Übung verwenden Sie das clientseitige EcmaScript-Objektmodell, um Listen dynamisch zu aktualisieren und zu lesen. Außerdem wird die neue Dialogfeld-API im clientseitigen Skript vorgestellt. Das clientseitige JavaScript-Objektmodell ermöglicht JavaScript-Entwicklern über clientseitiges JavaScript den Zugriff auf SharePoint-Objekte u. a. Websites und Listen. Aufgabe 1: Erstellen eines neuen Projekts und Hinzufügen eines Webparts Im Rahmen dieser Aufgabe werden eine Projektmappe und ein Projekt erstellt. Die Aufgabe umfasst die verbleibende Entwicklungsarbeit in dieser Übung. 1. Öffnen Sie Visual Studio 2010, indem Sie im Startmenü Alle Programme, dann Microsoft Visual Studio 2010 und danach Microsoft Visual Studio 2010 auswählen. 2. Wählen Sie im Menü Datei die Option Neu und dann Projekt aus. 3. Erweitern Sie im Dialogfeld Neues Projekt im Menü Installierte Vorlagen auf der linken Seite die Elemente Visual Basic, dann SharePoint und schließlich Wählen Sie dann in der Projekttypliste im mittleren Bereich des Bildschirms den Projekttyp Visuelles Webpart aus. 4. Geben Sie dem Projekt den Namen ScriptOMandDialog. Seite 17

20 5. Ändern Sie den Speicherort in C:\SPHOLS\SPCHOL308\VB\Ex2. Abbildung 19: Dialogfeld Neues Projekt 6. Klicken Sie auf OK. 7. Der Assistent zum Anpassen von SharePoint wird angezeigt. 8. Geben Sie für Welche lokale Site soll für das Debugging verwendet werden? die Adresse ein. Seite 18

21 9. Wählen Sie für Wie lautet die Vertrauensebene für diese SharePoint-Lösung? die Option Als Farmlösung bereitstellen. Abbildung 20: Assistent zum Anpassen von SharePoint 10. Klicken Sie auf Fertig stellen, um den Anpassungs-Assistenten abzuschließen. 11. Die Projektmappe ScriptOMandDialog wird von Visual Studio erstellt. Seite 19

22 Abbildung 21 - Projektmappen-Explorer mit Projekt für visuelles Webpart 12. Doppelklicken Sie im Projektmappen-Explorer auf die Datei VisualWebPart1.webpart. 13. Legen Sie die Eigenschaft Title auf ScriptOMandDialog fest. 14. Legen Sie die Eigenschaft Description auf ScriptOMandDialog description fest. Abbildung 22: Visuelle Webpartdatei 15. Speichern und schließen Sie die Datei. Aufgabe 2: Hinzufügen von Skriptcode zum Zugreifen auf bzw. Rendern von SharePoint- Listendaten 1. Doppelklicken Sie im Projektmappen-Explorer auf VisualWebPart1UserControl.ascx. 2. Fügen Sie am Ende der Datei den folgenden Markupcode hinzu: <SharePoint:ScriptLink ID="ScriptLink1" runat="server" Name="sp.js" Localizable="false" LoadAfterUI="true" /> <script language="ecmascript" type="text/ecmascript"> </script> Codeausschnitt: Eigene HTML-Ausschnitte spchol308_ex2_scripttags Seite 20

23 3. Fügen Sie dem Block Script den folgenden JavaScript-Code hinzu. Sie können entweder alle folgenden Codeblöcke kopieren und einfügen oder einen Codeausschnitt verwenden. Mit diesem Code werden wichtige Variablen deklariert, die Ihr Code im weiteren Verlauf verwenden wird. Außerdem wird die Initialize()-Funktion hinzugefügt, die nach dem Laden aller clientseitigen SharePoint-Objekte aufgerufen werden soll. /* SharePoint list names */ var ProjectListName = "Projects"; /* SharePoint list field names */ var ProjectNameField = "Title"; var ProjectDescriptionField = "Description"; /* List objects */ var projectslist; /* variable to hold list items from the projects list */ var projects; /* client context object - used to access SharePoint data */ var context; /* web (SPWeb) that our page is running on */ var web; /* variable to hold modaldialog to close later */ var modaldialog; /* used when creating a new project ListItem. */ var projectlistitem; var copyofaddprojectform; /* our startup method when the page loads */ _spbodyonloadfunctionnames.push("initialize()"); Codeausschnitt: Eigene JScript-Ausschnitte spchol308_ex2_jscript 4. Die Initialize()-Funktion dient zum Abrufen des SharePoint-Objekts ClientContext, zum Laden der Projektliste und zum Initialisieren von Projekten (Projektlistenelementen). /* Initialize useful variables and retrieve ClientContext */ function Initialize() { /* Retrieves the current ClientContext object */ context = SP.ClientContext.get_current(); web = context.get_web(); // Get references to the lists we will use projectslist = web.get_lists().getbytitle(projectlistname); var camlquery = new SP.CamlQuery(); camlquery.set_viewxml('<view><query/></view>'); } projects = projectslist.getitems(camlquery); context.load(projects, 'Include(Title, Description)'); context.executequeryasync(onlistsloaded, OnError); Seite 21

24 5. Das onlistsloaded()-ereignis wird in der Initialize()-Funktion asynchron aufgerufen. /* Event handler called loading the projects list This method dynamically renders an HTML table to display the list data */ function onlistsloaded() { // Get the list items for the contacts list var projecttable = document.getelementbyid("tblprojectlist"); // clear out the table while (projecttable.rows.length > 0) projecttable.deleterow(projecttable.rows.length - 1); var content; var cell; var tbo = document.createelement('tbody'); // Loop for each project var listitemenumerator = projects.getenumerator(); while (listitemenumerator.movenext()) { // For each project create a row in the table var newtr = document.createelement('tr'); } var projectli = listitemenumerator.get_current(); // get_item() retrieves the listitem value var projectname = projectli.get_item(projectnamefield); var projectdesc = projectli.get_item(projectdescriptionfield); // add the cells for the row cell = document.createelement('td'); content = document.createtextnode(projectname); cell.appendchild(content); newtr.appendchild(cell); cell = document.createelement('td'); content = document.createtextnode(projectdesc); cell.appendchild(content); newtr.appendchild(cell); // Add the row to the table body tbo.appendchild(newtr); } // add the table body to the table projecttable.appendchild(tbo); Seite 22

25 6. Die ShowAddProject()-Funktion findet das divaddprojectelement (das später hinzugefügt wird) und zeigt es mithilfe der ModalDialog.showModalDialog()-Methode an. /* Hide the modal dialog and display the updated UI */ function onprojectadded() { HideAddProject(); } /* Show a modaldialog with the contents of divaddproject */ function ShowAddProject() { var divaddproject = document.getelementbyid("divaddproject"); // showmodaldialog removes the element passed in from the DOM // so we save a copy and add it back later copyofaddprojectform = divaddproject.clonenode(true); divaddproject.style.display = "block"; var options = { html: divaddproject, width: 200, height: 350, dialogreturnvaluecallback: ReAddClonedForm }; modaldialog = SP.UI.ModalDialog.showModalDialog(options); } /* Close the modaldialog */ function HideAddProject() { modaldialog.close(); Initialize(); } function ReAddClonedForm() { document.body.appendchild(copyofaddprojectform); } 7. Die AddProject()-Funktion erstellt ein neues Listenelement in der Projektliste. /* Called from the Add Project modal dialog Creates a list item in the Project list */ function AddProject() { var lici1 = new SP.ListItemCreationInformation(); projectlistitem = projectslist.additem(lici1); projectlistitem.set_item(projectnamefield, gettbvalue("txtprojectname")); projectlistitem.set_item(projectdescriptionfield, gettbvalue("txtdescription")); projectlistitem.update(); context.load(projectlistitem); // Execute the query to create the project list // onprojectadded is our call back method called when the call to the server has completed context.executequery(onprojectadded, OnError); } Seite 23

26 8. Hilfsfunktionen/Fehlerbehandlung /* Error handler */ function OnError(sender, args) { var spnerror = document.getelementbyid("spnerror"); spnerror.innerhtml = args.get_message(); } /* Helper function - shortcut to the value property of a textbox */ function gettbvalue(elid) { var el = document.getelementbyid(elid); return el.value; } 9. Fügen Sie den folgenden HTML unter dem schließenden Tag des Blocks </script> hinzu: tblprojectlist ist eine leere Tabelle, der das Skript für jedes Projekt Zeilen/Spalten dynamisch hinzufügt. Ferner gibt es einen Link zum Aufrufen von ShowAddProject(), über den ein modales Dialogfeld geöffnet wird. Das Markup in divaddproject wird in einem modalen Dialogfeld angezeigt, das dem Benutzer die Eingabe von Daten zum Erstellen eines neuen Projekts ermöglicht. <div style="font-weight: bold">project List</div> <br /> <table id="tblprojectlist" style="border: solid 1px silver"> </table> <br /> <a href="javascript:showaddproject()">add a project</a> <br /> <div id="divaddproject" style="display: none; padding: 5px"> <b>project Information</b><br /><br /> Name <br /> <input type="text" id="txtprojectname" /><br /> Description<br /> <input type="text" id="txtdescription" /><br /> <span id="spnerror" style="color: Red" /><br /> <input type="button" value="add New Project" onclick="addproject()" /> </div> Codeausschnitt: Eigene HTML-Ausschnitte spchol308_ex2_html Seite 24

27 Aufgabe 3: Bereitstellen und Testen des Webparts 1. Klicken Sie mit der rechten Maustaste auf den Projektknoten ScriptOMandDialog, und wählen Sie Bereitstellen aus. Abbildung 23: Bereitstellen 2. Fügen Sie nach Abschluss der Bereitstellung (Sie können den Status und seine Aktualisierung im Fenster Ausgabe verfolgen) das Webpart einer Webpartseite hinzu: 3. Öffnen Sie Internet Explorer, und navigieren Sie zu Seite 25

28 4. Klicken Sie auf das Symbol Bearbeiten, um das Menüband Bearbeiten einzublenden. Abbildung 24: Symbol Bearbeiten 5. Klicken Sie im Menüband Bearbeiten auf der Registerkarte Bearbeitungstools auf Einfügen. Abbildung 24: Registerkarte Text formatieren 6. Klicken Sie im Menüband Einfügen auf die Schaltfläche Webpart. 7. Wählen Sie in der Spalte Kategorien die Option Benutzerdefiniert aus. 8. Wählen Sie in der Spalte Webparts die Option ScriptOMandDialog aus. Seite 26

29 Abbildung 25: Einfügen des Webparts 9. Klicken Sie rechts unten im Webpartbereich auf die Schaltfläche Hinzufügen. Abbildung 26: Webpart ScriptOMandDialog Seite 27

30 10. Klicken Sie auf die Schaltfläche Bearbeitung beenden. 11. Sie müssen die Seite ggf. aktualisieren, damit das Webpart ScriptOMandDialog in der Liste Projekte unten angezeigt wird. 12. Klicken Sie auf den Link Projekt hinzufügen, füllen Sie die Felder Name und Beschreibung aus, und klicken Sie dann auf die Schaltfläche Add New Project. Abbildung 27: Hinzufügen eines Projekts 13. In Projektliste sollte das neue Projekt mit den angegebenen Details angezeigt werden. In den letzten Minuten haben Sie mit dem JavaScript-Clientobjektmodell gearbeitet sowie ein visuelles Webpart erstellt und bereitgestellt. Seite 28

31 Übungszusammenfassung In dieser praktischen Übung haben Sie die folgenden Aufgaben ausgeführt: Erstellen eines neuen leeren SharePoint 2010-Projekts Hinzufügen der Datei Elements.xml zu einem SharePoint-Projekt mit einer benutzerdefinierten Aktion zum Ergänzen des Menübands Hinzufügen des zugeordneten SharePoint-Ordners Bilder, der dem Ordner Bilder im SharePoint 2010-Verzeichnis zugeordnet ist Bereitstellen des Projekttyps Leer, der ein Feature für Ihre SharePoint-Website enthält Erstellen eines SharePoint-Projekts vom Typ Visuelles Webpart Hinzufügen von clientseitigem Skript zum Webpart zum Rendern von Listendaten Hinzufügen von clientseitigem Skript und HTML-Code zum Nutzen des Dialogfeldsystems Bereitstellen einer visuellen SharePoint-Webpartlösung Seite 29