Office 365 / Sharepoint 2010 Kleinere Lösungen mit

Office 365 / Sharepoint 2010 Kleinere Lösungen mit Javascriptund dem Client Object Model selbst erstellen • Motivation • Bausteine • Lösung • Javascript

MOTIVATION BAUSTEINE JAVASCRIPT LÖSUNG Javascript API*s gibt es mittlerweile überall… * ApplicationProgrammingInterface

„Eigener Server“ PrivateCloud PublicCloud Sharepoint 2012 MOSS 2007 Office 365 [t] Möglichkeiten auf dem Server Betreibbarkeit / SLAs Möglichkeiten auf dem Client

Motivation sich mit der Client-seitigen Entwicklung zu beschäftigen: • Wegen Betreibbarkeit eingeschränkte Entwicklungs-Möglichkeiten (Sandbox, keine TimerJobs,…) • Wachsende Anzahl von öffentlichen Services, die integriert werden sollen (Facebook, Google Maps/Docs,..) • Veränderte Geschäftsmodelle, die sich auch auf die IT-Architektur („Wo wird welcher Code ausgeführt?“) auswirken

MOTIVATION BAUSTEINE JAVASCRIPT LÖSUNG Es gibt drei technische Varianten des SP Client Object Models: .NET JAVASCRIPT SILVERLIGHT

MOTIVATION BAUSTEINE JAVASCRIPT LÖSUNG Für welche Aufgaben benutzt man das Client Object Model? .NET JAVASCRIPT UI innerhalb Sharepoint Zugriffe von „außen“

MOTIVATION BAUSTEINE JAVASCRIPT LÖSUNG Vorschau auf das Endergebnis

MOTIVATION BAUSTEINE JAVASCRIPT LÖSUNG A JAVASCRIPT LIBRARIES laden Einzelschritte zum Ergebnis B JAVASCRIPT CODE auf Seite einfügen D C KUNDENDATEN auslesen mit dem Client Object Model KARTENMARKIERUNGENsetzen mit der GoogleMaps API

MOTIVATION BAUSTEINE JAVASCRIPT LÖSUNG Grundlegende Tipps: 1 Einzelteile erstmal außerhalb von Sharepoint entwickeln z. B. mit JS-Fiddle (s. Ende dieses Foliensatzes) 2 Sich mit dem Javascript-Debugger anfreunden z. B. mit IE-Developer-Tools (s. Ende dieses Foliensatzes) 3 Closures und asynchrone Aufrufe verstehen (s. Ende dieses Foliensatzes)

MOTIVATION BAUSTEINE JAVASCRIPT LÖSUNG A Javascript Libraries laden ...befinden sich als Sandbox Solutions in diesem Foliensatz.

MOTIVATION BAUSTEINE JAVASCRIPT LÖSUNG A Javascript Libraries laden - das Resultat Namespace • Sharepoint Object Model • google Maps API • jQuery SP.ClientContext.get_current(); google.maps.Geocoder(); $("#map_canvas").show();

MOTIVATION BAUSTEINE JAVASCRIPT LÖSUNG B Javascript Code auf Seite einfügen ...mit Hilfe des Inhalts-Editor-WebParts Zum Probieren zuerst HTML-Button verwenden - später den Code in eine Textdatei ablegen, damit er an anderen Stellen wiederverwendet werden kann.

MOTIVATION BAUSTEINE JAVASCRIPT LÖSUNG Wo fange ich an? Wie greife ich auf die aktuelle Liste zu? Manchmal fehlt einem jemand, den man fragen kann…

MOTIVATION BAUSTEINE JAVASCRIPT LÖSUNG Wo fange ich an? Hier, hab die Liste für Dich schon mal geholt! …doch zum Glück gibt es den Context! SPContext

MOTIVATION BAUSTEINE JAVASCRIPT LÖSUNG C Kundendaten auslesen mit dem Client Object Model context= SP.ClientContext.get_current(); var web = context.get_web(); context.load(web); var currentlibid = SP.ListOperation.Selection.getSelectedList(); var currentLib = web.get_lists().getById(currentlibid); var selectedItemCount = SP.ListOperation. Selection.getSelectedItems().length; currentItem = new Array(selectedItemCount); AStartpunkt ist immer gleich Hier bekommen wir Zugriff auf die Auswahl der Liste

MOTIVATION BAUSTEINE JAVASCRIPT LÖSUNG C Kundendaten auslesen mit dem Client Object Model var camlQuery = new SP.CamlQuery(); camlQuery.set_viewXml(queryA); allItems = currentLib.getItems(camlQuery); context.load(allItems); Die benötigten Daten werden als CAML-Abfrage formuliert Wichtig: Erst mit .load passiert wirklich etwas

MOTIVATION BAUSTEINE JAVASCRIPT LÖSUNG D Karte erzeugen Optionen für die Darstellung der Karte var myOptions = { zoom : 10, center: new google.maps.LatLng(49.50312, 11.248209999999971), mapTypeId: google.maps.MapTypeId.ROADMAP }; $("#map_canvas").show(); // die Karte generieren map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); Bereich "ausklappen" Kartendaten von Google holen

MOTIVATION BAUSTEINE JAVASCRIPT LÖSUNG D Kartenmarkierungen setzen Der geocoder macht aus der Adresse eine Geo-Koordinate var geocoder = new google.maps.Geocoder(); geocoder.geocode( { 'address': l.caddress}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { var latlng = results[0].geometry.location; // den Marker einsetzen var marker = new google.maps.Marker( { position: latlng, title: l.cname + ": " + l.caddress}); // auf der Karte platziern marker.setMap(map);

MOTIVATION BAUSTEINE JAVASCRIPT LÖSUNG Sandbox Solutions für die Javascript Bibliotheken Javascript-Code für das Content-Editor WebPart Felder im CAML beziehen sich auf die Standard-Kontaktliste: Adresse, Ort und PLZ sollten ausgefüllt sein

MOTIVATION BAUSTEINE JAVASCRIPT LÖSUNG „Gemeinheiten“ bei Javascript Funktionale Programmierung Asynchrone Aufrufe MethodChaining

MOTIVATION BAUSTEINE JAVASCRIPT LÖSUNG Javascript testen: Debugger • Im Internet Explorer 9: • F12 drücken • Script-Karteireiter wählen • Haltepunkt setzen • "Start debugging" drücken • Seite bedienen • In Firefox "FireBug", in Safari "Developer Toos", ...

MOTIVATION BAUSTEINE JAVASCRIPT LÖSUNG Javascript testen: jsfiddle.net

MOTIVATION BAUSTEINE JAVASCRIPT LÖSUNG Funktionale Programmierung ... bedeutet ganz einfach, dass eine Variable auch eine Funktion sein kann. Eine Funktion kann also nicht nur Werte (z. B. Zeichenkette) übergeben bekommen - sondern auch Funktionen. Ebenso kann eine Funktion auch eine Funktion zurückliefern.

MOTIVATION BAUSTEINE JAVASCRIPT LÖSUNG Wie gehe ich mit asynchronen Aufrufen um? Damit die Sharepoint UI nicht blockiert, geben viele Funktionen, die Daten irgendwo abholen, asynchron ausgelegt: geocoder.geocode( { 'address': l.caddress}, function(results, status) { ... } ); Wo normalerweise eine Variable stehen würde, steht oben eine Funktion ohne Name (= anonyme Funktion). Diese wird aufgerufen, sobald der WebService die Daten geliefert hat.

MOTIVATION BAUSTEINE JAVASCRIPT LÖSUNG Was ist ein Closure und warum brauche ich das? Anonyme Funktionen haben feste Aufrufparameter. Wenn ich also eigene Werte an solche Funktionen "übergeben" möchte, muss ich ein Closure verwenden. Closure bedeutet, dass die innere Funktion auf die Variablen der äußeren Funktion zugreifen kann: function makeFunc() { var name = "Mein Wert"; function displayName() { alert(name); } return displayName; }

dns Firmenprofil Referenzprojekte im Bereich Sharepoint • Projektmanagement • Internationaler Projektarbeitsbereich • Anpassungen über spezielle GANTT-Diagramme • Anpassungen des Benachrichtigungs-Systems (EMail) • MOSS 2007, .NET • 2010 – 2012 Nürnberger Versicherungsgruppe • CRM • Online-Kundenakte: Kategorisierte Ablage aller Dokumente zu Kunden • Integration mit vorhandenem Kunden-Informations-System (KIS) • Migration eines vorhandenen Workflow-Systems • Mehr als 5000 Kundenakten • MOSS 2007, ASP.NET • 2005 – 2011 Siemens Schweiz AG

dns Firmenprofil Referenzprojekte im Bereich Sharepoint • Web Content Management • Mehr als 1.000 Web-Seiten zu technischen Industrielösungen in jeweils 3 Sprachen • Berechtigungskonzept für Inter-, Extra- und Intranet • Datenübernahme und Neumodellierung aus Vorgängersystem • Zentrales Newssystem, Downloadlisten, Tagging-Funktion • MOSS 2007, WSS 2010 • 2008 – 2012 Siemens Industry • Event Managment • Einrichtung und Verwaltung von Veranstaltungen • Buchung und Belegung von Einzelvorträgen für Teilnehmer • TicketWizard ermöglicht Dateneingabe in Sharepoint aus dem Internet • Microsoft Sharepoint Services 2007, .NET • 2008 – 2012Siemens Schweiz AG

dns Firmenprofil Kernkompetenzen Kontaktdaten Gerne beraten wir Sie bei Fragen zu Sharepoint und allen Internet-Themen: Matthias Meier digital nervoussystemsGmbH Tel.: +49 911 5882912 Fax: + 49 911 5882911 mailto:matthias.meier@dns.de Datenbanken und Individualsoftware Digitale Abbildung von Prozessen Expertenwissen Online-Technologien Schnittstellen / Migration Informationsdesign / Usability 15 Jahre Business Kompetenz

Office 365 / Sharepoint 2010 Kleinere Lösungen mit