{"id":28741,"date":"2021-07-26T12:11:08","date_gmt":"2021-07-26T12:11:08","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=28741"},"modified":"2023-09-08T12:59:13","modified_gmt":"2023-09-08T07:29:13","slug":"how-to-convert-an-editable-basic-form-entity-form-to-read-mode-programmatically-in-power-apps-portal","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2021\/07\/how-to-convert-an-editable-basic-form-entity-form-to-read-mode-programmatically-in-power-apps-portal\/","title":{"rendered":"How to convert an editable Basic Form (Entity Form) to read mode programmatically in Power Apps Portal"},"content":{"rendered":"

Introduction:<\/strong><\/h2>\n

We recently had a requirement in Power Apps Partner Portal where client wanted the basic form (entity form) of quote to be editable for quotes with most of the status reasons under status “Draft\u201d. But client also wanted to restrict users making any change to the quote from Portal for some status reasons even when quote is still in Draft status.<\/p>\n

Our initial approach was with some Portal script we would disable the \u201cSubmit\u201d button (here in our case, button is disabled for some specific status reasons of quotes under \u201cDraft\u201d status) so that even if user tries to enter data, it won\u2019t be reflected in CRM since Submit button is disabled. Given below is the line of code written in document ready function of the portal script of entity form:<\/p>\n

$(<\/strong>‘#UpdateButton’<\/strong>).attr(<\/strong>“disabled”<\/strong>, <\/strong>true<\/strong>);<\/strong><\/p>\n

Though this was half serving the purpose, client did not want users to even attempt editing anything as they anyways won\u2019t be able to submit it. In short, client didn\u2019t want user to enter the data at all even though the submit button was disabled.<\/p>\n

So, we thought along with \u201cSubmit\u201d button we would also make fields read only whenever Submit button is disabled. But the problem was that in future there would be chances of adding new fields or removing new fields. And every time such change would come, we would have to edit our entity form script in Portal to accommodate the same. Hence, such solution which needs constant editing was not considered.<\/p>\n

Now, we were trying to find out what\u2019s the best approach with generic coding that can make an entity form in edit mode behave as if the form is in \u201cread only\u201d mode. Hence after some research, we found that there is indeed a way where we can make any entity form which is in \u201cEdit\u201d mode to behave like an entity form in \u201cRead Only\u201d mode.<\/p>\n

Add the following code in the document ready function of the portal script present in the entity form (which is in \u201cEdit\u201d mode by default) as per the different conditions you will have where you might want to make the form read only programmatically.<\/p>\n

$(<\/strong>“#EntityFormControl_EntityFormView”<\/strong>).addClass(<\/strong>“form-readonly”<\/strong>);<\/strong><\/p>\n

$(<\/strong>“#EntityFormControl_EntityFormView :input”<\/strong>).attr(<\/strong>“disabled”<\/strong>, <\/strong>true<\/strong>);<\/strong><\/p>\n

$(<\/strong>‘#UpdateButton’<\/strong>).attr(<\/strong>“disabled”<\/strong>, <\/strong>true<\/strong>);<\/strong><\/p>\n

Please note that the id of basic form control in my case was \u201cEntityFormControl_EntityFormView<\/strong>\u201d. If the above lines of code doesn\u2019t work for you, then probably the reason will be id of basic form control in your case will be different from mine. So before publishing above lines of code, do the following.<\/p>\n

    \n
  1. Go to your portal and visit the page using that basic form where you are editing the basic form with above lines.<\/li>\n
  2. Press the button \u201cF12\u201d on your keyboard.<\/li>\n
  3. Then on the screen, try to find the word \u201centityformcontrol\u201d on the \u201cElements\u201d tab as shown below. And when you find a line like \u201c<div id=\u201dEntityFormControl_<sometext>> like highlighted below, that\u2019s your id of entityformcontrol.<\/li>\n<\/ol>\n

    \"How<\/a><\/p>\n

    Given below is the same code with new id (got from above screenshot) of basic form:<\/p>\n

    $(“#EntityFormControl_1ba19e3d2fd1e51180dfc4346bac0574”).addClass(“form-readonly”);<\/strong><\/p>\n

    $(“#EntityFormControl_1ba19e3d2fd1e51180dfc4346bac0574 :input”).attr(“disabled”, true);<\/strong><\/p>\n

    $(‘#UpdateButton’).attr(“disabled”, true);<\/strong><\/p>\n

    The screenshot below shows the same:<\/p>\n

    \"How<\/a><\/p>\n

    Now publish the changes, clear the portal cache and you will see the page with basic form (edit mode) would behave like page with basic form in read only mode where ALL fields present in the form are NOT editable due to the two lines of code written for basic form (as shared above). Also the submit button would be disabled due to the 3rd<\/sup> line of code written above.<\/p>\n

    Conclusion:<\/strong><\/p>\n

    In this way, we can make an editable basic form behave like a non-editable basic form programmatically in Power Apps portal.<\/p>\n

    \"Kanban<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

    Introduction: We recently had a requirement in Power Apps Partner Portal where client wanted the basic form (entity form) of quote to be editable for quotes with most of the status reasons under status “Draft\u201d. But client also wanted to restrict users making any change to the quote from Portal for some status reasons even\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[38,44,2763],"tags":[1170],"class_list":["post-28741","post","type-post","status-publish","format-standard","hentry","category-microsoft-powerapps","category-power-apps","category-power-pages","tag-microsoft-powerapps"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/28741","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=28741"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/28741\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=28741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=28741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=28741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}