Tuesday, September 18, 2012

You may change the types of form field controls in SharePoint with jQuery!

var innerHtml = $(detail24).html();
var replacementHtml = "<select id=";
replacementHtml = replacementHtml + $(innerHtml).find('INPUT').attr('id');
replacementHtml = replacementHtml + " name=";
replacementHtml = replacementHtml + $(innerHtml).find('INPUT').attr('name');
replacementHtml = replacementHtml + "><option value=''>--make a selection--</option>
      </select>"
$(detail24).html(replacementHtml);
retrieveVisnItems();

 
 

In the first line of code above, I the scrape the contents out of a table detail. If I were to put the HTML to the screen with a JavaScript alert it would look like so:

Share photos on twitter with Twitpic

In the next few lines of code I then make a select list with the same id and name as the text input in the blob of html I scraped. I next replace the contents of the table detail I scraped with the html for my select list. The last line is retrieveVisnItems(); which will allow me to reach into a different SharePoint SPWeb (assuming I have appropriate permissions) and grab the contents of a list there to populate my own select list with content from this somewhat external source.

function retrieveVisnItems() {
   var clientContext = new SP.ClientContext('/sites/whatever');
   var oList = clientContext.get_web().get_lists().getByTitle('VISN');
   var camlQuery = new SP.CamlQuery();
   camlQuery.set_viewXml('<View><Query></Query></View>');
   this.collListItem = oList.getItems(camlQuery);
   clientContext.load(collListItem);
   clientContext.executeQueryAsync(Function.createDelegate(this,
      this.onVisnQuerySucceeded),
      Function.createDelegate(this, this.onQueryFailed));
}
   
function onVisnQuerySucceeded(sender, args) {
   var formtablerows = $(".ms-formtable").attr('rows');
   var localeselect = $(formtablerows[24]).find('select:first');
   var listItemEnumerator = collListItem.getEnumerator();
   while (listItemEnumerator.moveNext()) {
      var oListItem = listItemEnumerator.get_current();
      $(localeselect).append($('<option>
            </option>').val(oListItem.get_item('VISN')).html(
            oListItem.get_item('VISN') + " " + oListItem.get_item('FriendlyName')));
   }
}
   
function onQueryFailed(sender, args) {
   alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

 
 

This is a way of changing a SharePoint form field with jQuery. In this example I change a number type field (input type=text) to a select list to constrain the possible numbers entered to those in a list in another source. I have to scrape the id and name of the input I wish to reshape (replace) because it will vary from deployment to deployment as SharePoint is like that. Note that it is easy to fish for attributes within a string holding HTML with jQuery. I was no effort at all to get at what I wanted.

 
 

In another place in code I make sure that a user cannot submit the form without picking something other than the default value from the select list I made:

if($(locationselection+":selected").text().indexOf("make a selection") >= 0)
{
   emptyIfAllIsWell = donotreturnemptystring(emptyIfAllIsWell, "You must specify a
         Location Number!");
}

 
 

I tried to solve this same problem before by making a select list next to the number field which I planned to hide and then to populate a value into the number field whenever the select list changed. ...Too much work and I couldn't get it working. I also thought to just use a lookup or other canned drop down list in SharePoint but then the values I added from an external source wouldn't jive with what SharePoint expected the possibilities to be.

No comments:

Post a Comment