I am using the framework you have shown in How To Create A Modal In UI Builder | Backendless and I want to enhance it a little bit. I want to use it as a form for showing content and changing content. Therefore I provide a Pencil Icon with an on-click event logic. On clicking the pencil all input fields should be enabled for editing. It sounds simple - loop through all fields in the DOM and enable editing (set Disabled to False).
But, somehow I cannot manage it to find the fields in a generic way during runtime. I have to list all fields by name during design time and enable them. But, I want to do it during runtime, even after adding a new field during design.
Any idea how to accomplish this task with Codeless and the UI Builder?
A beautiful and simple solution by @Alexander_Pavelko. Many thanks for this - I was thinking much too complicated and forgot about data binding.
With regards to the modal window: I initialize the variable everytime when I click to open the modal and back when I close the modal. And, I change the mode in the “Disabled State Logic” handler, because my Select Field has no “Read-Only State Logic” Handler.
Hello @Alexander_Pavelko, I have tried the solution and it worked. But I have now switched the element to a reusable component using the reusable component data model. Here I experiencing the problem, that the events are not executed the same way like before. That means, when I change the read-only state to true, the elements do not change their state to editable. And, even the save and cancel button will remain visible. Any idea why this could happen?
I will try to reproduce this issue, but in my case the reusable component works correctly.
Could you please give me more information about the changes what you made?
Could you check if readOnly changes when you try to change the state (you can use print for example)?
And please add screenshots of the changes you made.
After open the modal frame and clicking the edit Button this is the console output. ITEMNAME is the text field which I want to edit. It is set to false but I cannot edit it.
the Page Name is expenses but the logic is in the Component expense_modal. The modal will be opened by clicking on the itemName Text Field in the Repeater Container. In the expense_modal Component the important logic for the readonly state is located in the three Icons on the right hand side.
Thank you @Dima. I see that this solves a problem. But, when I am binding the editable fields to the readonly state then the fields do not change their behaviour. Only if I am binding the state to the Disabled State Logic the behaviour is as expected. Any idea why this is the case?
And, where should I initially set the readonly state to true if not in Class List Logic?
And, where should I initially set the readonly state to true if not in Class List Logic?
When open the modal, or at mount events.
But, when I am binding the editable fields to the readonly state then the fields do not change their behaviour. Only if I am binding the state to the Disabled State Logic the behaviour is as expected. Any idea why this is the case?
Could you create a minimal reproducible example of this issue? That will makes investigation a lot easier.
done. Investigationg on my own. It seems to work, but the text field does not show a different text format for read-only and editable. I will look for the CSS formatting.
with an on-click event logic. On clicking the pencil all input fields should be enabled for editing. It sounds simple - loop through all fields in the DOM and enable editing (set Disabled to False).
A beautiful and simple solution by 
