Поделиться через

Дополнение типа поля "Географическое положение" с использованием клиентской обработки

Узнайте, как программно настроить тип поля "Географическое положение" в SharePoint с использованием клиентской обработки.

В SharePoint вводится новый тип поля "Географическое положение", позволяющее указывать в списках SharePoint сведения о расположении. В столбцах типа географического расположения можно ввести сведения о расположении в виде пары Широта и долгота координат в десятичное градусов или получить координаты текущее расположение пользователя в браузере, если он реализует интерфейс API географического расположения W3C. Дополнительные сведения о поле "Географическое расположение" см. в статье Интеграция функций расположения и карты в SharePoint.

Тип поля "Географическое расположение" недоступен в типе контента по умолчанию для любого списка или библиотеки документов в SharePoint. Тип поля "Географическое расположение" включен в SharePoint, но не отображается на странице создания столбца для списка; Необходимо добавить тип поля Географическое расположение программным способом. Дополнительные сведения см. в разделе Практическое руководство. Добавление столбца географического расположения в список программным способом в SharePoint.

После добавления типа поля "Географическое расположение" в SharePoint его можно использовать для отрисовки карт с помощью Карты Bing. Встроенные поля географического расположения можно отображать только с помощью службы Bing Maps. Тем не менее можно создать настраиваемое поле, используя поля географического расположения в качестве родительского типа поля. Отображение настраиваемых могут быть предоставлены через свойство JSLink в структуре обработки на стороне клиента. Платформа отрисовки на стороне клиента представлена в SharePoint. Для получения дополнительных сведений см Как: Настройка типа поля, с использованием обработки на стороне клиента.

Примечание.

Свойство JSLink не поддерживается в списках Survey или Events. Календарь SharePoint — это список событий.

Процедуры в этом разделе Создание настраиваемого поля, производные от типа поля географического расположения с использованием обработки на стороне клиента.

Необходимые условия для создания настраиваемого поля географического расположения

Необходимо иметь следующее:

  • Сервер с SharePoint
  • Microsoft Visual Studio 2012
  • Инструменты разработчика Office для Visual Studio 2012
  • Доступ к списку SharePoint с достаточными привилегиями для добавления столбца

Основные понятия, которые необходимо знать при настройке поля географического расположения

Таблица 1. Основные понятия расширения типа поля "Географическое расположение"

Название статьи Описание
Интеграция расположение и карты функциональные возможности в SharePoint
Узнайте, как интегрировать сведения о местоположении и карт в списки SharePoint и веб-расположение и мобильных приложений с помощью нового поля географического расположения и путем создания собственных типов полей на основе географического расположения.
Как: Настройка типа поля, с использованием обработки на стороне клиента
Узнайте больше о новой клиентской отрисовке, представленной в SharePoint.
Как программно добавить столбец "Географическое положение" в список SharePoint
Узнайте, как добавить столбец географического расположения в список программными средствами в SharePoint.

Этап 1: Настройка проекта Visual Studio

Настройка проекта настраиваемого поля

  1. Запустите Visual Studio 2012 на том же компьютере, где установлена SharePoint.

  2. В диалоговом окне Новый проект в разделе Установленные шаблоны выберите Visual C#, Office SharePoint для Решений SharePoint. Выберите тип проекта SharePoint . На рисунке 1 показано расположение шаблона проекта SharePoint в Visual Studio 2012. Сделать решения фермы, изолированное решение.

    Рис. 1. Шаблон проекта SharePoint в Visual Studio

    Шаблон Visual Studio проекта SharePoint

  3. Укажите имя для проекта. В этом примере мы используем CustomGeolocationField. Нажмите кнопку « ОК ».

  4. В окне Мастер настройки SharePoint введите URL-адрес для сайта SharePoint, где вы хотите развернуть новый тип настраиваемого поля.

  5. В Обозревателе решений откройте контекстное меню для имени проекта (в нашем примере это CustomGeolocationField ) и выберите команду ДобавитьНовый элемент.

  6. В диалоговом окне Добавление нового элемента в разделе шаблоны кода выберите пункт класс и укажите имя для класса ( CustomGeolocationField.cs в этом примере).

  7. В Обозревателе решений откройте контекстное меню для имени проекта и выберите команду Добавить, сопоставленная папка SharePoint.

  8. В диалоговом окне Добавление сопоставленной папки SharePoint используйте элемент управления "Дерево", чтобы сопоставить папку с TEMPLATE\LAYOUTS и нажмите кнопку ОК .

  9. В Обозревателе решений откройте контекстное меню для новой папки МАКЕТОВ (не имя проекта) и выберите команду ДобавитьНовый элемент.

  10. В диалоговом окне Добавление нового элемента выберите Visual C#, Web и выберите Файл Javascript в области Шаблоны.

  11. В поле имя укажите имя для файла (CustomGeolocationField в нашем примере) и нажмите кнопку Добавить.

  12. Повторите шаг 8, чтобы создать другую сопоставленную папку SharePoint и сопоставить ее с TEMPLATE\XML. Нажмите кнопку « ОК ».

  13. В Обозревателе решений откройте контекстное меню для новую папку XML (не имя проекта) и выберите команду ДобавитьНовый элемент.

  14. В диалоговом окне Добавление нового элемента выберите Visual C#, данных и выберите XML-файл в разделе Шаблоны.

  15. В поле Имя укажите имя файла (в этом примере usesfldtypes_CustomGeolocationControl.xml) и нажмите кнопку Добавить .

Шаг 2: Создание класса настраиваемого поля

Класс поля — это класс, экземпляры которого может представлять конкретные поля, которые основаны на настраиваемый тип поля. Этот класс должен наследовать от SPField или одного из классов в Windows SharePoint Services, производные от него. Чтобы обеспечить возможность расширения и настройки типа поля географического расположения, этот класс должен наследовать SPFieldGeolocation. Дополнительные сведения о создании типов полей см. в разделе Пошаговое руководство. Создание настраиваемого типа поля.

Примечание.

[!Примечание] В этом примере класс и решения с именем CustomGeolocationField; можно указать имя класса и проекта, который будет после создания проекта Visual Studio.

Для создания настраиваемого класса полей

  1. Откройте файл CustomGeolocationField.cs и добавьте директиву using следующим образом.

    using System;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;

  2. Убедитесь, что пространство имен имеет значение CustomGeolocationField.

  3. Убедитесь, что класс имеет имя CustomGeolocationField, и измените его объявление, указав, что он наследуется от SPFieldGeolocation. Добавьте следующие обязательные конструкторы для класса.

    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)
    {
    }

  4. Добавьте в класс следующее JSLink переопределение метода. CustomGeolocationControl.js представляет собой файл JavaScript, создаваемого на следующем шаге. Предоставляя собственный файл JavaScript, при переопределении отображения по умолчанию для службы Bing Maps. Если этот метод не переопределяется, отображения по умолчанию будет из службы Bing Maps. Свойство JSLink представлено в SharePoint. Дополнительные сведения о свойстве см. в JSLink разделе Практическое руководство. Настройка типа поля с помощью отрисовки на стороне клиента.

    /// <summary>
/// Override JSLink property.
/// </summary>

public override string JSLink
{
    get
    {
        return "CustomGeolocationControl.js";
    }
    set
    {
        base.JSLink = value;
    }
}

  5. Метод GetFieldValue() преобразует указанное значение в значение типа поля. Дополнительные сведения о методе см. в GetFieldValue() разделе GetFieldValue(String). Добавьте в класс следующее GetFieldValue() переопределение метода CustomGeolocationField .

    /// <summary>
/// get the field values
/// </summary>
/// <param name="value"></param>
/// <returns></returns>

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

  6. Добавьте в класс следующее переопределение метода CustomGeolocationFieldGetValidatedString:

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

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

Шаг 3: Создание визуализации для нового настраиваемого поля

Затем необходимо создать файл JavaScript, на JSLink который указывает метод класса field. Этот файл следует определить визуализации настраиваемого типа поля с помощью новой платформы обработки на стороне клиента. Для получения дополнительных сведений см Как: Настройка типа поля, с использованием обработки на стороне клиента.

В следующем примере показана логика регистрации для регистрации в клиентской платформе отрисовки, представленной в SharePoint.

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);
}

В процессе регистрации существует четыре переменные и их соответствующих методов. Платформа обработки на стороне клиента вызывает эти методы для отрисовки CustomGeolocationControl.

В следующем примере кода создается новый визуализации для нового настраиваемого поля для нового настраиваемого поля, который является производным от географического расположения.

Чтобы создать файл JavaScript

  1. Создайте текстовый файл и укажите имя, например x, присвойте ему расширение .js и сохраните его в папке TEMPLATE\LAYOUTS, сопоставленной с SharePoint. В этом примере используется имя CustomGeolocationControl.js.

  2. Скопируйте следующий код в JS-файла.

    (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');
})();

Шаг 4: Создание определения типа поля

Определение типа поля — это XML-файл с именем, например fldtypes.xml*, который развертывается в папке %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\15\TEMPLATE\XML. Файл определения поля содержит сведения, что необходимо правильно отображать поля в представлениях списков и отображения, редактирования и создания форм SharePoint Foundation. Важнее определение содержит сведения о сборке, содержащей тип скомпилированной поля. Дополнительные сведения о определения типов полей можно как: Создание определения типа настраиваемого поля.

Для создания определения типа поля

  1. В Visual Studio выполните построение проекта. Этот проект еще не закончен, но его необходимо построить именно сейчас, чтобы сгенерировать код GUID и маркер открытого ключа для этой сборки.

  2. Откройте файлfldtypes_CustomGeolocationControl.xml и замените его содержимое следующей разметкой.

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

    Этот файл определяет настраиваемый тип поля для SharePoint. Дополнительные сведения о назначении и значении его элементов см. в разделе Определение пользовательского типа поля,FldTypes.xml, элемент FieldTypes (Типы полей),Элемент FieldType (Типы полей) и Элемент Field (Типы полей). Обратите внимание на то, что элемент <Field Name="FieldTypeClass"> должны быть полностью на одну строку.

  3. Значение <Field Name="FieldTypeClass"> элемента — это полное имя пользовательского класса полей, за которым следует запятая, а затем токен Visual Studio ($SharePoint.Project.AssemblyFullName$). При компиляции проекта копию этого файла создается в котором маркер заменяется четырех полное имя сборки. При выборе Развернуть решение в меню ПостроениеVisual Studio в Visual Studio 2012 развертывается эту копию.

Шаг 5: Создание и тестирование настраиваемого типа поля

После развертывания настраиваемого поля в SharePoint server новый настраиваемый столбец можно добавить любой список SharePoint на сервере, где развернуто решение.

  1. Выберите клавишу F5 .

    Примечание.

    [!Примечание] При нажатии F5, Visual Studio выполняет построение решения, развертывает решение и открывает веб-сайт SharePoint, где развернуто решение.

  2. Создать настраиваемый список и добавления нового столбца географического расположения настраиваемого поля.

  3. Добавьте один из элементов в список и предоставляют Широта и долгота значения для столбца географического расположения Custom.

  4. На рисунке 2 показана страница столбца Создание нового типа настраиваемого поля.

    Рис. 2. Создание нового столбца настраиваемого типа поля

    Создание нового настраиваемого типа поля

См. также