Home > Artigo, SharePoint Technologies > CS21002 – Criando um tipo de Custom Field no WSS 3.0

CS21002 – Criando um tipo de Custom Field no WSS 3.0


Autor:

Thiago Silva

Publicação:

06/Ago/09

Overview

Quando armazenando informações de negócios no SharePoint, você certamente vai encontrar cenários nos quais informações de negócios importantes não são conformes ao tipo de campo incluído no SharePoint, ou situações nas quais você precisa customizar os tipos de campos. O SharePoint oferece a capacidade para você criar tipos de campos customizados, baseado num set de tipos de campos robusto que ele oferece. Estes campos customizados podem incluir validação de dados customizados, renderização de campo customizado, renderização e processamento de propriedades de campo cusmotizado.

Microsoft Visual Studio 2008 Extensions for Windows SharePoint Services 3.0 dá novo suporte na criação de tipos de campos customizados para SharePoint. Este artigo mostra o que você precisa para construir um tipo de campo customizado para WSS usando Visual Studio Extensions for WSS. O tipo de campo criado aqui fornece a capacidade de escolher imagens dentro de uma caixa de lista.

Solução

Para essa solução vou trabalhar com os seguintes produtos e tecnologias:

· Windows Server 2003 R2 com SP2;

· Windows SharePoint Services 3.0 com SP2;

· SQL Server 2005 com SP2;

· Visual Studio 2008 with Extensions for Windows SharePoint Services (http://www.microsoft.com/downloads/details.aspx?familyid=7BF65B28-06E2-4E87-9BAD-086E32185E68&displaylang=en).

Para mostrar como criar um tipo de campo customizado, este artigo passa por quatro passos-chave:

1. Criando um novo projeto de aplicação para Windows SharePoint Services vazio no Visual Studio 2008;

2. Adicionando um SharePoint filed control ao projeto;

3. Adicionando uma funcionalidade ao field control;

4. Construindo e implantando o tipo de campo customizado no site SharePoint.

Então, vamos por a mão na massa!

1. Criando um SharePoint application vazio no Visual Studio 2008

1.1. Inicie o Visual Studio, depois clique no menu File, clique em New, e então clique em Project;

image

1.2. No painel Project Types do novo projeto, selecione e expanda Visual C#, e selecione a categoria SharePoint;

1.3. No painel Templates, clique Empty. Especifique o nome e a localização do projeto, e então clique em Ok. O Visual Studio criará uma solução que contém um projeto vazio;

image

2. Adicionando um Field Control ao projeto

2.1. No Visual Studio Solution Explorer, clique com o botão direito no projeto vazio criado nos passos anteriores, clique Add, e então clique em New Item;

image

2.2. No painel Categories na caixa de diálogo, expanda o nó Visual C# Project Itens, e selecione a categoria SharePoint;

2.3. No painel Templates, clique em Field Control. Especifique LogoField para o nome do Field Control, e cliquem em Add;

image

3. Adicionando funcionalidade ao Field Control

Visual Studio adiciona dois arquivos de código Microsoft Visual C# ao projeto: LogoField.FieldControl.cs e LogoField.Field.cs. O arquivo LogoField.Field.cs contém o código que define a classe que, por padrão, é derivada da classe SPFieldText e que sobrepõe a propriedade FieldRenderingControl. A implamentação gerada deste projeto retorna uma instância da classe LogoFieldFieldControl field control que é definida em LogoField.FieldControl.cs. A classe LogoFieldFieldControl implementa o suporte a renderização, validação, e processamento fornecido pelo field control.

image

3.1. No Visual Studio Solution Explorer, abra o arquivo LogoField.FieldControl.cs;

3.2. Adicione os seguintes using stataments ao topo do arquivo, logo após aos using statements gerados pelo Visual Studio:

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.HtmlControls;

image

3.3. Adicione o seguinte código dentro da definição da classe LogoFieldFieldControl:

private ListBox listBox;
private HtmlTable table;

protected override void CreateChildControls()
{
base.CreateChildControls();

this.table = new HtmlTable();

HtmlTableRow row = new HtmlTableRow();

table.Rows.Add(row);

HtmlTableCell cell = null;

if (this.ControlMode == SPControlMode.Edit || 

this.ControlMode == SPControlMode.New)

{

cell = new HtmlTableCell();

cell.ColSpan = 2;

cell.Attributes["class"] = "ms-formdescription";

cell.InnerText = "Choose a logo:";

row.Cells.Add(cell);

row = new HtmlTableRow();

cell = new HtmlTableCell();

// Cria um listbox seletor de imagens

this.listBox = new ListBox();

this.listBox.Rows = 12;

// Pega a lista de imagens de logo na picture library

// e adiciona-as ao listbox 

SPSite site = SPContext.GetContext(this.Context).Site;

SPDataSource dataSource = new SPDataSource();

dataSource.List = site.RootWeb.Lists["Logos"];

this.listBox.DataSource = dataSource;

this.listBox.DataTextField = "Title";

this.listBox.DataValueField = "Name";

this.listBox.DataBind();

// Pega o valor atual do campo

string currentValue = (string)this.ItemFieldValue;

if (currentValue != null && currentValue != string.Empty)

{

this.listBox.SelectedValue = currentValue;

}

else if (this.listBox.Items.Count > 0)

{

this.listBox.SelectedIndex = 0;

}

// Adiciona script que atualiza a visualização da imagen quando um novo 

// item é selecionado na listbox 

this.listBox.Attributes["onchange"] = 

"document.all.imgLogoPreview.src = '/logos/' + " +

"this.options[this.selectedIndex].value;";

cell.Controls.Add(this.listBox);

row.Cells.Add(cell);

table.Rows.Add(row);

}

cell = new HtmlTableCell();

LiteralControl literalControl = new LiteralControl();

string logo = null;

object logoObject = this.ItemFieldValue;

if (logoObject != null)

{

logo = (string)logoObject;

}

if (logo == null || logo == string.Empty)

{

logo = this.listBox.SelectedValue;

}

literalControl.Text = 

"<img id='imgLogoPreview' src='/logos/" + logo + "'></img>";

cell.Controls.Add(literalControl);

row.Cells.Add(cell);

base.Controls.Add(table);

}

public override void UpdateFieldValueInItem()

{

this.EnsureChildControls();

try

{

this.Value = this.listBox.SelectedValue;

this.ItemFieldValue = this.Value;

}

catch

{

;

}

}

protected override void Render(HtmlTextWriter output)

{

this.table.RenderControl(output);

}

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

image

3.4. Salve as mudanças no arquivo LogoField.FieldControl.cs.

image

O código acima assume que haja uma picture library no site de nível superior da coleção de sites chamada Logos que contenha arquivos de imagem. Para que o field control busque e mostre a lista de imagens, esta biblioteca deve existir e conter imagens.

4. Construindo e implantando o tipo de conteúdo customizado

4.1. No menu Build do Visual Studio, clique em Deploy Solution.

image

image

4.2. Abra o prompt de comando, e execute o comando iisreset.

image

Você pode agora testar o novo tipo de campo no WSS associando o tipo de campo a uma lista. Para isso vamos adicionar uma coluna a uma lista existente que utilize este campo criado. Para informações adicionais de como associar um tipo de campo com uma lista, veja Adicionando uma coluna em uma lista.

image

image

Conclusão

Nesse artigo nós mostramos como construir um tipo de campo customizado no Windows SharePoint Services 3.0 usando o Microsoft Visual Studio 2008 with Extensions for Windows SharePoint Services 3.0. os passos-chave inclusos são:

1. Criando um novo projeto de aplicação para Windows SharePoint Services vazio no Vistual Studio 2008;

2. Adicionando um SharePoint filed control ao projeto;

3. Adicionando uma funcionalidade ao field control;

4. Construindo e implantando o tipo de campo customizado no site SharePoint.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: