Compartilhar via


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

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 .

  1. Inicie o Visual Studio usando a opção Executar como Administrador .

  2. Na barra de menus, escolha Arquivo>Novo>Projeto.

  3. 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.

  4. Na caixa Nome, insira TestProject1e, depois, clique no botão Criar .

  5. 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.

  6. 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.

  1. No designer do Visual Web Developer, escolha a guia Design para alternar para o modo Design.

  2. Na barra de menus, escolha Exibir>Caixa de Ferramentas.

  3. 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.

  4. Repita a etapa anterior, mas mova um Botão para a próxima linha do designer.

  5. No designer, clique no botão Button1 .

  6. Na barra de menus, escolha Exibir>Janela Propriedades.

    A janela Propriedades é aberta.

  7. 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.

  1. 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.

  2. 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;
    
  3. Digite a seguinte linha de código à VisualWebPart1 classe. Esse código declara um controle de exibição de calendário mensal.

    private MonthlyCalendarView MonthlyCalendarView1;
    
  4. 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";
      }
      

  5. 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;
            }
    
        }
    
    }
    

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

  1. 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.

  2. 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.

  3. Na página Calendário, escolha um dia e clique no link Adicionar no dia selecionado para adicionar um evento.

  4. Na caixa Título, digite Evento no calendário padrão e clique em Salvar.

  5. Clique no link Conteúdo do Site e clique no bloco Adicionar um aplicativo.

  6. Na página Criar, escolha o tipo Calendário, nomeie o calendário e clique em Criar.

  7. 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

  1. Na página Conteúdo do Site, abra a pasta Páginas do Site.

  2. Na faixa de opções, escolha a guia Arquivos, abra o menu Novo Documento e digite o comando Página da Web Part.

  3. 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.

  4. Na área superior da página da Web Part, escolha a guia Inserir e clique em Web Part.

  5. 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 SharePointComo criar um passo a passo da Web Partdo SharePoint: Crie uma web part para o SharePoint