holding a glowing earth globe in his hands

Creating a Knowledge Base Site – Part III

May 18, 2011
Comments off

And so I return with more on my little project to design and build a Knowledge base site which is both simple and elegant. So here is a quick recap on where we should be:

  • Part I – Creating the tables needed for the Document library and the workflow to create new sections if required
  • Part II – Adding validation to the list form field so that the user could not select both an existing section and also add a new one.

And now Part III, we need to look at how we are going to add multiple tags into the tags table without duplicating existing ones. This is how we’re going to do it using JavaScript:

  1. Firstly a message needs to be added to the tags field to inform the user that tags should be split by a “;”.
  2. On submitting the form the JavaScript will be executed
  3. The code will take the value stored in the tags field and create an array based of values using “;” as an indicator that the next index needs to be started
  4. Once the array is created the code will loop through each index and query the database to check if the String value in the index exists as a tag in the Tags list.
  5. If the String doesn’t exist then a soap request will be used to create a new list item for that tag, essentially adding the tag to the Tags list

So the first thing we should do is add a description to the Tags field so that the user is aware that tags should be split by a “;”. Here’s a example of what the field should look like:


Now we need to add the JavaScript to the EditForm.aspx page which we made modifications to in Part II. Firstly find open the file on the code view and search the code for the following:

<asp:Content ContentPlaceHolderId=”PlaceHolderMain” runat=”server”>

Once you’ve found this piece of code add a few empty lines below to split out the other code and then add the following declarations of linked JS files from the SharePoint api:

<script language=”javascript” type=”text/javascript” src=”/_layouts/2057/JSAPI/SPAPI_Core.js”></script>
<script language=”javascript” type=”text/javascript” src=”/_layouts/2057/JSAPI/SPAPI_Lists.js”></script>
<script language=”javascript” type=”text/javascript” src=”/_layouts/2057/JSAPI/SPAPI_Types.js”></script>

The SharePoint API js files are used so that we can access the database to do CAML queries without the need to complicated .NET code. The first function we need to create for this script if the PreSaveAction function. For those of you not aware the PreSaveAction is called by default when a submission is made from the form field page. The code below is the first part and contains calls to functions we are yet to create.

<script language=”javascript” type=”text/javascript”>
function PreSaveAction()
//Create a new object for the Tags field so that we can pull the value.
var tagField = getTagFromIdentifierAndTitle(“input”,“”,“Tags”);
var tagFieldValues = tagField.value;
//Split the tags value into an array called args based on the splitter char being “;”
var args = tagFieldValues.split(“;”);
//Loop through the array args, create a string value of each index, call duplicate search function, if true is returned then create soap request.
for (var i=0; i < args.length; i++)

var tagCreate = args[i];
var checkForDup = checkDup(tagCreate);
if (checkForDup){ SaveListItem(tagCreate); }
return true;

Now lets create the getTagFromIdentiferAndTitle function which will get the form field object so that we can pull the value.

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;

So now we have the main function and a function to get the form field value of tags. Now we need a function which will query the database to check for tag duplicates. For more information on CAML queries CLICK HERE.

function GetRootUrl()
//Create URL string for List location
var url = ‘http://‘ + document.location.hostname + ‘/‘;
url += ‘corporate/informationtechnology/webteam/knowledgebase‘;
return url;

function checkDup(tagCreate)
//Get URL and get list location
var sUrl = GetRootUrl();
var lists = new SPAPI_Lists(sUrl);
//Create CAML query
var sQuery = ‘<Query><Where><Eq><FieldRef Name=”Title”/><Value Type=”Text”>‘ + tagCreate
+ ‘</Value></Eq></Where></Query>‘;
//Create an array of all list items which match the query
var items = lists.getListItems(‘Tags‘, ”, sQuery, ”, 1, ”);
if (items.status == 200)
var rows = items.responseXML.getElementsByTagName(‘z:row‘);
try { rows = (rows.length) ? rows : items.responseXML.getElementsByTagNameNS(‘*‘,’row‘); }
catch (err) { }
//If one or more rows are returned then this would indicate a duplicate and return false, else return true
if (rows.length > 0)
return false; }
else { return false;}
return true;

At this stage we now have the main function, a function to get the tags value from the form field and the function to call the database and query the table for duplicates. The only thing we have left to do is create the soap request which requires one more function. This following function will create a string variable containing the XML required for the soap request to update a table. We will then create a XMLHttpRequest object, load in the XML and send the request to update the table with a new list item:

function SaveListItem(Title)
var soapRequest = ‘<?xml version=”1.0″ encoding=”utf-8″?>‘ +’<soap12:Envelope xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xmlns:xsd=”http://www.w3.org/2001/XMLSchema” xmlns:soap12=”http://www.w3.org/2003/05/soap-envelope”>’
+‘ <soap12:Body>’
+‘ <UpdateListItems xmlns=”http://schemas.microsoft.com/sharepoint/soap/”>’
+‘ <listName>Tags</listName>’
+‘ <updates>’
+‘<Batch OnError=”Continue”>’
+‘ <Method ID=”1″ Cmd=”New”>’
+‘ <Field Name=”Title”>’ + Title + ‘</Field>’
+‘ </Method>’
+‘ </updates>’
+‘ </UpdateListItems>’
+‘ </soap12:Body>’
xmlHttp=new XMLHttpRequest();
‘http://cspace.icr.ac.uk/corporate/informationtechnology/webteam/knowledgebase/_vti_bin/Lists.asmx’, true);
xmlHttp.setRequestHeader(‘Content-Type‘,‘application/soap+xml; charset=utf-8‘);

And there you go, we now have the full code for creating tags with the validation which checks for tag duplicates. Once this code has been implemented give it a try, create a few tags and then test the duplicate code.

Looking at some of the code I’m sure you will find potential for other projects, especially the soap request code, very useful if you want to update lists through JavaScript.

For more information on the soap requests that can be created for lists in SharePoint go to a site in the SharePoint implementation and go to the following location:

http://<SharePoint Site>/_vti_bin/Lists.asmx

Comments are closed.