digital nervous systems gmbh krugstraße 12 90419 nürnberg office 365 / sharepoint 2010 kleinere...
TRANSCRIPT
digital nervous systems GmbH Krugstraße 12 90419 Nürnberghttp://www.dns.de
Office 365 / Sharepoint 2010
Kleinere Lösungen mit Javascript und dem Client Object Model selbst erstellen
Motivation
Bausteine
Lösung
Javascript
digital nervous systems GmbH Krugstraße 12 90419 Nürnberghttp://www.dns.de
MOTIVATION LÖSUNGBAUSTEINE JAVASCRIPT
Javascript API*s gibt es mittlerweile überall…
* Application Programming Interface
digital nervous systems GmbH Krugstraße 12 90419 Nürnberghttp://www.dns.de
MOSS2007
Office365
„Eigener Server“
Public Cloud
Sharepoint2012
Private Cloud
[t]Möglichkeiten auf dem Server
Möglichkeiten auf dem Client
Betreibbarkeit /SLAs
digital nervous systems GmbH Krugstraße 12 90419 Nürnberghttp://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
digital nervous systems GmbH Krugstraße 12 90419 Nürnberghttp://www.dns.de
MOTIVATION LÖSUNGBAUSTEINE JAVASCRIPT
Es gibt drei technische Varianten des SP Client Object Models:
JAVASCRIPT .NET
SILVERLIGHT
digital nervous systems GmbH Krugstraße 12 90419 Nürnberghttp://www.dns.de
MOTIVATION LÖSUNGBAUSTEINE JAVASCRIPT
Für welche Aufgaben benutzt man das Client Object Model?
JAVASCRIPT .NET
UI innerhalb Sharepoint Zugriffe von „außen“
digital nervous systems GmbH Krugstraße 12 90419 Nürnberghttp://www.dns.de
MOTIVATION LÖSUNGBAUSTEINE JAVASCRIPT
Vorschau auf dasEndergebnis
digital nervous systems GmbH Krugstraße 12 90419 Nürnberghttp://www.dns.de
MOTIVATION LÖSUNGBAUSTEINE JAVASCRIPT
JAVASCRIPT CODEauf Seite einfügen
JAVASCRIPT LIBRARIESladen
KUNDENDATEN auslesenmit dem Client Object Model
KARTENMARKIERUNGEN setzen mit der GoogleMaps API
Einzelschritte zum Ergebnis
A
B
C D
digital nervous systems GmbH Krugstraße 12 90419 Nürnberghttp://www.dns.de
MOTIVATION LÖSUNGBAUSTEINE JAVASCRIPT
Grundlegende Tipps:
1
2
3
Einzelteile erstmal außerhalb von Sharepoint entwickelnz. B. mit JS-Fiddle (s. Ende dieses Foliensatzes)
Sich mit dem Javascript-Debugger anfreundenz. B. mit IE-Developer-Tools (s. Ende dieses Foliensatzes)
Closures und asynchrone Aufrufe verstehen(s. Ende dieses Foliensatzes)
digital nervous systems GmbH Krugstraße 12 90419 Nürnberghttp://www.dns.de
A Javascript Libraries laden
...befinden sich als Sandbox Solutions in diesem Foliensatz.
MOTIVATION LÖSUNGBAUSTEINE JAVASCRIPT
digital nervous systems GmbH Krugstraße 12 90419 Nürnberghttp://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ÖSUNGBAUSTEINE JAVASCRIPT
digital nervous systems GmbH Krugstraße 12 90419 Nürnberghttp://www.dns.de
B Javascript Code auf Seite einfügen
...mit Hilfe desInhalts-Editor-WebParts
Zum Probieren zuerst HTML-Button verwenden - später den Code in eineTextdatei ablegen, damit er an anderen Stellen wiederverwendet werden kann.
MOTIVATION LÖSUNGBAUSTEINE JAVASCRIPT
digital nervous systems GmbH Krugstraße 12 90419 Nürnberghttp://www.dns.de
Wo fange ich an?
Wie greife ich auf die aktuelle
Liste zu?Manchmal fehlteinem jemand,den man fragenkann…
MOTIVATION LÖSUNGBAUSTEINE JAVASCRIPT
digital nervous systems GmbH Krugstraße 12 90419 Nürnberghttp://www.dns.de
Wo fange ich an?
…doch zumGlück gibt es den Context!
SPContext
Hier, hab die Liste für Dich schon
mal geholt!
MOTIVATION LÖSUNGBAUSTEINE JAVASCRIPT
digital nervous systems GmbH Krugstraße 12 90419 Nürnberghttp://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 istimmer gleich
Hier bekommen wirZugriff auf die Auswahl
der Liste
MOTIVATION LÖSUNGBAUSTEINE JAVASCRIPT
digital nervous systems GmbH Krugstraße 12 90419 Nürnberghttp://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 .loadpassiert wirklich etwas
MOTIVATION LÖSUNGBAUSTEINE JAVASCRIPT
digital nervous systems GmbH Krugstraße 12 90419 Nürnberghttp://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 generierenmap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
Optionen für die Darstellung der Karte
Bereich "ausklappen"
Kartendaten von Google holen
MOTIVATION LÖSUNGBAUSTEINE JAVASCRIPT
digital nervous systems GmbH Krugstraße 12 90419 Nürnberghttp://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ÖSUNGBAUSTEINE JAVASCRIPT
digital nervous systems GmbH Krugstraße 12 90419 Nürnberghttp://www.dns.de
MOTIVATION LÖSUNGBAUSTEINE JAVASCRIPT
googleMapsForOffice365.wsp jQueryForOffice365.wsp
Sandbox Solutions für die Javascript Bibliotheken
Javascript-Code für das Content-Editor WebPart
googleMaps_showAllSelectedItemsOnMap.htm
Felder im CAML beziehen sich auf die Standard-Kontaktliste: Adresse, Ort und PLZ sollten ausgefüllt sein
digital nervous systems GmbH Krugstraße 12 90419 Nürnberghttp://www.dns.de
„Gemeinheiten“ bei Javascript
A) Funktionale Programmierung
B) Asynchrone Aufrufe
C) Method Chaining
MOTIVATION LÖSUNGBAUSTEINE JAVASCRIPT
digital nervous systems GmbH Krugstraße 12 90419 Nürnberghttp://www.dns.de
MOTIVATION LÖSUNGBAUSTEINE 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", ...
digital nervous systems GmbH Krugstraße 12 90419 Nürnberghttp://www.dns.de
MOTIVATION LÖSUNGBAUSTEINE JAVASCRIPT
Javascript testen: jsfiddle.net
digital nervous systems GmbH Krugstraße 12 90419 Nürnberghttp://www.dns.de
MOTIVATION LÖSUNGBAUSTEINE 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.
digital nervous systems GmbH Krugstraße 12 90419 Nürnberghttp://www.dns.de
MOTIVATION LÖSUNGBAUSTEINE 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 dieDaten geliefert hat.
digital nervous systems GmbH Krugstraße 12 90419 Nürnberghttp://www.dns.de
MOTIVATION LÖSUNGBAUSTEINE 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; }
digital nervous systems GmbH Krugstraße 12 90419 Nürnberghttp://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
digital nervous systems GmbH Krugstraße 12 90419 Nürnberghttp://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
digital nervous systems GmbH Krugstraße 12 90419 Nürnberghttp://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 5882912Fax: + 49 911 5882911mailto:[email protected]
Digitale Abbildung von Prozessen
Datenbanken und Individualsoftware
Informationsdesign / Usability
Expertenwissen Online-
Technologien
Schnittstellen / Migration
15 Jahre Business Kompetenz