HOW TO CREATE A LOOKUP FORM USING SHAREPOINT MODAL

I. INTRODUCTION

For today, I was tasked to create a lookup form using the very useful sharepoint modal in SP2010. The design is to have a textbox and a small button beside it that will trigger the modal. The modal contains a gridview with all the available values that the user will select. The user selects a valid value by clicking the row on the grid and its click event will close the modal and the selected value will be displayed on the textbox. 

II. SCOPE

This solution should have an existing custom webpart that will be the container of our controls. This tutorial will not detail out how to create a custom webpart in visual studio.

III. REQUIREMENTS

- Sharepoint 2010
- Visual Studio 2010

IV. IMPLEMENTATION
1. On the parent user control (ascx page), create a javascript function that will trigger the Sharepoint modal dialog.

function openLookup() {
        var options = SP.UI.$create_DialogOptions();
        options.title = "Lookup";
        options.width = 200;
        options.allowMaximize = false;
        options.autoSize = true;
        options.showClose = true;        SP.UI.ModalDialog.commonModalDialogOpen("/_layouts/Lookup.aspx", options, closecallback, null);    }

You can ignore the parameters being passed to the commonModalDialogOpen method, I will explain this later on the following steps.

Refer to the following link http://msdn.microsoft.com/en-us/library/ff410058.aspx for more information about the options being set in the modal dialog.

2. This javascript function would mean that the modal will load an aspx page located in "/_layouts/Lookup.aspx" .  For the next step, we will create this application page for the modal to show.
a. In your Sharepoint solution, right-click on the layouts folder. Select on Add->New Item. Select Application Page and on the name, Type in Lookup.aspx.

b. On the Lookup.aspx, the application page template has four contentplaceholders (PageHead, Main, PageTitle, PageTitleInTitleArea). We are more interested in the Main contentplaceholder because it will be in there where we will place our gridview. Place the code below on the “Main” contentplaceholder.

<asp:GridView ID="gvLookup" runat="server" AutoGenerateColumns="false" BorderWidth="5px" CssClass="tbl" AlternatingRowStyle-BackColor="#E9EFDA">
<Columns>  
<asp:TemplateField HeaderText="Select valid values" ItemStyle-CssClass="itemStyle" HeaderStyle-BorderWidth="0" HeaderStyle-CssClass="center">
<ItemTemplate>
 <span id="lookup" onclick="ModalClose_click('<%# Eval("Navio")%>');" style="cursor:pointer;" >
<%# Eval("Navio")%>
</span>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

c. Now create a javascript function on the application page. Name this function ModalClose_click and it has a parameter that will soon be passed on to the parent user control. So for the code on Step B, we will be passing the row value of the datagrid to the parent control. Place the function below on the script tag of the lookup.aspx.

function ModalClose_click(gridValue) {  
SP.UI.ModalDialog.commonModalDialogClose("OK", gridValue);
}

d. On the code-behind of the lookup application page, place the following code to populate our gridview.

protected void Page_Load(object sender, EventArgs e)
        {
       DisplayList();
        }
 private void DisplayList()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("Navio", typeof(string));
            dt.Rows.Add("Navio1");
            dt.Rows.Add("Navio2");
            dt.Rows.Add("Navio3");
            dt.Rows.Add("Navio4");
            gvLookup.DataSource = dt;
            gvLookup.DataBind();
        }

 3. On the parent user control, create a textbox that will hold the selected value from the modal lookup. Also, create an input button that will be used to trigger the modal dialog. When you click on the button, it will trigger the javascript function that we created earlier.

 Navio : <asp:TextBox ID="txtShip" runat="server" Width="200px" />
             <input type="button" value="..." onclick="openLookup();" />

 4. The last javascript function that we will create is the closecallback that will be triggered when the SP.UI.ModalDialog.commonModalDialogClose method is called on the application page. Remember on Step 2.b where we set the parameters to pass on the value ‘OK’ and the row value of our datagrid. The closecallback function will look something like the one below.

function closecallback(result, value) {
        if (result === "OK") {
            document.getElementById('<%= txtShip.ClientID %>').value = value;
        }

Basically we are saying that when the result is equal to the value ‘OK’, we will assign the selected row value to the txtShip textbox in our user control.