Drop down list with disabled option

How-to Discussions
1

Following the wonderful video demo at https://www.youtube.com/watch?v=-jk3jNQzE4U I would like to also create a drop down with a disabled option, similar to the disabled attribute in the HTML option tag.

What would be the best way to do this given the link above? A working example would be most appreciated :smiley:

2

So, this might come across as slightly confrontational, but the video you linked to explains everything you need to make the thing you want.

You’re basically asking someone to make something for you, which is neither the best way to learn nor to be active here in the community.

I’d say you should give it a try yourself and rather ask more specific questions if you get stuck along the way.

3

You are expected to first share whatever code you have tried to create yourself. We can help solve issues may you run into any.

In general, the approach could be as simple as passing a boolean property to a ux:Class, and then using Change to describe how a “disabled” option looks like and behaves.

    <Panel ux:Class="DropdownOption" Height="56" IsDisabled="false">
        <string ux:Property="Label" />
        <bool ux:Property="IsDisabled" />
        <WhileTrue Value="{ReadProperty IsDisabled}">
            <Change bgRect.Color="#aaa" />
        </WhileTrue>
        <Text Value="{ReadProperty Label}" TextColor="#fff" Alignment="Center" />
        <Rectangle ux:Name="bgRect" Color="#18f" />
    </Panel>

    <StackPanel Alignment="Top">
        <DropdownOption Label="Option One" />
        <DropdownOption Label="Option Two" IsDisabled="true" />
    </StackPanel>

Needless to say, the IsDisabled property could be fed into UX from JavaScript. That would make it even simpler, because you could then check in a Clicked handler if the option is or is not disabled as well.

Also, you will want to spend some time reading about Componentization.

4

Thanks for the feedback, I was able to resolve this against the combobox in the Fuse samples github repository with the following:

Add a data model level disabled line,
PaymentPage.js: 3-8

var paymentOpts = {
	cash: { label: "Cash", desc: "Have cash ready at the door.", disabled: true },
	credit: { label: "Credit Card", desc: "Pay now with a credit card.", disabled: false },
	paypal: { label: "PayPal",  desc: "Pay in advance with PayPal.", disabled: false },
	coupon: { label: "Coupon", desc: "Have your coupon ready at the door.", disabled: false },
};

Change the mapOptions to include this option with,
PaymentPage.js: 45-52ish

// converts our own options object into an array of options for an `Each`
function mapOptions(opts) {
	return Object.keys(opts).map(function(key) {
		return { value: key,
				 label: opts[key].label,
				 disabled: opts[key].disabled };
	});
};

Then in the UX, wrap the dropdown list Tapped with something like

						<WhileFalse Value={disabled}>					
							<Tapped>
								<DebugAction Message="This is {disabled}" />
								<ToggleSelection />
								<Set thePopup.Value="false" />
							</Tapped>
						</WhileFalse>