(0) exportieren 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

Erfahren Sie, wie Sie mithilfe der clientseitigen feldrendering-Technologie SharePoint 2013ein Feldtyps anpassen.

Letzte Änderung: Montag, 1. Juli 2013

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

Clientseitiges Rendering bietet einen Mechanismus, mit denen Sie Ihre eigene Ausgabe für eine Gruppe von Steuerelementen zu erstellen, die in einer SharePoint-Seite gehostet werden können. Dieser Mechanismus können Sie bekannte Technologien wie HTML und JavaScript, verwenden Sie die Renderinglogik zum von benutzerdefinierten Feldtypen definiert. Sie können eigene Ressourcen JavaScript angeben und Hosten sie in der Daten-Speicheroptionen verfügbar zu Ihrer Farmlösung, wie der Ordner _layouts, mithilfe der clientseitigen beim Rendern.

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.

Grundlegende Konzepte zur besseren clientseitiges Rendering für die Feldtypen

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. Grundlegende Konzepte für clientseitiges Rendering für die Feldtypen

Artikeltitel

Beschreibung

Farmlösungen in SharePoint 2013 erstellen

Informationen Sie zu entwickeln, packen und POST von administrativen Erweiterungen in SharePoint 2013Farmlösungenverwenden.

Benutzerdefinierte Feldtypen

Informationen Sie zum Erstellen von benutzerdefinierten Feldtypen. Wie Sie Ihre Unternehmensinformationen in SharePoint 2013speichern, kann es vorkommen wenn Ihre Daten nicht an die Feldtypen, die in SharePoint Foundationverfügbaren entspricht oder, möglicherweise möchten diese Feldtypen anpassen. Benutzerdefinierte Felder können benutzerdefinierte Gültigkeitsprüfung und benutzerdefinierten feldrendering enthalten.

Führen Sie die folgenden Schritte aus, um die Renderingprozess für eines benutzerdefinierten Feldtyps anpassen:

  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 an.

Abbildung 1 zeigt ein Formular anzeigen, mit dem Feldtyp benutzerdefinierte-gerendert.

Abbildung 1. Benutzerdefinierte clientseitige gerendert Feld in einem Formular anzeigen

Benutzerdefiniertes, clientseitiges gerendertes Feld in einem Ansichtenformular

So erstellen Sie das Projekt Farmlösung

  1. Öffnen Sie Visual Studio 2012 als Administrator (Maustaste auf das Symbol Visual Studio 2012 im Menü Start , und wählen Sie dann als Administrator ausführen).

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

    Abbildung 2 zeigt die Position der Vorlage SharePoint 2013-Projekt in Visual Studio 2012, unter Vorlagen, Visual c#, Office SharePoint, SharePoint-Lösungen.

    Abbildung 2. SharePoint 2013-Projektvorlage Visual Studio

    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 POST .

Hinzufügen eine Klasse für den benutzerdefinierten Feldtyp

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

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

    • Deklariert eine FavoriteColorField -Klasse, die von SPFieldTexterbt.

    • Enthält 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. Auf das Projekt Farmlösung , und fügen Sie einen zugeordneten SharePoint-Ordner hinzu. Wählen Sie im Dialogfeld aus den Ordner {SharePointRoot} \Template\XML .

  2. Maustaste auf den XML-Ordner 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:

    • Bietet Typnamen für den Feldtyp.

    • 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="InternalType">Text</Field>
        <Field Name="SQLType">nvarchar</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>
    

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

  1. Auf das Projekt Farmlösung , und fügen Sie den zugeordneten Seitenlayouts für die SharePoint-Ordner hinzu. Fügen Sie einen neuen CSRAssets-Ordner, in den zuletzt hinzugefügten Ordner Layouts.

  2. Im letzten Schritt erstellten CSRAssets-Ordners mit der rechten Maustaste, und fügen Sie eine neue JavaScript -Datei. Der Name der Datei JavaScriptCSRFieldType.js.

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

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

    • Registriert die Vorlage an.

    • Enthält die Logik für den Feldtyp bei Verwendung in einem Formular anzeigen angezeigt.

    (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

    Beim Drücken von F5 Visual Studio erstellt die Projektmappe, stellt die Lösung bereit, und öffnet die SharePoint-Website, in dem die Lösung bereitgestellt wurde.

  2. Erstellen Sie eine benutzerdefinierte Liste, und fügen Sie eine neue Favoritenordner Farbe-Feld-Spalte.

  3. Der Liste fügen Sie ein Element hinzu, und geben Sie einen Wert für die favorite Color-Spalte.

  4. Abbildung 3 zeigt die Seite Spalte erstellen, mit dem neuen benutzerdefinierten Feldtyp.

    Abbildung 3. Erstellen einer neuen Spalte des benutzerdefinierten Felds-Typ

    Erstellen einer Spalte mit einem neuen Typ eines benutzerdefinierten Felds

Problem

Lösung

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

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

Vorsicht Vorsicht

Wenn Sie die Lösung in eine Produktionsumgebung POST, warten Sie für eine angemessene Zeit den End-Webserver mit iisreset /noforcezurücksetzen.

Dieser Artikel wurde veranschaulicht, wie den Renderingprozess für eines benutzerdefinierten Feldtyps anpassen. Als Nächstes erfahren Sie mehr über benutzerdefinierte Feldtypen. Weitere finden Sie die folgenden Themen:

Anzeigen:
© 2014 Microsoft