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

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, veja Integrar a funcionalidade de localização e mapa no SharePoint.

O tipo de campo Geolocalização não está disponível no tipo de conteúdo predefinido de qualquer lista ou biblioteca de documentos no SharePoint. O tipo de campo Geolocalização está incluído no SharePoint, mas não está visível na página criar coluna para a lista; tem de adicionar o tipo de campo Geolocalização programaticamente. Para obter mais informações, veja How to: Add a Geolocation column to a list programmatically in SharePoint (Como: Adicionar uma coluna geolocalização a uma lista através de programação no SharePoint).

Depois de adicionar o tipo de campo Geolocalização ao SharePoint, pode utilizá-lo para compor mapas com Bing Mapas. O campo de localização geográfica interno pode renderizar somente com o Bing Mapas. 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 arquitetura de composiçã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 a executar 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 expandir o tipo de campo 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 composiçã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 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 onde o SharePoint está instalado.
Na caixa de diálogo Novo projeto, em modelos instalados, escolha Visual c#, Office SharePoint, as Soluções do SharePoint. Selecione o tipo de projeto do SharePoint . A Figura 1 mostra a localização do modelo do SharePoint Project 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 Gerenciador de Soluções, 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 Gerenciador de Soluções, 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 , utilize o controlo de árvore para mapear a pasta para TEMPLATE\LAYOUTS e selecione o botão OK .
No Gerenciador de Soluções, 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 o passo 8 para criar outra pasta mapeada do SharePoint e mapeie-a para TEMPLATE\XML. Escolha o botão OK.
No Gerenciador de Soluções, 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 ficheiro (este exemplo usesfldtypes_CustomGeolocationControl.xml) e selecione 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 a criação de tipos de campo, veja Instruções: Criar 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 ficheiro CustomGeolocationField.cs e adicione uma using diretiva da seguinte forma.
```
using System;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
```
Certifique-se de que o espaço de nomes é CustomGeolocationField.

Certifique-se de que a classe tem o nome CustomGeolocationFielde altere a respetiva declaração para especificar que 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 seguinte substituição 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 Mapas. Se você não substituir esse método, o processamento padrão será do Bing Mapas. A JSLink propriedade é introduzida no SharePoint. Para obter mais informações sobre a JSLink propriedade, veja How to: Customize a field type using client-side rendering (Como: Personalizar um tipo de campo com a composiçã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 num valor de tipo de campo. Para obter mais informações sobre o GetFieldValue() método, veja GetFieldValue(String). Adicione a seguinte substituição 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, deve criar o ficheiro JavaScript para o 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 seguinte mostra a lógica de registo para registar com a arquitetura de composiçã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 ficheiro de texto e especifique um nome, como x, atribua-lhe uma extensão .js e guarde-o na pasta TEMPLATE\LAYOUTS mapeada pelo SharePoint. Este exemplo utiliza 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 ficheiro XML com um nome como fldtypes.xml* que é implementado 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 ficheiro fldtypes_CustomGeolocationControl.xml e substitua o respetivo conteúdo pela seguinte marcação.

<?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 ficheiro define o tipo de campo personalizado para o SharePoint. Para obter detalhes sobre a finalidade e significado dos respetivos elementos, veja 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 completamente qualificado da sua classe de campo personalizado seguido de 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.

Selecione a tecla 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

Confira também

Last updated on 2026-05-14