Hi,
I'm working on some custom javascript/CSS in a power pages form to control which fields are editable based on a list of field ids stored in a dataverse table. For text fields and dropdowns, my approach works the way I want: non‑editable fields are set to read‑only, while editable fields are highlighted and fully interactive.
However, I'm having issues with lookup fields. My code is supposed to remove/hide the buttons related to the non‑editable lookup fields and leave them intact for editable fields. I’m having issue with the editable lookups, their buttons are being removed along with my non editable lookups. Depending on what I try the buttons don’t reappear or if they are present they aren’t functional or sometimes they reappear for all lookups when I only want it for one editable lookup field. I don’t seem to be able to get the editable look up fields to act independently of the non-editable lookups. Does anyone have any suggestions how I could get this to work?
$("#EntityFormControl_EntityFormView :input, #EntityFormControl_EntityFormView select").each(function () {
const field = $(this);
const fieldId = field.attr("id") || "";
const isEditable = editableFields.includes(fieldId);
if (field.is("input[type='text'], textarea")) {
if (!isEditable) {
field.prop("readonly", true).attr("data-editable", "false");
} else {
field.prop("readonly", false).attr("data-editable", "true");
field.addClass("highlight-editable");
}
} else {
if (!isEditable) {
field.attr("data-editable", "false");
} else {
field.attr("data-editable", "true");
field.addClass("highlight-editable");
}
}
});
$("#EntityFormControl_EntityFormView [data-editable='false']").each(function () {
const fieldContainer = $(this).closest(".input-group");
if (fieldContainer.length) {
fieldContainer.find("button.btn.btn-default.clearlookupfield").remove();
fieldContainer.find("button.btn.btn-default.launchentitylookup").remove();
}
});
});
