Genie Checkbox

Checkboxes are typical in modern web applications to permit the user to activate or deactivate a number of options. In Genie, any existing application field can be turned into a checkbox. You simply specify which values represent a checked state and an unchecked state.

Creating a New Checkbox

A new Checkbox can be created by clicking Common section on the Widgets Panel and selecting Checkbox.

Once a new checkbox is created. You can change the label, which is the caption text that is associated with the checkbox to something meaningful. See Below.

Like all other widgets in Genie, you can also control other properties like the color and the font style of the checkbox label through the Properties Dialog.

Change a Textbox to a Checkbox

It is typical in green-screen applications to see input fields holding either a “Y” or an “N” (or sometimes a “1” or a “0”) for Yes/No values. However, this is neither intuitive nor web friendly. Below is an example of a product maintenance application that includes an input field where the user is required to enter “Y” or “N” to indicate whether an item is on special pricing.

Now, here is the same application after it has been web-enabled. Some customizations will be required to make the interface more intuitive.

In a web application, this input field would typically be replaced by a checkbox.

Right-click on the input field right next to the “Special?” label and select Change to Checkbox as shown below.

Next, we need to set the “checked value” property which specifies the value to send to the application when the checkbox is checked. Select the checkbox and in the “checked value” property, type in “Y”.

You can also control the “unchecked value” property in the same manner by placing an “N” inside of it.

Now here is the final output of the application.

Executing subfile options with a checkbox

The example below demonstrates changing subfile option textboxes to checkboxes. Since a checkbox can only hold one value, this is best suited for a subfile where you can predetermine a default option. For example, in the following screen, 5=Display can be our default option.

The first thing you will need to do is switch to design mode and drag a selection around all of the text boxes in the option column. Once you have all of the text boxes selected, you will want to change the “field type” property to checkbox.

Next, set the “checked value” property. This should be the option you wish to execute or specify to send to the application when the checkbox is checked. In this example, we want a product to be displayed when we check the box (option 5).

You can also assign an onclick event to the checkboxes. For example, to automatically send the Enter key when a checkbox is clicked, use pressKey(‘Enter’). This tells the application that you wish to go to the next screen, just as if you were to type in an option and press the enter key.

Your last step is to save your screen and turn off design mode. You should then have a screen that performs an option when you check the box next to the row you wish to display.