Display List Item Id of the new item in Newform.aspx – SharePoint 2010

I recently had a requirement to display the Id of the item that user is trying to create in NewForm.aspx. As you know that the unique id that SharePoint generates in its list only gets populated once the item is saved so the best possible way to know the item id was to add one to the previously saved item’s id and display it in your NewForm.aspx using some EcmaScript or Javascript Client Object model. This however does not mean that we are displaying the id field(which by the way is not generated) we are just displaying the Id in one of the dummy fields called “Item Id”.

Please Note – This method will not avoid conflicts i.e. If one user is creating an item and the id in his NewForm.aspx is displayed as 31(one plus the highest id of the list) and another user creates an item at the same time as saves it the id on first users NewForm.aspx will still be 31, as it is populated on load of NewForm.aspx.

Steps -

1. Create a New Column “Item Id” in your List.
2. Edit Your NewForm.aspx add a content editor webpart.
3. We will link this Content editor to a Notepad that will contain our ECMAScript.
4. Next add the below script in a Notepad and upload it in your SharePoint site.

<script type=”text/javascript”>
ExecuteOrDelayUntilScriptLoaded(SetItemid, “sp.js”);

function SetItemid() {

context = new SP.ClientContext.get_current();

web = context.get_web();

var list = web.get_lists().getByTitle(‘yourlist’);

var camlQuery = new SP.CamlQuery();

var _query =”<View><Query><Where></Where></Query><OrderBy><FieldRef Name=’Created’ Ascending=’FALSE’/></OrderBy></View>”;

camlQuery.set_viewXml(_query);

this.listItems = list.getItems(camlQuery);

context.load(listItems, ‘Include(Id,Created)’);

context.executeQueryAsync(Function.createDelegate(this, this.onSuccessMethod),Function.createDelegate(this, this.onFailureMethod));
}

function onSuccessMethod(sender, args)
{

var count = parseInt(this.listItems.get_count());

if(count >0)
{

var currentItem = listItems[0];
var _ID = currentItem.get_item(“Title”);
}

CreateCustomId(_ID);
}

function onFaiureMethod(sender, args) {
}

function CreateCustomId(id)
{

var d = new Date();

var Itemid = getTagFromIdentifierAndTitle(“input”,”",”Item Id”);

if(id == ‘NaN’ || id == ‘undefined’)
{
id = ’0′;
}

Itemid.value = d + “_” + (parseInt(id) + 1); -> Sets Item Id field to current date + id of the last item plus one (i.e date_id)
}

function getTagFromIdentifierAndTitle(tagName, identifier, title) {
var len = identifier.length;
var tags = document.getElementsByTagName(tagName);
for (var i=0; i < tags.length; i++) {
var tempString = tags[i].id;
if (tags[i].title == title && (identifier == “” || tempString.indexOf(identifier) == tempString.length – len)) {
return tags[i];
}
}
return null;
}
</script>