Anpassen eines Feldtyps mithilfe vom clientseitigem RenderingCustomize a field type using client-side rendering

In diesem Artikel erfahren Sie, wie Sie einen Feldtyp mithilfe der clientseitigen Renderingtechnologie in SharePoint anpassen. Durch clientseitiges Rendering wird ein Mechanismus verfügbar, mit dem Sie Ihre eigene Ausgabe für eine Gruppe von Steuerelementen, die in einer SharePoint-Seite gehostet sind, generieren können. Dieser Mechanismus ermöglicht Ihnen die Verwendung bekannter Technologien, wie HTML und JavaScript, um die Rendering-Logik von SharePoint-Listenansichten zu definieren. Beim clientseitigen Rendering können Sie Ihre eigenen JavaScript-Ressourcen angeben und sie in den für Ihre Farmlösung verfügbaren Datenspeicheroptionen, wie z. B. dem _layouts-Ordner, hosten.Learn how to customize a field type by using the client-side rendering technology in SharePoint. Client-side rendering provides a mechanism that you can use to produce your own output for a set of controls that are hosted in a SharePoint page. This mechanism enables you to use well-known technologies, such as HTML and JavaScript, to define the rendering logic of custom field types. In client-side rendering you can specify your own JavaScript resources and host them in the data storage options available to your farm solution, such as the _layouts folder.

Wichtig

JSLink-basierte Anpassungen (clientseitige Darstellung) werden in modernen Benutzeroberflächen nicht unterstützt.JSLink based customizations (client-side rendering) are not supported in modern experiences. Dies umfasst moderne Listen und Bibliotheken, einschließlich JSLink-Unterstützung in den Listenansichts-Webparts der modernen Seiten.This includes modern lists and libraries, including JSLink support in the list view web parts of the modern pages. Die clientseitige Darstellung wird in den klassischen Benutzeroberflächen in SharePoint Online oder lokal unterstützt.Client-side rendering is supported in the classic experiences in SharePoint Online or in on-premises.

Voraussetzungen für die Verwendung der Beispiele in diesem ArtikelPrerequisites for using the examples in this article

Um die Schritte in diesem Beispiel auszuführen, benötigen Sie Folgendes:To follow the steps in this example, you need the following:

  • Microsoft Visual Studio 2012Microsoft Visual Studio 2012

  • Office Developer Tools für Visual Studio 2012Office Developer Tools for Visual Studio 2012

  • Eine SharePoint-EntwicklungsumgebungA SharePoint development environment

Weitere Informationen über das Einrichten Ihrer SharePoint-Entwicklungsumgebung finden Sie unter Einrichten einer allgemeinen Entwicklungsumgebung für SharePoint.For information about setting up your SharePoint development environment, see Set up a general development environment for SharePoint.

Kernkonzepte, die Ihnen helfen, das clientseitige Rendering für Feldtypen zu verstehenCore concepts to help you understand client-side rendering for field types

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.The following table lists useful articles that can help you understand the concepts and steps that are involved in a custom action scenario.

Tabelle 1. Kernkonzepte des clientseitigen Renderings für FeldtypenTable 1. Core concepts for client-side rendering for field types

Titel des ArtikelsArticle title BeschreibungDescription
Farmlösungen in SharePoint erstellenBuild farm solutions in SharePoint
Erfahren Sie mehr über die Entwicklung, Verpackung und Bereitstellung von administrativen Erweiterungen für SharePoint mit Farmlösungen.Learn about developing, packaging, and deploying administrative extensions to SharePoint using farm solutions.
Benutzerdefinierte FeldtypenCustom Field Types
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.Learn about creating custom field types. As you store your business information in SharePoint, there may be times when your data does not conform to the field types that are available in SharePoint FoundationOr, you might just want to customize those field types. Custom fields can include custom data validation and custom field rendering.

Codebeispiel: Anpassen des Renderingprozesses für einen benutzerdefinierten Feldtyp in einem AnsichtsformularCode example: Customize the rendering process for a custom field type in a view form

Führen Sie die folgenden Schritte aus, um den Renderingprozess für einen benutzerdefinierten Feldtyp anzupassen:Follow these steps to customize the rendering process for a custom field type:

  1. Erstellen Sie das Farmlösung-Projekt.Create the farm solution project.

  2. Fügen Sie eine Klasse für den benutzerdefinierten Feldtyp hinzu.Add a class for the custom field type.

  3. Fügen Sie eine XML-Definition für den benutzerdefinierten Feldtyp hinzu.Add an XML definition for the custom field type.

  4. Fügen Sie eine JavaScript-Datei für die Renderinglogik des benutzerdefinierten Feldtyps hinzu.Add a JavaScript file for the rendering logic of the custom field type.

Abbildung 1 zeigt eine Ansichtsformular mit einem benutzerdefinierten, gerenderten Feldtyp.Figure 1 shows a view form with a custom-rendered field type.

Abbildung 1. Benutzerdefiniertes, clientseitig gerendertes Feld in einem AnsichtsformularFigure 1. Custom client-side rendered field in a view form

Benutzerdefiniertes, clientseitiges gerendertes Feld in einem Ansichtenformular

So erstellen Sie das Farmlösung-ProjektTo create the farm solution project

  1. Ö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.)Open Visual Studio 2012 as administrator (right-click the Visual Studio 2012 icon in the Start menu, and then choose Run as administrator ).

  2. Erstellen Sie ein neues Projekt unter Verwendung der Vorlage SharePoint-Projekt.Create a new project using the SharePoint Project template

    Abbildung 2 zeigt den Speicherort der Vorlage SharePoint-Projekt in Visual Studio 2012 unter Vorlagen, Visual C#, Office SharePoint, SharePoint-Lösungen.Figure 2 shows the location of the SharePoint Project template in Visual Studio 2012, under Templates, Visual C#, Office SharePoint, SharePoint Solutions.

    Abbildung 2. Visual Studio-Vorlage für SharePoint-ProjektFigure 2. SharePoint project Visual Studio template

Vorlage für SharePoint Project in Visual Studio

  1. Geben Sie die URL der SharePoint-Website an, die Sie für das Debugging verwenden möchten.Provide the URL of the SharePoint website that you want to use for debugging.

  2. Wählen Sie die Option Als Farmlösung bereitstellen aus.Select the Deploy as a farm solution option.

So fügen Sie eine Klasse für den benutzerdefinierten Feldtyp hinzuTo add a class for the custom field type

  1. 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.Right-click the farm solution project and add a new class. Name the class file FavoriteColorFieldType.cs.

  2. Kopieren Sie den folgenden Code, und fügen Sie ihn in die Datei FavoriteColorFieldType.cs ein. Der Code führt folgende Aufgaben aus:Copy the following code and paste it in the FavoriteColorFieldType.cs file. The code performs the following tasks:

  • Deklariert eine FavoriteColorField-Klasse, die von SPFieldText erbt.Declares a FavoriteColorField class that inherits from SPFieldText.

  • Stellt zwei Konstruktoren für die FavoriteColorField-Klasse bereit.Provides two constructors for the FavoriteColorField class.

  • Überschreibt die JSLink-Eigenschaft.Overrides the JSLink property.

    Hinweis

    Die JSLink-Eigenschaft wird nicht für Umfrage- oder Ereignislisten unterstützt. Ein SharePoint-Kalender ist eine Ereignisliste.The JSLink property is not supported on Survey or Events lists. 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 hinzuTo add an XML definition for the custom field type

  1. 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.Right-click the farm solution project, and add a SharePoint mapped folder. In the dialog box, select the {SharePointRoot}\Template\XML folder.

  2. 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.Right-click the XML folder created in the last step, and add a new XML file. Name the XML file fldtypes_FavoriteColorFieldType.xml.

  3. Kopieren Sie das folgende Markup, und fügen Sie es in die XML-Datei ein. Das Markup führt die folgenden Aufgaben aus:Copy the following markup, and paste it in the XML file. The markup performs the following tasks:

  • Stellt den Typnamen für den Feldtyp bereit.Provides type name for the field type.

  • Gibt den vollständigen Klassennamen für den Feldtyp an. Dies ist die Klasse, die Sie im vorherigen Verfahren erstellt haben.Specifies the full class name for the field type. This is the class you created in the previous procedure.

  • Stellt zusätzliche Attribute für den Feldtyp bereit.Provides additional attributes for the field type.

    <?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 hinzuTo add a JavaScript file for the rendering logic of the custom field type

  1. 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.Right-click the farm solution project, and add the SharePoint Layouts mapped folder. Add a new CSRAssets folder to the recently added Layouts folder.

  2. 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.Right-click the CSRAssets folder that you created in the last step, and add a new JavaScript file. Name the JavaScript file CSRFieldType.js.

  3. Kopieren Sie den folgenden Code, und fügen Sie ihn in die Datei JavaScript ein. Der Code führt folgende Aufgaben aus:Copy the following code and paste it in the JavaScript file. The code performs the following tasks:

  • Erstellt eine Vorlage für das Feld, wenn es in einem Ansichtsformular angezeigt wird.Creates a template for the field when it is displayed in a view form.

  • Registriert die Vorlage.Registers the template.

  • Stellt die Renderinglogik für den Feldtyp bei Anzeige in einem Ansichtsformular bereit.Provides the rendering logic for the field type when used displayed in a view form.

(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 ausTo build and run the solution

  1. Drücken Sie F5.Press the F5 key.

    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.When you press F5, Visual Studio builds the solution, deploys the solution, and opens the SharePoint website where the solution is deployed.

  2. Erstellen Sie eine benutzerdefinierte Liste, und fügen Sie die neue Farbfeldspalte „Favorite“ hinzu.Create a custom list and add a new Favorite color field column.

  3. Fügen Sie ein Element zur Liste hinzu, und geben Sie einen Wert für die Spalte mit der bevorzugten Farbe an.Add one item to the list, and provide a value for the favorite color column.

  4. Abbildung 3 zeigt die Seite zum Erstellen der Spalte mit dem neuen benutzerdefinierten Feldtyp.Figure 3 shows the create column page with the new custom field type.

    Abbildung 3. Erstellen einer Spalte mit dem neuen benutzerdefinierten FeldtypFigure 3. Creating a new custom field type column

Erstellen einer Spalte mit einem neuen Typ eines benutzerdefinierten Felds

ProblemProblem LösungSolution
Feldtyp FavoriteColorField ist nicht ordnungsgemäß installiert. Wechseln Sie zu der Seite mit den Listeneinstellungen, um dieses Feld zu löschen.Field type FavoriteColorField is not installed properly. Go to the list settings page to delete this field.
Führen Sie den folgenden Befehl an einer Eingabeaufforderung mit erhöhten Rechten aus: iisreset /noforce.Execute the following command from an elevated command prompt: 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.Caution: If you are deploying the solution to a production environment, wait for an appropriate time to reset the web server using iisreset /noforce.

Nächste SchritteNext steps

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. Sehen Sie sich dafür die folgenden Artikel an:This article demonstrated how to customize the rendering process for a custom field type. As a next step, you can learn more details about custom field types. To learn more, see the following:

Siehe auchSee also