SharePoint

Initialize List Values on Edit in SharePoint Online

sharepoint-list-defaults

SharePoint 365/Online includes out-of-the-box (OOTB) functionality for setting list defaults, and even let’s you use Excel-like formulas to add some customability. But of course there’s limitations, and in those cases, we can turn to custom JavaScript code.

I recently got a request to set a list column value to the initials of the current user, and this is how I did it.

I’m making heavy use of jQuery, so include the CDN (Content Delivery Network) reference:

  src="https://code.jquery.com/jquery-3.1.1.min.js"

Then the key is to find what event to fire code on. I used the DOM Explorer (included in your favorite browser) to find the element of my interest:

  #Hero-WPQ2 a.ms-heroCommandLink:contains('edit')

Then it’s just a simple onClick function:

$(document).on("click", "#Hero-WPQ2 a.ms-heroCommandLink:contains('edit')", function(evt) {
  var t = setInterval(function() {
    if($("#spgridcontainer_WPQ2_leftpane_mainTable").length) {
      clearInterval(t);
      var currentUser= getUserName();
      var initials = currentUser.match(/\b\w/g) || [];
      initials = ((initials.shift() || '') + (initials.pop() || '')).toUpperCase();
      $("#spgridcontainer_WPQ2_leftpane_mainTable tr:last td:eq(2)").text(initials);
    }
  },100);
});

With a couple tricky parts: you gotta give the page time to get into edit mode, thus the setInterval. Also to reference the field, you gotta use the kinda funky reference:

  #spgridcontainer_WPQ2_leftpane_mainTable tr:last td:eq(2)

where tr: last is giving me the last row (new item row) and td:eq(2) is giving me the second column, which is the column I want my initials in.

To get the user name, which we then convert into intials, we use a simple AJAX call:

function getUserName() {
  var endpointUrl =_spPageContextInfo.webAbsoluteUrl + 
    "/_api/SP.UserProfiles.PeopleManager/GetMyProperties";
  var userName = "";

  getJson(endpointUrl)
    .done(function(data) {
      userName = data.d.DisplayName;
    })
    .fail(function(error) {
      console.log(JSON.stringify(error));
    });
    return userName ;
} // getUserName

function getJson(url) {
  return $.ajax({
    async: false,
    url: url,
    type: "GET",
    contentType: "application/json;odata=verbose",
    headers: {"Accept": "application/json;odata=verbose"}
  });
} // getJson

That’s it! Just a couple tricky bits but stick this in a script editor on your list page and you’ll be good to go. You can use similar techniques to set the current date/time, location, or any other bit of data out there.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s