Custom Modal in out of box Edit button form in Power Page

(1) Share

Report

Posted on by Hammed

Hi team,

I have out of the box entity list view in Power Pages in the Multisteps form. I have added view and edit forms which show the buttons to enable to view or edit record from the Portal page but I wanted a scenario where when user click on edit button, it should show custom modal that I built instead of out of the box form. Is there anyway to achieve this or hide and introduce custom edit button? Aany resource that will be helpful? I know you may likely mention to go with custom view list but this is Multisteps form. I will really appreciate.

Thanks

Categories:

General topics

I have the same question (0)

All responses (2)

Answers (0)

Suggested answer

Hammed 26 on at

Like (1)

Report

Found a solution.

You can check out this blog: https://dynamicsexperts.wordpress.com/2025/06/08/use-custom-modal-in-out-of-box-edit-button-in-the-entity-list-in-power-page/

Was this reply helpful? Yes No
surya narayanan 102 on at

Like (0)

Report
Hi,

Here is the steps to Implement a Custom Modal for Edit Button

Hide the Default Edit Button

Use CSS or JavaScript to hide the out-of-the-box edit button in the entity list.

css

.entitylist .edit-link { display: none; }

Add a Custom Edit Button

Use JavaScript/jQuery to dynamically insert a custom edit button into the entity list.

javascript

$(document).ready(function () { $(".entitylist.entity-grid").on("loaded", function () { $(".edit-link").each(function () { $(this).replaceWith('<button class="custom-edit-btn">Edit</button>'); }); }); });

Trigger the Custom Modal on Click

When the user clicks the custom edit button, open your custom modal instead of the default form.

javascript

$(document).on("click", ".custom-edit-btn", function () { $("#customEditModal").modal("show"); });

Load the Record Data into the Modal

Fetch the record ID and populate the modal fields dynamically using Dataverse Web API or JavaScript.

javascript

function loadRecordData(recordId) { $.ajax({ url: `/api/data/v9.1/entities(${recordId})`, type: "GET", success: function (data) { $("#customField").val(data.customFieldValue); } }); }

Save Changes from the Modal

When the user submits the modal form, update the record using Power Automate or Dataverse API.

javascript

$("#saveChangesBtn").click(function () { var updatedData = { customField: $("#customField").val() }; $.ajax({ url: `/api/data/v9.1/entities(${recordId})`, type: "PATCH", data: JSON.stringify(updatedData), success: function () { alert("Record updated successfully!"); location.reload(); } }); });

Was this reply helpful? Yes No