Erweitern des Geolocation-Feldtyps mithilfe von clientseitigem Rendering

Artikel
03/21/2023

In diesem Artikel erfahren Sie, wie Sie den Geolocation-Feldtyp von SharePoint programmgesteuert mithilfe von clientseitigem Rendering anpassen.

SharePoint bietet jetzt einen neuen Feldtyp namens „Geolocation“, mit dem Sie SharePoint-Listen um Standortinformationen ergänzen können. In Spalten vom Typ Geolocation können Sie Standortinformationen als ein Paar von Breiten- und Längengrad Koordinaten in decimal Grad eingeben, oder die Koordinaten des aktuellen Standort des Benutzers vom Browser abrufen, wenn sie die W3C Geolocation-API implementiert. Weitere Informationen zum Feld "Geolocation" finden Sie unter Integrieren von Standort- und Kartenfunktionen in SharePoint.

Geolocation-Feldtyp ist in den Standardinhaltstyp eine beliebige Liste oder Dokumentbibliothek in SharePoint nicht verfügbar. Geolocation-Feldtyp in SharePoint enthalten ist, jedoch nicht auf der Seite der Spalte erstellen für die Liste sichtbar ist; Sie müssen den Geolocation-Feldtyp programmgesteuert hinzufügen. Weitere Informationen finden Sie unter Vorgehensweise: Programmgesteuertes Hinzufügen einer Geolocation-Spalte zu einer Liste in SharePoint.

Nachdem Sie den Geolocation-Feldtyp SharePoint hinzugefügt haben, können Sie es zum Rendern von Karten mithilfe von Bing Maps verwenden. Das integrierte Geolocation-Feld kann nur mit Bing Maps gerendert werden. Jedoch können Sie ein benutzerdefiniertes Feld erstellen, mit der Geolocation-Feld als einen übergeordneten Feldtyp. Benutzerdefiniertes Rendering kann über die JSLink -Eigenschaft in clientseitiges Rendering Framework bereitgestellt werden. Clientseitiges Rendering Rahmen wird in SharePoint eingeführt. Weitere Informationen finden Sie unter Vorgehensweise: Anpassen eines Feldtyps mithilfe vom clientseitigem Rendering.

Hinweis

Die JSLink-Eigenschaft wird nicht für Umfrage- oder Ereignislisten unterstützt. SharePoint-Kalender sind Terminlisten.

Mit dem Verfahren in diesem Abschnitt erstellen Sie ein benutzerdefiniertes Feld, das mit clientseitigem Rendering vom Geolocation-Feldtyp abgeleitet wird.

Voraussetzungen für die Erstellung eines benutzerdefinierten Geolocation-Felds

Sie müssen über Folgendes verfügen:

Ein Server mit SharePoint
Microsoft Visual Studio 2012
Office Developer Tools für Visual Studio 2012
Zugriff auf eine Liste SharePoint mit ausreichenden Berechtigungen zum Hinzufügen einer Spalte

Kernkonzepte für das Anpassen des Geolocation-Felds

Tabelle 1. Kernkonzepte zum Erweitern des Geolocation-Feldtyps

Titel des Artikels	Beschreibung
Integrieren von Standort- und Kartenfunktionen in SharePoint	Erfahren Sie, wie Sie Standortinformationen und Karten in SharePoint-Listen und standortbasierte Web und mobilen apps mithilfe des neuen Geolocation-Felds und Erstellen eigener Geolocation-basierte Feldtypen integrieren.
Vorgehensweise: Anpassen eines Feldtyps mithilfe vom clientseitigem Rendering	Erfahren Sie mehr über das neue clientseitige Rendering in SharePoint eingeführt.
Vorgehensweise: Hinzufügen einer Geolocation-Spalte einer Liste in SharePoint programmgesteuert	Informationen Sie zum Hinzufügen einer Geolocation-Spalteninhalts zu einer Liste programmgesteuert in SharePoint.

Schritt 1: Einrichten des Visual Studio-Projekts

So richten Sie das Projekt für das benutzerdefinierte Feld ein

Starten Sie Visual Studio 2012 auf demselben Computer, auf dem SharePoint installiert ist.
Wählen Sie im Dialogfeld Neues Projekt unter Installierte VorlagenVisual c#, Office SharePoint, SharePoint-Lösungen. Wählen Sie den SharePoint-Projekttyp. Abbildung 1 zeigt den Speicherort der Vorlage SharePoint-Projekts in Visual Studio 2012. Erleichtern Sie eine farmlösung, nicht in einer sandkastenlösung.

Abbildung 1: SharePoint-Projektvorlage in Visual Studio
Geben Sie einen Namen für das Projekt. In diesem Beispiel verwenden wir CustomGeolocationField. Wählen Sie dann die Schaltfläche OK.
Geben Sie im Assistenten zum Anpassen von SharePoint die URL für die SharePoint-Website, wo Sie Ihre neuen benutzerdefinierten Feldtyps bereitstellen möchten.
Öffnen Sie im Projektmappen-Explorer das Kontextmenü für den Projektnamen (in unserem Beispiel, es ist CustomGeolocationField ), und wählen Sie Hinzufügen und Neues Element.
Klicken Sie im Dialogfeld Neues Element hinzufügen unter dem Vorlagen Code wählen Sie Klasse aus, und geben Sie den Namen für die Klasse (in diesem Beispiel CustomGeolocationField.cs ).
Klicken Sie im Projektmappen-Explorer öffnen Sie das Kontextmenü für den Projektnamen, und wählen Sie Hinzufügen und zugeordneten SharePoint-Ordner.
Verwenden Sie im Dialogfeld Zugeordneten SharePoint-Ordner hinzufügen das Struktursteuerelement, um den Ordner TEMPLATE\LAYOUTS zuzuordnen, und klicken Sie auf die Schaltfläche OK .
Klicken Sie im Projektmappen-Explorer öffnen Sie das Kontextmenü für den neuen Ordner " LAYOUTS " (nicht auf den Projektnamen), und wählen Sie Hinzufügen und Neues Element.
Klicken Sie im Dialogfeld Neues Element hinzufügen wählen Sie Visual C#-Web, und wählen Sie dann Javascript-Datei unter Vorlagen.
Klicken Sie im Feld Name Geben Sie den Namen für die Datei (CustomGeolocationField in unserem Beispiel), und wählen Sie Hinzufügen.
Wiederholen Sie Schritt 8, um einen weiteren zugeordneten SharePoint-Ordner zu erstellen und TEMPLATE\XML zuzuordnen. Wählen Sie dann die Schaltfläche OK.
Klicken Sie im Projektmappen-Explorer öffnen Sie das Kontextmenü für den neuen Ordner XML (nicht auf den Projektnamen), und wählen Sie Hinzufügen und Neues Element.
Klicken Sie im Dialogfeld Neues Element hinzufügen wählen Sie Visual C#-Daten, und wählen Sie dann XML-Datei unter Vorlagen.
Geben Sie im Feld Name den Namen der Datei an (in diesem Beispiel usesfldtypes_CustomGeolocationControl.xml), und wählen Sie die Schaltfläche Hinzufügen aus.

Schritt 2: Erstellen einer benutzerdefinierten Feldklasse

Eine Feldklasse ist eine Klasse, deren Instanzen können bestimmte Felder darstellen, die auf benutzerdefinierten Feldtyps basieren. Diese Klasse muss von SPField oder eine der Klassen in SharePoint Foundation, die sich daraus ableiten erben. Diese Klasse muss zum Aktivieren Sie erweitern oder Anpassen des Geolocation-Feldtyps von SPFieldGeolocationerben. Weitere Informationen zum Erstellen von Feldtypen finden Sie unter Exemplarische Vorgehensweise: Erstellen eines benutzerdefinierten Feldtyps.

Hinweis

In diesem Beispiel werden die Klasse und die Lösung CustomGeolocationField benannt. Sie können den Namen der Klasse und des Projekts beim Erstellen des Visual Studio-Projekts angeben.

So erstellen Sie eine Klasse für ein benutzerdefiniertes Feld

Öffnen Sie die Datei CustomGeolocationField.cs, und fügen Sie wie folgt eine Direktive hinzu using .
```
using System;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
```
Stellen Sie sicher, dass der Namespace ist CustomGeolocationField.

Stellen Sie sicher, dass die Klasse den Namen hat CustomGeolocationField, und ändern Sie ihre Deklaration, um anzugeben, dass sie von SPFieldGeolocationerbt. Fügen Sie die folgenden erforderlichen Konstruktoren für die Klasse hinzu.

public class CustomGeolocationField : SPFieldGeolocation
{
    /// <summary>
    /// Create an instance of CustomGeolocationField object.
    /// </summary>
    /// <param name="fields">Field collection</param>
    /// <param name="fieldName">Name of the field</param>
    ///
    public CustomGeolocationField(SPFieldCollection fields, string fieldName)
        : base(fields, fieldName)
    {
    }

    /// <summary>
    /// Create an instance of CustomGeolocationField object.
    /// </summary>
    /// <param name="fields">Field collection</param>
    /// <param name="typeName">type name of the field</param>
    /// <param name="displayName">display name of the field</param>

    public CustomGeolocationField(SPFieldCollection fields, string typeName, string displayName)
        : base(fields, typeName, displayName)
    {
    }

Fügen Sie der -Klasse die folgende Außerkraftsetzung der JSLink -Methode hinzu. CustomGeolocationControl.js ist eine JavaScript-Datei, die Sie im nächsten Schritt erstellen. Durch die Bereitstellung einer eigenen Datei JavaScript, überschreiben Sie die Standardwiedergabe von Bing Maps. Wenn Sie diese Methode nicht überschreiben, werden standardmäßig von Bing Maps. Die JSLink -Eigenschaft wird in SharePoint eingeführt. Weitere Informationen zur JSLink -Eigenschaft finden Sie unter Vorgehensweise: Anpassen eines Feldtyps mithilfe des clientseitigen Renderings.
```
/// <summary>
/// Override JSLink property.
/// </summary>

public override string JSLink
{
    get
    {
        return "CustomGeolocationControl.js";
    }
    set
    {
        base.JSLink = value;
    }
}
```
Die GetFieldValue() -Methode konvertiert den angegebenen Wert in einen Feldtypwert. Weitere Informationen zur GetFieldValue() -Methode finden Sie unter GetFieldValue(String). Fügen Sie der -Klasse die folgende Außerkraftsetzung der GetFieldValue() -Methode hinzu CustomGeolocationField .
```
/// <summary>
/// get the field values
/// </summary>
/// <param name="value"></param>
/// <returns></returns>

public override object GetFieldValue(string value)
{
    return base.GetFieldValue(value);
}
```

Fügen Sie der -Klasse die folgende Außerkraftsetzung der GetValidatedString-Methode hinzu CustomGeolocationField :

/// <summary>
/// get validated string
/// </summary>
/// <param name="value"></param>
/// <returns></returns>

public override string GetValidatedString(object value)
{
    return base.GetValidatedString(value);
}

Schritt 3: Erstellen von Rendering für das neue benutzerdefinierte Feld

Als Nächstes sollten Sie die JavaScript-Datei erstellen, auf die die JSLink Methode der Feldklasse verweist. Diese Datei sollte das Rendering des benutzerdefinierten Feldtyps mit dem neuen Framework clientseitiges Rendering definieren. Weitere Informationen finden Sie unter Vorgehensweise: Anpassen eines Feldtyps mithilfe vom clientseitigem Rendering.

Das folgende Beispiel zeigt die Registrierung Logik für das Registrieren von mit dem Client Side Rendering Framework in SharePoint eingeführt.

function _registerCustomGeolocationFieldTemplate() {
    var geolocationFieldContext = {};
    geolocationFieldContext.Templates = {};
    geolocationFieldContext.Templates.Fields = {

        'CustomGeolocationField': {
            'View': CustomGeolocationFieldTemplate.RenderGeolocationField,
            'DisplayForm': CustomGeolocationFieldTemplate.SPFieldGeolocation_Display,
            'EditForm': CustomGeolocationFieldTemplate.SPFieldGeolocation_Edit,
            'NewForm': CustomGeolocationFieldTemplate.SPFieldGeolocation_Edit
        }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(geolocationFieldContext);
}

In den Registrierungsprozess sind vier Variablen und ihre entsprechenden Methoden. Das clientseitiges Rendering-Framework ruft diese Methoden für das Rendering CustomGeolocationControl.

Das folgende Codebeispiel erstellt neues Rendering für ein neues benutzerdefiniertes Feld für neues benutzerdefiniertes Feld, das von Geolocation abgeleitet ist.

So erstellen Sie die Datei JavaScript

Erstellen Sie eine Textdatei, und geben Sie einen Namen wie z. B. x an, geben Sie ihr eine .js Erweiterung zu, und speichern Sie sie im SharePoint-zugeordneten Ordner TEMPLATE\LAYOUTS. In diesem Beispiel wird der Name CustomGeolocationControl.js verwendet.

Kopieren Sie den folgenden Code in die JS-Datei.

(function () {
    if (typeof CustomGeolocationFieldTemplate == "object") {
        return;
    }
    window.CustomGeolocationFieldTemplate = (function () {
        return {
            SPFieldGeolocation_Display: function (rCtx) {
                if (rCtx == null || rCtx.CurrentFieldValue == null || rCtx.CurrentFieldValue == '')
                    return '';
                var listItem = rCtx['CurrentItem'];
                var fldvalue = CustomGeolocationFieldTemplate.ParseGeolocationValue(listItem[rCtx.CurrentFieldSchema.Name]);
                var _myData = SPClientTemplates.Utility.GetFormContextForCurrentField(rCtx);

                if (_myData == null || _myData.fieldSchema == null)
                    return '';
                var _latitude = 0;
                var _longitude = 0;

                if (fldvalue != null) {
                    _latitude = fldvalue.latitude;
                    _longitude = fldvalue.longitude;
                }

                var result = '<div>';
                result += '<span>Latitude:</span><span>' + _latitude + '</span><span>Longitude:</span><span>' + _longitude + '</span>';
                result += '</div>';
                return result;
            },
            ParseGeolocationValue: function (fieldValue) {

                if (fieldValue == null || fieldValue == '')
                    return null;

                var point = new Object();
                point.longitude = null;
                point.latitude = null;
                point.altitude = null;
                point.measure = null;

                var matches = fieldValue.match(/POINT\\s*\\((\\d+(\\.\\d+)?)\\s+(\\d+(\\.\\d+)?)\\s+(\\d+(\\.\\d+)?)\\s+(\\d+(\\.\\d+)?)\\)/i);
                if (matches != null) {

                    point.longitude = parseFloat(matches[1]);
                    point.latitude = parseFloat(matches[3]);
                    point.altitude = parseFloat(matches[5]);
                    point.measure = parseFloat(matches[7]);
                }
                else
                {
                    matches = fieldValue.match(/POINT\\s*\\((\\d+(\\.\\d+)?)\\s+(\\d+(\\.\\d+)?)\\)/i);
                    if (matches != null) {

                        point.longitude = parseFloat(matches[1]);
                        point.latitude = parseFloat(matches[3]);
                    }
                }
                return point;
            },
            SPFieldGeolocation_Edit: function (rCtx) {
                if (rCtx == null)
                    return '';
                var _myData = SPClientTemplates.Utility.GetFormContextForCurrentField(rCtx);

                if (_myData == null || _myData.fieldSchema == null)
                    return '';
                var _latitude = null;
                var _longitude = null;
                var _inputId_Latitude = _myData.fieldName + '_' + _myData.fieldSchema.Id + '_$geolocationField_Latitude';
                var _inputId_Longitude = _myData.fieldName + '_' + _myData.fieldSchema.Id + '_$geolocationField_Longitude';
                var _inputId_Div = _myData.fieldName + '_' + _myData.fieldSchema.Id + '_$geolocationField_Div';
                var _latitudeBox = null;
                var _longitudeBox = null;

                var _value = _myData.fieldValue != null ? _myData.fieldValue : '';
                var listItem = rCtx['CurrentItem'];
                var fldvalue = CustomGeolocationFieldTemplate.ParseGeolocationValue(listItem[rCtx.CurrentFieldSchema.Name]);

                if (fldvalue != null) {
                    _latitude = fldvalue.latitude;
                    _longitude = fldvalue.longitude;
                }

                var validators = new SPClientForms.ClientValidation.ValidatorSet();

                if (_myData.fieldSchema.Required)
                    validators.RegisterValidator(new SPClientForms.ClientValidation.RequiredValidator());

                _myData.registerClientValidator(_myData.fieldName, validators);

                // Post DOM initialization callback.
                _myData.registerInitCallback(_myData.fieldName, function () {

                    // Initialize the input control references.
                    _latitudeBox = document.getElementById(_inputId_Latitude);
                    _longitudeBox = document.getElementById(_inputId_Longitude);

                    // Set the initial values.
                    if ((_latitudeBox != null &amp;&amp; _longitudeBox != null) &amp;&amp;
                        (_latitude != null &amp;&amp; _longitude != null)) {
                        _latitudeBox.value = _latitude;
                        _longitudeBox.value = _longitude;
                    }
                });
                // On focus call back.
                _myData.registerFocusCallback(_myData.fieldName, function () {
                    if (_latitudeBox != null)
                        _latitudeBox.focus();
                });
                // Validation failure handler.
                _myData.registerValidationErrorCallback(_myData.fieldName, function (errorResult) {
                    SPFormControl_AppendValidationErrorMessage(_inputId_Div, "invalid Geolocation Field");
                });

                // Register a callback just before submit.
                _myData.registerGetValueCallback(_myData.fieldName, function () {
                    if (_latitudeBox == null &amp;&amp; _longitudeBox == null)
                        return '';
                    else {
                        _latitude = _latitudeBox.value;
                        _longitude = _longitudeBox.value;

                        if (_latitude != null &amp;&amp; _longitude != null)
                            return "Point(" + _longitude + " " + _latitude + ")";
                    }
                });
                _myData.updateControlValue(_myData.fieldName, _value);

                var result = '<div width="100%" id=' + STSHtmlEncode(_inputId_Div) + '>';
                result += '<div><span>Latitude:</span><input id=' + STSHtmlEncode(_inputId_Latitude) + ' type="text" name="Latitude" /></div>';
                result += '<div><span>Longitude:</span><input id=' + STSHtmlEncode(_inputId_Longitude) + ' type="text" name="Longitude" /></div>';
                result += '</div>';
                return result;

            },
            RenderGeolocationField: function (inCtx, field, listItem, listSchema) {
                var fldvalue = CustomGeolocationFieldTemplate.ParseGeolocationValue(listItem[field.Name]);
                var result = '';

                if (fldvalue != null) {
                    var result = '<div>';
                    result += '<span>Latitude:</span><span>' + fldvalue.latitude + '</span><span>Longitude:</span><span>' + fldvalue.longitude + '</span>';
                    result += '</div>';
                }
                return result;
            }
        };
    })();
    function _registerCustomGeolocationFieldTemplate() {

        var geolocationFieldContext = {};
        geolocationFieldContext.Templates = {};
        geolocationFieldContext.Templates.Fields = {

            'CustomGeolocationField': {
                'View': CustomGeolocationFieldTemplate.RenderGeolocationField,
                'DisplayForm': CustomGeolocationFieldTemplate.SPFieldGeolocation_Display,
                'EditForm': CustomGeolocationFieldTemplate.SPFieldGeolocation_Edit,
                'NewForm': CustomGeolocationFieldTemplate.SPFieldGeolocation_Edit
            }
        };
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(geolocationFieldContext);
    }
    ExecuteOrDelayUntilScriptLoaded(_registerCustomGeolocationFieldTemplate, 'clienttemplates.js');
})();

Schritt 4: Erstellen einer feldtypdefinition

Eine Feldtypdefinition ist eine XML-Datei mit einem Namen wie fldtypes.xml*, die in %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\15\TEMPLATE\XML bereitgestellt wird. Eine Feld-Definitionsdatei enthält Informationen, SharePoint Foundation benötigt, um das Feld in Listenansichten und Formularen anzeigen, bearbeiten und neu ordnungsgemäß zu rendern. Der wichtigste enthält die Definition Informationen über die Assembly, die den kompilierten Feldtyp enthält. Weitere Informationen zu feldtypdefinitionen finden Sie unter Vorgehensweise: Erstellen einer Custom Field Type Definition.

So erstellen Sie die Feldtypdefinition

Erstellen Sie das Projekt in Visual Studio. Das Projekt ist noch nicht fertig, aber Sie müssen es jetzt erstellen, um eine GUID und ein öffentliches Schlüsseltoken für die Assembly zu generieren.

Öffnen Sie die fldtypes_CustomGeolocationControl.xml Datei, und ersetzen Sie deren Inhalt durch das folgende Markup.

<?xml version="1.0" encoding="utf-8" ?>
<FieldTypes>
  <FieldType>
    <Field Name="TypeName">CustomGeolocationField</Field>
    <Field Name="ParentType">Geolocation</Field>
    <Field Name="TypeDisplayName">Custom Geolocation field</Field>
    <Field Name="TypeShortDescription"> Custom Geolocation field </Field>
    <Field Name="UserCreatable">TRUE</Field>
    <Field Name="ShowOnListCreate">TRUE</Field>
    <Field Name="ShowOnSurveyCreate">TRUE</Field>
    <Field Name="ShowOnDocumentLibraryCreate">TRUE</Field>
    <Field Name="ShowOnColumnTemplateCreate">TRUE</Field>
    <Field Name="FieldTypeClass">CustomGeolocationField.CustomGeolocationField,$SharePoint.Project.AssemblyFullName$</Field>
    <Field Name="SQLType">nvarchar</Field>
  </FieldType>
</FieldTypes>

Diese Datei definiert den benutzerdefinierten Feldtyp für SharePoint. Ausführliche Informationen zum Zweck und zur Bedeutung der zugehörigen Elemente finden Sie unter Benutzerdefinierte Feldtypdefinition, FldTypes.xml, FieldTypes-Element (Feldtypen), FieldType-Element (Feldtypen)und Feldelement (Feldtypen). Beachten Sie, dass das Element <Field Name="FieldTypeClass"> vollständig in einer Zeile werden muss.

Der Wert des <Field Name="FieldTypeClass"> -Elements ist der vollqualifizierte Name Ihrer benutzerdefinierten Feldklasse, gefolgt von einem Komma und einem Visual Studio-Token ( $SharePoint.Project.AssemblyFullName$ ). Wenn Sie das Projekt kompilieren, wird eine Kopie dieser Datei erstellt, in dem das Token durch den vollständigen vierteiligen Namen der Assembly ersetzt wird. Die Kopie wird bereitgestellt, wenn Sie eine Lösung bereitstellenVisual Studio Erstellen im Menü Visual Studio 2012 auswählen.

Schritt 5: Erstellen Sie und Testen Sie den benutzerdefinierten Feldtyp

Nachdem Sie ein benutzerdefiniertes Feld in der SharePoint-Server bereitstellen, steht eine neue benutzerdefinierte Spalte zum Hinzufügen zu einer beliebigen SharePoint-Liste auf dem Server, auf dem die Lösung bereitgestellt wird.

Drücken Sie die Taste F5 .

Hinweis

Wenn Sie F5 drücken, erstellt Visual Studio die Projektmappe, 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 benutzerdefinierte Geolocation-Feldspalte hinzu.
Der Liste ein Element hinzu, und geben Sie Länge und Breite Werte für die benutzerdefinierte Geolocation-Spalte.
Abbildung 2 zeigt mit den neuen benutzerdefinierten Feldtyp Seite Spalte erstellen.

Abbildung 2: Erstellen einer Spalte mit einem neuen Typ eines benutzerdefinierten Felds

Share via