In Part 1: Introducing Multiple Attachment Custom Control in Sharepoint we discussed basics of a Multiple Attachment Custom Control and reasons to build it.
In this post, we are going to build the control layout.
In control, we are going to add some ASP.NET controls such as file uploader , TextBox controls, RadioButton controls and some formatting in HTML.
Read my article: Creating Custom Fields in Sharepoint
that shows how to build a custom fields and write code in UI and code behind.
Ok, this is how my control layout looks like in ASP.NET.
// as we see here we have deleted all the inheritance info and the code behind properties
<%@ Control Language="C#" %>
// here we include the sharepoint dlls we must have so we can use the SharepointRenderingTemplate
<%@ Assembly Name="Microsoft.SharePoint,
Version=12.0.0.0,
Culture=neutral,
PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Assembly="Microsoft.SharePoint,
Version=12.0.0.0,
Culture=neutral,
PublicKeyToken=71e9bce111e9429c" Namespace="Microsoft.SharePoint.WebControls" %>
// here we go , this is the Sharepoint:RenderingTemplate at which we can write all our html
<SharePoint:RenderingTemplate ID="FileUploaderTemplate" runat="server">
<template>
// some css styles , must be written inside the sharepoint rendering template
<style type="text/css">
.displaynone
{
display: none;
}
</style>
<table>
// Two Radio buttons to select whether we are going to upload a new file or to select an already existing one
<tr>
<td style="font-size: 10px">
Upload Type:
</td>
<td>
<asp:RadioButton Text="Upload New File" Checked="true" Style="font-size: 10px" GroupName="UploadTypeGroup"
runat="server" ID="RdUpload" AutoPostBack="true" />
<asp:RadioButton Text="Select Existing File" Style="font-size: 10px" GroupName="UploadTypeGroup"
runat="server" ID="RdSelect" AutoPostBack="true" />
</td>
<td>
</td>
</tr>
// Text box so we can enter the name of the newely uploaded file
<tr>
<td style="font-size: 10px">
<asp:Label ID="lblFileName" runat="server" Text="File Name:"></asp:Label>
</td>
<td>
<asp:TextBox ID="FileNameTextBox" runat="server" />
</td>
<td>
</td>
</tr>
//Required validator control to make sure that the user will enter a file name to the file going to be uploaded
<tr>
<td>
</td>
<td>
<asp:RequiredFieldValidator Display="Dynamic" Style="font-size: 10px" ID="FileNameRequiredValidator"
runat="server" ErrorMessage="File Name is Required" ValidationGroup="MultipleAttachmentValidationGroup"
ControlToValidate="FileNameTextBox">
</asp:RequiredFieldValidator>
</td>
<td>
</td>
</tr>
// Row that contains a file uploader that will be visible if we will upload a new file , or will show a dropdown
if we are going to select from an existing uploaded item
// java script written in onkeydown event in the fileupload control , makes the input area in the control uneditable
<tr>
<td style="font-size: 10px">
Upload / Select File:
</td>
<td>
<asp:FileUpload onkeydown="javascript:event.cancel=true;event.returnValue=false;"
ID="FilesUploader" runat="server" />
<asp:DropDownList Width="100%" Visible="false" ID="SelectDropDown" runat="server">
</asp:DropDownList>
</td>
<td>
</td>
</tr>
// Required validator to be sure that the fileupload control contains data / file
<tr>
<td>
</td>
<td>
<asp:RequiredFieldValidator ID="UploadControlRequiredValidator" runat="server" Style="font-size: 10px"
Display="Dynamic" ErrorMessage="File Required to be Uploaded" ValidationGroup="MultipleAttachmentValidationGroup"
ControlToValidate="FilesUploader">
</asp:RequiredFieldValidator>
</td>
<td>
</td>
</tr>
// custom validator so it will validate the extensions of the file uploaded regarding to its type
<tr>
<td>
</td>
<td>
<asp:CustomValidator ID="UploadControlCustomValidator" runat="server" Style="font-size: 10px"
Display="Dynamic" ValidationGroup="MultipleAttachmentValidationGroup" ControlToValidate="FilesUploader">
</asp:CustomValidator>
</td>
<td>
</td>
</tr>
// Radio buttons that will identify the type of file will be selected or newly uploaded
<tr>
<td style="font-size: 10px">
File Type:
</td>
<td>
<asp:RadioButton Checked="true" Style="font-size: 10px" GroupName="FileTypeGroup"
Text="images" runat="server" ID="RdImages" AutoPostBack="true" />
<asp:RadioButton Text="Videos" Style="font-size: 10px" GroupName="FileTypeGroup"
runat="server" ID="RdVideos" AutoPostBack="true" />
<asp:RadioButton Text="pdf files" Style="font-size: 10px" GroupName="FileTypeGroup"
runat="server" ID="RdPdfs" AutoPostBack="true" />
</td>
<td>
</td>
</tr>
// Button needed to trigger the event that will upload / select our file
<tr>
<td>
</td>
<td style="font-size: 10px">
<asp:LinkButton ID="UploadButton" ValidationGroup="MultipleAttachmentValidationGroup"
Text="Upload" runat="server" />
</td>
<td>
</td>
</tr>
// Just an empty row :)
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
// Just a title for the coming grid
<tr>
<td style="font-size: 10px">
Uploaded Files:
</td>
<td>
</td>
<td>
</td>
</tr>
// A Grid view that will bind to a DataTable that we will bind at our code
// this grid contains the file name , type and size , and also another column that carries the guid id of each
file we will upload
<tr>
<td></td>
<td> <asp:GridView ID="UploadingGrid" AutoGenerateColumns="false" Style="font-size: 10px; text-align: center" Width="100%"
runat="server">
<Columns>
<asp:CommandField ShowDeleteButton="True" DeleteText="delete">
<ItemStyle></ItemStyle>
</asp:CommandField>
<asp:BoundField DataField="File name" HeaderText="File Name" />
<asp:BoundField DataField="File type" HeaderText="File type"/>
<asp:BoundField DataField="File size" HeaderText="File size"/>
<asp:BoundField HeaderStyle-CssClass="displaynone" ItemStyle-CssClass="displaynone" FooterStyle-CssClass="displaynone"
DataField="File guid id" />
</Columns>
<EmptyDataTemplate>
<asp:Label ID="EmptyDataLabel" runat="server" Text="No Files Uploaded" style="font-size:10px"/>
</EmptyDataTemplate>
</asp:GridView>
<asp:TextBox ID="HiddenFieldGridValidator" style="display:none" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="GridValidator" style="font-size:10px" runat="server" ControlToValidate="HiddenFieldGridValidator"></asp:RequiredFieldValidator>
</td>
<td></td>
</tr>
</table>
</template>
</SharePoint:RenderingTemplate>
// That's the end of our Layout...
Now we have our control layout.
There is not much to talk about here besides the UI. One thing you may want to understand, you need to deploy this control in source:\\program files\common files\microsoft shared\web server extensions\ 12 \ templates\controltemplates.
Continue reading Part 3 here.
Part 3: XML File Creation