Anpassen eines Feldtyps mithilfe vom clientseitigem Rendering

Artikel
03/21/2023

In diesem Artikel erfahren Sie, wie Sie einen Feldtyp mithilfe der clientseitigen Renderingtechnologie in SharePoint anpassen.

Das clientseitige Rendering stellt eine Möglichkeit dar, wie Sie selbst Ausgaben für eine Gruppe von Steuerelementen, die in einer SharePoint-Seite gehostet werden, erzeugen können. Mit diesem Mechanismus können Sie bekannte Technologien wie HTML und JavaScript verwenden, um die Renderinglogik benutzerdefinierter Feldtypen zu definieren. Beim clientseitigen Rendering können Sie Ihre eigenen JavaScript-Ressourcen angeben und in den Datenspeicheroptionen hosten, die für Ihre Farmlösung verfügbar sind, z. B. im Ordner _layouts.

Wichtig

JSLink-basierte Anpassungen (clientseitige Darstellung) werden in modernen Benutzeroberflächen nicht unterstützt. Dies umfasst moderne Listen und Bibliotheken, einschließlich JSLink-Unterstützung in den Listenansichts-Webparts der modernen Seiten. Die clientseitige Darstellung wird in den klassischen Benutzeroberflächen in SharePoint Online oder lokal unterstützt.

Voraussetzungen für die Verwendung der Beispiele in diesem Artikel

Um die Schritte in diesem Beispiel auszuführen, benötigen Sie Folgendes:

Microsoft Visual Studio 2012
Office Developer Tools für Visual Studio 2012
Eine SharePoint-Entwicklungsumgebung

Informationen zum Einrichten Ihrer SharePoint-Entwicklungsumgebung finden Sie unter Einrichten einer allgemeinen Entwicklungsumgebung für SharePoint.

Kernkonzepte, die Ihnen helfen, das clientseitige Rendering für Feldtypen zu verstehen

In der folgenden Tabelle sind hilfreiche Artikel aufgeführt, die ein besseres Verständnis der Konzepte und Schritte bei einem Szenarium mit benutzerdefinierten Aktionen ermöglichen.

Tabelle 1. Kernkonzepte des clientseitigen Renderings für Feldtypen

Titel des Artikels	Beschreibung
Erstellen von Farmlösungen in SharePoint	Erfahren Sie mehr über die Entwicklung, Verpackung und Bereitstellung von administrativen Erweiterungen für SharePoint mit Farmlösungen.
Benutzerdefinierte Feldtypen	Erfahren Sie mehr über das Erstellen von benutzerdefinierten Feldtypen. Beim Speichern Ihrer Unternehmensinformationen in SharePoint kann es vorkommen, dass Ihre Daten nicht den Feldtypen entsprechen, die in SharePoint Foundation verfügbar sind, oder Sie möchten vielleicht einfach diese Feldtypen anpassen. Benutzerdefinierte Felder können eine benutzerdefinierte Datenüberprüfung und benutzerdefiniertes Feldrendering umfassen.

Titel des Artikels

Beschreibung

Erstellen von Farmlösungen in SharePoint

Erfahren Sie mehr über die Entwicklung, Verpackung und Bereitstellung von administrativen Erweiterungen für SharePoint mit Farmlösungen.

Benutzerdefinierte Feldtypen

Erfahren Sie mehr über das Erstellen von benutzerdefinierten Feldtypen. Beim Speichern Ihrer Unternehmensinformationen in SharePoint kann es vorkommen, dass Ihre Daten nicht den Feldtypen entsprechen, die in SharePoint Foundation verfügbar sind, oder Sie möchten vielleicht einfach diese Feldtypen anpassen. Benutzerdefinierte Felder können eine benutzerdefinierte Datenüberprüfung und benutzerdefiniertes Feldrendering umfassen.

Codebeispiel: Anpassen des Renderingprozesses für einen benutzerdefinierten Feldtypen in einem Ansichtsformular

Führen Sie die folgenden Schritte aus, um den Renderingprozess für einen benutzerdefinierten Feldtyp anzupassen:

Erstellen Sie das Farmlösung-Projekt.
Fügen Sie eine Klasse für den benutzerdefinierten Feldtyp hinzu.
Fügen Sie eine XML-Definition für den benutzerdefinierten Feldtyp hinzu.
Fügen Sie eine JavaScript-Datei für die Renderinglogik des benutzerdefinierten Feldtyps hinzu.

In Abbildung 1 ist ein Ansichtenformular mit einem benutzerdefiniert gerenderten Feldtyp gezeigt.

Abbildung 1: Benutzerdefiniertes, clientseitig gerendertes Feld in einem Ansichtsformular

Benutzerdefiniertes, clientseitiges gerendertes Feld in einem Ansichtenformular

So erstellen Sie das Farmlösung-Projekt

Öffnen Sie Visual Studio 2012 als Administrator. (Klicken Sie dazu im Menü Start mit der rechten Maustaste auf das Symbol für Visual Studio 2012, und wählen Sie Als Administrator ausführen aus.)
Erstellen Sie ein neues Projekt unter Verwendung der Vorlage SharePoint-Projekt.

Abbildung 2 zeigt den Speicherort der Vorlage SharePoint-Projekt in Visual Studio 2012 unter Vorlagen, Visual C#, Office SharePoint, SharePoint-Lösungen.

Abbildung 2: Visual Studio-Vorlage für SharePoint-Projekt

Vorlage für SharePoint Project in Visual Studio

Geben Sie die URL der SharePoint-Website an, die Sie für das Debugging verwenden möchten.
Wählen Sie die Option Als Farmlösung bereitstellen aus.

So fügen Sie eine Klasse für den benutzerdefinierten Feldtyp hinzu

Klicken Sie mit der rechten Maustaste auf das Farmlösung-Projekt, und fügen Sie eine neue Klasse hinzu. Benennen Sie die Klassendatei FavoriteColorFieldType.cs.
Kopieren Sie den folgenden Code, und fügen Sie ihn in die Datei FavoriteColorFieldType.cs ein. Der Code führt folgende Aufgaben aus:

Deklariert eine FavoriteColorField-Klasse, die von SPFieldText erbt.
Stellt zwei Konstruktoren für die FavoriteColorField-Klasse bereit.
Überschreibt die JSLink-Eigenschaft.

Hinweis

Die JSLink-Eigenschaft wird nicht für Umfrage- oder Ereignislisten unterstützt. A SharePoint calendar is an Events list.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

// Additional references for this sample.
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;

namespace Microsoft.SDK.SharePoint.Samples.WebControls
{
    /// <summary>
    /// The FavoriteColorField custom field type 
    /// inherits from SPFieldText.
    /// Users can input the color in the field 
    /// just like in any other text field.
    /// But the field will provide additional 
    /// rendering logic when displaying 
    /// the field in a view form.
    /// </summary>
    public class FavoriteColorField : SPFieldText
    {
        // The solution deploys the JavaScript 
        // file to the CSRAssets folder 
        // in the WFE's layouts folder.
        private const string JSLinkUrl = 
            "~site/_layouts/15/CSRAssets/CSRFieldType.js";

        // You have to provide constructors for SPFieldText.
        public FavoriteColorField(
            SPFieldCollection fields, 
            string name) :
            base(fields, name)
        {

        }
        public FavoriteColorField(
            SPFieldCollection fields, 
            string typename, 
            string name) :
            base(fields, typename, name)
        {

        }

        /// <summary>
        /// Override the JSLink property to return the 
        /// value of our custom JavaScript file.
        /// </summary>
        public override string JSLink
        {
            get
            {
                return JSLinkUrl;
            }
            set
            {
                base.JSLink = value;
            }
        }
    }
}

So fügen Sie eine XML-Definition für den benutzerdefinierten Feldtyp hinzu

Klicken Sie mit der rechten Maustaste auf das Farmlösung-Projekt, und fügen Sie einen zugeordneten SharePoint-Ordner hinzu. Wählen Sie im Dialogfeld den Ordner {SharePointRoot} \Template\XML aus.
Klicken Sie mit der rechten Maustaste auf den im letzten Schritt erstellten XML-Ordner, und fügen Sie eine neue XML-Datei hinzu. Benennen Sie die XML-Datei fldtypes_FavoriteColorFieldType.xml.
Kopieren Sie das folgende Markup, und fügen Sie es in die XML-Datei ein. Das Markup führt die folgenden Aufgaben aus:

Stellt den Typnamen für den Feldtyp bereit.
Gibt den vollständigen Klassennamen für den Feldtyp an. Dies ist die Klasse, die Sie im vorherigen Verfahren erstellt haben.
Stellt zusätzliche Attribute für den Feldtyp bereit.

    <?xml version="1.0" encoding="utf-8" ?>
    <FieldTypes>
      <FieldType>
        <Field Name="TypeName">FavoriteColorField</Field>
        <Field Name="TypeDisplayName">Favorite color field</Field>
        <Field Name="TypeShortDescription">Favorite color field</Field>
        <Field Name="FieldTypeClass">Microsoft.SDK.SharePoint.Samples.WebControls.FavoriteColorField, $SharePoint.Project.AssemblyFullName$</Field>
        <Field Name="ParentType">Text</Field>
        <Field Name="Sortable">TRUE</Field>
        <Field Name="Filterable">TRUE</Field>
        <Field Name="UserCreatable">TRUE</Field>
        <Field Name="ShowOnListCreate">TRUE</Field>
        <Field Name="ShowOnSurveyCreate">TRUE</Field>
        <Field Name="ShowOnDocumentLibrary">TRUE</Field>
        <Field Name="ShowOnColumnTemplateCreate">TRUE</Field>
      </FieldType>
    </FieldTypes>

So fügen Sie eine JavaScript-Datei für die Renderinglogik des benutzerdefinierten Feldtyps hinzu

Klicken Sie mit der rechten Maustaste auf das Farmlösung-Projekt, und fügen Sie einen zugeordneten SharePoint-Ordner „Layouts" hinzu. Fügen Sie einen neuen CSRAssets-Ordner zu dem zuletzt hinzugefügten Ordner „Layouts" hinzu.
Klicken Sie mit der rechten Maustaste auf den im letzten Schritt erstellten Ordner „CSRAssets", und fügen Sie eine neue JavaScript-Datei hinzu. Benennen Sie die JavaScript-Datei CSRFieldType.js.
Kopieren Sie den folgenden Code, und fügen Sie ihn in die Datei JavaScript ein. Der Code führt folgende Aufgaben aus:

Erstellt eine Vorlage für das Feld, wenn es in einem Ansichtsformular angezeigt wird.
Registriert die Vorlage.
Stellt die Renderinglogik für den Feldtyp bei Anzeige in einem Ansichtsformular bereit.

(function () {
    var favoriteColorContext = {};

    // You can provide templates for:
    // View, DisplayForm, EditForm and NewForm
    favoriteColorContext.Templates = {};
    favoriteColorContext.Templates.Fields = {
        "FavoriteColorField": {
            "View": favoriteColorViewTemplate
        }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(
        favoriteColorContext
        );
})();

// The favoriteColorViewTemplate provides the rendering logic
// the custom field type when it is displayed in the view form.
function favoriteColorViewTemplate(ctx) {
    var color = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    return "<span style='background-color : " + color +
        "' >&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;</span>&amp;nbsp;" + color;
}

So erstellen Sie die Lösung und führen sie aus

Drücken Sie F5.

Hinweis

Wenn Sie F5 drücken, erstellt Visual Studio die Lösung, stellt die Lösung bereit und öffnet die SharePoint-Website, auf der die Lösung bereitgestellt wird.
Erstellen Sie eine benutzerdefinierte Liste, und fügen Sie eine neue Feldspalte für die bevorzugte Farbe hinzu.
Fügen Sie ein Element zur Liste hinzu, und geben Sie einen Wert für die Spalte mit der bevorzugten Farbe an.
Abbildung 3 zeigt die Seite zum Erstellen der Spalte mit dem neuen benutzerdefinierten Feldtyp.

Abbildung 3: Erstellen einer Spalte mit dem neuen benutzerdefinierten Feldtyp

Erstellen einer Spalte mit einem neuen Typ eines benutzerdefinierten Felds

Problem	Lösung
Feldtyp FavoriteColorField ist nicht ordnungsgemäß installiert. Wechseln Sie zu der Seite mit den Listeneinstellungen, um dieses Feld zu löschen.	Führen Sie den folgenden Befehl an einer Eingabeaufforderung mit erhöhten Rechten aus: iisreset /noforce. Vorsicht: Wenn Sie die Lösung in einer Produktionsumgebung bereitstellen, warten Sie auf einen geeigneten Zeitpunkt. um den Webserver mithilfe von iisreset /noforce zurückzusetzen.

Nächste Schritte

In diesem Artikel wurde gezeigt, wie Sie den Renderingprozess für einen benutzerdefinierten Feldtyp anpassen. Als nächsten Schritt können mehr über benutzerdefinerte Feldtypen erfahren. Weitere Informationen finden Sie unter den folgenden Themen: