Office 365 / Sharepoint 2010 Kleinere Lösungen mit

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


MOTIVATION LÖSUNGBAUSTEINE JAVASCRIPT

Javascript API*s gibt es mittlerweile überall…

* Application Programming Interface


MOSS2007

Office365

„Eigener Server“

Public Cloud

Sharepoint2012

Private Cloud

[t]Möglichkeiten auf dem Server

Möglichkeiten auf dem Client

Betreibbarkeit /SLAs


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



Es gibt drei technische Varianten des SP Client Object Models:

JAVASCRIPT .NET

SILVERLIGHT



Für welche Aufgaben benutzt man das Client Object Model?

JAVASCRIPT .NET

UI innerhalb Sharepoint Zugriffe von „außen“

http://www.iconarchive.com/show/pleasant-icons-by-harwen/MS-DOS-Batch-File-icon.html



Vorschau auf dasEndergebnis



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



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)


A Javascript Libraries laden

...befinden sich als Sandbox Solutions in diesem Foliensatz.



A Javascript Libraries laden - das Resultat

Sharepoint Object Model

google Maps API

jQuery

Namespace

SP.ClientContext.get_current();

google.maps.Geocoder();

$("#map_canvas").show();



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.



Wo fange ich an?

Wie greife ich auf die aktuelle

Liste zu?Manchmal fehlteinem jemand,den man fragenkann…



Wo fange ich an?

…doch zumGlück gibt es den Context!

SPContext

Hier, hab die Liste für Dich schon

mal geholt!



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



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



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



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




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


„Gemeinheiten“ bei Javascript

A) Funktionale Programmierung

B) Asynchrone Aufrufe

C) Method Chaining




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", ...



Javascript testen: jsfiddle.net



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.



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.



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; }


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


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


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

mailto:[email protected]

Documents

Office 365 / Sharepoint 2010 Kleinere Lösungen mit