SPJS Functions for Modern

[Kennelly Celeste]

I am about to start a massive site migration from SP2013 on-prem to online, and I am having trouble identifying which functions I’ll still be able to use. Is there a master list of functions/features that have been made available in Modern DFFS, so I know if it’s not there then we need to wait or find alternative solutions?

How about SPJS functions in the CustomJS area? For the first form I’ve migrated, I need to look up data from another list with spjs.utility.getItemByID, but I’m getting the error “spjs is not defined”. Am I missing something?

Thank you!

[Alexander Bautz]

The new Modern DFFS is totally rewritten so most or your custom js from the Classic DFFS version must be rewritten.

I have pinned a thread in this forum that shows the functions that are built in: https://spjsblog.com/forums/topic/custom-js-examples/

In addition you can of course use any custom js that interacts with SharePoint using the REST api that is built into SharePoint.

I see that you mention getItemByID in the tags – I haven’t added these functions so you will have to use the REST api. I have earlier shown some example of CRUD operations you can to with REST – you can find them here. Please note that only the REST examples can be used in the Modern DFFS, and you must remove the wrapper “spjs.utility.getListByUrlName” around the functions as this is a classic DFFS function.

Let me know if you have any specific requirements and I’ll see if that is something I can add to the Modern DFFS.

Alexander

[Kennelly Celeste]

Thanks so much for the info! I’m having trouble figuring out how to apply REST functions without the wrapper. What I need to do is look up the value of the AssignedTo field in a list called XTeamVehicles, when I select the vehicle from a lookup column in a tracking list. Then I just want to display the AssignedTo value in my form. Can you help get me started? Here’s the original function in Classic DFFS:

//DISPLAY Assigned To
function vehicleChange(){
var sVal = $(“#dffs_Vehicle”).find(“option:selected”).val();
if(sVal!==”0″){
var qRes = spjs.utility.getItemByID(
{
“listBaseUrl”:”/sites/fire/adminexecservices/hq”,
“listName”:”Executive Team Vehicles”,
“id”:sVal,
“viewFields”:[“AssignedToLookup”]
}
);
$(“span.vehicleAssigned”).html(qRes[“AssignedToLookup”]);
}else{
$(“span.vehicleAssigned”).html(“”);
}
}

I also noticed there is no way to hide an HTML section using Rules, like there was in Classic DFFS. Is there a way to show HTML sections conditionally?

[Alexander Bautz]

Hiding HTML sections is done by getting the ID from the HTML section when you edit it and using a rule action Hide elements you just paste the ID. Please note that I have found and fixed a bug in triggering rules on-load that I think you might have encountered. In case you toggle the Load jQuery button in the custom js to ON, but you do not have any external js-files loaded in the top of the custom js page on-load rules were never triggered. It is fixed in the latest version v1.0.22.0 that I just published.

Here is a code example that shows you how you can get the value from the other list:

// Use this function if you need to get the list id from the rootfolder (url name) of the list. It is more reliable than querying the list by its title because the title can easily be changed - breaking the code
function getListByUrlName(baseUrl, listUrlName) {
  var deferred = jQuery.Deferred();
  jQuery.ajax({
    "url": baseUrl + "/_api/web/lists/?$filter=RootFolder/Name eq '" + listUrlName + "'&$select=*,Id,Title,RootFolder/Name,RootFolder/ServerRelativeUrl,ParentWebUrl,Fields/Title,Fields/InternalName,Fields/Choices&$expand=Fields,RootFolder",
    "method": "GET",
    "headers": {
      "Accept": "application/json;odata=verbose",
      "content-type": "application/json;odata=verbose"
    },
    "success": function (data) {
      if (data.d.results.length > 0) {
        deferred.resolve(data.d.results[0]);
      }
      deferred.resolve(null);
    },
    "error": function (err) {
      deferred.reject(err);
    }
  });
  return deferred;
}

// This function is called from a rule that triggers on the lookup column like this: LookupColumn.ID | is greater than | 0
// Use the rule action "Call a function" and insert the function name lookupChangedFn
function lookupChangedFn(item, match, rule) {
  // debugger; // Uncomment this line if you want to step through the code in the dev tools to debug
  // Get the ID from the lookup field - change the field name to match your field
  var lookupId = item.YOUR_LOOKUP_FIELD_NAME[0].key;
  // Get the list by it's base url and rootfolder name - change NAME_OF_LIST to match your list root folder name (copy from the address field in the browser) and ensure the AssignedTo field name is correct
  // If the list is not in the same web you must change the parameter _spPageContextInfo.webServerRelativeUrl to a string like this "/sites/your_site"
  getListByUrlName(_spPageContextInfo.webServerRelativeUrl, "NAME_OF_LIST").then((list) => {
    jQuery.ajax({
      "url": list.ParentWebUrl + "/_api/web/lists/getbyid('" + list.Id + "')/items?$filter=Id eq " + lookupId + "&$select=AssignedTo/Id,AssignedTo/Title&$expand=AssignedTo",
      "method": "GET",
      "headers": {
        "Accept": "application/json;odata=verbose",
        "content-type": "application/json;odata=verbose"
      },
      "success": function (data) {
        if (data.d.results.length > 0) {
          var item = data.d.results[0];
          jQuery(".vehicleAssigned").html(item.AssignedTo.Title);
        }
      },
      "error": function (err) {
        console.log("error in query", err);
      }
    });
  });
}

Let me know how this works out.

Alexander

[Author]

Posts