Hi Plumsail,
I want to add a spinner load icon when users create a new form.
Currently, the entire form loads showing users that the form is being created. Is it not possible to show a spinner icon instead so users don't see the form being created when they create a new form?
Thanks in advance!
Hello @DryChips,
When do you want to show the spinner? When user submits the form? Do you redirect user to edit form once a new item is created?
Hiya,
I want it to appear when user creates a brand new form.
So when I click 'New' in SharePoint it will create a new form.
I can see the form being created on the screen which is not good. I want a spinner animation to run and then once the form is fully ready and created, the spinner should automatically disappear and the form should be ready to fill out.
This happens but the spinner only lasts for 1 second and then the form begins to render a little before it is FULLY ready.
You can add your own div with loading indicator in fd.created handler and remove it in 5 seconds or more when the form is completly loaded. This is the code sample:
fd.created(function(vue) {
$('<div id="loading"> <img id="loading-image" src="Image_URL" alt="Loading..." /></div>').insertBefore('.SPCanvas')
$('.SPCanvas').hide()
setTimeout(function(){$('#loading').remove(); $('.SPCanvas').show() }, 5000)
});The main issue I am having is that when I load the form, I see a flash of the font change which is not ideal. Is there any way to not show it?
My initial thought was placing the font code at the top in the JS Editor but no luck 
Here is my JS code:
//This will run all the code below. [DO NOT REMOVE]
fd.spRendered(function(){
/*This code will auto-populate all the Org Hierarchy fields
function populateFields() {
//get departments
var orgL7 = fd.field('Department').value.LookupValue;
//make sure both values are selected
if(orgL7) {
var filter = "Org_x0020_L7 eq '" + orgL7 + "'";
//filter list and get item values
pnp.sp.web.lists.getByTitle('OrgHierarchy').items.filter(filter).get().then(function(item){
fd.field('Speciality').value = item[0].Id;
fd.field('Directorate').value = item[0].Id;
fd.field('Division').value = item[0].Id;
fd.field('Hospital').value = item[0].Id;
});
}
}
//call function on field change
fd.field('Department').$on('change', populateFields);*/
//This code will auto-populate all the Org Hierarchy fields v2
function populateFields() {
//get CostCenter
var costCentre = fd.field('Cost_Centre').value;
//get departments
var orgL7 = fd.field('Department').value.LookupValue;
//make sure both values are selected
if(costCentre && orgL7) {
var filter = "Cost_x0020_Centre eq '" + costCentre + "' and Org_x0020_L7 eq '" + orgL7 + "'";
//filter list and get item values
pnp.sp.web.lists.getByTitle('OrgHierarchy').items.filter(filter).get().then(function(item){
fd.field('Speciality').value = item[0].Id;
fd.field('Directorate').value = item[0].Id;
fd.field('Division').value = item[0].Id;
fd.field('Hospital').value = item[0].Id;
});
}
}
//call function on field change
fd.field('Cost_Centre').$on('change', populateFields);
fd.field('Department').$on('change', populateFields);
/////////////////////////////////////////////////SHAREPOINT Styling CODES//////////////////////////////////////////////////////////////////////
//This code retrives a custom font from GoogleFonts
var imported = document.createElement('link');
imported.href = "https://fonts.googleapis.com/css?family=Fira+Sans:wght@500" //for example
imported.rel = "stylesheet"
document.head.appendChild(imported);
//This code retrieves animations from the following link and places this inside the from.
var imported = document.createElement('link');
imported.rel = 'stylesheet';
imported.href = 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css';
document.head.appendChild(imported);
//This code applies custom Icons in the Wizard control.
fd.container('Wizard').icons = ['Questionnaire', 'People', 'PeopleRepeat', 'EntitlementRedemption'];
//This code will move users back up the form whilst navigating through the wizards.
fd.container("Wizard").widget.$on("update:startIndex", function() {
$('.Logos')[0].scrollIntoView({ behavior: 'smooth' });
});
//This Code Hides the SAVE button on the SharePoint Toolbar
fd.toolbar.buttons[0].style = "display: none;"
//This Code Styles the Close button on the SharePoint Toolbar
fd.toolbar.buttons[1].style = "color: white;"
//This will apply a page break to the form when User exports form as PDF
fd.pdfOptions = {
forcePageBreak: '.RTermination-Grid'
};
//This code will dynamically increase/decrease the height of the Multiline text field
var textArea = fd.field('Reason_For_Difference').$refs.textarea;
function recalcHeight() {
textArea.style.height = (textArea.scrollHeight > textArea.clientHeight) ? (textArea.scrollHeight) + "px" : "120px";
}
recalcHeight();
$(textArea).keyup(recalcHeight);
//This code clears the form when the user hits the back button in browser
//Clear Plumsail local storage items
//Debugging Code, helps to debug any code in browsers console
//Run any code without the 'spRendered(function(){}- Event Handler
window.fd = fd;
window.$ = $;
window.pnp = pnp;
////////////////////////////////////////////////////***END***/////////////////////////////////////////////////////////////////////
//Terminating Assignment Disabler - [Wizard 1]
//This will set the 'Term Assignment' Field to 'No' when user selects 'Yes' for 'Leaving Trust Field' and Vice Versa
function disableTermAssignment(){
if (fd.field('Question_2').value == 'Yes') {
//This will disable the Term Assignment Field and set the Value to 'No'
fd.field('Question_3').disabled = true;
(fd.field('Question_3').value = 'No');
}
else if (fd.field('Question_2').value == 'No'){
//This will disable the Term Assignment Field and set the value to 'Yes'
fd.field('Question_3').disabled = true;
(fd.field('Question_3').value = 'Yes');
}
}
//calling the TermAssignment function when 2nd Prelim Question Changes
fd.field('Question_2').$on('change',disableTermAssignment);
//Calling TermAssignment on Form load
disableTermAssignment();
//Leaving Trust Field Value Setter - [Wizard 1]
//This will set the 'Leaving Trust' Field to 'Yes' when User selects 'No' for Term Assignment Field and Vice Versa
function LeavingTrust(){
if (fd.field('Question_3').value == 'No') {
//This will Set the Leaving Trust field to 'Yes'
(fd.field('Question_2').value = 'Yes');
}
else if (fd.field('Question_3').value == 'Yes') {
//This will Set the Leaving Trust field to 'No'
(fd.field('Question_2').value = 'No');
}
}
//calling the TermAssignment function when 3rd Prelim Question Changes
fd.field('Question_3').$on('change',LeavingTrust);
//Calling TermAssignment on Form load
LeavingTrust();
//Hides Leave-A-Post Tab AND Leave-A-Post Review fields - [Wizard 1 & Wizard 3]
//This code must be used in conjunction with: "/*Hides Disabled Tabs - [Wizard 3]*/" which is availble in the CSS editor.
//This code must also be used in conjunction with: "/*Tabs [Termination] & [Leave A Post] - [Wizard 3]*/" which is available in the CSS editor.
function TabHider() {
if (fd.field('Question_2').value == 'Yes') {
fd.container('Tab0').tabs[1].disabled = true;
fd.container('Tab0').tabs[0].disabled = false;
fd.container('Tab0').setTab(0);
//Shows Plumsail Read-Only field
$(fd.field('RLeavingTrust').$parent.$el).show();
//Hides PLumsail Read-Only field
$(fd.field('RTermAssignment').$parent.$el).hide();
//Shows only Termination Questions in Review Field. Place ALL Plumsail fields inside a grid.
$('.RTermination-Grid').show();
//Hides only the Leave-A-Post Question in Review Field. Place all Plumsail fields inside a grid.
$('.RLeave-A-Post-Grid').hide()
}
//Hides Termination Tab and Termination Review Fields - [Wizard 1 & Wizard 3]
else if (fd.field('Question_2').value == 'No'){
fd.container('Tab0').tabs[0].disabled = true;
fd.container('Tab0').tabs[1].disabled = false;
fd.container('Tab0').setTab(1);
$(fd.field('RTermAssignment').$parent.$el).show();
$(fd.field('RLeavingTrust').$parent.$el).hide();
$('.RLeave-A-Post-Grid').show();
$('.RTermination-Grid').hide();
}
}
//call TabHider when a user changes status for Question2
fd.field('Question_2').$on('change',TabHider);
//call TabHider on form load
TabHider();
///This code will disable Question 2 when the Terms and Conditions has been checked
function disableQuestions(){
if (fd.field('Terms').value.length != 0); {
fd.field('Question_2').disabled = true;
}
}
//calling Terms and condiition
fd.field('Terms').$on('change',disableQuestions);
//This code will determine what type of form is being submitted
//Make sure you add 'Display:none;' in the fields 'Style' settings to hide the field from User
function formtype(){
if (fd.field('Question_2').value == 'Yes' && fd.field('Question_3').value == 'No') {
(fd.field('Form_Type').value = 'Termination')
}
else if (fd.field('Question_2').value == 'No' && fd.field('Question_3').value == 'Yes') {
(fd.field('Form_Type').value = 'Leave-A-Post')
}
else fd.field('Form_Type').value = '';
}
//calling formtype when Question 2 changes
fd.field('Question_2').$on('change',formtype);
///////////////////////////////////////////////// Auto-Populate Hierarchy //////////////////////////////////////////////////////
////////////////////////////////////////***END***////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////FIELD DESCRIPTORS [Wizard 3]///////////////////////////////////////////////////////////
//This code applies a field description under the Employee termination date - [Wizard 3]
//It also applies BOLD styling to the description.
fd.field('Employee_Termination_Date').description = 'Please remind your Employee to Print/Save copies of their P60/payslips before the termination date'
$(fd.field('Employee_Termination_Date').$el).ready(function(){
$(fd.field('Employee_Termination_Date').$el).find('.text-muted').html('Please remind your Employee to Print/Save copies of their P60/payslips before the <b>termination date</b>')
})
//This code applies a field description under employee last working day field- [Wizard 3]
fd.field('Employee_Last_Working_Day').description = 'The last working day may be before the termination date e.g. employee uses annual leave remaining'
//This code applies a field description under the Reason for Difference field - [Wizard 3]
fd.field('Reason_For_Difference').description = 'Please provide a short reason for the difference'
////////////////////////////////////////***END***////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////Code Powering WIZARD 3 ///////////////////////////////////////////////////////////
//checks if last working day > termination date [DO NOT DELETE]
fd.field('Employee_Last_Working_Day').validators.push({
name: '',
error: "Employee last Working Day must be on or before the Termination Date",
validate: function(value) {
if (fd.field('Employee_Last_Working_Day').value > fd.field('Employee_Termination_Date').value){
$(fd.field('Reason_For_Difference').$parent.$el).hide();
return false;
}
return true;
}
});
//This code will show/hide the reason for difference field based on user selection.
function showhideReasonForDifference(){
if (fd.field('Employee_Termination_Date').value == '' && fd.field('Employee_Last_Working_Day').value == ''){
//hide reasonForDifference field when no difference between termination & last working day
$(fd.field('Reason_For_Difference').$parent.$el).hide();
//Hides the field in the review wizard
$(fd.field('RReasonForDifference').$parent.$el).hide();
}
//show reasonForDifference when there is a difference between termination & last working day
if (fd.field('Employee_Termination_Date').value > fd.field('Employee_Last_Working_Day').value){
$(fd.field('Reason_For_Difference').$parent.$el).show();
$(fd.field('RReasonForDifference').$parent.$el).show();
}
else {
$(fd.field('Reason_For_Difference').$parent.$el).hide();
$(fd.field('RReasonForDifference').$parent.$el).hide();
fd.field('Reason_For_Difference').clear();
}
}
// Calling function when Destination on Leave value changes
fd.field('Employee_Last_Working_Day').$on('change',showhideReasonForDifference);
// Calling function on form loading
showhideReasonForDifference();
//This code will auto-populate the resignation type - [Wizard 3]
function resignationType() {
//get departments
var LeavingReason = fd.field('Leaving_Reason').value.LookupValue;
//make sure both values are selected
if(LeavingReason) {
var filter = "Title eq '" + LeavingReason + "'";
//filter list and get item values
pnp.sp.web.lists.getByTitle('Leaving_Reason').items.filter(filter).get().then(function(item){
fd.field('Resignation_Type').value = item[0].Id;
});
}
}
//call function on field change
fd.field('Leaving_Reason').$on('change', resignationType);
//NHS ORG LEAVING TO FIELD - [Wizard 3&4]
//This code shows/hides the 'NHS-Org Leaving-TO' field when user selects 'NHS Organisation' in 'Destination On Leaving' field.
//This also shows/hides this in the review field if the user selects the option.
function showHideField() {
if (fd.field('Destination_On_Leaving').value == 'NHS Organisation') {
$(fd.field('NHS_Organisation_Leaving_To').$parent.$el).show();
$(fd.field('RNHSOrganisationLeavingTo').$parent.$el).show();
}
else {
$(fd.field('NHS_Organisation_Leaving_To').$parent.$el).hide();
$(fd.field('RNHSOrganisationLeavingTo').$parent.$el).hide();
fd.field('NHS_Organisation_Leaving_To').clear();
fd.field('VPD').clear();
}
}
// Calling function when Destination on Leave value changes
fd.field('Destination_On_Leaving').$on('change',showHideField);
// Calling function on form loading
showHideField();
function NHSVPD() {
//get departments
var NHSOrg = fd.field('NHS_Organisation_Leaving_To').value.LookupValue;
//make sure both values are selected
if(NHSOrg) {
var filter = "NHS_x0020_Organisation eq '" + NHSOrg + "'";
//filter list and get item values
pnp.sp.web.lists.getByTitle('NHS Organisations').items.filter(filter).get().then(function(item){
fd.field('VPD').value = item[0].Id;
});
}
}
//call function on field change
fd.field('NHS_Organisation_Leaving_To').$on('change', NHSVPD);
////////////////////////////////////////***END***////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////READ ONLY FIELDS [WIZARD4]///////////////////////////////////////////////////////////
fd.field('RERostering').disabled = true
fd.field('Question_1').$on('change', function() {
fd.field('RERostering').value = fd.field('Question_1').value;
})
fd.field('RLeavingTrust').disabled = true
fd.field('Question_2').$on('change', function() {
fd.field('RLeavingTrust').value = fd.field('Question_2').value;
})
fd.field('RTermAssignment').disabled = true
fd.field('Question_3').$on('change', function() {
fd.field('RTermAssignment').value = fd.field('Question_3').value;
})
fd.field('RSupervisorEmail').disabled = true
fd.field('Supervisor_Email_Address').$on('change', function() {
fd.field('RSupervisorEmail').value = fd.field('Supervisor_Email_Address').value;
})
fd.field('RSupervisorFirstName').disabled = true
fd.field('Supervisor_First_Name').$on('change', function() {
fd.field('RSupervisorFirstName').value = fd.field('Supervisor_First_Name').value;
})
fd.field('RSupervisorLastName').disabled = true
fd.field('Supervisor_Last_Name').$on('change', function() {
fd.field('RSupervisorLastName').value = fd.field('Supervisor_Last_Name').value;
})
fd.field('RTitle').disabled = true
fd.field('Titles').$on('change', function() {
fd.field('RTitle').value = fd.field('Titles').value;
})
fd.field('RFirstName').disabled = true
fd.field('First_Name').$on('change', function() {
fd.field('RFirstName').value = fd.field('First_Name').value;
})
fd.field('RLastName').disabled = true
fd.field('Last_Name').$on('change', function() {
fd.field('RLastName').value = fd.field('Last_Name').value;
})
fd.field('RAssignNum').disabled = true
fd.field('Assignment_Number').$on('change', function() {
fd.field('RAssignNum').value = fd.field('Assignment_Number').value;
})
fd.field('REmailAddress').disabled = true
fd.field('Email_Address').$on('change', function() {
fd.field('REmailAddress').value = fd.field('Email_Address').value;
})
fd.field('RPayBand').disabled = true
fd.field('Pay_Band').$on('change', function() {
fd.field('RPayBand').value = fd.field('Pay_Band').value;
})
fd.field('RCostCentreCode').disabled = true
fd.field('Cost_Centre').$on('change', function() {
fd.field('RCostCentreCode').value = fd.field('Cost_Centre').value;
})
fd.field('RDepartment').disabled = true
fd.field('Department').$on('change', function() {
fd.field('RDepartment').value = fd.field('Department').value.LookupValue;
})
//This code will retrieve the auto-populated values from Wizard 2
fd.field('RSpeciality').disabled = true
fd.field('Speciality').$on('change', function(value){
//check that field has no additional data
if(typeof value == 'number'){
fd.field('Speciality').reloadValue().then(function(){
fd.field('RSpeciality').value = fd.field('Speciality').value.LookupValue;
})
}
else if(value != null) {
fd.field('RSpeciality').value = value.LookupValue
}
})
//Directorate
fd.field('RDirectorate').disabled = true
fd.field('Directorate').$on('change', function(value){
//check that field has no additional data
if(typeof value == 'number'){
fd.field('Directorate').reloadValue().then(function(){
fd.field('RDirectorate').value = fd.field('Directorate').value.LookupValue;
})
}
else if(value != null) {
fd.field('RDirectorate').value = value.LookupValue
}
})
//Division
fd.field('RDivision').disabled = true
fd.field('Division').$on('change', function(value){
//check that field has no additional data
if(typeof value == 'number'){
fd.field('Division').reloadValue().then(function(){
fd.field('RDivision').value = fd.field('Division').value.LookupValue;
})
}
else if(value != null) {
fd.field('RDivision').value = value.LookupValue
}
})
//Hospital
fd.field('RHospital').disabled = true
fd.field('Hospital').$on('change', function(value){
//check that field has no additional data
if(typeof value == 'number'){
fd.field('Hospital').reloadValue().then(function(){
fd.field('RHospital').value = fd.field('Hospital').value.LookupValue;
})
}
else if(value != null) {
fd.field('RHospital').value = value.LookupValue
}
})
fd.field('RStaffGroup').disabled = true
fd.field('Main_Staff_Group').$on('change', function() {
fd.field('RStaffGroup').value = fd.field('Main_Staff_Group').value;
})
fd.field('RTerminationDate').disabled = true
fd.field('Employee_Termination_Date').$on('change', function() {
fd.field('RTerminationDate').value = fd.field('Employee_Termination_Date').value.toDateString();
})
fd.field('RLastWorkingDay').disabled = true
fd.field('Employee_Last_Working_Day').$on('change', function() {
fd.field('RLastWorkingDay').value = fd.field('Employee_Last_Working_Day').value.toDateString();
})
fd.field('RReasonForDifference').disabled = true
fd.field('Reason_For_Difference').$on('change', function() {
fd.field('RReasonForDifference').value = fd.field('Reason_For_Difference').value;
})
fd.field('RLeavingReason').disabled = true
fd.field('Leaving_Reason').$on('change', function() {
fd.field('RLeavingReason').value = fd.field('Leaving_Reason').value.LookupValue;
})
//ResignationType
fd.field('RResignationType').disabled = true
fd.field('Resignation_Type').$on('change', function(value){
//check that field has no additional data
if(typeof value == 'number'){
fd.field('Resignation_Type').reloadValue().then(function(){
fd.field('RResignationType').value = fd.field('Resignation_Type').value.LookupValue;
})
}
else if(value != null) {
fd.field('RResignationType').value = value.LookupValue
}
})
fd.field('RDestinationOnLeaving').disabled = true
fd.field('Destination_On_Leaving').$on('change', function() {
fd.field('RDestinationOnLeaving').value = fd.field('Destination_On_Leaving').value;
})
fd.field('RNHSOrganisationLeavingTo').disabled = true
fd.field('NHS_Organisation_Leaving_To').$on('change', function() {
fd.field('RNHSOrganisationLeavingTo').value = fd.field('NHS_Organisation_Leaving_To').value.LookupValue;
})
fd.field('RNHSOrganisationLeavingTo').disabled = true
fd.field('NHS_Organisation_Leaving_To').$on('change', function() {
fd.field('RNHSOrganisationLeavingTo').value = fd.field('NHS_Organisation_Leaving_To').value.LookupValue;
})
//ResignationType
fd.field('RVPD').disabled = true
fd.field('VPD').$on('change', function(value){
//check that field has no additional data
if(typeof value == 'number'){
fd.field('VPD').reloadValue().then(function(){
fd.field('RVPD').value = fd.field('VPD').value.LookupValue;
})
}
else if(value != null) {
fd.field('RVPD').value = value.LookupValue
}
})
fd.field('RHolidayHoursDue').disabled = true
fd.field('Holidays_Hours_Due').$on('change', function() {
fd.field('RHolidayHoursDue').value = fd.field('Holidays_Hours_Due').value;
})
fd.field('RHolidayHoursOverpaid').disabled = true
fd.field('Holiday_Hours_Overpaid').$on('change', function() {
fd.field('RHolidayHoursOverpaid').value = fd.field('Holiday_Hours_Overpaid').value;
})
fd.field('RLieuHoursOutstanding').disabled = true
fd.field('Lieu_Hours_Outstanding').$on('change', function() {
fd.field('RLieuHoursOutstanding').value = fd.field('Lieu_Hours_Outstanding').value;
})
fd.field('RPaymentsLieuNotice').disabled = true
fd.field('Payments_Made_In_Lieu_Notice').$on('change', function() {
fd.field('RPaymentsLieuNotice').value = fd.field('Payments_Made_In_Lieu_Notice').value;
})
fd.field('RDateLeavingPost').disabled = true
fd.field('Date_Employee_Leaving_Post').$on('change', function() {
fd.field('RDateLeavingPost').value = fd.field('Date_Employee_Leaving_Post').value.toDateString();
})
////////////////////////////////////////***END***////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////SUBMIT SECTION CODE [WIZARD4]///////////////////////////////////////////////////////////
//User Stamp - [Wizard 4]
//This code determines the User who is filling out the form.
//Use this code In-conjunction with 'Declaration Check-box FOR NAME STAMP' code below.
fd.field('Name_Stamp').value = _spPageContextInfo.userDisplayName;
fd.field('Name_Stamp').disabled = true;
//Date Stamp - [Wizard 4]
//This code determines the current date and time and displays this alongside the UserName Stamp.
//Use this code In-conjunction with 'Declaration Check-box for DATE STAMP code' below.
fd.field('Time_Stamp').value = new Date().toLocaleString();
fd.field('Time_Stamp').disabled = true;
//ShowHides Name and Date Stamp
function showhidefield(){
if (fd.field('Submit_Declaration').value == 'I understand that this information provided to me is for internal use only.') {
$(fd.field('Name_Stamp').$parent.$el).show();
$(fd.field('Time_Stamp').$parent.$el).show();
}
else {
$(fd.field('Name_Stamp').$parent.$el).hide();
$(fd.field('Time_Stamp').$parent.$el).hide();
}
}
// Calling function when Destination on Leave value changes
fd.field('Submit_Declaration').$on('change',showhidefield);
// Calling function on form loading
showhidefield();
////////////////////////////////////////***END***////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////FIELD VALIDATIONS///////////////////////////////////////////////////////////
//GLOBAL ERROR Message
//This code will apply a Global error message when mandatory fields have not been filled in the form.
fd.created(function(vue) {
fd.messages.Failure_General = "An error has occured. Please check the browser console (F12).";
fd.messages.PlumsailForm_CorrectErrors = "Please correct the following error(s) below:";
fd.messages.PlumsailForm_Submission_Error = "An error has occured while saving the form. Please check the console (F12).";
fd.messages.Failure_ItemNotFound = "An item was not found. It may have been deleted or renamed by another user.";
fd.messages.RequiredValidator_Error = "Please fill out the field";
fd.messages.SPDataTable_AddNewItem = "Add new item";
fd.messages.SPDataTable_ListNotFoundError = "List does not exist.";
fd.messages.SPDataTable_Upload = "Upload";
fd.messages.SPDataTable_Uploading = "Uploading...";
fd.messages.SPFormToolbar_Close = "Close";
fd.messages.SPFormToolbar_Edit = "Edit";
fd.messages.SPFormToolbar_Save = "Save";
fd.messages.SPFormToolbar_Saving = "Saving...";
fd.messages.PlumsailForm_Submission_Success = "The form has been submitted successfully!";
});
//E-Rostering field validation - [Wizard 1]
fd.field('Question_2').validators.push({
name: 'Title Field',
error: 'Please select an answer!',
validate: function(value) {
if (!value) {
return false;
}
return true;
}
});
//Terms and conditions validation - [Wizard 1]
fd.field('Terms').validators.push({
name: 'Terms & Conditions',
error: 'Before continuing, please agree to the Terms',
validate: function(value) {
if (value.length == 0) {
return false;
}
return true;
}
});
//Email Address Validation - [Wizard 2]
fd.field('Supervisor_Email_Address').validators.push({
name: '',
error: 'Please enter a valid email address so we can contact you',
validate: function(value) {
if ((/^([A-Za-z\d\.-]+)@([a-z\d-]+)\.([a-z]{2,8})(\.[a-z]{2,8})?$/).test(value)) {
//Applies Colour to the field if Correct input
$($(fd.field('Supervisor_Email_Address').$el).find('input')[0]).attr('style', 'border-color: #6CEE5A; box-shadow: 0 0 5px #6CEE5A;');
return true; // Validation succeded
}
// You land here if it did not succeed
$($(fd.field('Supervisor_Email_Address').$el).find('input')[0]).attr('style', 'border-color:#ff0000; box-shadow: 0 0 5px #ff0000; Color:#ff0000;');
return false;
}
});
//Assignment Number Validation - [Wizard 2]
fd.field('Assignment_Number').validators.push({
name: '',
error: 'Please enter a minimum of 8 digits',
validate: function(value) {
if ((/^\d{8}(-\d{1,2})?$/).test(value)) {
//Applies Colour to the field if Correct input
$($(fd.field('Assignment_Number').$el).find('input')[0]).attr('style', 'border-color: #6CEE5A; box-shadow: 0 0 5px #6CEE5A;');
return true; // Validation succeded
}
// You land here if it did not succeed
$($(fd.field('Assignment_Number').$el).find('input')[0]).attr('style', 'border-color:#ff0000; box-shadow: 0 0 5px #ff0000; Color:#ff0000;');
return false;
}
});
//This code will validate the cost-centre code to a SP list
var ccexists = false;
fd.field('Cost_Centre').validators.push({
name: '',
error: "Please enter a valid 7 digit Cost Centre Code",
validate: function() {
return ccexists;
}
});
fd.field('Cost_Centre').$on('change', function(value){
validateCC(value);
});
//This function is doing a Lookup to the Org Hierarchy SharePoint list
function validateCC(value){
var filter = "Cost_x0020_Centre eq '" + value + "'";
pnp.sp.web.lists.getByTitle("OrgHierarchy").items.filter(filter).getAll().then(function(items){
if ((/^[A-Za-z]\d{6}$/).test(value)) {
$($(fd.field('Cost_Centre').$el).find('input')[0]).attr('style', 'border-color: #6CEE5A; box-shadow: 0 0 5px #6CEE5A;');
ccexists = true;
}
else{
$($(fd.field('Cost_Centre').$el).find('input')[0]).attr('style', 'border-color:#ff0000; box-shadow: 0 0 5px #ff0000; Color:#ff0000;');
ccexists = false;
}
});
};
////////////////////////////////////////***END***////////////////////////////////////////////////////////////////////////////////
localStorage.clear();
fd.clear();
fd.clearStorage();
//////END TAG////
});
///////////////////Nothing to show here
I'm not able to reproduce that. I suppose your form is large and the loading takes more time. Could you please record a short video that demonstrates the behavior.
Thanks man!
Anyone else who runs into this problem, use this code:
Run inside fd.spRendered
change .body to your class name and add display:none; in the style property.
function showgrid(){
$('.body').show();
}
//Shows grid on form loading
showgrid();
