Create Auto-Incrementing Code Numbers (Part 2)

In our last post, we prepared the list that will serve as a basis for our auto-incrementing code numbers. Our code number will consist of three parts: a three-letter airport code, a three-letter department code, and a 5-digit code number starting with 00001 for each unique airport and department code combination. When a user opens a form and selects an airport code and a department code, our program will have to find and count all existing code numbers that match the user’s selection, and create a new code number with the next available number. In other words, if there are 28 existing XXX-YY code numbers, the new generated number will be XXX-YY-00029.

Create a custom New Item Form

Because we will be generating the request number from a user’s selection of airport and department, we must next create a custom form for adding new request number items to the Request Number list. This new form will replace the default NewForm.aspx. In this form, we will add a couple of new fields, remove some of the default fields, and for reasons of usability the generated request number will be displayed on-the-fly at the top of the form. Open the Request Number list in SharePoint Designer 2010, make a copy of NewForm.aspx, and rename it to NewItemForm.aspx (Fig.1-1). Click on the form item – be careful not to click on the blue title itself, which will open the form – and set it as the default form for new items, by clicking on the “Set as default” button in the ribbon above.


Figure 1-1

 

Open NewEditForm.aspx in Advanced Edit Mode and click anywhere on the form to select it. Press your right cursor key once to deselect the form so that it moves the cursor into position for insertion below the default form. From the ribbon, insert a new custom form by clicking on Insert > SharePoint > Custom List Form…

In the dialog box that opens, select “Request Number” as the list to use and “Item” as the Content Type. Leave the default “New item form” for Type of form and deselect the “Show standard toolbar” option. Click “OK” to insert the new form that will be customized.

Figure 1-2

 

Switch to Split view if you haven’t already, and click on the default form to select it. Look in the code window for the following snippet of code:

Change its value to:

This will hide the original default form from the page so that only the new customized form will show in the Add New Item window. Also, to keep the form uncluttered, we will be hiding a few fields from the custom form itself. Locate in code view the row tags (<tr>) for the upper submit/cancel button, the Title field, and the Attachments field and add the style=”display:none;” attribute to hide them.

Example:

Make sure to turn off the “Require that this column contains information” setting for the Title field in the Request Number’s List Settings (Fig. 1-3). Otherwise, you will get an error when trying to submit the form.

 

Figure 1-3

As mentioned above, it is a good idea to add a header to the form that displays the generated request number. Add a new row to the table above the Airport City field by clicking inside one of the row’s cells and performing an insert through the ribbon with Data Tools > Table > Insert Above command. In the new row’s first cell, type in “Request Number” and format it as a Heading 3. In the next cell, add the following tag inside the cell’s <td> tag:

Alternatively, you can add the following code above Airport City field’s table row:

 

The issue with Lookup columns with 20+ items

SharePoint lookup columns are great feature when building business lists because they offer a way to standardize input in forms through the use of drop-down boxes. Improving on a good thing, SharePoint has implemented an autocomplete feature on lookup drop-downs for lookup columns with more than 20 items. This allows you to type in values and narrow down results in another drop-down in a manner similar to auto-suggest fields in search engines. SharePoint accomplishes this with some ingenious code and JavaScript, whereby it actually replaces the normal dropdown tag (<select>) with an input textbox (<input typ=”text”>) and filters the lookup list items to match the characters that have been typed in. It even uses a drop-down arrow image to simulate a traditional drop-down control. You can see this in action by going to the Request Number list and changing the page part of the URL from /Allitems.aspx to /NewForm.aspx. Notice the differences in the drop-down arrow between the two controls (Fig. 1-4). This blog post by Rasool Naguru gives more details on what is going on under the hood.

Figure 1-4

But what does this have to do with creating auto-incrementing code numbers? The issue with these controls is that in order to create the codes on-the-fly with jQuery, we need to listen to change event on the control in order to read what the user has selected. This can be done easily with the onchange event of the HTML <select> control, but is not possible with the SharePoint’s nifty construct. The workaround I arrived at was to simply rebuild the <select> controls using SPServices and jQuery and place them on the page while hiding the default controls. The actual code that performs this will be the topic of our next post, but there is still some work to do with our NewItemForm.aspx page in order to tie it in with the code.

In Code or Split view, still in Advance Editing Mode – locate the rows for Airport City and Department and set the display style of the table row tags to none:

This will effectively hide the controls from the form without disabling them. We don’t want to delete them because they will be used later to set the value of those fields in newly created Request Number item when saving.

Above (or below) the now hidden rows, add two new rows with the HTML <select> controls we will be using to create our drop-downs. Give the controls unique IDs such as #AptCodeSelect
and #DptCodeSelect so that they can be targeted with jQuery later.

The two #AptCodeSelect and #DptCodeSelect select controls above will be populated using the SP Services GetListItems method to retrieve all of the lookup item and jQuery to construct the HTML for the drop-down options. For those of you who may not have heard about the SPServices library, it is a jQuery library which abstracts SharePoint’s Web Services and makes them easier to use. You can read more about it and download it by following the link above.

We are now ready to roll up our sleeves and get down and dirty with in-the-trenches client-side coding!

March 19, 2013