How to Add a Custom Command Bar Button to Create a New Row in a Model-Driven App

Introduction

Model-driven apps in Power Platform offer a powerful way to create data-centric business apps with minimal code. In this post, we’ll walk through the steps to create a custom command bar button on the Main Grid view that allows users to add a new row to a table (entity).

This guide assumes you have some basic familiarity with the Power Apps Maker Portal and Dataverse.

Step 1: Create Your Model-Driven App

1. Go to Power Apps.
2. Click Apps from the left navigation pane.
3. Click + New app > Model-driven app.
4. Give your app a name (e.g., Data Form) and click Create.
5. Use the app designer to add a table (e.g., Data) to your app.
6. Save and publish the app.

Step 2: Add a Custom Command bar Button

We will now add a custom button to the command bar of the Main Grid for the table.

2.1 Navigate to the App

1. In the Maker Portal, go to View.
2. Select your view (e.g., DataForms view).
3. Click the three dots (⋮) beside the view.
4. Click Edit under the Edit command bar options.

2.2 Edit the Main Grid Command Bar

1. In the command designer, choose Main grid.




















2. Click +New and select Command.

2.3 Configure the Custom Button

1. Label: Add New Row
2. Icon: Choose an appropriate icon or upload a custom one.
3. Action: Choose JavaScript or Modern Action (recommended).

Step 3: Add the Button Logic (Use JavaScript)

1. Create a JavaScript web resource.
2. Add the following function:
3. Click Add Library button to open new side panel
4. Click New web resource

Below is the JavaScript Code.

    
function AddNewRowToMainGrid(primaryControl) {
	try {
		// Check if primaryControl is defined (for main grid button)
        if (!primaryControl || !primaryControl.data || !primaryControl.data.entity) {
            console.log("No record selected. This is a new record creation.");
        }

        // Define the table name (logical name of your table)
        var tableName = "new_dataform"; // Make sure this is correct!

        // Prepare default values for the new row
        var defaultData = {
        "new_dateoftillcheck": null,
        "new_tillid": null,
		"new_nameofcurrenttillholder": "",
        "new_discrepancydeficiency": "",
        "new_discrepancysurplus": "",
        "new_actiontakeen": "",
        "new_postplusadjustmentdate": null,
        "new_signatureoftillholdercheckingofficer": "",
        };

        //console.log("Creating record in table: " + tableName);
        //console.log("Data: ", JSON.stringify(defaultData));

        // Create a new record in Dataverse
        Xrm.WebApi.createRecord(tableName, defaultData).then(
		function success(result) {
		  //console.log("Record created successfully with ID: " + result.id);

		  // Refresh the main grid after adding the record
		  if (primaryControl && primaryControl.refresh) {
			primaryControl.refresh();
		  } 
		  else {
		console.warn("primaryControl not available. Trying page refresh.");
		Xrm.Page.ui.refresh(); // Fallback
		}
		  },
		  function(error) {
		  	console.error("Error creating record: ", error.message);
			Xrm.Navigation.openErrorDialog({
			message: "Error adding new record: " + error.message
		  });
		}
	);
} 
catch (e) {
	console.error("Unexpected error:", e);
	Xrm.Navigation.openErrorDialog({
	message: "Unexpected error occurred: " + e.message
	});
  }
}

Step 4: Test the Custom Button

1. Open your model-driven app.
2. Navigate to the DataForm Main Grid.
3. Click on your custom Add New Row button.
4. A new row added, allowing the user to add a new record.

Conclusion

Customizing command bars in model-driven apps can significantly enhance user experience and streamline operations. Whether using Power Fx for low-code scenarios or JavaScript for more complex logic, adding a "New Row" button makes it easier for your users to create data on the fly.