cancel
Showing results for 
Search instead for 
Did you mean: 
Workflow Hero

How to pre-populate a form with data from another item ?

Jump to solution

I am in the following case:

  1. A user clicks on "New item" from the list "Travels".
  2. It selects a value from a first drop-down list (ex: this is a list of countries).
  3. A second drop-down list appears and shows the items in the list "Travels" where the destination country is equal to the selected country in the first drop-down list.
  4. If the user chooses an item in this second drop-down list, then all the fields of the form (text, multiline, person, yes/no, ...) must be pre-populated with the data of the selected item in the second drop-down list.

Actually, the only solution I found is to connect to the list using sp.js and then load the fields manually, which is complicated.

Thank you for your help. 

Reply
10 Replies
Workflow Hero

Re: How to pre-populate a form with data from another item ?

Jump to solution

For information, here is my current script : 

"use strict";

var gTitle = "Title";
var gID = "ID";
var gSite = "Site";
var gRequester = "Requester";
var gTravelers = "Travelers";
var gManager = "Manager_x0020_Name";
var gDestCountry = "Destination_x0020_Country";
var gHSEApproReq = "HSE_x0020_Approval_x0020_Require";
var gCrewVisit = "Crew_x0020_Visit";
var gTelSatNumber = "TelSatNumber";
var gAccomodationDetails = "AccomodationDetails";
var gAgentContactDetails = "AgentContactDetails";
var gClient = "Client";
var gObjective = "Objective";
var gDepartDateToCountry = "Departure_x0020_Date_x0020_to_x0";
var gTripDescription = "Trip_x0020_Description_x0020__x0";
var gGPSCoordinates = "GPS_x0020_Coordinates";
var gDepartDateToCrew = "Departure_x0020_Date_x0020_to_x00";
var gTripToCrewDescription = "TriptoCrewDescription";
var gDepartDateFromCrew = "Departure_x0020_Date_x0020_from_";
var gReturnFromCrewDescription = "Return_x0020_from_x0020_Crew_x00";
var gDepartDateFromCountry = "Departure_x0020_Date_x0020_from_0";
var gReturnTripDescription = "Return_x0020_Trip_x0020_Descript";
var gComment = "Comment";
var gCopyAddresses = "Copy_x0020_Addresses";

var includes = gTitle + "," + gID + "," + gSite + "," + gRequester + "," + gTravelers + "," + gManager + "," + gDestCountry + "," + gHSEApproReq + "," + gCrewVisit + "," + gTelSatNumber + "," + gAccomodationDetails + "," + gAgentContactDetails + "," + gClient + "," + gObjective + "," + gDepartDateToCountry + "," + gTripDescription + "," + gGPSCoordinates + "," + gDepartDateToCrew + "," + gTripToCrewDescription + "," + gDepartDateFromCrew + "," + gReturnFromCrewDescription + "," + gDepartDateFromCountry + "," + gReturnTripDescription + "," + gComment + "," + gCopyAddresses;

var iSite;
var iRequester;
var iTravelers;
var iManager;
var iDestinationCountry;
var iHSERequired;
var iCrewVisit;
var iTelSatNumber;
var iAccomodationDetails;
var iAgentContactDetails;
var iClient;
var iObjective;
var iDepartDateToCountry;
var iTripDescription;
var iGPSCoordinates;
var iDepartDateToCrew;
var iTripToCrewDescription;
var iDepartDateFromCrew;
var iReturnFromCrewDescription;
var iDepartDateFromCountry;
var iReturnTripDescription;
var iComment;
var iCopyAddresses;

var tID;
var context;
var web;
var list;
var query;
var allItems;

function onQueryFailed(sender, args) {
console.log('Error: ' + args.get_message() + '\n' + args.get_stackTrace());
}

function setAllItemsOptions() {
var selectedSite = NWF$("#" + varSite + " option:selected");
var selectedSiteText = selectedSite.text();
var elID = NWF$("#" + fID);
NWF$("#" + fID + " option").remove();
NWF$(elID).append("<option selected='selected' value='INIT' data-nfchoicevalue='INIT'>INIT</option>");
var ListEnumerator = allItems.getEnumerator();
while (ListEnumerator.moveNext()) {
var currentItem = ListEnumerator.get_current();
var site = currentItem.get_item(gSite);
if (site == selectedSiteText) {
var iTitle = currentItem.get_item(gTitle);
var option = "<option value='" + iTitle + "' data-nfchoicevalue='" + iTitle + "'>" + iTitle + "</option>";
NWF$(elID).append(option);
}
}
}

function getListItemsFromSPList() {
context = new SP.ClientContext.get_current();
web = context.get_web();
list = web.get_lists().getByTitle("HSE");
query = SP.CamlQuery.createAllItemsQuery();
allItems = list.getItems(query);
context.load(allItems, "Include(" + includes + ")");
context.executeQueryAsync(setAllItemsOptions, onQueryFailed);
}

function setInfos() {
for(var nbi = 0; nbi < iTravelers.length; nbi++) {
if (NWF$("#" + varPreviousTravelers).val() == "") {
NWF$("#" + varPreviousTravelers).val(iTravelers[nbi].get_lookupValue());
} else {
NWF$("#" + varPreviousTravelers).val(NWF$("#" + varPreviousTravelers).val() + ", " + iTravelers[nbi].get_lookupValue());
}
}
var soption = NWF$("#" + varManager + " option[title='" + iManager.get_lookupValue() + "']");
var sindex = soption.prop("index");
var svalue = soption.prop("value");
NWF$("#" + varManager).prop("selectedIndex", sindex).val(svalue);
NWF$("#" + varManager).change();
NWF$("#" + varDestinationCountry + " option[value='" + iDestinationCountry + "']").attr('selected', 'selected');
if (iHSERequired == true) {
NWF$("#" + varHSERequired).click();
}
if (iCrewVisit == true) {
NWF$("#" + varCrewVisit).click();
}
NWF$("#" + varTelSatNumber).val(iTelSatNumber);
NWF$("#" + varAccomodationDetails).append(iAccomodationDetails);
NWF$("#" + varAccomodationDetails + "_inplacerte p").remove();
NWF$("#" + varAccomodationDetails + "_inplacerte").append(iAccomodationDetails);
NWF$("#" + varAgentContactDetails).append(iAgentContactDetails);
NWF$("#" + varAgentContactDetails + "_inplacerte p").remove();
NWF$("#" + varAgentContactDetails + "_inplacerte").append(iAgentContactDetails);
NWF$("#" + varClient).val(iClient);
NWF$("#" + varObjective).append(iObjective);
NWF$("#" + varObjective + "_inplacerte p").remove();
NWF$("#" + varObjective + "_inplacerte").append(iObjective);
var ddtcountry = new Date(iDepartDateToCountry);
var ddtcountrym = (ddtcountry.getMonth()+1) + "/" + (ddtcountry.getDate()) + "/" + (ddtcountry.getFullYear());
NWF$("#" + varDepartDateToCountry).attr("value", ddtcountrym);
NWF$("#" + varTripDescription).append(iTripDescription);
NWF$("#" + varTripDescription + "_inplacerte p").remove();
NWF$("#" + varTripDescription + "_inplacerte").append(iTripDescription);
NWF$("#" + varGPSCoordinates).val(iGPSCoordinates);
var ddtcrew = new Date(iDepartDateToCrew);
var ddtcrewm = (ddtcrew.getMonth()+1) + "/" + (ddtcrew.getDate()) + "/" + (ddtcrew.getFullYear());
NWF$("#" + varDepartDateToCrew).attr("value", ddtcrewm);
NWF$("#" + varTripCrewDescription).append(iTripToCrewDescription);
NWF$("#" + varTripCrewDescription + "_inplacerte p").remove();
NWF$("#" + varTripCrewDescription + "_inplacerte").append(iTripToCrewDescription);
var ddfcrew = new Date(iDepartDateFromCrew);
var ddfcrewm = (ddfcrew.getMonth()+1) + "/" + (ddfcrew.getDate()) + "/" + (ddfcrew.getFullYear());
NWF$("#" + varDepartDateFromCrew).attr("value", ddfcrewm);
NWF$("#" + varReturnFromCrewDescription).append(iReturnFromCrewDescription);
NWF$("#" + varReturnFromCrewDescription + "_inplacerte p").remove();
NWF$("#" + varReturnFromCrewDescription + "_inplacerte").append(iReturnFromCrewDescription);
var ddfcountry = new Date(iDepartDateFromCountry);
var ddfcountrym = (ddfcountry.getMonth()+1) + "/" + (ddfcountry.getDate()) + "/" + (ddfcountry.getFullYear());
NWF$("#" + varDepartDateFromCountry).attr("value", ddfcountrym);
NWF$("#" + varReturnFromTripDescription).append(iReturnTripDescription);
NWF$("#" + varReturnFromTripDescription + "_inplacerte p").remove();
NWF$("#" + varReturnFromTripDescription + "_inplacerte").append(iReturnTripDescription);
NWF$("#" + varComment).append(iComment);
NWF$("#" + varComment + "_inplacerte p").remove();
NWF$("#" + varComment + "_inplacerte").append(iComment);
if (iCopyAddresses) {
for(var nbi = 0; nbi < iCopyAddresses.length; nbi++) {
if (NWF$("#" + varPreviousCopyAddresses).val() == "") {
NWF$("#" + varPreviousCopyAddresses).val(iCopyAddresses[nbi].get_lookupValue());
} else {
NWF$("#" + varPreviousCopyAddresses).val(NWF$("#" + varPreviousCopyAddresses).val() + ", " + iCopyAddresses[nbi].get_lookupValue());
}
}
}
NWF$("#" + fID + " option[value='INIT']").attr('selected', 'selected');
}

function getInfos() {
var elID = NWF$("#" + fID + " option:selected");
tID = elID.text();
var ListEnumerator = allItems.getEnumerator();
while (ListEnumerator.moveNext()) {
var currentItem = ListEnumerator.get_current();
var iTitle = currentItem.get_item(gTitle);
if (iTitle == tID) {
iSite = currentItem.get_item(gSite);
iRequester = currentItem.get_item(gRequester);
iTravelers = currentItem.get_item(gTravelers);
iManager = currentItem.get_item(gManager);
iDestinationCountry = currentItem.get_item(gDestCountry);
iHSERequired = currentItem.get_item(gHSEApproReq);
iCrewVisit = currentItem.get_item(gCrewVisit);
iTelSatNumber = currentItem.get_item(gTelSatNumber);
iAccomodationDetails = currentItem.get_item(gAccomodationDetails);
iAgentContactDetails = currentItem.get_item(gAgentContactDetails);
iClient = currentItem.get_item(gClient);
iObjective = currentItem.get_item(gObjective);
iDepartDateToCountry = currentItem.get_item(gDepartDateToCountry);
iTripDescription = currentItem.get_item(gTripDescription);
iGPSCoordinates = currentItem.get_item(gGPSCoordinates);
iDepartDateToCrew = currentItem.get_item(gDepartDateToCrew);
iTripToCrewDescription = currentItem.get_item(gTripToCrewDescription);
iDepartDateFromCrew = currentItem.get_item(gDepartDateFromCrew);
iReturnFromCrewDescription = currentItem.get_item(gReturnFromCrewDescription);
iDepartDateFromCountry = currentItem.get_item(gDepartDateFromCountry);
iReturnTripDescription = currentItem.get_item(gReturnTripDescription);
iComment = currentItem.get_item(gComment);
iCopyAddresses = currentItem.get_item(gCopyAddresses);
}
}
setInfos();
}

NWF$(document).ready(function() {
getListItemsFromSPList();
});

NWF$("#" + varSite).on('change', function() {
setAllItemsOptions();
});

0 Kudos
Reply
Workflow Hero

Re: How to pre-populate a form with data from another item ?

Jump to solution

NB : This solution is uncomplete because I can't prepopulate the person fields.

Reply
Workflow Hero

Re: How to pre-populate a form with data from another item ?

Jump to solution

the only way how you could get values from other list/item with OOTB functionality is to use calculated value control and lookup() function.

of course, calculated value control can not be edited.

not sure whether this would be an option for you.

to populate people picker field from javascript see following blog People Picker Extensions - Nintex Forms 

or search for some examples on forum https://community.nintex.com/search.jspa?q=%22NF.PeoplePickerApi%22&author=%2Fpeople%2F8567 

Reply
Workflow Hero

Re: How to pre-populate a form with data from another item ?

Jump to solution

Hi ‌,

This is an interesting use case. It would be good to get on a call to understand your requirements better. This would assist us in building our upcoming technology.


Would you be open to a call with their myself or the UX team?

Cheers,

Euan

Reply
Workflow Hero

Re: How to pre-populate a form with data from another item ?

Jump to solution

Hi ‌,

This is a great idea. 

Regards,

Thibault.

Reply
Workflow Hero

Re: How to pre-populate a form with data from another item ?

Jump to solution

If you're having that conversation, I'd add that it would be really useful to be able to use a named control like a Calculated Value, as the default value for a control such as Textbox or similar. This would achieve the requirement here, and many more where you're trying to pull through data from another source into controls which may get edited.

Reply
Workflow Hero

Re: How to pre-populate a form with data from another item ?

Jump to solution

Hi ,

Lets get on a call and have a chat about your thoughts on setting a field value similar to the calculated value control. I will send you an email.

Cheers,

Euan

Reply
Workflow Hero

Re: How to pre-populate a form with data from another item ?

Jump to solution

Thanks for taking my call ‌. I appreciate your feedback and look forward to hearing how you go with our new responsive forms designer coming soon.

Cheers,

Euan

Reply
Workflow Hero

Re: How to pre-populate a form with data from another item ?

Jump to solution

Thanks for taking my call Thibault Gauthier‌. Apologies I don't speak French, but hopefully my demo of the responsive forms designer speaks for itself!

I look forward to hearing how Experttime use the responsive forms in the future.

Cheers,

Euan

Reply