close

Juli 2016

AllgemeinCloudDevelopment, CodingHow-To, Tutorial, SzenarioHybridMicrosoft 365On-PremisesSharePoint 2013SharePoint 2016SharePoint Online

Javascript und CSS einbinden mit User Custom Actions

 

User Custom Actions können einem spezifischem Web, einer Site, oder einer Liste (für unsere Zwecke eher uninteressant) zugewiesen werden. Sie bieten einem die Möglichkeit mittels ScriptLink Javascript einzubinden, ohne die Masterpage anrühren zu müssen. Generell stehen einem hierfür zwei Lösungsansätze zur Verfügung: Das Client Side Object Model (CSOM), oder die Sharepoint REST-API. Wir werden im Laufe dieses Artikels einige Anwendungsbeispiele mit REST anführen.

Jede User Custom Action besitzt die Eigenschaft „Location“, welche immer angegeben werden muss. Sie legt fest wo und wie die User Custom Action eingebunden wird. Um Beispielsweise eine Javascript Datei einzubinden muss der Wert „ScriptLink“ angegeben werden.

Folgende Parameter sind beim Einbinden von Scripts von Bedeutung:

  • Location: „ScriptLink“ gibt an dass es sich um ein Script handelt, dass eingebunden werden soll
  • Sequence: eine ganze Zahl, legt fest in welcher Reihenfolge Scripts eingebunden werden sollen
  • ScriptSrc: Der Pfad zur Datei, gleichzusetzten mit dem „src“-Attribute eines „script“-Tags in HTML
  • ScriptBlock: Optional, hier könnte direkt Javascript Code angegeben werden. Nicht empfehlenswert, da die Reihenfolge (Sequence) dann nicht eingehalten werden kann, jedoch notwendig um Stylesheets einzubinden.
  • Title & Description: Titel und Beschreibung der User Custom Action
  • ID: Optional, hier kann eine eigene ID angegeben werden. Falls nicht vorhanden wird von Sharepoint eine ID generiert


Wichtig: ScriptSrc darf in Sharepoint 2010 und 2013 keine absoluten Pfade beinhalten. Dies ist unbedingt zu vermeiden da Sharepoint sonst gar keine Seiten mehr anzeigt. In Sharepoint Online und Sharepoint 2016 lassen sich auch absolute Pfade problemlos einbinden.

Im folgenden Beispiel wird demonstriert, wie jQuery in eine Site eingebunden werden kann und somit auf allen Pages und Subsites dieser Site verfügbar ist.

$.post({
	url: "/pfad/zur/site/_api/site/usercustomactions",
	data: JSON.stringify({
		"__metadata": { "type": "SP.UserCustomAction" },
		"Location":"ScriptLink",
		"Sequence":"0",
		"Title":"jQuery 3.0.0",
		"Description":"User Custom Action zum Einbinden von jQuery",
		"ScriptSrc" : "~sitecollection/siteassets/css/jquery-3.0.0.min.js"
	}),
	headers: { 
		"X-RequestDigest": $("#__REQUESTDIGEST").val(),
		"content-type": "application/json;odata=verbose",
	},
	success: successHandler,
	error: errorHandler
});

Der angeführte REST-Call liefert einem nach erfolgreichem Erstellen der User Custom Action die eben erstellte UCA als Objekt oder in Form von XML zurück. Sie besitzt eine eindeutige ID (selber angegeben oder von Sharepoint generiert), mit deren Hilfe sie nachträglich wieder bearbeitet oder gelöscht werden kann.

Das folgende Beispiel zeigt wie man Änderungen an einer UCA vornimmt. Wir werden die Eigenschaft „ScriptSrc“ der eben erstellen UCA ändern, um eine aktuellere Version von jQuery zu laden.

$.post({
	url: "/pfad/zur/site/_api/site/usercustomactions('<GUID>')",
	data: JSON.stringify({
		"__metadata": { "type": "SP.UserCustomAction" },
		"ScriptSrc":"~sitecollection/siteassets/css/jquery-3.1.0.min.js"
	}),
	headers: { 
		"X-RequestDigest": $("#__REQUESTDIGEST").val(),
		"content-type": "application/json;odata=verbose",
		"X-HTTP-Method": "MERGE"
	},
	success: successHandler,
	error: errorHandler
});

Das folgende Beispiel zeigt wie die User Custom Action wieder gelöscht werden kann.

$.post({
	url: "/pfad/zur/site/_api/site/usercustomactions('<GUID>')",
	headers: { 
		"X-RequestDigest": $("#__REQUESTDIGEST").val(),
		"X-HTTP-Method": "DELETE"
	},
	success: successHandler,
	error: errorHandler
});

Da es auch Sinn macht Stylesheets einzubinden, ohne die Masterpage bearbeiten zu müssen, werden wir uns nun diesem Problem widmen. In Sharepoint hat man standardmäßig die Möglichkeit eine einzelne CSS Datei einzubinden (Websiteeinstellungen > Gestaltungsvorlage > Alternative URL für CSS-Datei). Dieses Feature hat jedoch einige Nachteile.

  • Es kann nur eine einzige Datei eingebunden werden
  • Erstellt man nachträglich eine Unterseite, muss die Einstellung erneut gespeichert werden damit diese auch für die neue Unterseite gilt.

Die Nutzung von User Custom Actions zum Einbinden von CSS Dateien ist wesentlich flexibler.

User Custom Actions bieten generell keine Möglichkeit, Stylesheets einzubinden. Es kann jedoch die „ScriptBlock“ Eigenschaft genutzt werden um eine Datei mit Javascript einzubinden.

Javascript zum einbinden einer CSS Datei:

(function(){
	var head = document.getElementsByTagName('head')[0];
	var link = document.createElement('link');
	link.type = 'text/css';
	link.rel = 'stylesheet';
	link.href = '~site/pfad/zu/einer/datei.css';
	head.appendChild(link);
})();

Alternatives Javascript zum einbinden einer CSS Datei (ab Sharepoint 2013):

(function(){ registerCssLink('~site/pfad/zu/einer/datei.css') })();

Einbinden eines Stylesheets mittels User Custom Action, diesmal nur für ein spezifisches Web (z.B. eine Unterseite):

var url = "~site/pfad/zu/einer/datei.css";

var block = [
	"(function(){",
	"var head = document.getElementsByTagName('head')[0];",
	"var link = document.createElement('link');",
	"link.type = 'text/css';",
	"link.rel = 'stylesheet';",
	"link.href = '" + url + "';",
	"head.appendChild(link);",
	"})();"
].join("");

$.post({
	url: "/pfad/zur/site/subsite/_api/web/usercustomactions",
	data: JSON.stringify({
		"__metadata": { "type": "SP.UserCustomAction" },
		"Location":"ScriptLink",
		"Sequence":"100",
		"Title":"",
		"Description":"",
		"ScriptBlock" : block
	}),
	headers: { 
		"X-RequestDigest": $("#__REQUESTDIGEST").val(),
		"content-type": "application/json;odata=verbose",
	},
	success: successHandler,
	error: errorHandler
});

 

Um Änderungen am Layout von Sharepoint vorzunehmen, oder zusätzliche Funktionen zu implementieren, müssen in der Regel diverse Javascripts und Stylesheets eingebunden werden. Dies kann entweder über Skript-Editor Webparts oder über die Masterpage erfolgen. Beide Varianten sind jedoch mit einer Reihe von Nachteilen und Einschränkungen behaftet. Skript-Editor Webparts sind auf eine Seite begrenzt. Die Masterpage wiederum ist umständlich zu bearbeiten und es besteht die Gefahr dass Anpassungen bei Sharepoint-Updates wieder verloren gehen. Daher haben wir uns nach einer besseren Lösung umgesehen: User Custom Actions

Published: 25.07.2016 14:09

Source: New feed

mehr lesen
AllgemeinApple, iOS, MacOSCloudCollaboration, ProduktivitätHybridMicrosoft 365MobilityOn-PremisesSharePoint 2016SharePoint OnlineTool, Bot, App, Add-In

Office 365: Mobile View und Mobile App, auch für SharePoint 2016

Allgemeines

Heut zu Tage wird es immer wichtiger auf Dokumente und Inhalte auch von unterwegs zugreifen zu können. Dokumente oder SharePoint Seiten mit Hilfe eines Laptops auch von Unterwegs abzurufen, ist für niemanden mehr eine Herausforderung. Mit der immer besser werdenden Hardware im Smartphone und Tablet Bereich werden diese mobilen Endgeräte immer mehr zum Laptop Ersatz.

Nun steht Microsoft mit SharePoint vor der Herausforderung drei mobile Betriebssysteme zu unterstützen. Im „Android“ und „iPhone“ Bereich will Microsoft mit einer mobile App aufwarten.

Mit der am 27.06.2016 zuletzt upgedateten Version der „Microsoft SharePoint“ App für iOS, gibt Microsoft den Startschuss für das „intranet in your pocket“

Download von itunes

Ende 2016 soll eine Version für Android und Windows Universal ebenfalls auf den Markt kommen (Quelle: Office Blogs – KLICK)

User wie meine Wenigkeit, die sowohl privat als auch beruflich Windows 10 mobile Endgeräte benutzen, hatten bis vor kurzem nur die Möglichkeit die alt bekannte, und wenig zufriedenstellende „mobile view“ zu nutzen die meist, Beispielsweise nur ein Sub Set von Listenspalten angezeigt hat.

Mit Office 365 hat der User nun die Möglichkeit in einer mobilen responsive Ansicht innerhalb des SharePoints zu navigieren.

Über den Applauncher kann der User nun wie gewohnt alle Office 365 Features nutzen.

Nokia Lumia 950-Applauncher

Startseiten Ansicht der Seite „Hatahet Showcase“

Applikation „Delve“

Technical Sneak Peek

Surft ein User nun auf die Unternehmens SharePoint Homepage mit Hilfe eines mobilen Browsers (Windows Phone, iPhone oder Android) so wird der dieser auf eine eigene „touchapp.aspx“ Seite weitergeleitet (Android und iPhone können unter Umständen weniger Funktionen im Applauncher anbieten). Diese Seite zeigt dem User alle Apps auf der SharePoint Seite und deren Unterwebsites an. Mit einem Klick auf den Applauncher in der linken unteren Ecke kann er, die Ihm zur Verfügung stehenden Applikationen wie Delve, Kalender, Video, Sway usw. je nach seinen Berechtigungen aus dem Office 365 verwenden.

Conclusio

Ja es stimmt – Es gibt derzeit wieder einmal keine App für Windows Phone User. Jedoch besteht meiner Meinung nach auch kein Bedarf für eine eigene App, da das responsive Webdesign alle Möglichkeiten bietet und durch die „Cloud First“ Strategie von Microsoft auf stätig aktualisiert wird, ohne App-Updates herunterladen und installieren zu müssen. Ein Feature welches sich für solch ein Upgrade anbieten würde, wäre eine intuitivere Navigation zurück, also heraus aus einer Applikation wie Beispielsweise „Delve“.

Published: 12.07.2016 10:12

Source: New feed

mehr lesen