Monday, February 15, 2016

Using SPServices to help populate fields in a SharePoint form

image

I know SPServices is old skool and so am I. We both go very well in hand with web services indeed, but we do enjoy the occasional re-write to new world of REST. Honestly!

I have a form where based on a lookup to another list I should populate, or copy values, over to some fields. Pretty simple task, which is not out of the box.

As I hate writing plumbing code I pinged Marc Anderson and found out that his SPServices library has a method named SPDisplayRelatedInfo. This method is meant to be attached to the drop-down tied to the look-up list, and will pull in related data and render it as an inline table.

(Image borrowed from https://spservices.codeplex.com)

In my case I wanted to populate the Site name, Department and Responsible person based on the item selected in the below drop-down.

image

The configuration for this can look like below, and pay attention to line 5.

$().SPServices.SPDisplayRelatedInfo({
  columnName: "Applicable finding",
  relatedList: "Findings",
  relatedColumns: ["PzlInspector", "PzlSiteName", "PzlDepartment"],
  displayFormat: "none",
  matchOnId: true,
  completefunc: function(data) {
      if( $('select[id^="PzlFindingLookup"]').val() != 0) {
        setFormValues(data);
      }
  }
});

displayformat = none is an extension I added myself, as I don’t want to render out related information, I only want the data so that I can populate forms (it’s added as an issue at https://github.com/sympmarc/SPServices/issues/28) .

In the completefunc callback I pick up the returned data and fill out the form fields. The start of my setFormValues function looks like this:

function setFormValues(data) {
    var siteName = data.attr("ows_WoWSiteName");
    var inspector = data.attr("ows_WoWInspector");    
    var departmentItemId = data.attr("ows_WoWDepartment").split(";")[0];

The real magic is of course the code which populates the people picker as well as the taxonomy field in the form. Ping me if you are interested and I’ll clue you in.

Time saved is time I can spend on blogging

All in all, I saved myself from writing the jQuery needed to attach to the drop-down, as well as the API call to pull in the related item. When saving time, I don’t care how old skool it as long as it works :-)

3 comments:

  1. Hi there - I'm stumbling onto your post trying to do something similar minus any people pickers. I essentially want to look up values from another list to populate my current form based on a dropdown. I have about 20 fields I want to populate, which are either text fields or dropdowns (similar to your department scenario).

    For a text field or a choice column, do I need to do anything except for implement a similar SetFormValues function like you have? what is the "ows_WoWSiteName" referencing in your case?

    I think this is exactly what I'm looking for so I'm glad I found your post :)

    ReplyDelete
  2. ows_WoWSitename is the name of a column. Haven't used spservices in a while and suggest asking on the spservices github.

    ReplyDelete
  3. Any chance you could dig up the rest of your setFormValues function or is this too far gone?

    I'll ask on the spservices github regardless - thanks!

    ReplyDelete