SharePoint

  • Artikel

Verwenden von JSLink mit SharePoint 2013

Pritam Baldota

Arbeiten mit dem SharePoint UI war schon immer so etwas wie eine Herausforderung für Entwickler. Jedoch ein neues Feature in SharePoint 2013 genannt JSLink entlastet die Beweislast mithilfe von XSLT und bietet eine viel einfachere und flexibler Möglichkeit, benutzerdefinierte Felder auf dem Client angezeigt. JSLink ist eine Eigenschaft, die Darstellung von Feldern, Elemente und sogar Webparts über eine JavaScript-Datei steuert.

In diesem Artikel wird die Verwendung von JSLink mit Hilfe von zwei Demo-Szenarien untersuchen. Das erste Szenario wird zeigen, wie Sie farblich gekennzeichneten Nachrichten verwenden können an Aufgabenerledigung, z. B. wie in gezeigt Abbildung 1.

Using a Custom Column for a Task List to Show Status
Abbildung 1 verwenden eine benutzerdefinierte Spalte eine Task-Liste Status anzeigen

Das zweite Szenario ist komplexer. Es wird gezeigt, wie eine Bildergalerie zu implementieren, die bietet eine Legende für jedes Bild zu zeigen Metadaten in verschiedenen Auflösungen herunterladen, siehe Abbildung 2.

Multiple Resolutions of an Image Available for Download
Abbildung 2 Download mehrere Auflösungen eines Bildes zur Verfügung

Ich werde auch Tauchen Sie ein in die Formularfelder neu und bearbeiten anpassen. Bevor ich angefangen habe, aber nehme ich einen Blick auf die Grundlagen der clientseitiges Rendering in SharePoint 2013 und wie JSLink Wert es hinzufügt.

Clientseitiges Rendering

Clientseitiges Rendering bezieht sich auf die Anzeige der Daten auf einer Seite mithilfe von Technologien, die Arbeiten auf dem Client, wie z. B. JavaScript, HTML und CSS. Da die Technologie im Browser des Clients ausgeführt wird, ist es noch reagieren und effizienter, wodurch sich die Last auf dem Webserver. Frühere Versionen von SharePoint (2010, 2007) dient XSLT Style-Elementen, die in der Regel komplexer, mit zu arbeiten und langsamere Leistung verglichen mit JavaScript. SharePoint 2013 noch unterstützt XSLT, hat aber zwei zusätzliche Techniken zum Anpassen der Ergebnisse auf der Clientseite — Vorlagen, die die Art und Weise definieren ein Webpart für SharePoint 2013 Suche Ergebnisse rendert anzuzeigen (siehe bit.ly/1i5fM6k für weitere Informationen) und das Thema in diesem Artikel konzentrieren, JSLink.

JSLink ist eine Eigenschaft, die mit Feldern, Webparts, Listenformulare und Inhaltstypen verwendet werden kann. Mit dieser Eigenschaft können Sie die JavaScript-Dateien, eröffnet große Möglichkeiten für die Anpassung hinzufügen. Jeder JavaScript-Datei, die Sie hinzufügen ist mit einem SharePoint-Token vorangestellt und getrennt durch das Pipe-Symbol (|), wie folgt: ~Site/Style Bibliothek /­mycustom.js|~site/style library/mycustom2.js. Wenn die JavaScript-Dateien keine relevanten Renderingcode enthalten, wird die Standardwiedergabe des Elements angewendet.

SharePoint bietet mehrere Token (statisch und dynamisch), die für den Bau einer kontextspezifischen URLs nützlich sind. Hier sind einige wichtigen SharePoint-Token für dynamische URL-Bau:

  • ~ Website — bezieht sich auf die URL der aktuellen Website.
  • ~ Sitecollection — bezieht sich auf die URL der übergeordneten Website Auflistung der aktuellen Website.
  • ~ Layouts — bezieht sich auf _layouts/15 in Bezug auf die Web-Anwendung.
  • ~ Sitecollectionlayouts — bezieht sich auf den Ordner "Layouts" in Thecurrent-Websitesammlung (z. B. /sites/mysite/_layouts/15).
  • ~ Sitelayouts — bezieht sich auf den Ordner "Layouts" in der aktuellen Site (z. B. Website/Mysite/Mysubsite/_layouts/15).

SharePoint hat weitere Token für URL-Bau. Um weitere Informationen zu URL-Strings und Token finden Sie im Dev-Center am bit.ly/1lpYuAP.

Clientseitiges Rendering mit JSLink hat eine Reihe von Vorteilen gegenüber XSL/XSLT. In erster Linie verwendet JavaScript, womit sind die meisten Web-Entwickler bereits komfortabel. XSLT ist etwas komplizierter zu entwickeln und zu debuggen, also JSLink Entwicklungszeit ohne Verlust an Genauigkeit reduziert werden kann.

Rendern einer Ansicht auf dem Client mithilfe von JavaScript, HTML und CSS verhindert unnötige Belastungen auf dem Server, die Gesamtleistung verbessert und Verringerung der Seite Antwortzeiten. Clientseitige Verarbeitung macht die Benutzeroberfläche sehr entgegenkommend.

Darüber hinaus können Sie ganz oder teilweise eine Ansicht mit JSLink anpassen. Wenn Sie nur ein bestimmtes Feld anpassen möchten, können Sie beispielsweise die Logik für dieses Feld nur anpassen; der Rest der Ansicht wird unter Verwendung der Standardlogik wiedergegeben. Mit JSLink können Sie gültige JavaScript, einschließlich externe Plug-ins wie z. B. jQuery, in Kombination mit HTML und CSS.

Natürlich, jede Technologie hat einige Nachteile, und so auch JSLink. Beispielsweise wenn ein Benutzer JavaScript in seinem Browser blockiert hat, funktioniert JSLink nicht. Serverseitiges Rendering mit XSLT zeigt immer noch die gleiche Erfahrung, aber möglicherweise die Leistung beeinträchtigt werden.

Auch könnte die Leistung beeinträchtigt werden wenn Browser- oder eines Benutzers ist alt oder zu schwach, weil es mehr Zeit zum Ausführen des Skripts dauern kann.

Schließlich dürften sich die Crawler, den dynamischen Inhalt von AJAX/JavaScript generiert zu verstehen; Sie benötigen statische Daten mit HTML gerendert. Also, haben Sie eine öffentlich zugängliche Website, kann JSLink nicht Ihre beste Wahl sein.

Die JSLink JavaScript-Datei-Referenz kann in vielfältiger Weise mit dem Server-Objektmodell, Windows PowerShell, Element.xml über Features, die Webpart-Eigenschaften-Fenster und das Client-Objektmodell festgelegt werden. Im folgenden sehen Sie einige Beispiel-Code für jede Herangehensweise.

Das Server-Objektmodell: Um die JSLink-Eigenschaft festgelegt, beispielsweise Listenformularen, Sie Zugriff auf das SPForm-Objekt, das mit der Liste der Forms-Auflistung und legen dann die JSLink-Eigenschaft auf das SPForm-Objekt:

SPWeb web = SPContext.Current.Web;
SPList list = web.Lists.TryGetList("MyTasks");
if (null != list)
{
  SPForm newForm = list.Forms[PAGETYPE.PAGE_NEWFORM];
  if (null != newForm)
  {
    newForm.JSLink = "~/mycustom.js";
  }
}

Windows PowerShell: Um die JSLink-Eigenschaft festgelegt, z. B. ein benutzerdefiniertes Feld einer Liste Sie das Field-Objekt in der Liste Fields-Auflistung zugreifen und legen Sie dann die JSLink-Eigenschaft auf das Field-Objekt:

$web = Get-SPWeb
$field = $web.Fields["MyCustomField"]
$field.JSLink = "~/layouts/mycustom.js"
$field.Update()
$web.Dispose()

Die Element.xml-Datei: Um die JSLink-Eigenschaft eines benutzerdefinierten Felds einer Liste festzulegen, fügen Sie einen Feldknoten in die Element.xml-Datei:

<Field ID="{eb3eed37-961b-41bd-b11c-865c16e47071}"
Name="MyCustomField" DisplayName="Custom Columns"
Type="Text" Required="FALSE" Group="JSLink Demo"
JSLink="~site/style library/JSLinkDemo/jquery-1.10.2.min.js|
~site/style library/JSLinkDemo/customview.js">
</Field>

Beachten Sie, dass mithilfe der senkrechte Strich Sie mehrere JavaScript-Dateien hinzufügen können.

Der Webparts -Eigenschaften-Dialog: Zum Festlegen der JSLink-Eigenschaft eines Webparts ändern Sie seine Eigenschaften. Gehen Sie auf Webpart | Eigenschaften bearbeiten | Festlegen der JSLink-Eigenschaft und Sonstiges.

Das Client-Side-Objektmodell (CSOM): Sie können die JSLink eines Felds mithilfe der CSOM festlegen. Beachten Sie, dass Sie die Website-Spalteneigenschaft über JavaScript direkt aktualisieren können, müssen Sie es mit List-assoziierte Felder aktualisieren. Wenn Sie versuchen, auf Siteebene Spalte aktualisieren, erhalten Sie diesen Fehler:

Diese Funktionalität ist nicht verfügbar für Felder, die nicht zugeordneten eine Liste...

 

Dieser Code zeigt, wie die JSLink-Eigenschaft für ein Feld in einer Liste über die JavaScript CSOM korrekt zu aktualisieren:

fieldCollection = taskList.get_fields();
this.oneField = fieldCollection.getByInternalNameOrTitle("MyCustomField");
this.oneField.set_description("MyNewFieldDescription");
this.oneField.update();

Weitere Informationen zu diesem Beispiel finden Sie in der MSDN-Dokumentation unter bit.ly/1i9rlZR.

Um mit JSLink, in der benutzerdefinierte JavaScript-Datei zu arbeiten, Sie diese Methode überschreiben müssen:

SPClientTemplates.TemplateManager.RegisterTemplateOverrides()

Diese Methode erfordert ein Template-Objekt an es übergeben werden. Um das Template-Objekt zu definieren, müssen Sie eine Eigenschaft und eine Render-Methode für jede Ansicht (z. B. anzeigen, hinzufügen und bearbeiten) angeben.

Das Template-Objekt für die Registrierung der Methode verfügt über Eigenschaften wie Header, Body, Footer, OnPreRender, OnPostRender, Gruppe, Titel und Felder, die genutzt werden können, um die Standard-Rendering-Logik einer Ansicht zu überschreiben. Beispielsweise um die benutzerdefinierten Felder anzeigen, anzeigen, bearbeiten und neu zu ändern, bieten Ihnen die folgende Informationen für das Template-Objekt Fields-Eigenschaft:

siteCtx.Templates.Fields = {
  // MyCustomField is the Name of our field
  'MyCustomField': {
  'View': customView,
  'DisplayForm': customDisplayForm,
  'EditForm': customNew,
  'NewForm': customEdit
  }
};

Die Methoden, auf die verwiesen wird in diesem Code wie CustomView und CustomDisplayForm, enthalten die eigentliche Rendern-Logik für dieses Feld.

Schließlich rufen Sie die RegisterTemplateOverrides-Methode der TemplateManager anzuwenden, die benutzerdefinierte Ansicht, etwa so:

 

// Register the template to render custom field
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(siteCtx);

Diese Methode kümmert sich um den Rest des Renderings der Ansicht auf der Grundlage Ihrer benutzerdefinierten Logik.

Halten Sie im Verstand, wenn Sie mehrere Instanzen einer Listenansicht-Webpart, auf der gleichen Seite verwenden und JSLink auf eine der Instanzen anwenden, das Layout der anderen Liste Webparts Änderungen auch anzeigen, weil intern SharePoint gemeinsame Logik verwendet. Um dieses Problem zu vermeiden, müssen Sie sicherstellen, dass der BaseViewID-Wert nicht im Widerspruch zu bestehenden ViewIDs, so ändern die BaseViewID-Eigenschaft des Kontexts, vor dem überschreiben, z.B. Ctx.BaseViewID = 1000.

Jetzt werde ich Sie durch die zwei Demo-Szenarien nötig.

Szenario 1: Farbcodierte Aufgabe Abschlussstatus anzeigen

Dieses Szenario zeigt Aufgabe Abschlussstatus mit Farbcodierung für eine Aufgabenliste – rot für eine unvollständige Aufgabe und grün für eine erledigte Aufgabe.

Im Beispiel werde ich die anzeigen-Vorlage für das benutzerdefinierte Feld anpassen, wie hier gezeigt:

// View Page custom rendering
function customView(ctx) {
if (ctx != null && ctx.CurrentItem != null) {
  var percentCompete = parseInt(ctx.CurrentItem.PercentComplete);
  if (percentCompete != 100) {
    return "<span style='color:red'>Incomplete Task</span>";
  }
  else {
    return "<span style='color:green'>Task Completed</span>";
  }
}
}

Die CustomView-Methode erhält den aktuelle Render-Kontext als Eingabeparameter aus SharePoint intern. Diese Eingabe Kontext hat viele andere Eigenschaften in Bezug auf die Liste, Ansicht, aktuelle Artikel und So weiter.

Die Context CurrentItem-Eigenschaft ermöglicht Zugriff auf die aktuelle Zeilenelement einer Liste. Mithilfe dieser Eigenschaft können Sie in der Liste Verfügbare Felder zugreifen. Beachten Sie, dass wenn das Feld nicht in einer ausgewählten Ansicht verfügbar ist, eine Fehlermeldung Sie beim Zugriff auf den Wert des Feldes erhalten.

Zunächst Visual Studio 2013 zu öffnen Sie, und wählen Sie eine SharePoint-2013-leer-Projekt.

Schritt 1: Fügen Sie eine Websitespalte im Menü Neues Element hinzufügen das leere Projekt hinzu. Um eine Websitespalte erstellen, fügen Sie die Feldinformationen in einer Element.xml-Datei, wie in Abbildung 3. Wie Sie sehen können, verweist auf die JSLink-Eigenschaft zwei JavaScript-Dateien: die JQuery-Bibliothek und eine benutzerdefinierte Ansicht JavaScript-Datei aus der Style-Bibliothek. Beachten Sie, dass die Hierarchie der Dateien von links nach rechts beibehalten werden sollte, (abhängige Dateien sollte zuerst verwiesen werden).

Abbildung 3 verweisen auf die JavaScript-Dateien

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="https://schemas.microsoft.com/sharepoint/"> 
  <Field
    ID="{eb3eed37-961b-41bd-b11c-865c16e47071}"
    Name="MyCustomField"
    DisplayName="Custom Columns"
    Type="Text"
    Required="FALSE"
    Group="JSLink Demo"
    JSLink="~site/style library/JSLinkDemo/jquery-1.10.2.min.js|
            ~site/style library/JSLinkDemo/customview.js">
  </Field>
 
</Elements>

Schritt 2: Fügen Sie ein weiteres neues Element, ein Skripts-Modul zum Speichern von benutzerdefinierten JavaScript und andere Ressourcendateien hinzu.

Schritt 3: Fügen Sie die JQuery-Bibliothek, in der Skripts-Modul. Erstellen Sie eine neue JavaScript-Datei namens CustomView.js.

Schritt 4: Umbenennen der Standard-Funktion von Feature 1 zu JSLinkDemo, oder erstellen ein neues Feature, das das Modul Websitespalten und Skripts enthält. Legen Sie den Umfang auf Website, wie es die Websitespalte, die bereitgestellt wird.

Schritt 5: Bereitstellen der Projektmappe. Nachdem Sie die Projektmappe bereitstellen, sehen Sie die Spalte hinzugefügt Websitespalten auf Websiteeinstellungen | Websitespalten.

Schritt 6: Erstellen Sie eine Aufgabenliste, genannt MyTasks durch eine app über die Inhaltsseite hinzufügen.

Schritt 7: Fügen Sie eine benutzerdefinierte Spalte der MyTasks-Liste, Liste Einstellungen des Menüs auf der Multifunktionsleiste.

Schritt 8: Fügen Sie eine benutzerdefinierte Spalte, erstellt mithilfe der Schritte 1 bis 5 durch Klicken auf hinzufügen aus vorhandenen Websitespalten auf der Seite Listeneinstellungen. Die Gruppe mit JSLink Demo zu filtern, wählen Sie benutzerdefinierte Spalte und der Liste hinzufügen.

Dies schließt die Durchführung des ersten Szenarios, die eine Aufgabe Abschlussstatus anzeigt. Wie Sie, in sehen können Abbildung 1, den benutzerdefinierte Status zeigt entweder als Aufgabe abgeschlossen, in grün oder unvollständige Aufgabe in rot.

Szenario 2: Erstellen Sie eine benutzerdefinierte Bilder-Galerie mit Legenden

In diesem Szenario werde ich anpassen, das integrierte Bilder Galerie Rendering in benutzerdefinierten tabellarischer Form und mit Legenden Geisterbilder Auflösung herunterladen angezeigt.

Zu diesem Zweck anpassen ich die Element, Kopf- und Fußzeile Eigenschaften der Vorlagenfeld. Der folgende Code stellt den ersten Schritt:

(function () {
  var overrideContext = {};
  overrideContext.ListTemplateType = 109;
  overrideContext.Templates = {};
  overrideContext.Templates.Item = customItem;
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
})();
 
function customItem() {
  return "ItemRow";
}

Ich habe ListTemplateType auf 109, festgelegt, die SharePoint als PictureLibrary sind vordefiniert. (Finden Sie die vordefinierten Liste Vorlagentypen in SharePoint 2013 bit.ly/1qE8UiY.) Dieser Code rendert Zeilen mit Text von der CustomItem-Methode zurückgegeben.

Jetzt werde ich mit den tatsächlichen Eigenschaften des Bildes (Titel, URL und andere Felder), um das Bild zu rendern zu starten den statischen Text ersetzen. Um die neuen Bild-Link und Header Standardspalten zu ersetzen, werde ich die Kopf- und Fußzeile Eigenschaften legen Sie einige HTML-Text anpassen:

overrideContext.Templates.Header = "<b>Custom Image Gallery View</b>";
overrideContext.Templates.Footer = "<b>Custom Footer</b>";
function customItem() {
  return "<br /><img src='" + ctx.CurrentItem.FileRef +
  "' width='190' height='190' />;
}

Ich möchte die Bilder im Tabellenformat anzeigen. Hierzu habe ich einige CSS und HTML für das Layout in der CustomItem-Methode hinzufügen. Zuerst füge ich einen leeres Div-Container, die Headervorlage, die später verwendet wird, um die tatsächlichen Daten Element und Fußzeile Rendern zu halten. Innerhalb der Element-Darstellung, ich dynamic HTML zu erstellen und speichern Sie es in eine globale Variable. In der Fußzeile Rendering Vorlage zuweisen ich dynamischen Daten die Div-Container. Abbildung 4 zeigt den vollständigen Code um ein Tabellenformat-Bildergalerie zu rendern.

Abbildung 4 Anzeigen von Bildern in tabellarischer Form

function customItem(ctx) {
  // Grid contains 4
  if (ctx.CurrentItemIdx % 4 == 0) {
    // Start new row
    tableData+= "<div style='clear:both'></div>"
  }
 
  tableData += "<div style='margin:5px;border:1px solid #666;float:left;"+
  "width:100px;height:100px' onmouseover=\""+
  "ShowCallout(this,'" + ctx.CurrentItem.Title + "','" +
  ctx.CurrentItem.FileDirRef + "','" + ctx.CurrentItem.FileLeafRef
  + "');\"><img src='" + ctx.CurrentItem.FileRef +
  "' width='100' height='100' /></div>";
 
return "";
}
 
// Custom Footer Method
function customFooter(ctx) {
  // Append Dynamic-generated data to container div
  $("#customImageGalleryContainer").html(tableData);
  return "";
}

Ich möchte jetzt eine Legende mit der Maus über für jedes Bild anzeigen, und zeigen zusätzlichen Metadaten wie Titel, kurze Info und so weiter, zusammen mit verschiedenen Auflösungen zum Download. SharePoint 2013 bietet ein Callout-Framework um kontextbezogene Informationen über eine JavaScript-Datei callout.js anzeigen mit dem globalen CalloutManager-Objekt. Ich werde dieses Rahmens um Standard-Legenden zeigen nutzen. Als Erstes erstelle ich eine benutzerdefinierte Methode mit dem Namen ShowCallout um festzustellen, ob es vorhandenen offenen Legenden gibt; Wenn vorhanden sind, wird ich sie mit der Standardmethode CloseAll aus der CalloutManager zu schließen:

function ShowCallout(sender, itemId, title, brief, directory, filename) {
  CalloutManager.closeAll();
}

Vor dem Umzug voran mit der Umsetzung, müssen Sie verstehen, wie man Bilder von verschiedenen Auflösungen zu erhalten. SharePoint 2013 wird standardmäßig ein Bild in zwei verschiedenen Größen erstellt, wenn sie in eine Bildbibliothek hochgeladen werden. Z. B., wenn Sie auf Library Pfad/ImageLibraryName/sample.png hochladen, erstellt SharePoint automatisch eine Miniaturansicht und eine Web-Bild: /imageLibrary­Name/_t/Sample_png.jpg und /imageLibraryName/_w/­Sample_png.jpg. In diese URLs _t stellt ein Bild und _w stellt Web und die Datei-Endung wird mit einem Präfix Unterstrich (_) Trennzeichen an den Dateinamen angehängt.

Die ShowCallout-Funktion verwendet diese URLs für das Originalbild sowie Bilder von verschiedenen Auflösungen und speichert sie in verschiedenen Variablen, wie hier gezeigt (Dateiname und Verzeichnis sind ShowCallout Parameter):

var fname = filename.replace(".", "_");
var thumbnail = directory + "/_t/" + fname + ".jpg";
var medium = directory + "/_w/" + fname + ".jpg";
var full = directory + "/" + filename;

Für dieses Szenario verwende ich die CalloutManager-CreateNewIfNecessary-Methode, die die Legende erstellt, nur wenn es keine Legende bei den Start-Zielpunkt. Wenn es eine Legende gibt, gibt die Methode den vorhandenen Objektverweis. (Lesen Sie mehr über CalloutManager, besuchen Sie bit.ly/1kXH7uU.) Abbildung 5 zeigt den vollständigen Code, und Abbildung 6 zeigt die resultierende Ausgabe.

Abbildung 5 der aktualisierten ShowCallout-Funktion

function ShowCallout(sender, itemId, title, brief, directory, filename) {
  // Close fists all callouts if opened
  CalloutManager.closeAll();
  var fname = filename.replace(".", "_");
  var thumbnail = directory + "/_t/" + fname + ".jpg";
  var medium = directory + "/_w/" + fname + ".jpg";
  var full = directory + "/" + filename;
  var calloutContent = "<img src='" + medium + "' width='50%'
    height='50%' /><br/>" +
  brief + " <a href='" + directory + "/Forms/DispForm.aspx?ID=" +
  itemId + "'>View Image</a><br />" +
  "<a href='" + thumbnail + "' target='_blank'>
    Thumbnail</a>  |  " +
  "<a href='" + medium + "' target='_blank'>
    Web Size</a>  |  " +
  "<a href='" + full + "' target='_blank'>Original Size</a>";
 
  var calloutRef = CalloutManager.createNewIfNecessary({
    ID: 'call_' + itemId, launchPoint: sender,
    beakOrientation: 'leftRight', title: title,
    content: calloutContent,
    contentWidth: 610
  });
 
  calloutRef.open();
}

Custom Image Gallery with Callout Showing Metadata
Abbildung 6 Custom-Bildergalerie mit Legende anzeigen von Metadaten

Benutzerdefinierte Rendering, eine Seite zu erstellen und die Bildbibliothek Listenansicht-Webpart hinzufügen. Gehen Sie auf das WebPart bearbeiten-Dialogfeld "Eigenschaften" und legen Sie JSLink-Eigenschaft auf ~/site/Style Library/JSLinkDemo/jquery-1.10.2.min.js|~/site/Style Library/JSLinkDemo/Custom­ImageGallery.js. Klicken Sie auf anwenden und speichern Seite. Nach dem Aktualisieren der Seite, sehen Sie eine Galerie wie diejenige Abbildung 6.

Sie können die Formularfelder neu und bearbeiten mit einen ähnlichen Ansatz, wenn auch mit einigen Varianten anpassen. Hier müssen Sie solche Dinge wie Eingabeüberprüfung, berücksichtigen, Speicherung von Daten aus Eingabefeld auf List-Item, Anzeigen von gespeicherten Daten aus ein Listenelement in einem Eingabefeld und So weiter.

Ich werde als nächstes einen Blick auf die Details der Implementierung eines komplexen, mehrspaltigen Freifeld-Szenarios nehmen, wie in Abbildung 7.

Multi-Column Custom Fields of a List Using JSLink
Abbildung 7 mehrspaltigen benutzerdefinierte Felder von einer Liste mit JSLink

Schritt 1: Mithilfe der Element.xml-Datei, erstellen Sie eine Notiz (ein benutzerdefiniertes Feld für Text unter Websitespalten die NumLines-Eigenschaft festgelegt auf 1.000 (oder was auch immer zu Ihnen passt). Dieses benutzerdefinierte Feld überschreibt das Rendering auf dem Formular neu und bearbeiten.

siteCtx.Templates.Fields = {
  "MyComplexField": {
  'EditForm': customComplexNewOrEdit,
  'NewForm': customComplexNewOrEdit
}
};

Ich benutze die gleiche CustomComplexNewOrEdit-Methode für beide neu anzuzeigen und zu bearbeiten.

Schritt 2: Richten Sie die Formular-Kontext, d., der h. für Validatoren einrichten, lesen Sie einen Wert aus der benutzerdefinierten Ansicht und zurück in eine Liste speichern benötigt. Legen Sie den Formular-Kontext verwenden Sie die SPClientTemplates.Utility.GetFormContextForCurrentField-Methode. Diese Methode akzeptiert Rendern Kontext als Parameter, die von SharePoint intern bereitgestellt wird. Hier ist einige Sample-code zeigt das neue oder Bearbeiten von benutzerdefinierten Render-Methode:

 

function customComplexNewOrEdit(ctx) {
  if (ctx == null || ctx.CurrentFieldValue == null)
  return '';
 
  var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
  if (formCtx == null || formCtx.fieldSchema == null)
    return '';
}

Schritt 3: Nach Erhalt der Zusammenhang mit Form, müssen Sie registrieren Sie Callback-Handler mit dem aktuellen Formular aktivieren Validierung, erhalten den Wert eines Felds und speichern Sie den Wert in das entsprechende Feld in der benutzerdefinierten Ansicht aus JSLink generiert. Jedes Mal ein Benutzer klickt die Schaltfläche zum Speichern in der Listenformular, SharePoint intern Ruft eine Callback-Handler auf die Felder, die mit formCtx.registerGetValueCallback (FiledName, Rückruf) angeschlossen. Diese Callback-Handler liest den Wert aus dem Feld vor dem Speichern auf List Item:

formCtx.registerGetValueCallback(formCtx.fieldName, function () {
  // Read value from this callback and assign to the field before save
  return "";
});

Dies ist eine leere Callback-Handler. Du musst den Code um die Werte aus der ausgewählten Steuerelemente auf dem Formular gelesen und zurück die String-Darstellung der Werte anpassen.

Schritt 4: Wenn Bestätigungen hinzufügen möchten, müssen Sie zuerst einen Validator-Container in der Bestätigungen für die verschiedenen Felder registriert zu erstellen. Ich mache das mit dem SPClientForms.ClientValidation.ValidatorSet-Objekt. Ich kann die RegisterValidator-Methode der Validator Container verwenden, um mehrere Validatoren zu registrieren.

Sie benötigen ein Fehler Rückruf führt, sowie zu registrieren, um Störungen zu zeigen. Dazu verwende ich die RegisterValidationErrorCallback-Methode des Formulars Kontext. Diese Methode erfordert zwei Parameter, die ID des HTML-Container-Element (Div in diesem Beispiel) und ErrorResult, die von SharePoint intern basierend auf Überprüfungsfehler zurückgegeben wird. Fehlermeldungen werden an das Containerelement bereitgestellt, um diese Methode angefügt. In meinem Beispiel ich einen Pflichtfeld-Validator hinzufügen muss, und der vollständige Code für die Validierung erscheint Abbildung 8.

Abbildung 8-Bestätigungs-Code

var validatorContainer = new SPClientForms.ClientValidation.ValidatorSet();
if (formCtx.fieldSchema.Required) {
  validatorContainer.RegisterValidator(
  new SPClientForms.ClientValidation.RequiredValidator());
}
 
if (validatorContainer._registeredValidators.length > 0) {
  formCtx.registerClientValidator(
  formCtx.fieldName, validatorContainer);
}
 
formCtx.registerValidationErrorCallback(
  formCtx.fieldName, function (errorResult) {
    SPFormControl_AppendValidationErrorMessage(
    errorContainer, errorResult);
});

Schritt 5: Sie müssen Hinzufügen von benutzerdefinierten HTML-Steuerelemente zum repräsentieren des Felds auf der neuen Seite oder bearbeiten. Ich muss ein Textfeld, eine Dropdown-Liste mit dynamischen Werte aus einer anderen Liste und eine Dropdown-Liste mit statischen Werten. Ich eine Tabelle erstellen, die Tabelle diese Steuerelemente hinzufügen und den HTML-Code als Ausgabe von der benutzerdefinierten hinzufügen/bearbeiten-Methode zurückgeben.

Um die Daten dynamisch zu laden, verwende ich die REST-API zum Lesen der Daten aus einer anderen Liste und können sie um den Titel in dieser Liste zu füllen. Erfahren Sie mehr über die REST-API in SharePoint finden Sie unter bit.ly/1cVNaqA.

Abbildung 9 zeigt den Code für das Rendern von Eingabesteuerelemente dynamisch.

Abbildung 9 Rendern Eingang steuert dynamisch

// Render input fields
var inputFields = "<table>";
...
inputFields += "</table>";
 
// Get List data from REST API
$.ajax({
...
success: function (data) {
  // Add options to the dynamic dropdown list
},
error: function (data) {
  // Error handler
}
});
 
 
return inputFields;

Schritt 6: Um einen Multi-Feld Wert in einer Liste speichern, ich habe alle die Felder Werte zu einer einzelnen Zeichenfolge, die mit der Zeichenfolge-Separator, und erstellen Sie ein benutzerdefiniertes Format wie (fieldname:value)(fieldname:value), eine Art von Schlüssel-Wert-Paar. Ich werde den Zeichenfolge-Bau in RegisterGetValueCallback tun.

Schritt 7: Um einen vorhandenen Wert im Bearbeitungsformular anzuzeigen, analysiert die Zeichenfolge gespeichert als Schlüssel-Wert-Paar, speichern und jeweiligen Eingabesteuerelemente die Werte zuweisen. Dies geschieht mit der gleichen benutzerdefinierten Render-Methode als beim Erstellen von benutzerdefinierten HTML.

Zusammenfassung

Sie können JSLink mit Browser-basierte Entwicklertools wie die Internet Explorer-Entwicklertools, Firebug und dergleichen Debuggen. Wenn Sie einen Haltepunkt in JavaScript setzen, nachdem es auf dem Client rendert, können Sie JavaScript wie c# .NET-Code Debuggen. Wenn Sie den Kontext in der View-Methode zugreifen, erhalten Sie einen Verweis auf das aktuelle Element, durch die Sie die Werte für jedes Feld des aktuellen Elements sehen können. Sie können das Internet Explorer Developer Tools-Konsolenfenster verwenden, auf jede Eigenschaft des aktuellen Objekts zugreifen.

JSLink bietet eine einfache Möglichkeit zum Anpassen einer beliebigen SharePoint-Ansicht mit eine reine Client-seitiges Script, ohne eine einzige Codezeile serverseitigen Code schreiben. Können Sie JavaScript-basiertes plug-in mit JSLink. Download das Demo-Beispielprojekt auf msdn.microsoft.com/magazine/msdnmag0614.

Pritam Baldota ist SharePoint Consultant bei Microsoft Services Global Delivery mit mehr als neun Jahre Erfahrung in der Branche. In seiner Freizeit Zeit er bloggt auf pritambaldota.com. Sie erreichen ihn am pritam@pritambaldota.com.

Unser Dank gilt den folgenden technischen Experten von Microsoft für die Durchsicht dieses Artikels: Sanjay Arora, Subhajit Chatterjee und Paresh Moradiya
Sanjay Arora – ist Sanjay Weiterbildung Ressourcenmanager bei Microsoft Services Global Delivery.

Subhajit Chatterjee ist Senior Consultant bei Microsoft Services Global Delivery mit mehr als 12 Jahren Erfahrung in der Branche. Er hat viele schlüsselfertige und komplexe Engagements am GD ausgeführt.

Paresh Moradiya hat 11 + Jahre Erfahrung in Software-Industrie. Er arbeitet derzeit als Consultant bei Microsoft seit der letzten 5 Jahre. Er ist ein mittelständisches Unternehmen in SharePoint Web Content Management und SharePoint.