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 reference:

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’)”

The 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.

 

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s