readOnlyDisplay: "readOnly" UE

[claudiobosticco]

Hello, regarding the ReadOnlyDisplayAppearance feature, which I think is great, I noticed that when there are forms with a mix of editable and non-editable form items, it’s not very intuitive to understand what is editable and what is not, when using the default readOnlyDisplay: "readOnly" (especially on touch devices but not only).

I tried to put a small label using the APIs related to errors, but that would only work with titleOrientation: "top":

isc.DynamicForm.create({
    ID: "exampleForm",
    width: 300,
    numCols: 1,
    errors: {email: "<span style='font-size:11px; vertical-align:top'>read only text</span>"},
    titleOrientation: "top",
    fields: [
        {
            name: "username",
            title: "Username",
            type: "text",
            width: "*",
            required: true,
            defaultValue: "bob"
        },
        {
            name: "email",
            title: "Email",
            canEdit: false,
            showErrorIcon: false,
            showErrorText: true,
            errorOrientation: "bottom",
            showErrorStyle: false,
            required: true,
            width: "*",
            type: "text",
            defaultValue: "bob@isomorphic.com"
        }
    ]
});

The result is not bad in my opinion:

but with the default titleOrientation, the title wouldn’t be vertically aligned with the textBox:


Anyway I’m not sure if you agree, but in my opinion, it would deserve some different styling or another solution to make more evident the fact that it's a read-only text (while maintaining an aesthetic advantage over the staticText/disabled versions).

[Blama]

Hi All,

wow, I did not know about showErrorIcon, showErrorText, errorOrientation, showErrorStyle and similar.
I don't need them, but pretty cool that they are there!

Isomorphic: Could you add a validation sample for this, of course not all options, but that one know that e.g. errorOrientation: "bottom" is possible.

Best regards
Blama

[Isomorphic]

This comes up every now and then, and we're not sure what to do. Natively, if you declare a field as read-only but not disabled, the browser makes such controls look exactly the same as normal text inputs.

We think styling readOnly inputs as disabled is wrong/misleading, because they are interactive (you can copy and paste).

Styling them as a color in between normal and disabled is too subtle.

We think adding some additional text is too busy, especially when there are many read-only fields.

There are options like using a dashed outline, but, there isn't really any common design that end users are already aware of, and so far, we are not seeing consensus from designers on the right approach.

So, the framework already supports the ability to style such fields specially - go for it, and let's see what you like as a design!