Passo a passo: Criar uma Web Part para o SharePoint usando um designer

Artigo
06/19/2023

Se você criar Web Parts para um site do SharePoint, os usuários poderão modificar diretamente o conteúdo, a aparência e o comportamento das páginas nesse site usando um navegador. Este passo a passo mostra como criar uma Web Part visualmente usando o modelo de projeto deWeb Part visual do SharePoint no Visual Studio.

A Web Part que você criará exibe um modo de exibição de calendário mensal e uma caixa de seleção para cada lista de calendários no site. Os usuários podem especificar quais listas de calendário incluir no modo de exibição de calendário mensal selecionando as caixas de seleção.

Este passo a passo ilustra as seguintes tarefas:

Criando uma Web Part usando o modelo de projeto do Visual Web Part .
Projetando a Web Part usando o designer do Desenvolvedor da Web Visual no Visual Studio.
Adicionando código para lidar com os eventos de controles na Web Part.
Testando 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. Consulte Personalizar o IDE do Visual Studio.

Pré-requisitos

Você precisará dos seguintes componentes para concluir este passo a passo:

Edições com suporte do Windows e do SharePoint.

Criar um projeto de Web Part

Primeiro, crie um projeto de Web Part usando o modelo de projeto do Visual 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 Criar um Novo Projeto , selecione o Projeto Vazio doSharePoint* para a versão específica do SharePoint instalada. Por exemplo, se você tiver o SharePoint 2019 inslatado, selecione o modelo do SharePoint 2019 – Projeto Vazio.

Observação

Você também pode pesquisar modelos digitando SharePoint na caixa de texto Pesquisar na parte superior da caixa de diálogo Criar um Projeto. Você também pode filtrar a lista de modelos para mostrar apenas os modelos do Office e do SharePoint selecionando "Office" na caixa suspensa Tipo de projeto. Para mais informações, confira Criar um projeto no Visual Studio.
Na caixa Nome, insira TestProject1e, depois, clique no botão Criar .
Na seção Qual é o nível de confiança para esta solução do SharePoint?, clique no botão da opção Implantar como uma solução de farm.
Clique em Concluir para aceitar o site local padrão do SharePoint.

Projetando a Web Part

Projete a Web Part adicionando controles da Caixa de Ferramentas à superfície do designer do Visual Web Developer.

No designer do Visual Web Developer, escolha a guia Design para alternar para o modo Design.
Na barra de menus, escolha Exibir>Caixa de Ferramentas.
No nó Padrão da Caixa de Ferramentas, clique no controle CheckBoxList e execute uma das seguintes etapas:
- Abra o menu de atalho para o controle CheckBoxList, clique em Copiar, abra o menu de atalho da primeira linha do designer e clique em Colar.
- Arraste o controle CheckBoxList da Caixa de Ferramentase conecte o controle à primeira linha do designer.
Repita a etapa anterior, mas mova um Botão para a próxima linha do designer.
No designer, clique no botão Button1 .
Na barra de menus, escolha Exibir>Janela Propriedades.

A janela Propriedades é aberta.
Na propriedade do botão Text , digite Atualizar.

Manipulando os eventos de controles na Web Part

Adicione um código que permite ao usuário adicionar calendários ao modo de exibição de calendário mestre.

Realize um dos seguintes conjuntos de etapas:
- No designer, clique duas vezes no botão Atualizar.
- Na janela Propriedades do botão Atualizar, clique no botão Eventos . Na propriedade Clique, digite Button1_Click e aperte Enter.
  
  O arquivo de código de controle do usuário é aberto no Editor de Código e o Button1_Click manipulador de eventos é exibido. Depois, você adicionará código nesse manipulador de eventos.

Adicione as instruções a seguir à parte superior do arquivo de código de controle do usuário.

using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using System.Web.UI.WebControls;

Imports Microsoft.SharePoint
Imports Microsoft.SharePoint.WebControls
Imports System.Web.UI.WebControls

Digite a seguinte linha de código à VisualWebPart1 classe. Esse código declara um controle de exibição de calendário mensal.
- C#
- VB
```
private MonthlyCalendarView MonthlyCalendarView1;
```
```
Private MonthlyCalendarView1 As MonthlyCalendarView
```

Substitua o Page_Load método da classe pelo código a VisualWebPart1 seguir. Esse código executa as seguintes tarefas:

Adiciona uma exibição de calendário mensal ao controle do usuário.
Adiciona uma caixa de seleção para cada lista de calendários no site.

Especifica um modelo para cada tipo de item que aparece no modo de exibição de calendário.

protected void Page_Load(object sender, EventArgs e)
{
    MonthlyCalendarView1 = new MonthlyCalendarView();
    this.Controls.Add(MonthlyCalendarView1);
    SPCalendarItemCollection items = new SPCalendarItemCollection();
    SPWeb thisWeb = SPControl.GetContextWeb(Context);

    if (CheckBoxList1.Items.Count == 0)
    {
        foreach (SPList listItem in thisWeb.Lists)
        {
            if (listItem.BaseTemplate == SPListTemplateType.Events)
            {
                CheckBoxList1.Items.Add(new ListItem(listItem.Title));
            }
        }
    }
    MonthlyCalendarView1.ItemTemplateName =
        "CalendarViewMonthItemTemplate";
    MonthlyCalendarView1.ItemAllDayTemplateName =
        "CalendarViewMonthItemAllDayTemplate";
    MonthlyCalendarView1.ItemMultiDayTemplateName =
        "CalendarViewMonthItemMultiDayTemplate";
}

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    MonthlyCalendarView1 = New MonthlyCalendarView()
    Me.Controls.Add(MonthlyCalendarView1)
    Dim items As New SPCalendarItemCollection()
    Dim thisWeb As SPWeb = SPControl.GetContextWeb(Context)

    If CheckBoxList1.Items.Count = 0 Then
        Dim listItem As SPList
        For Each listItem In thisWeb.Lists
            If listItem.BaseTemplate = SPListTemplateType.Events Then
                CheckBoxList1.Items.Add(New ListItem(listItem.Title))
            End If
        Next listItem
    End If
    MonthlyCalendarView1.ItemTemplateName = "CalendarViewMonthItemTemplate"
    MonthlyCalendarView1.ItemAllDayTemplateName = "CalendarViewMonthItemAllDayTemplate"
    MonthlyCalendarView1.ItemMultiDayTemplateName = "CalendarViewMonthItemMultiDayTemplate"
End Sub

Substitua o Button1_Click método da classe pelo código a VisualWebPart1 seguir. Esse código adiciona itens de cada calendário selecionado ao modo de exibição do calendário mestre.

protected void Button1_Click(object sender, EventArgs e)
{
    SPCalendarItemCollection items = new SPCalendarItemCollection();
    SPWeb thisWeb = SPControl.GetContextWeb(Context);

    foreach (ListItem item in CheckBoxList1.Items)
    {
        if (item.Selected == true)
        {
            SPList calendarList = thisWeb.Lists[item.Text];
            DateTime dtStart = DateTime.Now.AddDays(-7);
            DateTime dtEnd = dtStart.AddMonths(1).AddDays(7);
            SPQuery query = new SPQuery();
            query.Query = String.Format(
                "<Query>" +
                "<Where><And>" +
                "<Geq><FieldRef Name=\"{0}\" />" +
                "<Value Type=\"DateTime\">{1}</Value></Geq>" +
                "<Leq><FieldRef Name=\"{0}\" />" +
                "<Value Type=\"DateTime\">{2}</Value></Leq>" +
                "</And></Where><OrderBy><FieldRef Name=\"{0}\" /></OrderBy>" +
                "</Query>",
                "Start Time",
                dtStart.ToShortDateString(),
                dtEnd.ToShortDateString());

            foreach (SPListItem listItem in calendarList.GetItems(query))
            {
                SPCalendarItem calItem = new SPCalendarItem();
                calItem.ItemID = listItem["ID"].ToString();
                calItem.Title = listItem["Title"].ToString();
                calItem.CalendarType = Convert.ToInt32(SPCalendarType.Gregorian);
                calItem.StartDate = (DateTime)listItem["Start Time"];
                calItem.ItemID = listItem.ID.ToString();
                calItem.WorkSpaceLink = String.Format(
                    "/Lists/{0}/DispForm.aspx", calendarList.Title);
                calItem.DisplayFormUrl = String.Format(
                    "/Lists/{0}/DispForm.aspx", calendarList.Title);
                calItem.EndDate = (DateTime)listItem["End Time"];
                calItem.Description = listItem["Description"].ToString();
                if (listItem["Location"] != null)
                {
                    calItem.Location = listItem["Location"].ToString();
                }
                items.Add(calItem);
            }
            MonthlyCalendarView1.DataSource = items;
        }

    }

}

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
    Dim items As New SPCalendarItemCollection()
    Dim thisWeb As SPWeb = SPControl.GetContextWeb(Context)

    Dim item As ListItem
    For Each item In CheckBoxList1.Items
        If item.Selected = True Then
            Dim calendarList As SPList = thisWeb.Lists(item.Text)
            Dim dtStart As DateTime = DateTime.Now.AddDays(-7)
            Dim dtEnd As DateTime = dtStart.AddMonths(1).AddDays(7)
            Dim query As New SPQuery()
            query.Query = [String].Format("<Query>" + "<Where><And>" + _
                                          "<Geq><FieldRef Name=""{0}"" />" + _
                                          "<Value Type=""DateTime"">{1}</Value></Geq>" + _
                                          "<Leq><FieldRef Name=""{0}"" />" + _
                                          "<Value Type=""DateTime"">{2}</Value></Leq>" + _
                                          "</And></Where><OrderBy><FieldRef Name=""{0}"" /></OrderBy>" + _
                                          "</Query>", "Start Time", dtStart.ToShortDateString(), dtEnd.ToShortDateString())

            Dim listItem As SPListItem
            For Each listItem In calendarList.GetItems(query)
                Dim calItem As New SPCalendarItem()
                With calItem
                    .ItemID = listItem("ID").ToString()
                    .Title = listItem("Title").ToString()
                    .CalendarType = Convert.ToInt32(SPCalendarType.Gregorian)
                    .StartDate = CType(listItem("Start Time"), DateTime)
                    .ItemID = listItem.ID.ToString()
                    .WorkSpaceLink = [String].Format("/Lists/{0}/DispForm.aspx", calendarList.Title)
                    .DisplayFormUrl = [String].Format("/Lists/{0}/DispForm.aspx", calendarList.Title)
                    .EndDate = CType(listItem("End Time"), DateTime)
                    .Description = listItem("Description").ToString()
                End With

                If Not (listItem("Location") Is Nothing) Then
                    calItem.Location = listItem("Location").ToString()
                End If
                items.Add(calItem)
            Next listItem
            MonthlyCalendarView1.DataSource = items
        End If
    Next item

End Sub

Testar a Web Part

Quando você executa o projeto, o site do SharePoint é aberto. A Web Part é adicionada automaticamente à Galeria de Web Part no SharePoint. Para testar este projeto, você executará as seguintes tarefas:

Adicione um evento a cada uma das duas listas de calendários separadas.
Adicione a Web Part a uma página da Web Part.
Especifique as listas a serem incluídas no modo de exibição de calendário mensal.

Para adicionar eventos a listas de calendários no site

No Visual Studio, clique na tecla F5.

O site do SharePoint é aberto e a barra de Início Rápido do Microsoft SharePoint Foundation é exibida na página.
Na barra de Início Rápido, em Listas, escolha o link Calendário.

A página Calendário é exibida.

Se nenhum link do Calendário for exibido na barra de Início Rápido, escolha o link Conteúdo do Site. Se a página Conteúdo do Site não mostrar um item Calendário, crie um.
Na página Calendário, escolha um dia e clique no link Adicionar no dia selecionado para adicionar um evento.
Na caixa Título, digite Evento no calendário padrão e clique em Salvar.
Clique no link Conteúdo do Site e clique no bloco Adicionar um aplicativo.
Na página Criar, escolha o tipo Calendário, nomeie o calendário e clique em Criar.
Adicione um evento ao novo calendário, nomeie o Evento no calendário personalizado e, em seguida, clique em Salvar.

Para adicionar a Web Part a uma página da Web Part

Na página Conteúdo do Site, abra a pasta Páginas do Site.
Na faixa de opções, escolha a guia Arquivos, abra o menu Novo Documento e digite o comando Página da Web Part.
Na página Nova Página Web Part, nomeie a página SampleWebPartPage.aspx e clique em Criar.

A página da Web Part é exibida.
Na área superior da página da Web Part, escolha a guia Inserir e clique em Web Part.
Clique na pasta Personalizada, clique Web Part do VisualWebPart1 e, em seguida, clique em Adicionar.

A Web Part aparece na página. Os seguintes controles aparecem na Web Part:
- Uma exibição de calendário mensal.
- Um botão Atualizar.
- Uma caixa de seleção Calendário.
- Uma caixa de seleção Calendário Personalizado.

Para especificar listas a serem incluídas no modo de exibição de calendário mensal

Na Web Part, especifique os calendários que você deseja incluir no modo de exibição de calendário mensal e clique em Atualizar.

Os eventos de todos os calendários especificados aparecem no modo de exibição de calendário mensal.

Confira também

Criar Web Parts para SharePoint Como criar um passo a passo da Web Part do SharePoint: Crie uma web part para o SharePoint

Share via