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

[former_member676157]

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.

Thanks

[ThorstenHoefer]

Hi,

have you checked smart form / smart fields?

Smart Field - Samples - Demo Kit - SAPUI5 SDK (ondemand.com)

[former_member810433]

Hi , Could you please help me with it? I want to make my form editable by clicking button and again non-editable by clicking the same button....

[former_member466198]

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

[former_member466198]

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

this.getView().byId("inputControl").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:https://sapui5.hana.ondemand.com/#/entity/sap.ui.layout.form.SimpleForm/sample/sap.ui.layout.sample....

let me know if it doesn't work.

thanks

Abhishek

[former_member676157]

Hi Abhishek,

Thank you for your reply here. I am trying to hide the border of an input field through CSS.

I am able enable/disable through JS.

Thanks

[rohit_singhal]

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,

Rohit

[former_member676157]

Hello Rohit,

To toggle enable property will work. It looks like this(attached screenshot). I wanted to omit the borders, that the reason I was going for text fields. Is there any way to do it?

inp.png

[rohit_singhal]

Hi Bikash,

You can control the border visibility by applying a css class along with toggle logic.

In non-edit mode you could apply a css class for ex: hideBorder and remove it during edit.

Best Regards,

Rohit

[former_member676157]

Hello,

I have tried the CSS to hide the border. But it is not working.

.label { border: none; }

Thanks