Plumsail forms wizard final screen (display all entered data)

Hello All,

I have set up a wizard container for a RSVP and want to display all the data entered throughout the wizard as an overview is this possible?

context - they will be entering user details for training course RSVP and at the end screen i would like it to show detials of the course and the data they have entered

thanks
Jacob

Dear @Jacob_Simons,
It's definitely possible! For example, you can place same field types in the Wizard summary step, disable them and copy values to these fields as other fields change value:

fd.rendered(function(){|
    //disable summary field
    fd.field('WorksSummary').disabled=true;
    //populate summary field on main fild change
    fd.field('Works').$on('change', function(value){
        fd.field('WorksSummary').value = value;
    })           
});

Thanks for the response. am i able to get a more step by step how to? as i am new to Plum Sail and getting confused.

thanks again

Dear @Jacob_Simons,
Are you using Public Web Forms or SharePoint forms? For public web forms, here's an example - WizardSummary

I've used the following code in JS editor:

fd.rendered(function(){
    //disable summary fields
    fd.field('Text1Summary').disabled=true;
    fd.field('Note1Summary').disabled=true;
    fd.field('MultiChoice1Summary').disabled=true;
    //populate summary fields on main field change
    fd.field('Text1').$on('change', function(value){
        fd.field('Text1Summary').value = value;
    });
    fd.field('Note1').$on('change', function(value){
        fd.field('Note1Summary').value = value;
    });
    fd.field('MultiChoice1').$on('change', function(value){
        fd.field('MultiChoice1Summary').value = value;
    });
});

Find the same exported form attached, you can import it and test how it works in your editor:
WizardSummary.json (4.8 KB)

Thanks again for your reply! Learning lots. Im using SharePoint forms, is it the same there?

Thanks

Dear @Jacob_Simons,
Well, it might be a little more challenging for SharePoint forms.

First of all, you'll need to change fd.rendered in code to fd.spRendered, but that's not the main challenge.

The main issue are the fields, since SharePoint fields are taken from SharePoint list columns. For summary fields, you can:

  1. Create additional summary columns in SharePoint list - this will ensure that you get the same field types as your main fields, but that will double the amount of columns in SharePoint list.
  2. Use Common fields available in the editor - they will function identically to SharePoint fields, but won't save the data to SharePoint. The issue is that not all SharePoint fields have exact match in Common fields, some are not available - such as Lookup, Person, etc.

If you use Common fields for preview with some specific SharePoint fields like Person or Lookup fields, the code will need to be adjusted as you'll only copy text value of these fields and not additional properties which are also stored in field values, such as person's login or lookup's selected item ID.

Here's example code:

fd.spRendered(function(){
    //disable summary fields
    fd.field('TitleSummary').disabled=true;
    fd.field('LookupSummary').disabled=true;
    fd.field('PersonSummary').disabled=true;
    //populate summary fields on main field change
    fd.field('Title').$on('change', function(value){
        fd.field('TitleSummary').value = value;
    });
    fd.field('Lookup').$on('change', function(value){
        fd.field('LookupSummary').value = value.lookupValue;
    });
    fd.field('Person').$on('change', function(value){
        fd.field('PersonSummary').value = value.DisplayText;
    });
});

The code will get more complex with more complex field types - multi Lookup or multi Person fields.

Hello again,

this is the code i have written/edited but doesnt seem to be working

fd.spRendered(function(){
    //disable summary fields
    fd.field('CourseNameSummary').disabled=true;
    fd.field('CourseParticipantSummary').disabled=true;
    fd.field('IDNumberSummary').disabled=true;
    //populate summary fields on main field change
    fd.field('TrainingCourse').$on('change', function(value){
        fd.field('CourseNameSummary').value = value;
    });
    fd.field('CourseParticipant').$on('change', function(value){
        fd.field('CourseParticipantSummary').value = value.lookupValue;
    });
    fd.field('IDNumber').$on('change', function(value){
        fd.field('IDNumberSummary').value = value.DisplayText;
    });
});

it disables the items and completed the first section but doesnt complete the changing the value of the fields, any suggestions?

thanks again.

Dear @Jacob_Simons,
Please, let me know the field types for TrainingCourse, CourseParticipant and IDNumber fields, as well as if they're single select or multiselect fields, and I'll help you adjust the code.

TrainingCourse - Lookup
CourseParticipant - Text
IDNumber - Number

Thanks again for your help...

cheers

Dear @Jacob_Simons,
In this case, try the following, please:

fd.spRendered(function(){
    //disable summary fields
    fd.field('CourseNameSummary').disabled=true;
    fd.field('CourseParticipantSummary').disabled=true;
    fd.field('IDNumberSummary').disabled=true;
    //populate summary fields on main field change
    fd.field('TrainingCourse').$on('change', function(value){
        fd.field('CourseNameSummary').value = value.lookupValue;
    });
    fd.field('CourseParticipant').$on('change', function(value){
        fd.field('CourseParticipantSummary').value = value;
    });
    fd.field('IDNumber').$on('change', function(value){
        fd.field('IDNumberSummary').value = value;
    });
});

Thanks again for your help!

It worked, the two values of the IDNumberSummary and CourseParticipantSummary worked but the lookup CourseNameSummary didnt seem to show.

does it matter if the lookup is a Sharepoint lookup or a Plumsail lookup?

thanks

Dear @Jacob_Simons,
Yes, it matters, for Plumsail Lookup control, please, use:

fd.control('TrainingCourse').$on('change', function(value){
  fd.field('CourseNameSummary').value = value.lookupValue;
});
1 Like