Disable and Change Button Color

How-to Discussions
1

So, simple question, I figured someone else would’ve already asked this but I can’t seem to find another forum, so my question is:

I’ve got a list of buttons for my users to select, when a certain value in my backend is true (or false, doesn’t matter really), I want that button to turn gray, and not be usable anymore. How would I achieve this? I’d assume some form of <WhileTrue… /> etc? But how do I disable the button and change its background color inside of that. Here is my custom button.

Thanks in advance!

<Panel ux:Class="SASi.DateButton" Margin="10" Padding="10" FontSize="20">
	<string ux:Property="Text" />
	<float ux:Property="FontSize" />

	<Rectangle Layer="Background" CornerRadius="10">
		<DropShadow Angle="90" Distance="1" Spread="0.2" Size="2" Color="#00000060" />
		<Stroke Width="4">
        	<SolidColor Color="#124F63" />
    	</Stroke>
	</Rectangle>

	<SASi.Text Value="{ReadProperty Text}" FontSize="18" TextAlignment="Center" />

	<WhilePressed>
		<Scale Factor=".95" Duration=".08" Easing="QuadraticOut" />
	</WhilePressed>
</Panel>
2

Hey Caleb

I see that you have added two class properties Text and FontSize. Let’s add another property Disabled which will hold boolean value true or false. Now in js create our Observable with value false. This will be our default value for the button. In UX when you create new class instance just data bind to property. This way you get your value from javascript.

DropShadow happens to be slow, better use Shadow to get a shadow for your element.

Here is example based on your code:

<App>
    <JavaScript>
        var Observable = require("FuseJS/Observable");
        var buttonDisabled = Observable(false);
        function toggle() {
            buttonDisabled.value = !buttonDisabled.value;
        }
        module.exports = {
            buttonDisabled: buttonDisabled,
            toggle: toggle
        }
    </JavaScript>
    <Panel ux:Class="DateButton" Margin="10" Padding="10" FontSize="20" Height="40">
        <string ux:Property="Text" />
        <float ux:Property="FontSize" />
        <bool ux:Property="Disabled" />
        <Rectangle ux:Name="box" Layer="Background" CornerRadius="10">
            <Shadow Color="#0060" Size="2"/>
            <Stroke Width="4">
                <SolidColor ux:Name="stroke" Color="#124F63" />
            </Stroke>
        </Rectangle>
        <Text Value="{ReadProperty Text}" FontSize="18" TextAlignment="Center" />
        <WhilePressed>
            <Scale Factor=".95" Duration=".08" Easing="QuadraticOut" />
        </WhilePressed>
        <WhileTrue Value="{ReadProperty Disabled}">
            <Change stroke.Color="Gray" Duration=".08" Easing="QuadraticOut" />
            <Change box.Color="Gray" Duration=".08" Easing="QuadraticOut" />
        </WhileTrue>
    </Panel>
    <StackPanel>
        <DateButton Text="Button #1" FontSize="20" Disabled="{buttonDisabled}"/>
        <Button Text="Toggle" Clicked="{toggle}"/>
    </StackPanel>
</App>