Overview

Spin Wheel adds a roulette-style prize wheel to your Mendix web pages. The user clicks Spin, the wheel turns and stops on a random option. The widget then writes the winning option to an attribute and runs an action, for example a microflow that saves the prize.

The options come from JSON text in a String attribute, so you can build the wheel in a microflow or nanoflow. Every option can have its own background color, text color, font and size. You can also set colors, borders, radius lines and fonts for the whole wheel with attributes. To start the wheel from a microflow, set the Must Spin attribute to true.

Use it for prize draws, lucky wheels in campaigns and events, games and quizzes, or to pick a random person, topic or task. It's based on the open-source react-custom-roulette library.

Documentation

Typical usage scenario

Use Spin Wheel when you want a fun, visual random choice on a page.

Where it helps:

- Prize draws and lucky wheels in marketing campaigns and events

- Picking a random person, task or topic in a team or class

- Games and quizzes

- A playful way to choose a discount or reward

How it works:

1. A microflow or nanoflow fills a String attribute with the options as JSON.

2. The user clicks Spin, or a microflow sets the Must Spin attribute to true.

3. The wheel stops on a random option. The widget writes the winning index to Prize Number, sets Must Spin back to false, and runs the On Complete Spinning action.

Features and limitations

Features:

- Options from JSON: text, an optional image, relative size, and a per-option style (background color, text color, font family, size, weight and style)

- Wheel colors from comma-separated lists, repeated around the wheel

- Outer border, inner radius (a hole in the middle), inner border and radius lines

- Font family, size, weight and style; perpendicular text; text distance from the center

- A spin duration factor and an optional wind-up animation

- The option shown at the pointer before spinning (Starting Option Index)

- Spin button caption and CSS class

- Start the wheel from a microflow with the Must Spin attribute

- Results: Prize Number (the 0-based index of the winner), Starting Option Index, and an On Complete Spinning action

- Every option has the same chance to win; the Spin button is disabled while the wheel turns

Limitations:

- The winner is chosen at random in the browser; the server can't choose the prize. For real prizes, check and store the result in a microflow.

- The wheel is drawn after its font loads. The default font, Roboto, comes from Google Fonts. Offline apps or apps with a strict Content Security Policy should set Font Family to a web-safe font such as Arial.

- All settings are attributes of the context object; you can't type static values in the widget properties.

- If the JSON is empty or not a valid array, the wheel and the Spin button aren't shown.

Dependencies

- Mendix Studio Pro 10.24.17 or a later 10.24 version

Installation

1. Download mendix.SpinWheel.mpk from the Marketplace or from the GitHub release Version1.2.0.

2. Copy it into the widgets folder of your app (App > Show App Directory in Explorer).

3. In Studio Pro, choose App > Synchronize App Directory (F4). The widget appears in the Toolbox as Spin Wheel.

Configuration

1. Create an entity with at least:

- a Boolean attribute for Must Spin

- a String attribute (unlimited length) for the options JSON

- an Integer attribute for Prize Number

2. Fill the JSON in the data source microflow, for example:

[{"option":"Gift"},{"option":"10% off","style":{"backgroundColor":"red","textColor":"white"}},{"option":"Try again"}]

3. Place the widget in a data view with this entity and select the attributes.

4. Optionally, select a microflow for On Complete Spinning to use the prize. Prize Number is the 0-based position of the winning option in your JSON.

5. Optionally, add attributes for colors, borders, fonts and the button.

Known bugs

No known bugs .

Report issues at https://github.com/bharathidas/Spin-Wheel---Roulette/issues

Frequently Asked Questions

How do I know which option won?

Prize Number gets the 0-based index of the winning option. Take the item at that position from the list you used to build the JSON.

Can I start the wheel without the Spin button?

Yes. Set the Must Spin attribute to true, for example in a nanoflow. The widget sets it back to false when the wheel stops.

Can I decide the winner on the server?

No. The winner is chosen at random in the browser. Check and store the result in the On Complete Spinning microflow.

The wheel doesn't appear. Why?

Check that the JSON is a valid array. In an offline app or with a strict Content Security Policy, set Font Family to a web-safe font such as Arial.

Can I hide the Spin button?

Set Spin Button Class Name to a class in your theme with display: none, and start the wheel with Must Spin.