papa parse - define headers

papa parse - define headers

montoyammontoyam Posts: 568Questions: 136Answers: 5

I am using papa parse on my project but I was wondering two things:

1) There is one field where the header is called different than the field I am writing to. I don't want the user to have to change the text field before import, but I don't want them to have to fix that mapping on the first step of the import. Can I hard code this somehow that 'UserPrincipalName' goes to field 'Email'. I looked at the papa parse documentation but I didn't find anything
2) If the above can be done, is there a way to skip the first two screens and have it just start the import without those prompts.

Answers

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    so I found code to change the header. So, now it will read 'Email' instead of 'UserPrincipalName'. However, because my table only has 4 fields and the csv file has 6 (I am skipping two columns), the "auto-suggest' of field mapping is not correct, so they will still need to fix the mapping. I can add the two skipped fields to the table structure, so they will line up if I have to. But then the only question left is if I can bypass the mapping screen and the second prompting screen and just have the parsing start automatically after they select the file.

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    oh, here is the code I found if anyone is interested:

                                beforeFirstChunk: function (chunk) {
                                    var index = chunk.match(/\r\n|\r|\n/).index;
                                    var headings = chunk.substr(0, index).split(',');
                                    headings[3] = 'Email';
                                    return headings.join() + chunk.substr(index);
                                },
    
  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    I am guessing the magic is happening here:

                selectEditor.create({
                    title: 'Map CSV fields',
                    buttons: 'Import ' + csv.length + ' records',
                    message: 'Select the CSV column you want to use the data from for each field.'
                });
    
                selectEditor.on('submitComplete', function (e, json, data, action) {
                    // Use the host Editor instance to show a multi-row create form allowing the user to submit the data.
                    editor.create(csv.length, {
                        title: 'Confirm import',
                        buttons: 'Submit',
                        message: 'Click the <i>Submit</i> button to confirm the import of ' + csv.length + ' rows of data. Optionally, override the value for a field to set a common value by clicking on the field below.'
                    });
    
    
    
                    for (var i = 0; i < fields.length; i++) {
                        var field = editor.field(fields[i]);
                        var mapped = data[field.name()];
    
                        for (var j = 0; j < csv.length; j++) {
                            field.multiSet(j, csv[j][mapped]);
                        }
                    }
    
    
                });
    

    is there a way to create the editor without displaying it and automatically 'clicking' the submit?

  • kthorngrenkthorngren Posts: 21,164Questions: 26Answers: 4,921

    is there a way to create the editor without displaying it and automatically 'clicking' the submit?

    Yes, the create() docs show how. Take a look at the third example. I think you will need to do the for loop in line 17 first to 'multiSet' all the fields. before doing the create(). Haven't tried specifically with the CSV import though.

    Kevin

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    Ok. that is a little too deep for me to try and figure out right now. For now, I just am hiding the fields in the editor so there is only a submit button. I am doing this for both the first editor and the second editor. At least there will be no confusing steps for the user to try and understand...just push the button :smiley:

  • rf1234rf1234 Posts: 2,941Questions: 87Answers: 415

    Ok. that is a little too deep for me to try and figure out right now.

    It is actually fairly easy. Don't worry. I use this to create an empty record on "create" button click (and then allow the user to inline edit the new record):

    buttons: [
        {   extend: "create", editor: ctrEventEditor,                  
                action: function ( e, dt, node, config ) {
                    empty = true;
                    var self = ctrEventEditor;
                    self.create( false )
                        .set( { 'ctr_event.ctr_id': parentId,
                                'ctr_event.event_msg': ''} )
                        .submit();
                }
        },
    
This discussion has been closed.