Show required fields with different background in form item?

[davidj6]

It is easy to setup form items to be required and they currently show by setting the title to bold. However, I would like to set the background color of the item input field to show required status. This is easier to see because the value is either in the highlighted field or not where bold titles have to be matched up.

Is there a way to do this?

dave

[Isomorphic]

There isn't a built-in way to do it based purely on the setting of the "required" property, but you can get the effect very easily. Just add something like

cellStyle: "required"

to each of your required fields. Then create a CSS style called "required" (you'll need others as well to cope with different states, see this link).

[davidj6]

Thanks for the pointer. What I was looking for was textBoxStyle because I just want the entry field itself to be highlighted.

I added the following CSS style:

.textItemRequired { 
    font-family:Arial,Bitstream Vera Sans,sans-serif; font-size:11px;
    padding:2px; border:1px solid #114A58;
    background:#FFFFCC;
}

and then I overrode the FormItem._getCellStyle as follows:

isc.FormItem.addMethods({

    // Helper to get style name from base style based on current state
    _getCellStyle: function(baseStyle) {
        var hasErrors = this.hasErrors();

        // Use caching to speed up style-name generation
        if (!isc.FormItem._cellStyleCache) isc.FormItem._cellStyleCache = {};
        var cacheObject = isc.FormItem._cellStyleCache[baseStyle];

        if (!cacheObject) {
            cacheObject = {};
            cacheObject.Error = baseStyle + "Error";
            cacheObject.Focused = baseStyle + "Focused"
            cacheObject.Disabled = baseStyle + "Disabled"
            cacheObject.Required = baseStyle + "Required"

            isc.FormItem._cellStyleCache[baseStyle] = cacheObject;
        }


        // if we have an error always just return the error state
        if (hasErrors) {
            return (this.shouldShowErrorStyle() && this.form.showInlineErrors
                        ? cacheObject.Error : baseStyle);

        } else {
            if (this.showFocused && this.hasFocus) return cacheObject.Focused;
            if (this.showDisabled && this.isDisabled()) return cacheObject.Disabled;
            if (this.required || this._required) return cacheObject.Required;
            // Otherwise "normal" state.
            return baseStyle;
        }
    }
});

to have the highlight apply based on the FormItem.required setting. I'm sure there are additional CSS styles that have to be updated with the "Required" suffix and I'll get to those after reading the style guide.

Please add add such required field highlighting as an option to the wish list such that it can be enabled/disabled similar to the title highlight on required.

dave

[Isomorphic]

This makes a lot of sense, and thanks for posting the sample code. We've added this as a near-term feature addition, although we can't guarantee it'll make 7.0.

[davidj6]

One side-effect I found was the "Focused" style. With the code posted a required field is not highlighted when focused because there is no "FocusedAndRequired" suffix. Not sure how this should be handled.

And one other note, I could not get the code posted below to work without also including the getTextBoxStyle() function code copied directly from FormItem. As I am new to JS and to SmartClient, what am I doing wrong to need that code as well? Obviously the less code duplication the better.

Thanks
dave

[Isomorphic]

We'll make sure we deal with the Focus+Required case.

On your patch attempt: obfuscation strikes again - your attempt to override _getCellStyle() didn't work because at runtime it's name is $15x. But installing the other override fixes it, at least for this call path.

[davidj6]

Oh, yes, that makes sense...

[levi]

Hi,

We've added this as a near-term feature addition, although we can't guarantee it'll make 7.0.

Is this also available in SmartGWT?
What's the best way define different CSS for the standard .textItem and a required text item as mentioned here with the workaround: ".textItemRequired" and ".textItemFocus+Required" etc?


thanks

[Isomorphic]

You need to install the patch shown above (as modified as explained above) and then create additional CSS styles that use the Required suffix.

[levi]

Sorry, I don't understand.
Is davidj6's post of redefining the _getCellStyle() JS method the solution? What about the case of Focus+Required you mentioned yourself?

[davidj6]

This is applicable to SGWT as-is (with the name change of _getCellStyle to $15x). You might not mind how it works. To see a sample screen shot of a working app and correct code (for obfuscation), visit Required Fields.