SharePoint
Usar o JSLink com o SharePoint 2013
Trabalhar com o SharePoint UI sempre foi um desafio para os desenvolvedores. No entanto, um novo recurso do SharePoint 2013 chamado JSLink descarrega a carga de usar XSLT e fornece uma maneira muito mais fácil e mais ágil para exibir os campos personalizados no cliente. JSLink é uma propriedade que controla o processamento de campos, itens e até mesmo Web Parts através de um arquivo JavaScript.
Este artigo irá explorar o uso de JSLink com a ajuda de dois cenários de demo. O primeiro cenário irá demonstrar como você pode usar as mensagens codificadas por cor para indicar a conclusão da tarefa, por exemplo, como mostrado em Figura 1.
.png)
Figura 1 usando uma coluna personalizada para uma lista de tarefas para mostrar Status
O segundo cenário é mais complexo. Irá demonstrar como implementar uma galeria de imagens que fornece um texto explicativo para cada imagem Visualizar metadados e permitir o download em diferentes resoluções, como mostrado em Figura 2.
.png)
Figura 2 múltiplas resoluções de uma imagem disponível para Download
Eu também vou mergulhar Personalizando os campos de formulário novo e editar. Antes de começar, porém, eu vou dar uma olhada em Noções básicas de processamento do lado do cliente em 2013 do SharePoint e como JSLink adiciona valor a ele.
Processamento do lado do cliente
Processamento do lado do cliente refere-se a exibição de dados em uma página usando tecnologias que operam no cliente, como JavaScript, HTML e CSS. Porque a tecnologia é executado no navegador do cliente, é mais ágil e eficiente, reduzindo assim a carga no servidor Web. Versões anteriores do SharePoint (2010, 2007) usado XSLT para elementos de estilo, que é geralmente mais complexo para trabalhar com e mais lento no desempenho em comparação com JavaScript. SharePoint 2013 ainda oferece suporte a XSLT, mas tem duas técnicas adicionais para personalizar os resultados no lado do cliente — exibir modelos que definem a forma de uma Web Part do SharePoint 2013 pesquisa processa os resultados (ver bit.ly/1i5fM6k para obter mais informações) e, o assunto do foco do presente artigo, JSLink.
JSLink é uma propriedade que pode ser usada com campos, Web Parts, formulários de lista e tipos de conteúdo. Com essa propriedade, você pode adicionar arquivos JavaScript, abrindo amplas possibilidades de personalização. Cada arquivo de JavaScript que você adicionar é antecedido com um token de SharePoint e separado pelo símbolo de pipe (|), como este: biblioteca de ~site/Style /mycustom.js|~site/style library/mycustom2.js. Se os arquivos de JavaScript não contêm qualquer código de processamento relevantes, renderização padrão do elemento é aplicada.
O SharePoint oferece vários tokens (estáticos e dinâmicos) que são úteis para a construção de um contexto específico URL. Aqui estão algumas importantes fichas do SharePoint para construção de URL dinâmica:
- ~ site — refere-se a URL do site da Web atual.
- ~ sitecollection — refere-se a URL do conjunto de sites pai do atual site.
- ~ layouts — refere-se a layouts/15 em relação ao aplicativo da Web.
- ~ sitecollectionlayouts — refere-se à pasta layouts no conjunto de sites atual (como /sites/mysite/_layouts/15).
- ~ sitelayouts — refere-se à pasta layouts do site atual (como layouts/15).
O SharePoint tem mais fichas para a construção de URL. Para saber mais sobre cadeias de caracteres de URL e tokens, consulte o centro de Dev em bit.ly/1lpYuAP.
JSLink vs. XSL/XSLT
Processamento do lado do cliente usando o JSLink tem um número de vantagens sobre XSL/XSLT. Em primeiro lugar, ele usa JavaScript, com o qual a maioria dos desenvolvedores Web já são confortáveis. XSLT é um pouco mais complexo para desenvolver e depurar, assim JSLink pode reduzir o tempo de desenvolvimento sem perda de precisão.
Um modo de exibição no cliente usando JavaScript, HTML e CSS de renderização evita cargas desnecessárias no servidor, melhorando o desempenho geral e reduzindo os tempos de resposta de página. Processamento do lado do cliente faz com que a interface do usuário altamente responsivo.
Além disso, você pode personalizar tudo ou parte de uma exibição usando JSLink. Por exemplo, se você quer personalizar apenas um campo específico, você pode adaptar a lógica de renderização para esse campo somente; o resto do modo de exibição será processado usando a lógica padrão. Com JSLink, você pode usar qualquer JavaScript válido, incluindo plug-ins externos tais como jQuery, em combinação com HTML e CSS.
Claro, cada tecnologia tem algumas desvantagens, e o mesmo acontece com JSLink. Por exemplo, se um usuário tiver JavaScript bloqueado no seu navegador, JSLink não vai funcionar. Processamento do lado do servidor com XSLT ainda mostrará a mesma experiência, mas o desempenho pode ser afetado.
Desempenho também pode sofrer se o navegador de um usuário ou sistema é velho ou de fraca potência, porque pode demorar mais tempo para executar o script.
Finalmente, crawlers são improváveis entender o conteúdo dinâmico gerado pelo JavaScript/AJAX; Eles exigem dados estáticos processados com HTML. Então, se você tem um site voltado para o público, JSLink não pode ser sua melhor escolha.
Definindo a referência JSLink
A referência de arquivo JSLink JavaScript pode ser definida de várias maneiras, usando o modelo de objeto de servidor, Windows PowerShell, Element. XML através de recursos, a janela Propriedades de Web Part e o modelo de objeto cliente. A seguir é um exemplo de código para cada abordagem.
O modelo de objeto de servidor: Para definir a propriedade JSLink, dizer, formulários de lista, você acessar o objeto SPForm usando a coleção de formulários da lista e em seguida, defina a propriedade JSLink do objeto SPForm:
SPWeb web = SPContext.Current.Web;
SPList list = web.Lists.TryGetList("MyTasks");
if (null != list)
{
SPForm newForm = list.Forms[PAGETYPE.PAGE_NEWFORM];
if (null != newForm)
{
newForm.JSLink = "~/mycustom.js";
}
}
Windows PowerShell: Para definir a propriedade JSLink de, por exemplo, um campo personalizado de uma lista, você acessar o objeto de campo usando a coleção de campos da lista e em seguida, defina a propriedade JSLink para o objeto field:
$web = Get-SPWeb
$field = $web.Fields["MyCustomField"]
$field.JSLink = "~/layouts/mycustom.js"
$field.Update()
$web.Dispose()
O arquivo Element. xml: Para definir a propriedade JSLink de um campo personalizado de uma lista, você pode adicionar um nó de campo no arquivo Element. xml:
<Field ID="{eb3eed37-961b-41bd-b11c-865c16e47071}"
Name="MyCustomField" DisplayName="Custom Columns"
Type="Text" Required="FALSE" Group="JSLink Demo"
JSLink="~site/style library/JSLinkDemo/jquery-1.10.2.min.js|
~site/style library/JSLinkDemo/customview.js">
</Field>
Observe que usando o símbolo de pipe, você pode adicionar vários arquivos JavaScript.
Caixa de diálogo Propriedades de Web Parts : Para definir a propriedade JSLink de um Web Part, você pode modificar suas propriedades. Vá para o Web Part | Editar propriedades | Diversos e defina a propriedade JSLink.
O modelo de objeto do lado do cliente (CSOM): Você pode definir o JSLink de um campo usando o CSOM. Note que você não pode atualizar a propriedade de coluna de site via JavaScript diretamente, você precisa atualizá-lo usando associada a lista campos. Se você tentar atualizar no nível de coluna do site, você obterá este erro:
Esta funcionalidade não está disponível para não associados com uma lista de campos...
Este código mostra como atualizar corretamente a propriedade JSLink para um campo em uma lista através do JavaScript CSOM:
fieldCollection = taskList.get_fields();
this.oneField = fieldCollection.getByInternalNameOrTitle("MyCustomField");
this.oneField.set_description("MyNewFieldDescription");
this.oneField.update();
Para obter mais informações sobre este exemplo, consulte a documentação do MSDN em bit.ly/1i9rlZR.
Trabalhando com JSLink
Para trabalhar com JSLink, no arquivo JavaScript personalizado, que você precisará substituir esse método:
SPClientTemplates.TemplateManager.RegisterTemplateOverrides()
Este método requer um objeto de modelo a serem passados para ele. Para definir o objeto de modelo, você deve especificar uma propriedade e um método de renderização para cada modo de exibição (como exibir, adicionar e editar).
O objeto de modelo para registrar o método tem propriedades como cabeçalho, corpo, rodapé, OnPreRender, OnPostRender, grupo, Item e campos, que podem ser aproveitados para substituir a lógica de renderização padrão de uma vista. Por exemplo, para modificar os campos personalizados, vista, exibir, editar e novo, você fornecer as seguintes informações para campos Propriedade o modelo objeto:
siteCtx.Templates.Fields = {
// MyCustomField is the Name of our field
'MyCustomField': {
'View': customView,
'DisplayForm': customDisplayForm,
'EditForm': customNew,
'NewForm': customEdit
}
};
Os métodos referenciados neste código, tais como customView e customDisplayForm, contém a lógica de renderização real para este campo.
Finalmente, você chama o método RegisterTemplateOverrides de TemplateManager para aplicar o modo de exibição personalizado, da seguinte forma:
// Register the template to render custom field
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(siteCtx);
Este método vai cuidar do resto do processamento do modo de exibição com base em sua lógica personalizada.
Tenha em mente que, quando você usa várias instâncias de um exibição de lista Web parte na mesma página e aplica JSLink a uma das instâncias, o layout de todas as outra lista Exibir alterações Web Parts também, porque internamente o SharePoint usa a lógica comum de renderização. Para evitar esse problema, você precisa certificar-se de que o valor de BaseViewID não vai entrar em conflito com ViewIDs existente, então, altere a propriedade BaseViewID do contexto antes de substituir, por exemplo, ctx.BaseViewID = 1000.
Agora vou levá-lo através de cenários de dois demonstração.
Cenário 1: Exibir o Status de conclusão da tarefa com código de cores
Este cenário mostra o status de conclusão da tarefa usando a codificação de cores para obter uma lista de tarefas — vermelho para uma tarefa incompleta e verde para uma tarefa concluída.
No exemplo, eu vou personalizar o modelo de vista para o campo personalizado, como mostrado aqui:
// View Page custom rendering
function customView(ctx) {
if (ctx != null && ctx.CurrentItem != null) {
var percentCompete = parseInt(ctx.CurrentItem.PercentComplete);
if (percentCompete != 100) {
return "<span style='color:red'>Incomplete Task</span>";
}
else {
return "<span style='color:green'>Task Completed</span>";
}
}
}
O método customView recebe o atual contexto de render como um parâmetro de entrada do SharePoint internamente. Neste contexto de entrada tem muitas outras propriedades relacionadas à lista, vista, Item atual e assim por diante.
Propriedade de currentItem do contexto dá acesso ao item de linha atual de uma lista. Através desta propriedade você pode acessar todos os campos disponíveis na lista. Observe que se o campo não está disponível em um modo de exibição selecionado, você obterá um erro ao acessar o valor do campo.
Para começar, abra o Visual Studio 2013 e escolher um projeto vazio 2013 de SharePoint.
Etapa 1: No menu Add New Item, adicione uma coluna de Site para o projeto vazio. Para criar uma coluna de Site, adicionar as informações do campo em um arquivo de Element. xml, como mostrado em Figura 3. Como você pode ver, a propriedade de JSLink faz referência a dois arquivos JavaScript: a biblioteca JQuery e um arquivo de JavaScript personalizado modo de exibição da biblioteca de estilo. Note-se que a hierarquia de arquivos deve ser mantida da esquerda para a direita (arquivos dependentes devem ser referenciados primeiro).
Figura 3 referenciando os arquivos JavaScript
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="https://schemas.microsoft.com/sharepoint/">
<Field
ID="{eb3eed37-961b-41bd-b11c-865c16e47071}"
Name="MyCustomField"
DisplayName="Custom Columns"
Type="Text"
Required="FALSE"
Group="JSLink Demo"
JSLink="~site/style library/JSLinkDemo/jquery-1.10.2.min.js|
~site/style library/JSLinkDemo/customview.js">
</Field>
</Elements>
Etapa 2: Adicione outro Item novo, um módulo de Scripts para armazenar JavaScript personalizado e outros arquivos de recursos.
Etapa 3: Adicione a biblioteca JQuery para o módulo de Scripts. Crie um novo arquivo JavaScript chamado CustomView.js.
Etapa 4: Renomeie o padrão, o recurso de recurso de 1 para JSLinkDemo, ou criar um novo recurso que inclui o módulo Site colunas e Scripts. Defina o escopo para o Site, como é a coluna de Site que irá implantar.
Etapa 5: Implante a solução. Depois que você implantar a solução, você verá a coluna adicionada às colunas do Site, vá para configurações do Site | Colunas de site.
Etapa 6: Crie uma lista de tarefas chamada MyTasks, adicionando um app a partir da página de conteúdo do Site.
Etapa 7: Adicione uma coluna personalizada à lista de MyTasks do Menu de configurações de lista na faixa de opções.
Etapa 8: Adicione uma coluna personalizada como criado usando as etapas 1 a 5 clicando em adicionar colunas de site existente na página de configurações de lista. O grupo usando JSLink Demo do filtro, escolha personalizado coluna e adicioná-lo à lista.
Isso conclui a implementação do primeiro cenário, que exibe o status de conclusão da tarefa. Como você pode ver na Figura 1, o status personalizado mostra como tarefa concluída em verde ou incompleta a tarefa em vermelho.
Cenário 2: Criar uma galeria de imagens personalizadas com textos explicativos
Neste cenário, eu vou personalizar o processamento de galeria de imagem interna para exibir em um formato tabular personalizado, com textos explicativos para baixar várias imagens de resolução.
Para fazer isso, personalizar as propriedades de Item de cabeçalho e rodapé do campo de modelo. O código a seguir define o passo inicial:
(function () {
var overrideContext = {};
overrideContext.ListTemplateType = 109;
overrideContext.Templates = {};
overrideContext.Templates.Item = customItem;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
})();
function customItem() {
return "ItemRow";
}
Eu configurei o ListTemplateType para 109, que SharePoint predefine como PictureLibrary. (Você encontrará toda a lista predefinida tipos de modelo em 2013 do SharePoint no bit.ly/1qE8UiY.) Este código irá processar linhas com texto retornado do método customItem.
Agora, eu vou substituir o texto estático com as propriedades reais de imagem (título, URL e outros campos) para iniciar a renderização da imagem. Para substituir os padrão novas imagens link e cabeçalho de colunas, eu vou personalizar as propriedades de cabeçalho e rodapé para definir algum texto HTML:
overrideContext.Templates.Header = "<b>Custom Image Gallery View</b>";
overrideContext.Templates.Footer = "<b>Custom Footer</b>";
function customItem() {
return "<br /><img src='" + ctx.CurrentItem.FileRef +
"' width='190' height='190' />;
}
Eu quero mostrar as imagens em formato tabular. Para fazer isso, eu tenho que adicionar alguns CSS e HTML para o layout no método customItem. Primeiro, eu adicionar um contêiner div vazia para o modelo de cabeçalho, que será utilizado mais tarde para armazenar os dados reais do processamento do Item e rodapé. Dentro do processamento do Item, criar HTML dinâmico e armazená-lo em uma variável global. No modelo de processamento de rodapé, eu atribuir os dados dinâmicos ao contêiner div. Figura 4 mostra o código completo para processar uma galeria de imagem de formato tabular.
Figura 4-exibindo imagens em formato Tabular
function customItem(ctx) {
// Grid contains 4
if (ctx.CurrentItemIdx % 4 == 0) {
// Start new row
tableData+= "<div style='clear:both'></div>"
}
tableData += "<div style='margin:5px;border:1px solid #666;float:left;"+
"width:100px;height:100px' onmouseover=\""+
"ShowCallout(this,'" + ctx.CurrentItem.Title + "','" +
ctx.CurrentItem.FileDirRef + "','" + ctx.CurrentItem.FileLeafRef
+ "');\"><img src='" + ctx.CurrentItem.FileRef +
"' width='100' height='100' /></div>";
return "";
}
// Custom Footer Method
function customFooter(ctx) {
// Append Dynamic-generated data to container div
$("#customImageGalleryContainer").html(tableData);
return "";
}
Agora eu quero exibir um texto explicativo sobre o rato por cima de cada imagem e mostrar metadados adicionais tais como título, breve informação e assim por diante, juntamente com as resoluções de imagem diferente para download. 2013 SharePoint fornece um quadro de texto explicativo para mostrar a informação contextual através de um arquivo de JavaScript callout.js, usando o objeto global CalloutManager. Eu vou aproveitar esse quadro para mostrar o padrão textos explicativos. Em primeiro lugar, criar um método personalizado chamado ShowCallout para determinar se há qualquer existentes textos explicativos abertos; Se houver, vou fechá-los usando o método padrão de closeAll desde o CalloutManager:
function ShowCallout(sender, itemId, title, brief, directory, filename) {
CalloutManager.closeAll();
}
Antes de avançar com a implementação, você precisa entender como conseguir imagens de diferentes resoluções. Em 2013 do SharePoint, por padrão uma imagem é criada em dois tamanhos diferentes quando é carregado para uma biblioteca de imagens. Por exemplo, se você enviar sample.png para o caminho de biblioteca/imageLibraryName /, SharePoint cria automaticamente tanto uma miniatura e uma imagem da Web-tamanho: /imageLibraryName/_t/Sample_png.jpg e w/Sample_png.jpg. Essas URLs, t representa a miniatura e w representa a Web e a extensão de arquivo fica anexada ao nome do arquivo com um separador de sublinhado (_) prefixo.
A função ShowCallout usa essas URLs para a imagem original, assim como para imagens de diferentes resoluções e armazena-os em variáveis diferentes, conforme mostrado aqui (nome do arquivo e diretório são parâmetros de ShowCallout):
var fname = filename.replace(".", "_");
var thumbnail = directory + "/_t/" + fname + ".jpg";
var medium = directory + "/_w/" + fname + ".jpg";
var full = directory + "/" + filename;
Para este cenário, eu uso o método de createNewIfNecessary de CalloutManager, que cria o texto explicativo somente se não houver nenhum texto explicativo no ponto de lançamento de alvo. Se há um texto explicativo, o método retorna a referência de objeto existente. (Para ler mais sobre CalloutManager, visite bit.ly/1kXH7uU.) Figura 5 mostra o código completo, e Figura 6 mostra o resultante de saída.
Figura 5 a função de ShowCallout atualizada
function ShowCallout(sender, itemId, title, brief, directory, filename) {
// Close fists all callouts if opened
CalloutManager.closeAll();
var fname = filename.replace(".", "_");
var thumbnail = directory + "/_t/" + fname + ".jpg";
var medium = directory + "/_w/" + fname + ".jpg";
var full = directory + "/" + filename;
var calloutContent = "<img src='" + medium + "' width='50%'
height='50%' /><br/>" +
brief + " <a href='" + directory + "/Forms/DispForm.aspx?ID=" +
itemId + "'>View Image</a><br />" +
"<a href='" + thumbnail + "' target='_blank'>
Thumbnail</a> | " +
"<a href='" + medium + "' target='_blank'>
Web Size</a> | " +
"<a href='" + full + "' target='_blank'>Original Size</a>";
var calloutRef = CalloutManager.createNewIfNecessary({
ID: 'call_' + itemId, launchPoint: sender,
beakOrientation: 'leftRight', title: title,
content: calloutContent,
contentWidth: 610
});
calloutRef.open();
}
.png)
Figura 6 Custom, Galeria de imagens com texto explicativo mostrando metadados
Para aplicar o processamento personalizado, criar uma página do site e adicionar a biblioteca de imagens da Web Part de exibição de lista. Vá para a caixa de diálogo Propriedades de WebPart editar e defina a propriedade de JSLink para ~/site/Style Library/JSLinkDemo/jquery-1.10.2.min.js|~/site/Style biblioteca/JSLinkDemo/CustomImageGallery.js. Clique em aplicar e salvar a página. Depois de atualizar a página, você verá uma galeria como mostrado no Figura 6.
Personalizar um novo/editar lista formulário usando JSLink
Você pode personalizar os campos de formulário novo e editar usando uma abordagem semelhante, embora com algumas variações. Aqui você precisa considerar tais coisas como validação de entrada, armazenamento de dados de campo de entrada para o item da lista, exibindo dados armazenados em um item de lista em um campo de entrada e assim por diante.
Em seguida, eu vou dar uma olhada os detalhes de implementação de um cenário complexo, multi coluna campo personalizado, como mostrado na Figura 7.
.png)
Figura 7 campos personalizados de várias colunas de uma lista usando a JSLink
Etapa 1: Usando o arquivo Element. xml, criar uma nota (um campo personalizado para o texto em colunas de Site com o conjunto de propriedade NumLines para, digamos, 1.000 (ou o que quer que se adapte às suas necessidades). Este campo personalizado substitui o processamento do formulário novo e editar.
siteCtx.Templates.Fields = {
"MyComplexField": {
'EditForm': customComplexNewOrEdit,
'NewForm': customComplexNewOrEdit
}
};
Eu uso o mesmo método de customComplexNewOrEdit para ambos ver novo e editar.
Etapa 2: Defina o contexto do formulário, que é necessário para configurar validadores para ler um valor de modo de exibição personalizado e salvá-lo de volta para uma lista. Para definir o contexto de forma que você usar o método SPClientTemplates.Utility.GetFormContextForCurrentField. Esse método aceita processar contexto como parâmetro, que é fornecido pelo SharePoint internamente. Aqui está uma amostra de código mostrando o novo ou editar o método render personalizado:
function customComplexNewOrEdit(ctx) {
if (ctx == null || ctx.CurrentFieldValue == null)
return '';
var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
if (formCtx == null || formCtx.fieldSchema == null)
return '';
}
Etapa 3: Depois de receber o contexto do formulário, você precisa se registrar manipuladores de retorno de chamada com a forma atual para habilitar a validação, obter o valor de um campo e salvar o valor no campo apropriado no modo de exibição personalizado gerado a partir de JSLink. Cada vez a cliques do usuário a salvar botão no formulário, lista SharePoint internamente chama um manipulador de retorno de chamada anexado aos campos usando formCtx.registerGetValueCallback (filedName, callback). Esse manipulador de retorno de chamada lê o valor do campo antes de salvá-lo para o item da lista:
formCtx.registerGetValueCallback(formCtx.fieldName, function () {
// Read value from this callback and assign to the field before save
return "";
});
Este é um manipulador de retorno de chamada vazio. Você tem que personalizar o código para ler os valores dos controles selecionados no formulário e retornar a representação de seqüência de valores.
Etapa 4: Para adicionar validadores, você precisa primeiro criar um contêiner de validador na qual deseja registrar validadores para vários campos. Faço isso usando o objeto SPClientForms.ClientValidation.ValidatorSet. Eu pode usar o método RegisterValidator do recipiente do validador para registrar vários validadores.
Você precisa registrar um manipulador de retorno de chamada de erro, bem como, para mostrar os erros. Para fazer isso, vou usar o método registerValidationErrorCallback do contexto do formulário. Este método requer dois parâmetros, o ID do elemento de recipiente do HTML (div neste exemplo) e errorResult, que é retornado do SharePoint internamente, com base na falha de validação. Mensagens de erro serão anexada ao elemento recipiente fornecido para este método. No meu exemplo eu preciso adicionar um validador de campo obrigatório, e o código completo para validação é mostrado no Figura 8.
Figura 8 código de validação
var validatorContainer = new SPClientForms.ClientValidation.ValidatorSet();
if (formCtx.fieldSchema.Required) {
validatorContainer.RegisterValidator(
new SPClientForms.ClientValidation.RequiredValidator());
}
if (validatorContainer._registeredValidators.length > 0) {
formCtx.registerClientValidator(
formCtx.fieldName, validatorContainer);
}
formCtx.registerValidationErrorCallback(
formCtx.fieldName, function (errorResult) {
SPFormControl_AppendValidationErrorMessage(
errorContainer, errorResult);
});
Etapa 5: Você precisa adicionar controles HTML personalizados para representar o campo no novo ou Editar página. Eu vou ter uma caixa de texto, uma lista suspensa com valores dinâmicos de outra lista e uma lista suspensa com valores estáticos. Vou criar uma tabela, adicionar esses controles à tabela e retornar o HTML como saída de método personalizado adicionar/editar.
Para carregar os dados dinamicamente, eu uso o REST API para ler os dados de outra lista e usá-lo para preencher o título nesta lista. Para saber mais sobre a API REST do SharePoint, consulte bit.ly/1cVNaqA.
Figura 9 mostra o código para processar entradas controles dinamicamente.
Figura 9 processamento entrada controla dinamicamente
// Render input fields
var inputFields = "<table>";
...
inputFields += "</table>";
// Get List data from REST API
$.ajax({
...
success: function (data) {
// Add options to the dynamic dropdown list
},
error: function (data) {
// Error handler
}
});
return inputFields;
Etapa 6: Para salvar um valor de campo em uma lista, coloquei todos valores dos campos em uma única cadeia de caracteres usando o separador de seqüência de caracteres e criar um formato personalizado como (fieldname:value)(fieldname:value), um tipo de par chave-valor. Eu vou fazer a construção de seqüência de caracteres em registerGetValueCallback.
Etapa 7: Para exibir um valor existente sob a forma de editar, eu analisar a seqüência de caracteres armazenada como um par chave-valor, salvando e atribuir os valores para controles de entrada respectivas. Isso é feito usando o mesmo método de renderização personalizada como ao construir HTML personalizado.
Conclusão
Você pode depurar JSLink usando ferramentas de desenvolvedor baseado em navegador, como as ferramentas de desenvolvedor do Internet Explorer, Firebug e afins. Se você colocar um ponto de interrupção em JavaScript, depois que ele processa no cliente, você pode depurar o JavaScript como código c# .NET. Quando você acessar o contexto do método de exibição, você pode obter uma referência para o Item atual, através do qual você pode ver os valores para cada campo do item atual. Você pode usar a janela de console de ferramentas de desenvolvedor do Internet Explorer para acessar qualquer Propriedade do objeto atual.
JSLink fornece uma maneira simples de personalizar qualquer modo de exibição do SharePoint usando um script do lado do cliente puro, sem escrever uma única linha de código do lado do servidor. Você pode usar qualquer baseados em JavaScript plug-in com JSLink. Download do projeto de demonstração de amostra no msdn.microsoft.com/magazine/msdnmag0614.
Pritam Baldota é um consultor de SharePoint na Microsoft serviços de entrega Global com mais de nove anos de experiência na indústria. Em seu lazer tempo ele bloga em pritambaldota.com. Contactá-lo no pritam@pritambaldota.com.
Agradecemos aos seguintes especialistas técnicos da Microsoft pela revisão deste artigo: Sanjay Arora, Henrique chaves e Paresh Moradiya
Sanjay Arora – Sanjay é um Gerenciador de recursos de desenvolvimento profissional em Microsoft Global de serviços de entrega.
Subhajit Chatterjee é consultor sênior, com entrega serviços de Microsoft Global com mais de 12 anos de experiência na indústria. Ele executou muitos contratos turnkey e complexos da GD.
Paresh Moradiya tem 11 + anos de experiência na indústria de Software. Atualmente trabalha como consultor com Microsoft desde os últimos 5 anos. Ele é uma PME na Web de gerenciamento de conteúdo do SharePoint e SharePoint Social.