Skip to Content

Edit the form upon Handle Edit button else Display as text field

edit.pnghello all,

Would you please help me with it? I want to change the contents of the form(input fields) when EDIT button is pressed, Else it will always be display in display format(Text Fields). Which approach would be best for this situation. I tried keeping both the elements in one form. Based on press event one will be displayed another one is hidden, But in this case space of hidden element is occupied which does not look good.


edit.png (38.0 kB)
Add a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

3 Answers

  • Posted on Aug 11 at 03:16 AM

    Hi Bikash,

    If I understand your question correctly, your requirement is to have the fields editable only when Edit button is clicked. To do this, you need not have two types of controls.

    This can be achieved with Input control itself. You can toggle property: "enabled" to true or false based on edit button press event.

    Do let me know if this resolves your issue.

    Best Regards,


    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Aug 28 at 05:46 AM

    Hi Bikas,

    Please don't use external CSS, it is not recommended as standard practice in Fiori until unless it is very urgent to use.

    in CSS, .label{border:none;} will not work because enablement or control you want to achieve is done on event trigger(i.e on edit button press) but CSS works in a hierarchical way, means it will read the CSS property once and which code is on the top level, it will execute that.

    the best way is to do it in a javascript way.

    example code just for refrence : get the control and setEnabled true


    or if it is a fragment then sap.ui.core.Fragment.byId("fragmentID","inputControlId").setEnabled(true);

    Put one control only in display mode First. and then

    1) on the press of the edit button, get the control of the input field, and setEnabled (True).

    2) once it is in edited stated, and once you press the save button, again setEnabled( False) for the input control.

    For more info:

    try this link:

    let me know if it doesn't work.



    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Aug 28 at 07:32 AM

    Hi Bikash,

    ok, i understood the way you are doing. please try to implement the CSS property through js commands. i hope this will solve your issue. the same thing that you are doing in css. try to implement in js

    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.