Skip Ribbon Commands
Skip to main content

SPUGS.ch - SharePoint User Group Schweiz/Liechtenstein

​Dies ist deine Anlaufstelle für Informationen, Treffen und Verzeichnisse rund um Microsoft SharePoint.

SharePoint 2010 - die Plattform für Zusammenarbeit in Gruppen, im Unternehmen, in Vereinen und im Web!

Der SharePoint BLOG:

SharePoint 2013 PDF in neuem Fenster öffnen

Oft werde ich gefragt, wieso Office-Dateien (Word, Excel, PowerPoint) im jeweiligen Office-Programm öffnen aber PDFs im aktuellen Browser-Fenster/Register öffnen. Leider kann das auch heute noch nicht einfach konfiguriert werden.

Je nach Browser und PDF-Reader kann das vielleicht auf dem Client konfiguriert werden, aber spätestens seit Firefox und Chrome mit eigenen PDF-Viewern einen neue Vielfalt möglicher Konfigurationen hervorgebracht haben, muss dies im SharePoint gelöst werden.

Es gibt im Internet einige Beispiele um dieses Problem per JavaScript zu lösen (siehe unten), jedoch funktioniert keines davon mit neuen AJAX-Features in SharePoint 2013 (Minimal Download Strategy und Client Side Rendering).

In diesem Beitrag zeige ich, wie es in SharePoint 2013 und Office 365 mit JavaScript gelöst werden kann.

Einfachste Lösung

Der einfachste Weg ist natürlich mit jQuery. jQuery binde ich in der Regel über die Master Page ein und platziere Globale JavaScripts in /SiteAssets/Scripts/Global.js. Für SharePoint 2013 könnte eine einfache Lösung folgendermassen aussehen:

$(document).ready(function () {
  function updatePdfLinksTarget() {
    $("a[href*='.pdf']").attr('target', '_blank').prop("onclick", null).attr("onmousedown", null);
  }
  updatePdfLinksTarget();
  setInterval(updatePdfLinksTarget, 1000);
});

Die Lösung funktioniert mit sämtlichen PDF-Links aber ist nicht besonders effizient. Dieses JavaScript durchläuft jede Sekunde das gesamte DOM und modifiziert dabei immer alle Links mit .pdf im Pfadende. Somit müssen nicht alle möglichen Seiten-/DOM-Modifikationen von der Minimal Download Strategy (MDS) und Client-Side Rendering (CSR) speziell gehandelt werden.

Bessere Lösung

Eine effizientere Lösung ist, die PDF-Links auf der Seite nur zu suchen und modifizieren, wenn per MDS die Content Area aktualisiert wurde oder wenn per Client-Side Rendering sortiert, gefiltert oder die Seite gewechselt wurde (Paging). Das folgende JavaScript macht genau das:

function initUpdatePdfLinksTarget() {
  if (typeof SPClientTemplates != "undefined" && SPClientTemplates.TemplateManager)
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({ OnPostRender: [updatePdfLinksTarget] });
  updatePdfLinksTarget();
}
function updatePdfLinksTarget() {
  $("a[href*='.pdf']").attr('target', '_blank').prop("onclick", null).attr("onmousedown", null);
  return false;
}
ExecuteOrDelayUntilScriptLoaded(function () {
  if (typeof asyncDeltaManager != "undefined")
    asyncDeltaManager.add_endRequest(initUpdatePdfLinksTarget);
  else
    initUpdatePdfLinksTarget();
}, "start.js");

Erklärung:

ExecuteOrDelayUntilScriptLoaded ersetzt den $(document).ready Event und wird einmalig aufgerufen. Falls MDS aktiviert ist (asyncDeltaManager vorhanden), wird initUpdatePdfLinksTarget bei jedem end-Request ausgeführt, also immer wenn die Content Area geändert hat. Letzteres führt dann updatePdfLinksTarget aus und registriert diese Funktion beim Client Side Rendering, also wenn sortiert, gefiltert oder die Seite gewechselt wurde.

Die Problematik mit jQuery(document).ready in SharePoint ist u.a. hier beschrieben: https://spcafcontrib.codeplex.com/wikipage?title=AvoidJQueryDocumentReady

Alternativer Workaround

Wer ganz auf Code verzichten will, kann auch die Anwender einfach schulen, PDFs in “in neuem Tab” zu öffnen per Kontext-Menü oder Control & Click.

PDF in neuem Tab öffnen per Kontext-Menü

PDF in neuem Tab öffnen per Kontext-Menü

Wie es in SharePoint 2010 gelöst werden kann


„Check Out & Open“ Dialog beim Öffnen von PDFs im SharePoint deaktivieren

Beim Öffnen von PDF Dateien aus SharePoint erscheint ein Dialog, ob das Dokument ausgecheckt werden soll (seit Adobe Reader Version 10). Meistens werden PDFs nur im Lesemodus benötigt, deshalb ist es insbesondere störend, dass „Check Out & Open“ der Standard-Button ist statt „Open“.

Seit Abode Reader Version 10.1 kann diese Funktion in der Windows Registry deaktiviert werden.

Vorgehen

  1. Adobe Reader schliessen
  2. Windows Registry öffnen (als Administrator)
  3. Navigieren zu: HKLM\SOFTWARE\Policies\Adobe\Adobe Reader\10\FeatureLockDown (ggf. andere Versionsnummer)
  4. Neuen Key/Ordner erstellen mit Namen cSharePoint.
  5. Neuen DWORD Wert erstellen mit Namen bDisableSharePointFeatures und Wert 1

Der Registry Eintrag kann auch über GPSo auf alle Workstations verteilt werden: http://blog.unidesk.com/gpos-set-custom-registry-entries-virtual-desktops-disabling-machine-password

Weiterführende Infos


SharePoint 2013 Kontaktliste mit Fotos erweitern

SharePoint Kontaktlisten können per Mausklick im Outlook angezeigt werden. Dort kann auch für jeden Kontakt ein Foto hinterlegt und gespeichert werden, jedoch erscheint dieses auf der SharePoint Website überall nur als Attachment ohne Bildvorschau. Dank JS Link bzw. JavaScript kann dies im Browser sehr leicht angezeigt werden. Das Resultat sieht dann so aus:

Resultat mit JS Link in der Listenansicht

Resultat mit JS Link in der Listenansicht

Wird im Outlook in einer SharePoint Kontaktliste einem Kontakt ein Foto hinzugefügt, wird das Foto als Item-Attachment mit fixem Dateinamen ContactPicture.jpg gespeichert.

In SharePoint 2013 hat Microsoft das Client Side Rendering eingefügt, womit auf standardisierte Weise das Rendering bzw. die Darstellung jedes Feldes in allen Ansichten und Formularen gesteuert werden kann per JavaScript. Ross Bradbrook hat einen guten Artikel dazu geschrieben in seinem Blog www.rbradbrook.co.uk/sharepoint-2013/introduction-to-client-side-rendering-in-sharepoint-2013/. Es gibt bereits eine kleine Sammlung an Code Beispielen auf der Microsoft Website: http://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a.

Dank JS Link muss nun noch bei den gewünschten Web Parts in den Einstellungen der Pfad zur JavaScript Datei eingetragen werden, der Rest geschieht quasi von selbst. Das macht die Anwendung insbesondere für Anwender ohne HTML-Kenntnisse einfacher.

In meinem JS Link muss in der Listenansicht die Attachments-Spalte angezeigt werden, diese wird dann per jQuery wieder ausgeblendet. Diesen Schritt habe ich gewählt, damit nicht bei jedem Kontakt versucht wird ein Bild anzuzeigen, wenn gar kein Attachment vorhanden ist. Deshalb bitte die Attachments-Spalte in den Views einblenden.

 

Vorgehen zur Initial-Einrichtung inklusive jQuery Integration

  1. In der Kontakte-Liste eine Platzhalter-Spalte erstellen für das Foto (Spaltenname Photo). Ich empfehle dafür eine berechnete Spalte, da diese in den New- und Edit-Formularen nicht erscheint. Als Formel kann =” ” eingetragen werden.
    SharePoint Photo Column
  2. JavaScripts speichern unter ~/SiteAssets/Scripts
    jQuery and Contacts JS
    jQuery: http://code.jquery.com/jquery-1.11.1.min.js
    Contacts.js: http://www.spugs.ch/SPUGSBlog/SiteAssets/Lists/Posts/Contacts.js.txt
  3. jQuery in der Master Page einbinden
    <SharePoint:ScriptLink language=”javascript” name=”~sitecollection/SiteAssets/Scripts/jquery-1.11.1.min.js” runat=”server” Localizable=”false” />
    Embed jQuery into MasterPage
  4. Auf der Listen-Ansicht die Seite bearbeiten, WebPart bearbeiten und JS Link eintragen
    JS Link - Contacts
    Resultat:
    SharePoint Contacts with Photo
  5. Gleiches Vorgehen bei der Detail-Ansicht
    SharePoint Contact Details Photo
Standard Listen-Ansicht eines Kontakts in SharePoint 2013 Kontakt im Outlook bearbeiten und Foto speichern Bitte den Namen Photo wählen, dieser ist im JS Link fix hinterlegt jQuery und Contacts JavaScript Dateien in /SiteAssets/Scripts/ speichern jQuery in der MasterPage einbinden Listenansicht Seite bearbeiten um die Web Part Einstellungen zu öffen JS Link bei dem Listen-Ansicht Web Part eintragen Resultat mit JS Link in der Listenansicht JS Link bei dem Detail-Ansicht Web Part eintragen

Update 4.7.2014

Anstelle er Einbindung in die Master Page funktioniert auch die simplere Einbindung nur über die JS-Link Einstellung: ~sitecollection/SiteAssets/Scripts/jquery-1.11.1.min.js|~sitecollection/SiteAssets/Scripts/Contacts.js


SharePoint 2010/2013 Kalender-Monatsansichten drucken

In SharePoint 2010 und 2013 ist bei Kalendern die Wochen- und Monatsansicht nicht für den Druck optimiert. Termine werden entweder gar nicht angezeigt oder sie sind horizontal nicht korrekt ausgerichtet. Hier beschreibe ich zwei einfache Lösungen, um die Monatsansicht sauber auf ein A4 oder A3 Papier auszudrucken.

Hintergrund

In SharePoint 2010 und SharePoint 2013 (Foundation und Standard/Enterprise) passt sich der Kalender standardmässig der aktuellen Fenstergrösse des Browsers an. Die Termine werden dabei als Div-Layer darübergelegt und absolut positioniert mit left- & top-Position. Beim Ändern der Fenstergrösse werden die Positionen durch JavaScript neu berechnet (window.resized-Event und unter anderem SP.UI.ApplicationPages.CalendarStateHandler.prototype.parentResized()).

Diese Berechnung wird zwar auch bei der Druckansicht durchgeführt, jedoch werden die horizontalen Positionen (left-position) der Termine falsch berechnet. Das Resultat sind Kalender-Layouts, in denen die Termine bei 100% Zoom meist gar nicht angezeigt werden und bei ca. 80% Zoom die Termine horizontal falsch ausgerichtet sind.

Workaround mit korrektem Zoom-Level

Eine Lösung ist, den Zoom Level auf ein Prozent genau einzustellen. In meinem Beispiel mit der Monatsansicht für ein A4 Papier Querformat ist das 52 Prozent.

Workaround mit fixer Kalender-Breite

Im Microsoft Forum ist dieses Problem bereits beschrieben. Dort empfiehlt Darrin, dem Webpart eine fixe Breite von 12 Zoll (ca. 30 cm) zu setzen. Das funktioniert zwar, aber dadurch geht die dynamische Kalender-Breite verloren, zudem muss diese Einstellung auf jedem Kalender-Webpart und View separat gesetzt werden.

Mit einem 11 Zeilen jQuery lässt sich dasselbe Verhalten erreichen, und zwar auf allen Views auf einmal. Zudem gibt es im Internet Explorer und Firefox einen onbeforeprint-Event, in dem die fixe Breite gesetzt werden kann, und einen onafterprint-Event, in dem die fixe Breite wieder entfernt werden kann. Wichtig ist, dass der Resize-Eventhandler danach ausgelöst wird.

In meinem Beispiel für SharePoint 2013 kann der Anwender die fixe breite selber eingeben in einem Browser-Dialog.

// Print Optimization for Calendar. Set fix width before print and call resize-handler
window.onbeforeprint = function() {
  var newWidth = prompt("Seitenbreite eingeben (A4 query: ca. 22cm, A3 quer: ca. 38.1cm)", "38.1cm");
  if (newWidth) {
    $("#AsynchronousViewDefault_CalendarView").parents("div.ms-webpart-chrome,div.noindex").width(newWidth);
    window._events.resize[0].handler.call();
  }
}
window.onafterprint = function() {
  $("#AsynchronousViewDefault_CalendarView").parents("div.ms-webpart-chrome,div.noindex").width("100%");
  window._events.resize[0].handler.call();
}

Viel Spass damit und schöne Festtage.

100% Zoom, A4 quer, flexible Kalender-Breite 80% Zoom, A4 quer, flexible Kalender-Breite 52% Zoom, A4 quer, flexible Kalender-Breite JavaScript Dialog/Prompt zum setzen der fixen Kalender-Breite für den Druck 100% Zoom, A3 quer, fixe Kalender-Breite von 38.1cm
 

 SPUGS Kalender

 
  
  
There are no items to show in this view of the "Agenda" list.
 

 SPUGSch - Twitter Search

 
Unable to display this Web Part. To troubleshoot the problem, open this Web page in a Microsoft SharePoint Foundation-compatible HTML editor such as Microsoft SharePoint Designer. If the problem persists, contact your Web server administrator.


Correlation ID:51c4ed67-5499-4667-a5e7-f5ea81a676b2