Usar o widget experimental de Exibição de Lista da Área de Trabalho nos suplementos do SharePoint
Você pode usar o widget Modo de Lista da Área de Trabalho em qualquer página da Web, mesmo que a página não esteja hospedada no SharePoint. Use o widget Modo de Lista em seus suplementos para exibir dados em listas hospedadas em um site do SharePoint.
Aviso
Os Widgets Web do Office – Experimental são fornecidos apenas para fins de pesquisa e comentários. Não use em cenários de produção. O comportamento do Office Web Widgets pode mudar significativamente em versões futuras. Leia e examine os Widgets web do Office – Termos de licença experimentais.
Você pode usar o widget Exibição de Lista para exibir os dados em uma lista do SharePoint parecida com o widget Exibição de Lista normal, mas pode usá-lo em seus suplementos e sites que não estão necessariamente hospedados no SharePoint.
Widget do Modo de Exibição de Lista da Área de Trabalho exibindo dados em uma lista
Você pode especificar a exibição na lista do SharePoint que deseja usar para exibir os dados. O widget Exibição de Lista exibe as colunas e os itens na ordem especificada pelo modo de exibição.
O widget De Exibição de Lista usa a biblioteca entre domínios para obter os dados da lista. Por esse motivo, a comunicação ocorre no nível do cliente.
Observação
O widget Do Modo de Exibição de Lista da Área de Trabalho não habilita todos os cenários do Modo de Exibição de Lista nativo.
Os cenários a seguir não foram habilitados na versão atual do widget:
- Usar o widget em esquemas de autenticação que não têm suporte nativo da biblioteca entre domínios.
- Usar o widget com fontes de dados diferentes de listas ou bibliotecas do SharePoint.
- Associação de dados com o widget.
- Exibições do usuário compatíveis com toque.
- Edição em linha do usuário.
- Mostrar informações de presença.
- Fornecer modelos de processamento personalizado.
- Cenários locais. Neste momento, o widget só funciona no SharePoint Online.
Pré-requisitos para usar os exemplos neste artigo
Para seguir os exemplos deste artigo, você precisa do seguinte:
Visual Studio 2013 ou posterior
Gerenciador de Pacotes NuGet. Para obter mais informações, confira Instalando ferramentas de cliente do NuGet.
Um ambiente de desenvolvimento do SharePoint (isolamento de aplicativo necessário para cenários no local).
Widgets Web do Office – pacote NuGet Experimental. Para obter mais informações sobre como instalar um pacote NuGet, consulte Interface do Usuário do Gerenciador de Pacotes do NuGet. Você também pode navegar pela página da galeria do NuGet.
Usar o widget de Exibição de Lista da Área de Trabalho em um Suplemento do SharePoint hospedado pelo provedor
Neste exemplo, há uma página simples hospedada fora do SharePoint que declara um widget de Exibição de Lista da Área de Trabalho.
Para usar o widget de Exibição de Lista, faça o seguinte:
Crie um Suplemento do SharePoint e projetos da Web.
Crie uma lista na Web de suplemento. Essa etapa também garante a criação de um site do suplemento quando os usuários implantarem o suplemento.
Observação
A biblioteca entre domínios requer a existência de um suplemento da Web. O widget de Exibição de Lista se comunica com o SharePoint usando a biblioteca entre domínios.
Crie uma página de suplemento que declara uma instância do widget de Exibição de Lista usando marcação HTML.
Para criar um Suplemento do SharePoint e projetos da Web
Abra o Visual Studio como administrador. (Para fazer isso, selecione o ícone do Visual Studio no menu Iniciar e selecione Executar como administrador.)
Crie um novo projeto usando o modelo de Suplemento do SharePoint . O modelo de suplemento do SharePoint está localizado em Modelos>Visual C#>Office/Suplementos do SharePoint>.
Forneça a URL do site do SharePoint que você deseja usar para depuração.
Selecione Hospedado pelo provedor como a opção de hospedagem para o suplemento.
Observação
Você também pode usar o widget Modo de Lista da Área de Trabalho com outras opções de hospedagem ou até mesmo com suplementos do Office ou seu próprio site.
Selecione ASP.NET Web Forms Aplicativo como o tipo de projeto de aplicativo Web.
Selecione Serviço de Controle de Acesso do Windows Azure como a opção de autenticação.
Para criar uma lista no site do suplemento
Selecione o projeto suplemento do SharePoint no Gerenciador de Soluções e selecione Adicionar>Novo Item.
Selecione Itens do Visual C#>Office/SharePoint>Lista. Insira Anúncios na caixa de texto Nome e selecione Adicionar.
Selecione Criar uma instância de lista com base em um modelo de lista existente. Selecione o modelo Anúncios e selecione Concluir.
Para adicionar uma nova página que usa o widget do Exibição de Lista da Área de Trabalho
Selecione a pasta Páginas no projeto Web no Gerenciador de Soluções.
Copie o código a seguir e cole-o em um arquivo ASPX no projeto. O código executa as seguintes tarefas:
Adiciona referências às bibliotecas e recursos necessários do Office.
Fornece um espaço reservado para o widget Exibição de Lista.
Inicia o tempo de execução dos controles.
Executa o método renderAll do runtime do Office Controls.
<!DOCTYPE html> <html> <head> <!-- IE9 or superior --> <meta http-equiv="x-ua-compatible" content="IE=10"> <title>Desktop List View HTML Markup</title> <!-- Controls Specific CSS File --> <link rel="stylesheet" type="text/css" href="/Scripts/Office.Controls.css" /> <!-- Ajax, jQuery, and utils --> <script src=" https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js.js"> </script> <script src=" https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"> </script> <script type="text/javascript"> // Function to retrieve a query string value. // For production purposes you may want to use // a library to handle the query string. function getQueryStringParameter(paramToRetrieve) { var params = document.URL.split("?")[1].split("&"); var strParams = ""; for (var i = 0; i < params.length; i = i + 1) { var singleParam = params[i].split("="); if (singleParam[0] == paramToRetrieve) return singleParam[1]; } } </script> <!-- Cross-Domain Library and Office controls runtime --> <script type="text/javascript"> //Register namespace and variables used through the sample Type.registerNamespace("Office.Samples.ListViewBasic"); //Retrieve context tokens from the querystring Office.Samples.ListViewBasic.appWebUrl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl")); Office.Samples.ListViewBasic.hostWebUrl = decodeURIComponent(getQueryStringParameter("SPHostUrl")); Office.Samples.ListViewBasic.ctag = decodeURIComponent(getQueryStringParameter("SPClientTag")); //Pattern to dynamically load JSOM and the cross-domain library var scriptbase = Office.Samples.ListViewBasic.hostWebUrl + "/_layouts/15/"; //Get the cross-domain library $.getScript(scriptbase + "SP.RequestExecutor.js", //Get the Office controls runtime and // continue to the createControl function function () { $.getScript("../Scripts/Office.Controls.js", createControl); } ); </script> <!-- List View --> <script src="../Scripts/Office.Controls.ListView.debug.js" type="text/javascript"> </script> <!-- SharePoint CSS --> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function () { // The resource files are in a URL in the form: // web_url/_layouts/15/Resource.ashx var scriptbase = Office.Samples.ListViewBasic.appWebUrl + "/_layouts/15/"; // Dynamically create the invisible iframe. var blankiframe; var blankurl; var body; blankurl = Office.Samples.ListViewBasic.appWebUrl + "/Pages/blank.html"; blankiframe = document.createElement("iframe"); blankiframe.setAttribute("src", blankurl); blankiframe.setAttribute("style", "display: none"); body = document.getElementsByTagName("body"); body[0].appendChild(blankiframe); // Dynamically create the link element. var dclink; var head; dclink = document.createElement("link"); dclink.setAttribute("rel", "stylesheet"); dclink.setAttribute("href", scriptbase + "defaultcss.ashx?ctag=" + Office.Samples.ListViewBasic.ctag ); head = document.getElementsByTagName("head"); head[0].appendChild(dclink); }, false); </script> </head> <body> Basic List View sample (HTML markup declaration): <div id="ListViewDiv" data-office-control="Office.Controls.ListView" data-office-options='{"listUrl" : getListUrl()}'> </div> <script type="text/javascript"> function createControl() { //Initialize Controls Runtime Office.Controls.Runtime.initialize({ sharePointHostUrl: Office.Samples.ListViewBasic.hostWebUrl, appWebUrl: Office.Samples.ListViewBasic.appWebUrl }); //Render the widget, this must be executed after the //placeholder DOM is loaded Office.Controls.Runtime.renderAll(); } function getListUrl() { return Office.Samples.ListViewBasic.appWebUrl + "/_api/web/lists/getbytitle('Announcements')"; } </script> </body> </html>
Observação
O exemplo de código acima especifica explicitamente as URLs Web do host e do suplemento da Web para inicializar o runtime de controles do Office. No entanto, se as URLs Web do suplemento e do host forem especificadas nos parâmetros de cadeia de caracteres de consulta SPAppWebUrl e SPHostUrl , respectivamente, você poderá passar um objeto vazio e o código tentar obter os parâmetros automaticamente. Os parâmetros SPAppWebUrl e SPHostUrl são incluídos na cadeia de caracteres de consulta quando você usa o token {StandardTokens} .
O exemplo a seguir mostra como passar um objeto vazio para o método de inicialização:
// Initialize with an empty object and the code
// will attempt to get the tokens from the
// query string directly.
Office.Controls.Runtime.initialize({});
Para compilar e executar a solução
Pressione a tecla F5.
Observação
Ao pressionar F5, o Visual Studio compila a solução, implanta o suplemento e abre a página de permissões do suplemento.
Selecione o botão Confiar.
Selecione o ícone de suplemento na página Conteúdo do Site.
Para baixar esse exemplo da galeria de códigos, consulte o widget experimental Use the Desktop List View em um exemplo de código de suplemento .
Próximas etapas
Este artigo mostra como usar o widget Do Modo de Exibição de Lista da Área de Trabalho no suplemento usando HTML. Você também pode explorar os seguintes cenários e detalhes sobre o widget.
Usar o JavaScript para declarar o widget de Exibição de Lista da Área de Trabalho
Dependendo da sua preferência, talvez você queira usar JavaScript em vez de HTML para declarar o widget. Se esse for o caso, você poderá usar a marcação a seguir como espaço reservado para o widget.
<div id="ListViewDiv"></div>
Use o seguinte código JavaScript para criar uma instância da Exibição de Lista.
new Office.Controls.ListView(
document.getElementById("ListViewDiv"), {
listUrl: Office.Samples.ListViewBasic.appWebUrl + "/_api/web/lists/getbytitle('Announcements')"
});
Para obter um exemplo que mostra como executar as tarefas, consulte a página JSSimple.html no widget experimental Use the Desktop List View em um exemplo de código de suplemento .
Especificar uma exibição para mostrar os dados
Para especificar uma exibição em sua lista do SharePoint, o widget de Exibição de Lista exibe os dados usando a especificação de exibição.
Se você estiver usando marcação HTML para declarar o widget, use a seguinte sintaxe para especificar uma exibição.
<div id="ListViewDiv"
data-office-control="Office.Controls.ListView"
data-office-options="{listUrl: 'list URL',
viewID: 'GUID'
}">
</div>
Se você estiver declarando o widget usando JavaScript, use a seguinte sintaxe para especificar uma exibição.
new Office.Controls.ListView(
document.getElementById("ListViewDiv"), {
listUrl: "list URL",
viewID: "GUID"
});
Você pode usar o widget do Modo de Exibição de Lista de Área de Trabalho experimental para exibir dados em listas do SharePoint. O widget exibe dados no modo somente leitura. Forneça ideias e comentários no site UserVoice da Plataforma do Desenvolvedor do Office.