Make a "Copy" button

[Steve]

Hi guys,
I need some help and have a few questions about a “copy” button.

I have a list of items – when I click on “create a new item” the form is initiated. At the bottom side, there are two types of buttons – cancel and save. I would like to add another button titled “Copy” which would work like – “save this item to the current list and copy “selected (10 fields max)” fields and initiate another new form where the copied fields would be automatically imported”.

Does DFFS support this? Is it possible to make it? The attachement is just an example. Select, for example, two first fields — click on “Copy” — automatically save the current item and initiate a new form with filled fields.

Thank you very much for any response.

Attachments:

1. 

   DFFS-copy-button.jpg
   

[Alexander Bautz]

Hi,
Add this to your Custom JS in NewForm:

// If creating a copy
if(GetUrlKeyValue("CreateCopy") === "1"){
    var str = sessionStorage.getItem("SaveAndCreateNewData"), data;
    if(str !== null){
        data = JSON.parse(str);
        jQuery.each(data,function(fin,val){
            setFieldValue(fin,val); 
        });
    }
}

// Add button
jQuery("input[id$='_diidIOSaveItem']").before("<input type='button' class='ms-ButtonHeightWidth' style='margin-right:4px;' value='Save and Copy' onclick='saveAndCopy()' />");

var createCopyWhenSaving = false;
function saveAndCopy(){
    createCopyWhenSaving = true;
    spjs.dffs.triggerSave();
}

function dffs_PreSaveAction(){
    if(createCopyWhenSaving){
        var arr = [
            "EmailAddress",
            "FirstName",
            "Floor",
            "ID",
            "LastName",
            "LeaseStartDate",
            "PhoneNumber",
            "ShortTermLease",
            "Title"
        ];
        var data = {};
        jQuery.each(arr,function(i,fin){
            data[fin] = getFieldValue(fin);
        });
        sessionStorage.setItem("SaveAndCreateNewData",JSON.stringify(data));
        // Redirect
        spjs.dffs.redirect(location.pathname + "?CreateCopy=1",false);
    }
    return true;
}

It will store the input in sessionStorage and pull it into the NewForm based on an URL parameter that is set when hitting the copy-button.

You must ensure the array of fields have the correct FieldInternalNames.

Let me know how this works out.

Alexander

[Steve]

Thank you very much for the code. I’m not great in javascript and coding such as. Please, could you tell me where I should put my “IDs (URLs)” of columns etc? At this moment, it does not work. But I probably have some mistakes in the code. Could you check it? Thank you once again.

// If creating a copy
if(GetUrlKeyValue("CreateCopy") === "1"){
    var str = sessionStorage.getItem("SaveAndCreateNewData"), data;
    if(str !== null){
        data = JSON.parse(str);
        jQuery.each(data,function(fin,val){
            setFieldValue(fin,val);
        });
    }
}

// Add button
jQuery("input[id$='_diidIOSaveItem']").before("<input type='button'
class='ms-ButtonHeightWidth' style='margin-right:4px;' value='Save and Copy' onclick='saveAndCopy()' />");

var createCopyWhenSaving = false;
function saveAndCopy(){
    createCopyWhenSaving = true;
    spjs.dffs.triggerSave();
}

function dffs_PreSaveAction(){
    if(createCopyWhenSaving){
        var arr = [
            "Cena"
            "CenoveHladiny"
            "Cena"
            "StavSchvalovani"
            "CenaZaPrepravku"
        ];
        var data = {};
        jQuery.each(arr,function(i,fin){
            data[fin] = getFieldValue(fin);
        });
        sessionStorage.setItem("SaveAndCreateNewData",JSON.stringify(data));
        // Redirect
        spjs.dffs.redirect(location.pathname + "?CreateCopy=1",false);
    }
    return true;
}

[Alexander Bautz]

I’m not sure I understand – you have added the correct field internal names to the “arr” like this it should work

var arr = [
            "Cena"
            "CenoveHladiny"
            "Cena"
            "StavSchvalovani"
            "CenaZaPrepravku"
        ];

Do you see the new button at the bottom of the form?

Please note that if you already have a function named dffs_PreSaveAction in your form, you must merge the content of these two so you don’t have duplicate function names.

Alexander

[Steve]

Hi Alex,

I’ve done everything. I don’t see a button at the bottom of the form. An error pops up – as you can see in the picture.

In accordance with your last paragraph, dffs_PreSaveAction is not included in my form.
One sidelight, I have a button “Load data” that is made in javascript above the form in webpart in content editor. It’s not made in DFFS. Could that be a problem?

Thank you for your time Alex you spend with this article.

Steve

• This reply was modified 5 years, 10 months ago by Steve.

Attachments:

1. 

   Error.jpg
   

[Alexander Bautz]

Not sure what the error message says – can you translate?

You might need to correct the quotes used in the code snippet because they sometimes are replaced with the wrong type of quotes when copying and pasting. Please retype all single and double quotes and try again.

Alexander

[Alexander Bautz]

I had another look and you are missing commas in your array:

var arr = [
            "Cena",
            "CenoveHladiny",
            "Cena",
            "StavSchvalovani",
            "CenaZaPrepravku"
        ];

Alexander

[Steve]

I’m sorry Alexander but still I cannot see a button at the bottom of the form and the same error pops up whenever I put commas, for example: “Cena”, “StavSchvalovani”,.. Even if I remove them.
The error says: The operation cannot be completed due to error 80020101. The Code looks like:

// If creating a copy
if(GetUrlKeyValue("CreateCopy") === "1"){
    var str = sessionStorage.getItem("SaveAndCreateNewData"), data;
    if(str !== null){
        data = JSON.parse(str);
        jQuery.each(data,function(fin,val){
            setFieldValue(fin,val);
        });
    }
}

// Add button
jQuery("input[id$='_diidIOSaveItem']").before("<input type='button'
class='ms-ButtonHeightWidth' style='margin-right:4px;' value='Save and Copy' onclick='saveAndCopy()' />");

var createCopyWhenSaving = false;
function saveAndCopy(){
    createCopyWhenSaving = true;
    spjs.dffs.triggerSave();
}

function dffs_PreSaveAction(){
    if(createCopyWhenSaving){
        var arr = [
            "%5Fx0031%5FatributPolozky",
            "NazevPolozky",
            "DruhPolozky",
            "SubdruhPolozky",
            "BaleniAhmotnost",
        ];
        var data = {};
        jQuery.each(arr,function(i,fin){
            data[fin] = getFieldValue(fin);
        });
        sessionStorage.setItem("SaveAndCreateNewData",JSON.stringify(data));
        // Redirect
        spjs.dffs.redirect(location.pathname + "?CreateCopy=1",false);
    }
    return true;
}

[Alexander Bautz]

You have a line break in this line that you must remove:

jQuery("input[id$='_diidIOSaveItem']").before("<input type='button' class='ms-ButtonHeightWidth' style='margin-right:4px;' value='Save and Copy' onclick='saveAndCopy()' />");

Also, your field name “%5Fx0031%5FatributPolozky” is not correct – find the correct fieldinternalnames in the Fields tab in DFFS backend.

When you write code you can use this site to check the syntax: https://jshint.com

Alexander

[Steve]

Alexander, it works! The break in that line was a mistake and that’s why it did not work out. Now, it’s working, but…

If I create a new form, then I fill in columns, then I hit “Save and Copy” – the new for is initiated but it hasn’t saved.

[Alexander Bautz]

I’m glad you go it running. I’m not sure I understand – is it the first form that doesn’t save?

This code should save the initial item, and open a new “NewForm” after it is saved, but the new “copy” is not automatically saved because I assumed you wanted to have the opportunity to make changes to the item before saving it.

If you want it to automatically save the second item, you can add spjs.dffs.triggerSave(); to the function like this:

if(GetUrlKeyValue("CreateCopy") === "1"){
    var str = sessionStorage.getItem("SaveAndCreateNewData"), data;
    if(str !== null){
        data = JSON.parse(str);
        jQuery.each(data,function(fin,val){
            setFieldValue(fin,val);
        });
        spjs.dffs.triggerSave();
    }
}

Alexander

[Steve]

Thanks Alex, the first form doesn’t save. I do not need the second form to be saved automatically. I fill the columns in the NewForm, then I hit “Save and Copy”, another NewForm is initiated but its predecessor (first form) did not save at all.

And you were right, I wan to make changes in the “copied” form.

Steve

[Alexander Bautz]

OK, do you have any other custom js running in this form that could interfere?

If you hit F12 and select “Console” before saving – do you see any error messages when you hit the “Copy and save” button?

You might have to select “Preserve log” in the console window so that the log isn’t cleared when you navigate to the new “NewForm”.

Alexander

[Steve]

Alex, It’s working so, there is no problem with those errors. I changed nothing, I was just looking at the wrong list on the same page. My mistake. When I clicked on the web “xxxxx” on SharePoint, the list has shown up where I use the javascript. But I had to click on the list at navigation panel.

Now, all of it is working. Thank you very much Alex.

[Alexander Bautz]

I’m glad you figured it out. I removed your two latest comments because you figured out what caused the problems and they no longer are relevant.

Alexander

[Keith Hudson]

As an alternative, would it be possible to use the vlookup functionality to create new items passing in fields from the current item, by selecting the current list as the target of the vlookup? It seems to me that I have used vlookup to SEE related items on the same list — would that also work for creating new items on the same list?

[Alexander Bautz]

Yes, you should be able to do that with vLookup.

Alexander

[Steve]

If I understand the vLookup function, it won’t help me at all. Initiation of a form offers the author specific columns like -Type of product, the number of the product, the validity of price since, expiration dates etc.… If I always wanted to have the same data taking from another list (vLookup) then it would be a perfect way how to do it. But…

There are too many specific data filling in the columns in the form, that means I need only some columns to be copied, but They always change. It’s hard for me to describe the situation, but the Copy button is the best way how to solve my problem out.

• This reply was modified 5 years, 9 months ago by Steve.

[John Garrido]

Is there a way to modify this copy feature to include multi lookup fields? It seems like it should work as it appears to be in the correct format setFieldValue(“MultiLookup”,[“Option number 1″,”Option number 2”]). Thanks for any guidance!

[Alexander Bautz]

This looks like it should work already – do you get an error?

Which version of spjs-utility.js are you using (hover over the Enhanced with DFFS link to show the version info)?

Alexander

[Jonathan Stamper]

Let’s say I have an edit form of a completed item and I wanted to copy or duplicate that request on to a New Form. Would the same logic above work?

[Alexander Bautz]

Yes, this is more or less what it does, but if you don’t want to actually save the “donor” form you should trigger the function by a button and not in the PreSaveAction function.

Alexander

[Jonathan Stamper]

Got it so instead of using presave just trigger via a function that takes the session storage, opens new form and drops it all in there?

[Jonathan Stamper]

Oh I get it! The if(GetURLKeyValue…) is outside a function because it’s like my last step for the new form to pick up and copy the data over on. That’s cool.

Is there a specific way I should render AC fields? It looks like they are coming in but not rendering exactly as they would if a user selects them in.

[Keith Hudson]

Pardon my ignorance, but what are “AC” fields?

[Alexander Bautz]

https://spjsblog.com/dffs/dffs-plugins/spjs-autocomplete/

Alexander

[Alexander Bautz]

If you use an AC field you must not invoke the AC function on the field until you are done prefilling the fields from the localStorage object.

Alexander

[Jonathan Stamper]

Ah that’s right I forgot about the invoke functions available from the AC manuals and references. Much appreciated as always!

[Jonathan Stamper]

I had a chance to try and invoke and I’m getting a “TypeError: Cannot read properties of undefined (reading ‘items’). I’m trying to load in 2 AC fields (one is a multi-field). The error occurs right after executing the spjs.ac.setFieldValue section below:

if(GetUrlKeyValue("CreateCopy") === "1"){
    var str = sessionStorage.getItem("SaveAndCreateNewData"), data;
    if(str !== null){
        data = JSON.parse(str);
        jQuery.each(data,function(fin,val){
           If (fin===“field1” || fin===“field2”){
             spjs.ac.setFieldValue(fin,Val);
           } else {
             setFieldValue(fin,val);
           }
         });
    }

[Jonathan Stamper]

Oops, that’s supposed to be a lower case v for the val variable.

[Alexander Bautz]

Hi,
Before you apply the function spjs.ac.textField(…) you cannot use the spjs.ac.setFieldValue function – use the regular setFieldValue(fin, val) function instead.

Alexander

[Jonathan Stamper]

Oh, the order to which the AC is initiated to when the values are populated would cause that error I’m getting. Ok, I’ll check that out. Many thanks!

[Jonathan Stamper]

Ah, I see I tried to include it in my dffs_ready() but that means I’d need to shut off all my rules and alerts to correctly do it. That is unless I shouldn’t do it in there.

[Alexander Bautz]

Hi,
You can do it in dffs_ready if you wrap it up something like this inside the function:

if(GetUrlKeyValue("CreateCopy") === "1"){
    var str = sessionStorage.getItem("SaveAndCreateNewData"), data;
    if(str !== null){
        data = JSON.parse(str);
        jQuery.each(data,function(fin,val){
             setFieldValue(fin,val);
         });
    }
}
spjs.ac.textfield(...);

Alexander

[Jonathan Stamper]

That was it. I needed to change the order of operations between the AC and the Create Copy. Big thanks!!!

Now I just need to put in a logic for the children and I should be good.

[Author]

Posts