[claudiobosticco]

Now it’s even nicer and more convenient - I can simply write:

               src: {
                    _base: "Edit",
                    Disabled: "Blank"
                }

which, for my use case, is even simpler than using visibleWhen or showIf. Thank you very much!

[Isomorphic]

In reverse order, we likely won't add a builtin means of blanket-redrawing on state-change because it's not very efficient; a simple flag like redrawOnStateChange is going to redraw on mouseOver, for example.

On visibleWhen - the suggestion of an isDisabled type accessor for the ruleContext came up in response to your comments in this thread. This is the kind of approach we'll likely take, but we don't have it in the roadmap as yet. We could do it as a small Feature Sponsorship, if you need it on a schedule.

Finally, on the issues with the src-strings - as noted in your other thread about icon.showOver, a change has been made which addresses cssClass handling for StockIcon-based src-strings in all cases in FormItemIcons. If you're using the default "icon" class, you should no longer need to set it anywhere - but it will work in any of srcString.cssClass, icon.baseStyle or item.iconBaseStyle, and be stateful everywhere it should be (including from an SCStatefulImgConfig).

Note that in your most recent test-case, you no longer need to specify the Over state - if showOver is effectively true, you'll get the Over state anyway; if there's no Over entry, you'll get the Over state of the _base entry.

    // - no cssClass in _base means it's using FormItem.iconBaseStyle, which is "icon"
    // - with showOver: true, no Over entry below means you get the _base image, Edit, with iconOver
    src: {
        _base: "Edit",
        Disabled: "Edit:color:transparent;"
    },

[claudiobosticco]

Hi, thanks for the further clarifications. Now, with cssClass also specified on _base, I see that it works.

About visibleWhen: I noticed that there was nothing related to the disabled state in the ruleContext, but if you’re going to add it, I think it will be useful in general, and it will turn out to be the simplest solution for my case.

Thanks also for the tip about using showIf with updateState. I just didn’t understand whether the comment "right now, it requires the item to be refreshed on state-change" implies that you intend to make changes so that it won’t be required to implement updateState anymore, or not.

[Isomorphic]

Out of interest, on this: "if I use Over:"Edit:cssClass:icon;", then it applies class="iconOver" when I hover, but it doesn’t switch back to class="icon" on mouseOut."...

Just set cssClass:icon on the _base image as well, and it will change back

Note that you can also set a specific state class, like iconOver, and also set statefulClass:false, and it'll just use the class you mentioned.

[Isomorphic]

Ah, great, thanks for the detail.

You're quite right - SCStatefulImgConfig was not working in FormItemIcons, and that was for two reasons - 1) FormItem wasn't extracting the proper state from the object, prior to considering its StockIcon mapping. And 2), an internal process, Canvas._updateIcon(), updates elements in-place, and it was replacing the StockIcon but not the other config in the string (that is, the bit after the first colon in "Edit:color:red;").

Yes, those prefix states in the config object are indeed useful - they were intended for file-URLs, but they ought to work here as well. We'll make sure that's true for tomorrow's builds.

In the meantime, if you want to hide icons in a disabled item, you can do that - we don't recommend it, because disappearing icons removes context for users, but if you really want to do that, this will do it:

// On the icon itself - it might seem like this should work, but we don't provide arbitrary settings like
// "disabled" on targets in the ruleScope - we will be adding a ruleContext accessor, something like
// isDisabled.<i>componentId</i>, but that won't be in the next day or two. So this will not work:
//visibleWhen: { fieldName: "form.disabled", value: false },

// however, this will work, on the icon
showIf : function (form, item) {
    if (item.disabled || (item.disabled == null && form.disabled)) return false;
    return true;
},

// but, right now, it requires the item to be refreshed on state-change
updateState : function () {
    this.Super("updateState", arguments);
    this.redraw();
},

[claudiobosticco]

Hi, as mentioned in post #8, I want to hide the FormItemIcon when the formItem is disabled.
For now, I’ve only done some tests in the showcase.

At first, I thought about using a custom style.
Then, while reviewing the docs, I remembered that there’s also the option to use an SCStatefulImgConfig object, so I thought I’d give it a try.

But I’ve never used it before. Now that I’m reviewing the documentation, it turns out to be even more flexible than I remembered.
For example, I see there are prefixes like #state: and #modifier, which are really powerful and flexible.

However, it seems that I must explicitly declare the Over state. I just don’t understand how: I’d simply like the Over to behave normally, i.e., using iconOver.
But if I use Over:"Edit:cssClass:icon;", then it applies class="iconOver" when I hover, but it doesn’t switch back to class="icon" on mouseOut.

[Isomorphic]

hi Claudio,

Can you please explain to us what it is you're trying to do?

It seems like you're reporting every possible case of icons in use, one after another - perhaps show us your actual code.

[claudiobosticco]

SmartClient Version: v13.1p_2025-09-25/AllModules Development Only (built 2025-09-25)

Hi, it now works with the Disabled state, but it seems there are still some issues.

First, using this test case:

var form = isc.DynamicForm.create({
    ID: "testForm",
    autoDraw: false,
    items: [{
        name: "search",
        title: "Search Term",
        width: 200,
        icons: [
            {
                name: "edit",
                src: {
                    _base: "Edit",
                    //Over:"Edit:cssClass:icon;",
                    Disabled: "Edit:color:transparent;"
                },
                inline: true,
                showOver: true,
                showDisabled: true,
                showFocused: false,
                prompt: 'edit'
            }
        ]
    }]
});

isc.VStack.create({
    width: "100%",
    members: [form]
});

I expected the icon in the Over state to have the iconOver class, but it doesn’t.

Second, assuming that the first point is actually by design, if I uncomment the line:

Over:"Edit:cssClass:icon;",

I see that when hovering the icon gets the iconOver class, but it doesn’t revert back to icon on mouseOut.

[Isomorphic]

hi Claudio - you should find that using StockIcon/sprite-config src-strings (as opposed to real URLs) as the entries in an SCStatefulImgConfig object will now work when applied to FormItemIcon.src.

Please retest with today's build, or a later one.

[Isomorphic]

Thanks Claudio - we see the issue and will update here shortly when it's been fixed

[claudiobosticco]

Hi, I noticed that the notation where different states are specified in the src attribute does not work when used in FormItemIcons:

var form = isc.DynamicForm.create({
    ID: "testForm",
    autoDraw: false,
    items: [{
        name: "search",
        title: "Search Term",
        width: 200,
        icons: [
            {
                name: "edit",
                src: {
                    _base: "Edit",
                    Over: "Edit:color:yellow;",
                    Disabled: "Edit:color:red;"
                },
                inline: true,
                showOver: true,
                showDisabled: true,
                showFocused: false,
                prompt: 'edit'
            }
        ]
    }]
});

isc.VStack.create({
    width: "100%",
    members: [form]
});

I see the "Edit" icon but with "icon" class applied.
On hover and when disabling the formItem, I see WARN messages in the console:

Edit:1 GET https://www-demos.smartclient.com/smartclient-13.1/isomorphic/system/reference/exampleImages/Edit 404 (Not Found)
Edit:color:yellow;:1 GET https://www-demos.smartclient.com/smartclient-13.1/isomorphic/system/reference/exampleImages/Edit:color:yellow; 404 (Not Found)
Edit:1 GET https://www-demos.smartclient.com/smartclient-13.1/isomorphic/system/reference/exampleImages/Edit 404 (Not Found)
testForm.getItem("search").setDisabled(true)
undefined
Edit:color:red;:1 GET https://www-demos.smartclient.com/smartclient-13.1/isomorphic/system/reference/exampleImages/Edit:color:red; 404 (Not Found)

[claudiobosticco]

SmartClient Version: v13.1p_2025-09-24/AllModules Development Only (built 2025-09-24)

I can confirm that it's working now, thank you very much

[Isomorphic]

hi Claudio,

We've fixed this issue for tomorrow's builds, dated September 23 and later.

The cssClass will now have "Disabled" appended as necessary - note that you'll need to set showDisabled: true on your icon.

[claudiobosticco]

By the way, I realized this because I would like to add a style with a transparent color to make the icon "disappear" when disabled. Currently there’s no way to do this, right?

[claudiobosticco]

SmartClient Version: v13.1p_2025-09-21/Enterprise Deployment (built 2025-09-21)

Hi, I noticed that the Disabled style is still not being applied to the SVG icon when using setDisabled(true) on the form or on the formItem.

Please try the following test case:

isc.StyleSheetHandler.create({
    autoLoad: true,
    cssText: ".myIcon {color: red;} .myIconOver {color: green;} .myIconDisabled {color: yellow;} "
});

var form = isc.DynamicForm.create({
    ID: "testForm",
    autoDraw: false,
    items: [{
        name: "search",
        title: "Search Term",
        width: 200,
        icons: [
            {
                name: "edit",
                src: "Edit:cssClass:myIcon;",
                showOver: true,
                showFocused: false,
                prompt: 'edit'
            }
        ]
    }]
});

isc.VStack.create({
    width: "100%",
    members: [form]
});

when running testForm.setDisabled(true) or testForm.getItem("search").setDisabled(true), the Disabled suffix is not added to the myIcon style.