jQuery and SharePoint id

It has been a while since I’ve posted anythin new, this because the new focus for programming has been SharePoint and jQuery at my new job.

I now work for CACI as a sub-contractor on a government job. They mainly use ColdFusion and HTML for their pages, but are currently switching over to SharePoint 2013. And by switching over, I mean redoing Lotus Notes apps and other non-web apps onto SharePoint. Being a government job, also means that SharePoint is locked down in ways that makes customization limited. Apparently to get around such limitations, Microsoft has provided JSOM to access the list data and you can use JavaScript and jQuery to modify the Pages. Fun. Fun. Fun.

There are a lot of examples for JSOM and jQuery, so I am not sure what I will post about it in the future. Maybe if I figure out something worthy, I will make a post. Right now, I am just going to post something that I find annoying.

SharePoint isn’t one of my favorite programs, but knowing how to use and manipulate it helps pay the bills. When you want to do anything in SharePoint, you add a list (which they have renamed to “apps” in 2013). To add or edit things in the list, you normally use a form. SharePoint builds these automatically based off of the columns in the list. Fairly straight forward process. Normally, if you wanted to modify the form, you would use InfoPath. But due to restrictions, license, end-of-life, etc… that’s no longer an option. This is where jQuery comes in.

A form for a list is actually a Page. And since it is a Page, you can edit it in the browser and add a Web Part. If you add a Script Editor web part, you can embed JavaScript, jQuery, CSS and HTML. Just remember to do it for the New, Edit and View forms, because they are 3 different Pages. When you want to do something that modifies a form element, then here comes the issue with SharePoint.

Form elements have the “id” property to help finding it on the page. SharePoint creates the “id” property using a combination of the column name and a long alpanumeric value. Good luck figuring that out.

With jQuery, you can find an element, but you need a starting point. For the moment, you can find the No Break <nobr> tag that wraps each for fields Title. From there, you can find the nearest table row <tr> and then finally find the element you are looking for with a Title similar the column name. Required columns are appeneded with “Required Field”, so you can’t look for an exact match.

<br />
$(&quot;nobr:contains('MY Title')&quot;).closest(&quot;tr&quot;).find(&quot;input[title*='MY Title']&quot;);<br />

You could just do the find part, if you were sure there wouldn’t be a similar Title, but it is probably best to narrow it down.

At this point, I could get the “id” property, but that is apparently pointless. Just add another “.” and do whatever you need; listener function, css, value, etc…

Lesson learned the hard way.