Serviços de outsourcing de TI e por que escolhê-los
O outsourcing de TI refere-se à prática de confiar determinadas funções ou projetos de TI a um fornecedor especializado. Em…
Nesta postagem iremos demonstrar como exibir itens de uma lista do SharePoint diretamente em um mapa usando JSLink e a API JavaScript do Google Maps.
Primeiramente iremos criar uma lista chamada “Empresas”. Em seguida iremos incluir na coluna “Título” o nome da empresa, então em uma nova coluna que chamaremos “Localização”, será incluída as informações do endereço da empresa.
Então usaremos uma Web Part do editor de conteúdo, colocada acima da exibição da lista, como contêiner para o mapa. Assim o JavaScript será usado para chamar a API do Google para gerar o mapa, obter a geolocalização da localização de cada item da lista e adicionar os marcadores ao mapa. Por fim o JSLink será usado para associar o JavaScript com a exibição da lista que é executada do lado do cliente durante o processo de renderização da exibição de lista (renderização do lado do cliente).
Primordialmente é necessário uma chave da API do Google Maps.
SharePoint 2013, Office 365 * * JSLink não é compatível com a experiência de site moderno do Office 365. A Microsoft recomenda SPFx ao desenvolver soluções personalizadas para sites modernos.
Primeiramente vá para a seção Conteúdo do site , clique em Novo e escolha Lista.
Em seguida nomeie a lista como “Empresas” e clique no botão Criar .
Então adicione uma nova coluna do tipo linha única de texto .
Logo após nomeie a coluna como “Local” e clique no botão Criar .
Então preencha a lista “Empresas” com exemplos de nomes e localizações de empresas.
Em seguida, usando seu editor favorito, crie e salve um arquivo chamado JSLinkMapView.js e adicione o código a seguir.
Nota: certifique-se de inserir sua própria chave de API do Google!
document.write (‘<script type = ”text / javascript” src = ”https://maps.googleapis.com/maps/api/js?key= << sua chave de API do Google aqui >> “> </script> ‘);
função RegisterCustomOverrides () {
var obj = {};
obj.Templates = {};
obj.Templates.OnPostRender = LoadMap;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides (obj);
}
função LoadMap (ctx) {
var mapOptions = {
center: new google.maps.LatLng (42, -88),
zoom: 6
}; var map = new google.maps.Map (document.getElementById (“map-canvas”), mapOptions); var geo = new google.maps.Geocoder (); var bounds = new google.maps.LatLngBounds (); var rows = ctx.ListData.Row; var idx = 0;
for (var i = 0; i <rows.length; i ++) {
geo.geocode ({‘address’: rows [i] [“Location”]}, function (results, status) {
new google.maps.Marker ( {map: map, position: results [0] .geometry.location, title: rows [idx ++]. Title});
bounds.extend (results [0] .geometry.location);
map.fitBounds (bounds);
}) ; } }
RegisterModuleInit (“/ SiteAssets / JSLinkMapView.js”, RegisterCustomOverrides);
RegisterCustomOverrides ();
Então carregue o arquivo JSLinkMapView.js para a biblioteca de documentos de Ativos do Site do seu site.
Então retorne à lista “Empresas” e clique em Retornar ao SharePoint clássico.
Nota: No momento em que este artigo foi escrito, as novas “páginas modernas” da Microsoft não suportavam muitos dos recursos de personalização do SharePoint, incluindo JSLink.
Em seguida no menu Ações do site, escolha Editar página .
Com a Web Part do Editor de Conteúdo agora adicionada acima dos itens da lista, clique para editar a Web Part e ativar as opções da faixa de opções e, em seguida, escolha Editar Fonte.
Então cole o seguinte na janela Fonte da Web Part do Editor de Conteúdo e clique no botão OK . Assim você acabou de criar o contêiner para o mapa do Google.
<div id = ‘map-canvas’ style = ‘border: 1px preto sólido; altura: 200px; ‘/>
Assim clique em Editar Web Part no menu de contexto da Web Part de exibição de lista.
Em seguida expanda Diversos, cole o seguinte no campo JSLink e clique em OK:
~ site / SiteAssets / JSLinkMapView.js
Por fim clique no botão Stop Editing na faixa de opções.
Enfim após vermos neste post como exibir itens de uma lista do SharePoint em um mapa, caso ainda possua dúvidas entre em contato com nossa empresa. Temos uma equipe de consultores que pode melhorar ainda mais a sua experiência com essa fantástica ferramenta.
O outsourcing de TI refere-se à prática de confiar determinadas funções ou projetos de TI a um fornecedor especializado. Em…
Compartilhar aplicativos Canvas no Power Apps é uma parte essencial da distribuição de aplicativos dentro de sua organização. Ao compartilhar…
Desde o anúncio dos Copilotos impulsionados por IA, houve um aumento de interesse na integração das capacidades de IA em…