How to Implement SharePoint Cascaded Lookup Field
Implementando relação pai-filho em listas no SharePoint 2013 |
Este é um problema comum com solução simples que vale a pena ser documentado.
Vou seguir esta explicação com um exemplo igualmente comum:
- Lista de Estados: Eu tenho uma lista de estados. ex.: Rio de Janeiro, São Paulo, ...
- Lista de Cidades: Eu tenho uma lista de cidades. ex.: Brasilia, Campo Grande, ...
- Lista de Cadastro: Eu tenho uma lista com colunas Lookups para 'Estados' e para 'Cidades'.
- A medida que forem escolhidas os Estados, as cidades devem ser filtradas automaticamente.
- Uma coluna chamada 'Pai' refere-se aos Estados
- Uma coluna chamada 'Filho' refere-se às Cidades
Esquema com as listas SharePoint relaacionadas através de Lookup |
Para solucionar esta questão utilizei JQuery.
Esta solução foi testada com sucesso no SharePoint 2007, SharePoint 2010 e SharePoint 2013, seja a versão services ou server. As telas a seguir mostram exemplos no SharePoint 2013, mas para fazer nas outras versões o procedimento é semelhante.
1 - Baixe o JQuery
Entre no site http://jquery.com/ e baixe o JQuery.Baixe também o JQuery customizado para o SharePoint. O JQuery Library for SharePoint Web Services pode ser encontrado no link http://spservices.codeplex.com/releases/view/42672
2 - Adicione os arquivos do JQuery ao SharePoint
Guarde em alguma biblioteca do SharePoint o JQuery, o JQuery do SPServices Minified e o JQuery do SPServices completo. Eu escolhi a biblioteca SiteAssets como repositório para estes arquivos.
Assegure-se de manter estes arquivos com permissão de leitura para todos os usuários.
3 - Adicione a referencia do JQuery à sua MasterPage
Adicione o seguinte script à sua Master Page, preferenciamente, antes do final da tag </head>...
<!-- JQUERY CONNECTIONS -->
<script language="javascript" type="text/javascript" src="/SiteAssets/jquery-1.11.0.js"></script>
<script language="javascript" type="text/javascript" src="/SiteAssets/jquery.SPServices-2014.01.min.js"></script>
<script language="javascript" type="text/javascript" src="/SiteAssets/jquery.SPServices-2014.01.js"></script>
<!-- JQUERY CONNECTIONS -->
</head>
...
Adicionando referencias do JQuery ao SharePoint |
4 - Alterando a lista de Cadastro
Na lista de cadastro, altere o 'Novo Formulário Padrão', como segue a imagem.
Alterando o Novo Formulário Padrão do SharePoint através da Ribbon |
5 - Adicionando uma WebPart de Script
Antes do formulário Padrão adicione uma WebPart de Edição de Scripts. Ela será responsável por fazer tal funcionalidade ter sucesso.6 - Adicione o script JScript/JavaScript criado com JQuery
<script language="javascript" type="text/javascript">$(document).ready(function(){
$().SPServices.SPCascadeDropdowns({
relationshipList: "Cidades",
relationshipListParentColumn: "Estado",
relationshipListChildColumn: "Title",
parentColumn: "Pai",
childColumn: "Filho",
debug: true
});
});
</script>
7 - Verificando
Por fim, verifique se está funcionando.
Bastando clicar no pai e o filho deverá realizar a filtragem necessária, automaticamente.
Repita o processo 4 para a página 'Formulário de Edição Padrão', para funcionar também na página de edição.
Lista mostrando a relação pai-filho funcionando com Lookups Cascateados |