Digital nervous systems GmbH Krugstraße 12 90419 Nürnberg Office 365 / Sharepoint 2010 Kleinere Lösungen mit Javascript und dem Client.

Präsentation zum Thema: "Digital nervous systems GmbH Krugstraße 12 90419 Nürnberg Office 365 / Sharepoint 2010 Kleinere Lösungen mit Javascript und dem Client."—  Präsentation transkript:

1 digital nervous systems GmbH Krugstraße 12 90419 Nürnberg http://www.dns.de Office 365 / Sharepoint 2010 Kleinere Lösungen mit Javascript und dem Client Object Model selbst erstellen Motivation Bausteine Lösung Javascript

2 digital nervous systems GmbH Krugstraße 12 90419 Nürnberg http://www.dns.de MOTIVATION LÖSUNG BAUSTEINE JAVASCRIPT Javascript API*s gibt es mittlerweile überall… * Application Programming Interface

3 digital nervous systems GmbH Krugstraße 12 90419 Nürnberg http://www.dns.de MOSS 2007 Office 365 Eigener Server Public Cloud Sharepoint 2012 Private Cloud [t] Möglichkeiten auf dem Server Möglichkeiten auf dem Client Betreibbarkeit / SLAs

4 digital nervous systems GmbH Krugstraße 12 90419 Nürnberg http://www.dns.de 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

5 digital nervous systems GmbH Krugstraße 12 90419 Nürnberg http://www.dns.de MOTIVATION LÖSUNG BAUSTEINE JAVASCRIPT Es gibt drei technische Varianten des SP Client Object Models: JAVASCRIPT.NET SILVERLIGHT

6 digital nervous systems GmbH Krugstraße 12 90419 Nürnberg http://www.dns.de MOTIVATION LÖSUNG BAUSTEINE JAVASCRIPT Für welche Aufgaben benutzt man das Client Object Model? JAVASCRIPT.NET UI innerhalb Sharepoint Zugriffe von außen

7 digital nervous systems GmbH Krugstraße 12 90419 Nürnberg http://www.dns.de MOTIVATION LÖSUNG BAUSTEINE JAVASCRIPT Vorschau auf das Endergebnis

8 digital nervous systems GmbH Krugstraße 12 90419 Nürnberg http://www.dns.de MOTIVATION LÖSUNG BAUSTEINE JAVASCRIPT JAVASCRIPT CODE auf Seite einfügen JAVASCRIPT LIBRARIES laden KUNDENDATEN auslesen mit dem Client Object Model KARTENMARKIERUNGEN setzen mit der GoogleMaps API Einzelschritte zum Ergebnis A B C D

9 digital nervous systems GmbH Krugstraße 12 90419 Nürnberg http://www.dns.de MOTIVATION LÖSUNG BAUSTEINE JAVASCRIPT Grundlegende Tipps: 1 2 3 Einzelteile erstmal außerhalb von Sharepoint entwickeln z. B. mit JS-Fiddle (s. Ende dieses Foliensatzes) Sich mit dem Javascript-Debugger anfreunden z. B. mit IE-Developer-Tools (s. Ende dieses Foliensatzes) Closures und asynchrone Aufrufe verstehen (s. Ende dieses Foliensatzes)

10 digital nervous systems GmbH Krugstraße 12 90419 Nürnberg http://www.dns.de A Javascript Libraries laden...befinden sich als Sandbox Solutions in diesem Foliensatz. MOTIVATION LÖSUNG BAUSTEINE JAVASCRIPT

11 digital nervous systems GmbH Krugstraße 12 90419 Nürnberg http://www.dns.de A Javascript Libraries laden - das Resultat Sharepoint Object Model google Maps API jQuery Namespace SP.ClientContext.get_current(); google.maps.Geocoder(); $("#map_canvas").show(); MOTIVATION LÖSUNG BAUSTEINE JAVASCRIPT

12 digital nervous systems GmbH Krugstraße 12 90419 Nürnberg http://www.dns.de 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 LÖSUNG BAUSTEINE JAVASCRIPT

13 digital nervous systems GmbH Krugstraße 12 90419 Nürnberg http://www.dns.de Wo fange ich an? Wie greife ich auf die aktuelle Liste zu? Manchmal fehlt einem jemand, den man fragen kann… MOTIVATION LÖSUNG BAUSTEINE JAVASCRIPT

14 digital nervous systems GmbH Krugstraße 12 90419 Nürnberg http://www.dns.de Wo fange ich an? …doch zum Glück gibt es den Context! SPContext Hier, hab die Liste für Dich schon mal geholt! MOTIVATION LÖSUNG BAUSTEINE JAVASCRIPT

15 digital nervous systems GmbH Krugstraße 12 90419 Nürnberg http://www.dns.de 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 LÖSUNG BAUSTEINE JAVASCRIPT

16 digital nervous systems GmbH Krugstraße 12 90419 Nürnberg http://www.dns.de 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 LÖSUNG BAUSTEINE JAVASCRIPT

17 digital nervous systems GmbH Krugstraße 12 90419 Nürnberg http://www.dns.de D Karte erzeugen 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); Optionen für die Darstellung der Karte Bereich "ausklappen" Kartendaten von Google holen MOTIVATION LÖSUNG BAUSTEINE JAVASCRIPT

18 digital nervous systems GmbH Krugstraße 12 90419 Nürnberg http://www.dns.de D Kartenmarkierungen setzen 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); Der geocoder macht aus der Adresse eine Geo-Koordinate MOTIVATION LÖSUNG BAUSTEINE JAVASCRIPT

19 digital nervous systems GmbH Krugstraße 12 90419 Nürnberg http://www.dns.de MOTIVATION LÖSUNG BAUSTEINE JAVASCRIPT 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

20 digital nervous systems GmbH Krugstraße 12 90419 Nürnberg http://www.dns.de Gemeinheiten bei Javascript A)Funktionale Programmierung B)Asynchrone Aufrufe C)Method Chaining MOTIVATION LÖSUNG BAUSTEINE JAVASCRIPT

21 digital nervous systems GmbH Krugstraße 12 90419 Nürnberg http://www.dns.de MOTIVATION LÖSUNG BAUSTEINE JAVASCRIPT 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",...

22 digital nervous systems GmbH Krugstraße 12 90419 Nürnberg http://www.dns.de MOTIVATION LÖSUNG BAUSTEINE JAVASCRIPT Javascript testen: jsfiddle.net

23 digital nervous systems GmbH Krugstraße 12 90419 Nürnberg http://www.dns.de MOTIVATION LÖSUNG BAUSTEINE JAVASCRIPT 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.

24 digital nervous systems GmbH Krugstraße 12 90419 Nürnberg http://www.dns.de MOTIVATION LÖSUNG BAUSTEINE JAVASCRIPT 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.

25 digital nervous systems GmbH Krugstraße 12 90419 Nürnberg http://www.dns.de MOTIVATION LÖSUNG BAUSTEINE JAVASCRIPT 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; }

26 digital nervous systems GmbH Krugstraße 12 90419 Nürnberg http://www.dns.de Projektmanagement Internationaler Projektarbeitsbereich Anpassungen über spezielle GANTT- Diagramme Anpassungen des Benachrichtigungs- Systems (EMail) MOSS 2007,.NET 2010 – 2012 Nürnberger Versicherungsgruppe dns Firmenprofil Referenzprojekte im Bereich Sharepoint 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

27 digital nervous systems GmbH Krugstraße 12 90419 Nürnberg http://www.dns.de 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 dns Firmenprofil Referenzprojekte im Bereich Sharepoint 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 – 2012 Siemens Schweiz AG

28 digital nervous systems GmbH Krugstraße 12 90419 Nürnberg http://www.dns.de dns Firmenprofil Kernkompetenzen Kontaktdaten Gerne beraten wir Sie bei Fragen zu Sharepoint und allen Internet-Themen: Matthias Meier digital nervous systems GmbH Tel.: +49 911 5882912 Fax: + 49 911 5882911 mailto:matthias.meier@dns.de Digitale Abbildung von Prozessen Datenbanken und Individualsoftware Informationsdesign / Usability Expertenwissen Online-Technologien Schnittstellen / Migration 15 Jahre Business Kompetenz