How to Duplicate a Record in a Power Apps Model-Driven App Using JavaScript and a Custom Ribbon Button

How to Duplicate a Record in a Power Apps Model-Driven App Using JavaScript and a Custom Ribbon Button

How to Duplicate a Record in a Power Apps Model-Driven App Using JavaScript and a Custom Ribbon Button

Duplicating (cloning) a record is a common need in many business applications especially when users frequently create similar entries. While Power Apps Model-Driven Apps don’t offer a native “Duplicate Record” button, you can easily add one yourself using JavaScript and the Command bar. I have a solution for Auto Parts and I will use it in this guide to duplicate an auto part.

In this guide, I’ll walk you through the full process:

  • Writing the JavaScript to clone a record
  • Adding a custom ribbon button
  • Connecting everything so the button duplicates the current record with one click

Let’s get started.


Why Use JavaScript for Record Duplication?

Model-driven apps allow server-side duplication using Power Automate, but JavaScript offers benefits such as:

  • Instant execution (no flow delays)
  • Full control over which fields get copied
  • Better user experience and no leaving the form
  • Works across web and mobile clients

Step 1 — Create a JavaScript Web Resource

In Power Apps:

  1. Go to Solutions
  2. Open your solution or create a new one
  3. Add a new JavaScript (JS) web resource
  4. Paste the following code and click save
  5. Publish your JavaScript file

Screenshot:


JavaScript Code: Duplicate Current Record

function duplicateRecord(primaryControl) {
    var formContext = primaryControl;
    var entityName = formContext.data.entity.getEntityName();
    var recordId = formContext.data.entity.getId();

    if (!recordId) {
        Xrm.Navigation.openAlertDialog({ text: "Please save the record before duplicating." });
        return;
    }

    recordId = recordId.replace("{", "").replace("}", "");

    Xrm.WebApi.retrieveRecord(entityName, recordId)
        .then(function (result) {

            var clone = {};

            for (var field in result) {
                if (
                    field.startsWith("_") ||
                    field.endsWith("_value") ||
                    field === entityName + "id" ||
                    field === "createdon" ||
                    field === "modifiedon"
                ) {
                    continue;
                }

                clone[field] = result[field];
            }

            return Xrm.WebApi.createRecord(entityName, clone);
        })
        .then(function (response) {

            // Open duplicated record in a modal dialog
            var pageInput = {
                pageType: "entityrecord",
                entityName: entityName,
                entityId: response.id
            };

            var navigationOptions = {
                target: 2,          // 2 = Dialog
                width: { value: 80, unit: "%" },
                height: { value: 80, unit: "%" },
                position: 1         // 1 = Center
            };

            Xrm.Navigation.navigateTo(pageInput, navigationOptions);
        })
        .catch(function (error) {
            console.error(error);
            Xrm.Navigation.openAlertDialog({ text: error.message });
        });
}

What this script does:

  • Retrieves the current record data
  • Strips out system-managed fields
  • Creates a new record with the same values
  • Opens the new duplicated record via a modal dialog

Step 2 — Add a Custom Ribbon Button (Ribbon Workbench)

To expose your duplicate function to users, you’ll add a button to the command bar.

Steps:

  1. Click on Apps and open your app in Edit mode
  2. Click on … next to your entity’s page in your app and click on Edit command bar.

Select Main form and then click on Edit

Click on New and then Command

  1. Name your control as Duplicate
  2. Use Copy icon
  3. Select Run JavaScript as Action
  4. Add your new web resource by using Add library
  5. Enter duplicateRecord in function name box.
  6. Click on Add parameter and set Parameter 1 to PrimaryControl

 


Step 3 — Publish and Test

  1. Save the your changes
  2. Publish the solution
  3. Open a record in your model-driven app
  4. Click your new Duplicate button

    5. A model dialog will popup with new cloned record