Create a form to look the same in read or edit mode (v2/dss)

I want to create a form that basically looks the same in read mode as it looks in edit mode.
I want my form to behave the same way a table behaves, with the static header and field look the same in both modes. The only exception between modes is the pencil for editing.
Any suggestions?

image

Hey @TWyatt_Bluefin,

You can style the read mode and the edit mode of the Form in the DSS to where you will just need to adjust those styles to match.

I’m not sure if this is useful for what you are trying to accomplish, but why not just always have it in edit mode so they don’t have to click a pencil or guess which mode it’s in? This can help with the user’s experience and remove any confusion one may have when interacting with the form.

I hope that helps. :smiley:

@anon57098112 What I’m trying to do is show a read-only page (no edit option at all) that looks exactly like the data input page, which is always in edit mode.
In the DSS, I can’t seem to change the background of the data section. I can get close by changing the field options but I still have background that seems to bleed over.

Hi @TWyatt_Bluefin, can you explain more by what you mean by the background of the data section? Is it the part referred to as “input background” in the screenshot below?

I took an initial look and couldn’t immediately find a way to change the background color in the DSS for fields in read-mode.

1 Like

Have you tried using a custom form variant extended with JSS?

In the field.js tab you should insert:

"read": {
        "background": "white",
        "borderRadius": "4px",
        "border": "solid 1px #dddbda",
        "padding": "8px",
    }