Estender o tipo de campo Geolocalização usando a renderização do lado do cliente

Artigo
03/21/2023

Saiba como personalizar o tipo de campo de Localização geográfica do SharePoint, via programação, usando o processamento do lado do cliente.

O SharePoint inclui um novo tipo de campo chamado Geolocalização, que permite fazer anotações em listas com informações de localização. Nas colunas do tipo localização geográfica, você pode digitar informações de local como um par de coordenadas de latitude e longitude em graus decimais ou recuperar as coordenadas do local atual do usuário do navegador, se ele implementa a API de localização geográfica W3C. Para obter mais informações sobre o campo Geolocalização, consulte Integrando a localização e a funcionalidade de mapa no SharePoint.

O tipo de campo de geolocalização não está disponível no tipo de conteúdo padrão de qualquer lista ou biblioteca de documentos no SharePoint. O tipo de campo de geolocalização está incluído no SharePoint, mas não está visível na página criar coluna para a lista; você deve adicionar o tipo de campo de geolocalização de forma programática. Para obter mais informações, consulte Como adicionar uma coluna de geolocalização a uma lista programaticamente no SharePoint.

Depois de adicionar o tipo de campo de geolocalização ao SharePoint, você pode usá-lo para renderizar mapas usando Bing Mapas. O campo de localização geográfica interno pode renderizar somente com o Bing Maps. No entanto, você pode criar um campo personalizado usando o campo de localização geográfica, como um tipo de campo pai. Processamento personalizado pode ser fornecido por meio da propriedade JSLink no framework renderização do lado do cliente. A estrutura de renderização do lado do cliente é introduzida no SharePoint. Para obter mais informações, consulte Como: personalizar um tipo de campo usando o processamento do lado do cliente.

Observação

A propriedade JSLink não tem suporte nas listas Pesquisa ou Eventos. Um calendário do SharePoint é uma lista de eventos.

O procedimento desta seção, você cria um campo personalizado derivado do tipo de campo de localização geográfica usando o processamento do lado do cliente..

Pré-requisitos para a criação de um campo personalizado de localização geográfica

Você deve ter o seguinte:

Um servidor que executa o SharePoint
Microsoft Visual Studio 2012
Office Developer Tools para Visual Studio 2012
Acesso a uma lista do SharePoint, com privilégios suficientes para adicionar uma coluna

Principais conceitos saber para personalizar o campo de localização geográfica

Tabela 1. Conceitos principais para estender o tipo de campo de geolocalização

Título do artigo	Descrição
Integrar as funcionalidades de localização e mapa no SharePoint	Aprenda a integrar mapas em listas do SharePoint e web baseados em local e aplicativos móveis e informações de local por meio do novo campo de localização geográfica e criando seus próprios tipos de campo baseada na localização geográfica.
Como: personalizar um tipo de campo usando o processamento do lado do cliente	Saiba mais sobre a nova renderização do lado do cliente introduzida no SharePoint.
Como adicionar uma coluna de Geolocalização a uma lista de forma programática no SharePoint	Saiba como adicionar uma coluna de geolocalização a uma lista programaticamente no SharePoint.

Etapa 1: Configurar o projeto do Visual Studio

Para configurar o projeto de campo personalizado

Inicie o Visual Studio 2012 no mesmo computador em que o SharePoint está instalado.
Na caixa de diálogo Novo projeto, em modelos instalados, escolha Visual c#, Office SharePoint, as Soluções do SharePoint. Escolha o tipo de projeto do SharePoint . A Figura 1 mostra o local do modelo do Projeto do SharePoint no Visual Studio 2012. Aumentam a uma solução de farm, não é uma solução em área restrita.

Figura 1. Modelo de projeto do SharePoint no Visual Studio
Especifique um nome para o projeto. Estamos usando CustomGeolocationField neste exemplo. Escolha o botão OK.
No Assistente de personalização do SharePoint, insira a URL do site do SharePoint onde você deseja implantar o novo tipo de campo personalizado.
No Solution Explorer, abra o menu de atalho para o nome do projeto (no nosso exemplo, é CustomGeolocationField ) e escolha Adicionar, Novo Item.
Na caixa de diálogo Adicionar Novo Item, em modelos de código, escolha a classe e especifique o nome da classe ( CustomGeolocationField.cs neste exemplo).
No Solution Explorer, abra o menu de atalho para o nome do projeto e escolha Adicionar, SharePoint mapeado a pasta.
Na caixa de diálogo Adicionar Pasta Mapeada do SharePoint , use o controle de árvore para mapear a pasta para TEMPLATE\LAYOUTS e escolha o botão OK .
No Solution Explorer, abra o menu de atalho para a nova pasta LAYOUTS (não o nome do projeto) e escolha Adicionar, Novo Item.
Na caixa de diálogo Adicionar Novo Item, escolha Visual c#, Web e, em seguida, escolha Arquivo Javascript em modelos.
Na caixa nome, especifique o nome para o arquivo (CustomGeolocationField em nosso exemplo) e escolha Adicionar.
Repita a etapa 8 para criar outra pasta mapeada do SharePoint e mapeie-a para TEMPLATE\XML. Escolha o botão OK.
No Solution Explorer, abra o menu de atalho para a nova pasta XML (não o nome do projeto) e escolha Adicionar, Novo Item.
Na caixa de diálogo Adicionar Novo Item, escolha Visual c#, dados e, em seguida, escolha o Arquivo XML em modelos.
Na caixa Nome , especifique o nome do arquivo (este exemplo usesfldtypes_CustomGeolocationControl.xml) e escolha o botão Adicionar .

Etapa 2: Criar uma classe de campo personalizado

Uma classe de campo é uma classe cujas instâncias podem representar os campos particulares que se baseiam em seu tipo de campo personalizado. Esta classe deve herdar de SPField ou uma das classes no SharePoint Foundation que derivam dela. Para habilitar a estender ou personalizar o tipo de campo de localização geográfica, esta classe deve herdar de SPFieldGeolocation. Para obter mais informações sobre como criar tipos de campo, consulte Passo a passo: Criando um tipo de campo personalizado.

Observação

[!OBSERVAçãO] Neste exemplo, a classe e a solução são nomeados CustomGeolocationField; Você pode especificar o nome da classe e projeto que você deseja que você crie seu projeto Visual Studio.

Para criar uma classe de campo personalizado

Abra o arquivo CustomGeolocationField.cs e adicione uma using diretiva da seguinte maneira.
```
using System;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
```
Verifique se o namespace é CustomGeolocationField.

Certifique-se de que a classe foi nomeada CustomGeolocationFielde altere sua declaração para especificar que ela herda de SPFieldGeolocation. Adicione os seguintes construtores necessários para a classe.

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

Adicione a substituição a seguir do JSLink método à classe. CustomGeolocationControl.js é um arquivo de JavaScript que você criar na etapa a seguir. Fornecendo seu próprio arquivo de JavaScript, você está substituindo o processamento padrão do Bing Maps. Se você não substituir esse método, o processamento padrão será do Bing Maps. A JSLink propriedade é introduzida no SharePoint. Para obter mais informações sobre a JSLink propriedade, consulte Como personalizar um tipo de campo usando a renderização do lado do cliente.
```
/// <summary>
/// Override JSLink property.
/// </summary>

public override string JSLink
{
    get
    {
        return "CustomGeolocationControl.js";
    }
    set
    {
        base.JSLink = value;
    }
}
```
O GetFieldValue() método converte o valor especificado em um valor de tipo de campo. Para obter mais informações sobre o GetFieldValue() método, consulte GetFieldValue(String). Adicione a substituição a seguir do GetFieldValue() método à CustomGeolocationField classe.
```
/// <summary>
/// get the field values
/// </summary>
/// <param name="value"></param>
/// <returns></returns>

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

Adicione a seguinte substituição do método GetValidatedString à CustomGeolocationField classe:

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

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

Etapa 3: Criar o processamento para o novo campo personalizado

Em seguida, você deve criar o arquivo JavaScript ao qual o JSLink método da classe de campo aponta. Este arquivo deve definir a renderização do tipo de campo personalizado usando a nova estrutura de renderização do lado do cliente. Para obter mais informações, consulte Como: personalizar um tipo de campo usando o processamento do lado do cliente.

O exemplo a seguir mostra a lógica de registro para registro com a estrutura de renderização do lado do cliente introduzida no 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);
}

No processo de inscrição, há quatro variáveis e seus respectivos métodos. A estrutura de renderização do lado do cliente chama esses métodos para renderização CustomGeolocationControl.

O exemplo de código a seguir cria um nova renderização para um novo campo personalizado para o novo campo personalizado que é derivado da localização geográfica.

Para criar o arquivo JavaScript

Crie um arquivo de texto e especifique um nome, como x, dê-lhe uma extensão de .js e salve-o na pasta TEMPLATE\LAYOUTS mapeada pelo SharePoint. Este exemplo usa o nome CustomGeolocationControl.js.

Copie o código a seguir no arquivo. 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');
})();

Etapa 4: Criar uma definição de tipo de campo

Uma definição de tipo de campo é um arquivo XML com um nome como fldtypes.xml* que é implantado em %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\15\TEMPLATE\XML. Um arquivo de definição de campo contém as informações que o SharePoint Foundation precisa corretamente renderizar o campo em exibições de lista e os formulários de exibir, editar e novos. Mais importante, a definição contém informações sobre o assembly que contém o tipo de campo compilada. Para obter mais informações sobre as definições de tipo de campo, consulte como: criar uma definição de tipo de campo personalizado.

Para criar a definição de tipo de campo

Em Visual Studio, compile o projeto. O projeto não estiver concluído, mas é preciso criar neste momento para gerar um GUID e um Token de chave pública para o assembly.

Abra o arquivo fldtypes_CustomGeolocationControl.xml e substitua seu conteúdo pela marcação a seguir.

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

Este arquivo define o tipo de campo personalizado do SharePoint. Para obter detalhes sobre a finalidade e o significado de seus elementos, consulte Definição de Tipo de Campo Personalizado, FldTypes.xml , Elemento FieldTypes (Tipos de Campo),Elemento FieldType (Tipos de Campo)e Elemento de Campo (Tipos de Campo). Observe que o elemento <Field Name="FieldTypeClass"> deve ser inteiramente em uma linha.

O valor do <Field Name="FieldTypeClass"> elemento é o nome totalmente qualificado da classe de campo personalizada seguida por uma vírgula e, em seguida, um token do Visual Studio ( $SharePoint.Project.AssemblyFullName$ ). Quando você compile o projeto, uma cópia desse arquivo é criada no qual o token é substituído pelo nome completo de quatro partes do assembly. Essa cópia é implantada quando você escolhe Implantar solução no menu de Build de Visual Studio em Visual Studio 2012.

Etapa 5: Criar e testar o tipo de campo personalizado

Depois de implantar um campo personalizado ao servidor do SharePoint, uma nova coluna personalizada está disponível para ser adicionado a qualquer lista do SharePoint no servidor onde a solução será implantada.

Escolha a chave F5 .

Observação

[!OBSERVAçãO] Quando você escolhe F5, Visual Studio aproveita a solução, implanta a solução e abre o site do SharePoint onde a solução será implantada.
Crie uma lista personalizada e adicione uma nova coluna de campo de localização geográfica personalizado.
Adicionar um item à lista e fornecem valores de Longitude e Latitude para a coluna de localização geográfica do sinalizador.
Figura 2 mostra a página criar coluna com o novo tipo de campo personalizado.

Figura 2. Creating a new custom field type column

Partilhar via