Instruções passo a passo: criar uma Web Part para o SharePoint

Artigo
06/19/2023

As Web Parts permitem que os usuários modifiquem diretamente o conteúdo, a aparência e o comportamento das páginas de sites do SharePoint usando um navegador. Este passo a passo mostra como criar uma Web Part usando o modelo de item de Web Part no Visual Studio 2010.

A Web Part mostra funcionários em uma grade de dados. O usuário especifica o local do arquivo que contém os dados do funcionário. O usuário também pode filtrar a grade de dados para que somente os funcionários que são gerentes apareçam na lista.

Este passo a passo ilustra as seguintes tarefas:

Criar uma Web Part usando o modelo de item de Web Part do Visual Studio.
Criar uma propriedade que possa ser definida pelo usuário da Web Part. Essa propriedade especifica o local do arquivo de dados do funcionário.
Renderizar conteúdo em uma Web Part adicionando controles à coleção de controles da Web Part.
Criar um item de menu, conhecido como verbo, que aparece no menu de verbos da Web Part renderizada. Os verbos permitem que o usuário modifique os dados que aparecem na Web Part.
Testar a Web Part no SharePoint.

Observação

Seu computador pode mostrar diferentes nomes ou locais para alguns dos elementos de interface do usuário do Visual Studio nas instruções a seguir. A edição do Visual Studio que você possui e as configurações que você usa determinam esses elementos. Para obter mais informações, confira Personalizar o IDE do Visual Studio.

Pré-requisitos

Edições do Microsoft Windows e do SharePoint com suporte.
Visual Studio 2017 ou Azure DevOps Services.

Criar um projeto vazio do SharePoint

Primeiro, crie um projeto vazio do SharePoint. Posteriormente, você adicionará uma Web Part ao projeto usando o modelo de item de Web Part.

Inicie o Visual Studio usando a opção Executar como Administrador.
Na barra de menus, escolha Arquivo>Novo>Projeto.
Na caixa de diálogo Novo Projeto, expanda o nó do SharePoint no idioma que você deseja usar e escolha o nó 2010.
No painel Modelos, escolha Projeto do SharePoint 2010 e, em seguida, escolha o botão OK.

O Assistente de Personalização do SharePoint é exibido. Esse assistente permite selecionar o site que você usará para depurar o projeto e o nível de confiança da solução.
Escolha o botão de opção Implantar como uma solução de farm e, em seguida, o botão Concluir para aceitar o site local padrão do SharePoint.

Adicionar uma Web Part ao projeto

Adicione um item de Web Part ao projeto. O item Web Part adiciona o arquivo de código da Web Part. Posteriormente, você adicionará código ao arquivo de código da Web Part para renderizar o conteúdo dela.

Na barra de menus, escolha Projeto>Adicionar Novo Item.
Na caixa de diálogo Adicionar Novo Item, no painel Modelos Instalados, expanda o nó do SharePoint e escolha o nó 2010.
Na lista de modelos do SharePoint, escolha o modelo de Web Part e, em seguida, escolha o botão Adicionar.

O item Web Part aparece no Gerenciador de Soluções.

Renderizar conteúdo na Web Part

Você pode especificar quais controles deseja que apareçam na Web Part adicionando-os à coleção de controles da classe da Web Part.

Em Gerenciador de Soluções, abra WebPart1.vb (no Visual Basic) ou WebPart1.cs (no C#).

O arquivo de código da Web Part é aberto no Editor de Código.
Adicione as seguintes diretivas na parte superior do arquivo de código da Web Part.
- C#
- VB
```
using System.Data;
```
```
Imports System.Data
```
Adicione o código a seguir à classe WebPart1 . Esse código declara os seguintes campos:
- Uma grade de dados para mostrar funcionários na Web Part.
- Texto que aparece no controle usado para filtrar a grade de dados.
- Um rótulo que exibe um erro se a grade de dados não puder mostrar dados.
- Uma cadeia de caracteres que contém o caminho do arquivo de dados do funcionário.
  - C#
  - VB
```
private DataGrid grid;
private static string verbText = "Show Managers Only";
private Label errorMessage = new Label();
protected string xmlFilePath;
```
```
Private grid As DataGrid
Private Shared verbText As String = "Show Managers Only"
Private errorMessage As New Label()
Protected xmlFilePath As String
```

Adicione o código a seguir à classe WebPart1 . Esse código adiciona uma propriedade personalizada chamada DataFilePath à Web Part. Uma propriedade personalizada é aquela que pode ser definida no SharePoint pelo usuário. Essa propriedade obtém e define o local de um arquivo de dados XML usado para preencher a grade de dados.

[Personalizable(PersonalizationScope.Shared), WebBrowsable(true),
WebDisplayName("Path to Employee Data File"),
WebDescription("Location of the XML file that contains employee data")]
public string DataFilePath
{
    get
    {
        return xmlFilePath;
    }
    set
    {
        xmlFilePath = value;
    }
}

<Personalizable(PersonalizationScope.[Shared]), _
    WebBrowsable(True), WebDisplayName("Path to Employee Data File"), _
    WebDescription("Location of the XML file that contains employee data")> _
Public Property DataFilePath() As String
    Get
        Return xmlFilePath
    End Get
    Set(ByVal value As String)
        xmlFilePath = value
    End Set
End Property

Substitua o método CreateChildControls pelo seguinte código. Esse código executa as seguintes tarefas:

Adiciona a grade de dados e o rótulo que você declarou na etapa anterior.

Associa a grade de dados a um arquivo XML que contém dados de funcionários.

protected override void CreateChildControls()
{
    // Define the grid control that displays employee data in the Web Part.
    grid = new DataGrid();
    grid.Width = Unit.Percentage(100);
    grid.GridLines = GridLines.Horizontal;
    grid.HeaderStyle.CssClass = "ms-vh2";
    grid.CellPadding = 2;
    grid.BorderWidth = Unit.Pixel(5);
    grid.HeaderStyle.Font.Bold = true;
    grid.HeaderStyle.HorizontalAlign = HorizontalAlign.Center;

    // Populate the grid control with data in the employee data file.
    try
    {
        DataSet dataset = new DataSet();
        dataset.ReadXml(xmlFilePath, XmlReadMode.InferSchema);
        grid.DataSource = dataset;
        grid.DataBind();
    }
    catch (Exception x)
    {
        errorMessage.Text += x.Message;
    }

    // Add control to the controls collection of the Web Part.
    Controls.Add(grid);
    Controls.Add(errorMessage);
    base.CreateChildControls();
}

Protected Overloads Overrides Sub CreateChildControls()

    'Define the grid control that displays employee data in the Web Part.
    grid = New DataGrid()
    With grid
        .Width = Unit.Percentage(100)
        .GridLines = GridLines.Horizontal
        .HeaderStyle.CssClass = "ms-vh2"
        .CellPadding = 2
        .BorderWidth = Unit.Pixel(5)
        .HeaderStyle.Font.Bold = True
        .HeaderStyle.HorizontalAlign = HorizontalAlign.Center
    End With



    'Populate the grid control with data in the employee data file.
    Try
        Dim dataset As New DataSet()
        dataset.ReadXml(xmlFilePath, XmlReadMode.InferSchema)
        grid.DataSource = dataset
        grid.DataBind()
    Catch x As Exception
        errorMessage.Text += x.Message
    End Try

    'Add control to the controls collection of the Web Part.
    Controls.Add(grid)
    Controls.Add(errorMessage)
    MyBase.CreateChildControls()

End Sub

Adicione o método a seguir à classe WebPart1. Esse código executa as seguintes tarefas:

Cria um verbo que aparece no menu de verbos da Web Part renderizada.

Manipula o evento gerado quando o usuário escolhe o verbo no menu de verbos. Esse código filtra a lista de funcionários que aparece na grade de dados.

public override WebPartVerbCollection Verbs
{
    get
    {
        WebPartVerb customVerb = new WebPartVerb("Manager_Filter_Verb",
            new WebPartEventHandler(CustomVerbEventHandler));

        customVerb.Text = verbText;
        customVerb.Description = "Shows only employees that are managers";

        WebPartVerb[] newVerbs = new WebPartVerb[] { customVerb };

        return new WebPartVerbCollection(base.Verbs, newVerbs);
    }
}

protected void CustomVerbEventHandler(object sender, WebPartEventArgs args)
{
    int titleColumn = 2;

    foreach (DataGridItem item in grid.Items)
    {
        if (item.Cells[titleColumn].Text != "Manager")
        {
            if (item.Visible == true)
            {
                item.Visible = false;
            }
            else
            {
                item.Visible = true;
            }
        }

    }
    if (verbText == "Show Managers Only")
    {
        verbText = "Show All Employees";
    }
    else
    {
        verbText = "Show Managers Only";
    }
}

Public Overrides ReadOnly Property Verbs() As WebPartVerbCollection
    Get
        Dim customVerb As New WebPartVerb("Manager_Filter_Verb", _
            New WebPartEventHandler(AddressOf CustomVerbEventHandler))

        customVerb.Text = verbText
        customVerb.Description = "Shows only employees that are managers"

        Dim newVerbs() As WebPartVerb = {customVerb}

        Return New WebPartVerbCollection(MyBase.Verbs, newVerbs)
    End Get
End Property

Protected Sub CustomVerbEventHandler(ByVal sender As Object, ByVal args As WebPartEventArgs)
    Dim titleColumn As Integer = 2

    Dim item As DataGridItem
    For Each item In grid.Items
        If item.Cells(titleColumn).Text <> "Manager" Then
            If item.Visible = True Then
                item.Visible = False
            Else
                item.Visible = True
            End If
        End If
    Next item
    If verbText = "Show Managers Only" Then
        verbText = "Show All Employees"
    Else
        verbText = "Show Managers Only"
    End If
End Sub

Testar a Web Part

Quando você executa o projeto, o site do SharePoint é aberto. A Web Part é adicionada automaticamente à Galeria de Web Parts no SharePoint. Você pode adicionar a Web Part a qualquer página de Web Part.

Cole o XML a seguir em um arquivo do Bloco de Notas. Esse arquivo XML contém os dados de exemplo que aparecerão na Web Part.

<?xml version="1.0" encoding="utf-8" ?>
    <employees xmlns="http://schemas.microsoft.com/vsto/samples">
       <employee>
           <name>David Hamilton</name>
           <hireDate>2001-05-11</hireDate>
           <title>Sales Associate</title>
       </employee>
       <employee>
           <name>Karina Leal</name>
           <hireDate>1999-04-01</hireDate>
           <title>Manager</title>
       </employee>
       <employee>
           <name>Nancy Davolio</name>
           <hireDate>1992-05-01</hireDate>
           <title>Sales Associate</title>
       </employee>
       <employee>
           <name>Steven Buchanan</name>
           <hireDate>1955-03-04</hireDate>
           <title>Manager</title>
       </employee>
       <employee>
           <name>Suyama Michael</name>
           <hireDate>1963-07-02</hireDate>
           <title>Sales Associate</title>
       </employee>
    </employees>

No Bloco de Notas, na barra de menus, escolha Arquivo>Salvar Como.
Na caixa de diálogo Salvar Como, na lista Salvar como tipo, escolha Todos os Arquivos.
Na caixa Nome do arquivo, digite data.xml.
Escolha qualquer pasta usando o botão Procurar Pastas e selecione o botão Salvar.
No Visual Studio, pressione a tecla F5.

O site do SharePoint é aberto.
No menu Ações do Site, escolha Mais Opções.
Na página Criar, selecione o tipo Página da Web Part e, em seguida, escolha o botão Criar.
Na página Nova Página da Web Part, nomeie a página como SampleWebPartPage.aspx e selecione o botão Criar.

A página da Web Part é exibida.
Selecione qualquer região na página da Web Part.
Na parte superior da página, escolha a guia Inserir e, em seguida, selecione o botão Web Part.
No painel Categorias, escolha a pasta Personalizado, escolha a Web Part WebPart1 e, em seguida, selecione o botão Adicionar.

A Web Part aparece na página.

Testar a propriedade personalizada

Para preencher a grade de dados exibida na Web Part, especifique o caminho do arquivo XML que contém dados sobre cada funcionário.

Escolha a seta que aparece no lado direito da Web Part e escolha Editar Web Part no menu exibido.

Um painel que contém propriedades da Web Part aparece no lado direito da página.
No painel, expanda o nó Diversos, insira o caminho do arquivo XML que você criou anteriormente, escolha o botão Aplicar e escolha o botão OK.

Verifique se uma lista de funcionários aparece na Web Part.

Testar o verbo da Web Part

Mostre e oculte funcionários que não são gerentes selecionando um item que aparece no menu verbos da Web Part.

Escolha a seta que aparece no lado direito da Web Part e escolha Mostrar Somente Gerentes no menu exibido.

Somente os funcionários que são gerentes vão aparecer na Web Part.
Escolha a seta novamente e, em seguida, escolha Mostrar Todos os Funcionários no menu exibido.

Todos os funcionários vão aparecer na Web Part.

Confira também

Criar web parts para o SharePoint Como criar uma Web Part do SharePoint Como criar uma Web Part do SharePoint usando um designer Passo a passo : criar uma Web Part para o SharePoint usando um designer

Compartilhar via