I've been tasked to find out how much of what we typically do in Classic Forms designer can be done in the Modern Forms Designer, but I'm having so much trouble just attempting to get basic JavaScript functionality out of the New Forms Designer.
What I have:
A Demo form which contains a single-line Field for data lookup and a radio button field to select the type of data provided for a look up, (we have 3 different means of looking up a user, DN, NetId, and UIN.) and a Custom HTML with a button which triggers the Data lookup function, followed by a bunch of fields which are populated with data from the lookup.
The Classic Forms Demo Form uses an external JS file as well as local JavaScript which imports the external file and sets up the data import for the form, so local JavaScript has pull method which determines which method data should be pulled, calls the external JavaScript file's methods to pull the data, then uses the external JS files methods to retrieve the pulled data and put it into the form's fields.
In Classic Designer the first things the local JavaScript does is import the external JavaScript file, which can be done on the external JavaScript tab now, then it sets up the button to call the pull function:
$( document ).ready(function() { $(document).on('click','.iAmButton', pullDsData); });
So since New Forms Designer JavaScript doesn't have jQuery, I instead just update the Custom HTML to have an onclick propery instead:
<p><input type="button" value="Query Web Service" onclick="pullDsData();" class="iAmButton"></p>
I convert the pullDsData method to use the new LFForms object, and add that to the "inline" javascript tab. Preview the Form and click the button... and Nothing... Check the Dev tools console and I find this:
Uncaught ReferenceError: pullDsData is not defined
at HTMLInputElement.onclick (0:1:1)
onclick @ 0:1
I double-check my converted LFForm object "inline" JavaScript again to confirm I have the method there...
async function pullDsData() { var dataIn = LFForm.getFieldValues({fieldId: 1}); var dataType = LFForm.getFieldValues({fieldId: 2}); if (dataType == "UIN") { useDirectorySearchUIN(dataIn); } else if (dataType == "NetId") { useDirectorySearchNetId(dataIn); } else { useDirectorySearchDn(dataIn); } LFForm.setFieldValues({fieldId: 5}, getDirectorySearchAllJSON()); LFForm.setFieldValues({fieldId: 6}, getDirectorySearchCn()); LFForm.setFieldValues({fieldId: 7}, getDirectorySearchOfficialName()); LFForm.setFieldValues({fieldId: 8}, getDirectorySearchTitle()); LFForm.setFieldValues({fieldId: 9}, getDirectorySearchFirstName()); LFForm.setFieldValues({fieldId: 10}, getDirectorySearchLastName()); ... }
So currently I can't even test if my converted JavaScript with the LFForm object is working as I can't get a simple onClick to call the function...
Is there something obvious here that I'm just completely missing ?