Exportieren (0) Drucken
Alle erweitern
Dieser Artikel wurde maschinell übersetzt. Bewegen Sie den Mauszeiger über die Sätze im Artikel, um den Originaltext anzuzeigen.
Übersetzung
Original

Vorgehensweise: Anpassen ein Feldtyps mit clientseitiges Rendering

SharePoint 2013

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

Letzte Änderung: Montag, 9. März 2015

Gilt für: SharePoint Foundation 2013 | SharePoint Server 2013

Clientseitiges Rendering bietet einen Mechanismus, den Sie verwenden können, um eine eigene Ausgabe für eine Gruppe von Steuerelementen zu erstellen, die in einer SharePoint-Seite gehostet werden. Dieser Mechanismus ermöglicht Ihnen, bekannte Technologien wie HTML und JavaScript, verwenden, um die Renderinglogik der Typen von benutzerdefinierten Feldern zu definieren. In clientseitiges Rendering können Sie eigene Ressourcen JavaScript angeben und an Ihre Farmlösung, wie etwa den Ordner _layouts in verfügbaren Datenspeicheroptionen hosten.

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 2013-Entwicklungsumgebung

Weitere Informationen zum Einrichten Ihrer SharePoint-Entwicklungsumgebung finden Sie unter Start: Einrichten der Entwicklungsumgebung für SharePoint 2013.

Kernkonzepte für ein clientseitiges Rendering für Feldtypen Verständnis der

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.

In Tabelle 1. Kernkonzepte für clientseitiges Rendering für Feldtypen

Artikeltitel

Beschreibung

Farmlösungen in SharePoint 2013 erstellen

Erfahren Sie mehr über das Entwickeln, Packen und Bereitstellen von administrative-ErweiterungenSharePoint 2013mithilfe vonFarmlösungen.

Benutzerdefinierte Feldtypen

Informationen Sie zum Erstellen von benutzerdefinierten Feldtypen. Wie Sie Ihre geschäftlichen Informationen in speichernSharePoint 2013, unter Umständen Wenn Ihre Daten nicht entsprechen die Feldtypen, die in verfügbar sindSharePoint FoundationOder Sie können nur die Feldtypen anpassen möchten. Benutzerdefinierte Felder können benutzerdefinierte Gültigkeitsprüfung und Rendering des benutzerdefinierten Felds enthalten.

Gehen folgendermaßen Sie vor, um die Renderingprozess für einen benutzerdefinierten Feldtyp anzupassen:

  1. Erstellen Sie das Projekt Farmlösung .

  2. Fügen Sie eine Klasse für den benutzerdefinierten Feldtyp.

  3. Fügen Sie eine XML-Definition für den benutzerdefinierten Feldtyp.

  4. Hinzufügen einer JavaScript -Datei für die Renderinglogik des benutzerdefinierten Feldtyps.

Abbildung 1 zeigt ein Ansichtsformular mit einem benutzerdefinierten gerendert Feldtyp.

Abbildung 1. Benutzerdefiniertes clientseitiges gerendertes Feld in einem Ansichtsformular

Benutzerdefiniertes, clientseitiges gerendertes Feld in einem Ansichtenformular

So erstellen Sie das Projekt Farmlösung

  1. Öffnen Sie Visual Studio 2012 als Administrator (im Startmenü mit der rechten Maustaste auf Visual Studio 2012 , und wählen Sie dann auf als Administrator ausführen).

  2. Erstellen eines neuen Projekts mithilfe der SharePoint 2013 -Projektvorlage

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

    Abbildung 2. Visual Studio-Projektvorlage SharePoint 2013

    Vorlage für SharePoint 2013 Project in Visual Studio
  3. Geben Sie die URL der SharePoint-Website an, die Sie für das Debugging verwenden möchten.

  4. Wählen Sie die Option als Farmlösung bereitstellen .

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

  1. Maustaste auf das Projekt Farmlösung , und fügen Sie eine neue Klasse hinzu. Nennen Sie die Klassendatei FavoriteColorFieldType.cs.

  2. Kopieren Sie den folgenden Code, und fügen Sie ihn in der Datei FavoriteColorFieldType.cs. Der Code führt die folgenden Aufgaben:

    • Deklariert eine FavoriteColorField -Klasse, die von SPFieldTexterbt.

    • Bietet zwei Konstruktoren für die FavoriteColorField -Klasse.

    • Überschreibt die JSLink -Eigenschaft.

    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

  1. Mit der rechten Maustaste in des Farmlösung -Projekts, und fügen Sie einen zugeordneten SharePoint-Ordner. Klicken Sie im Dialogfeld Wählen Sie den Ordner {SharePointRoot} \Template\XML .

  2. Mit der rechten Maustaste in des XML-Ordners im letzten Schritt erstellt haben, und fügen Sie eine neue XML-Datei. Name der XML-Datei fldtypes_FavoriteColorFieldType.xml.

  3. Kopieren Sie das folgende Markup, und fügen Sie ihn in der XML-Datei. Das Markup werden die folgenden Aufgaben ausgeführt:

    • Typnamen für den Feldtyp enthält.

    • Gibt den vollständigen Klassennamen für den Feldtyp. Dies ist die Klasse, die Sie im vorherigen Verfahren erstellt haben.

    • Bietet zusätzliche Attribute für den Feldtyp.

    <?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>
    

Hinzufügen eine JavaScript -Datei für die Renderinglogik des benutzerdefinierten Feldtyps

  1. Mit der rechten Maustaste in des Farmlösung -Projekts, und fügen Sie die zugeordneten SharePoint-Layouts-Ordners. Fügen Sie einen neuen CSRAssets Ordner in den zuletzt hinzugefügten Ordner Layouts.

  2. Mit der rechten Maustaste in des CSRAssets-Ordners, den Sie im letzten Schritt erstellt haben, und fügen Sie eine neue JavaScript -Datei. Der Name der Datei JavaScriptCSRFieldType.js.

  3. Kopieren Sie den folgenden Code, und fügen Sie ihn in der Datei JavaScript . Der Code führt die folgenden Aufgaben:

    • Erstellt eine Vorlage für das Feld an, wenn es in einem Ansichtsformular angezeigt wird.

    • Registriert die Vorlage an.

    • Renderinglogik für den Feldtyp bei Verwendung in einem Ansichtsformular angezeigt werden.

    (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 +
            "' >&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;" + color;
    }
    

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

  1. Drücken Sie die Taste F5.

    Hinweis Hinweis

    Wenn Sie F5 drücken, wird Visual Studio erstellt die Lösung, stellt die Lösung bereit und öffnet die SharePoint-Website, in dem die Lösung bereitgestellt wird.

  2. Erstellen einer benutzerdefinierten Liste und Hinzufügen einer neuen Spalte der Favoriten Farbe dar.

  3. Der Liste ein Element hinzu, und geben Sie einen Wert für die Spalte Bevorzugte Farbe.

  4. Abbildung 3 zeigt mit den neuen benutzerdefinierten Feldtyp Seite Spalte erstellen.

    Abbildung 3. Erstellen einer neuen Spalte mit benutzerdefiniertem Feldtyp

    Erstellen einer Spalte mit einem neuen Typ eines benutzerdefinierten Felds

Problem

Lösung

FeldtypFavoriteColorFieldist nicht ordnungsgemäß installiert. Wechseln Sie auf der Seite Einstellungen für dieses Feld löschen.

Führen Sie den folgenden Befehl an einer Eingabeaufforderung mit erhöhten Rechten aus: Iisreset/noforce.

Vorsicht Vorsicht

Wenn Sie die Lösung in einer Produktionsumgebung bereitstellen, warten Sie einen geeigneten Zeitpunkt zum Zurücksetzen des Webservers mit Iisreset/noforce.

In diesem Artikel gezeigt, wie Sie den Renderingprozess für einen benutzerdefinierten Feldtyp anzupassen. Im nächsten Schritt erhalten Sie weitere Informationen zu benutzerdefinierten Feldtypen. Finden Sie weitere Informationen finden Sie die folgenden Themen:

Anzeigen:
© 2015 Microsoft