Using Forms

Introduction

In the previous tutorials, we've been using the sandbox to test the rulesets we've made. Rulecube also offers Forms, which can be used to quickly build a UI on top of your ruleset. Forms can be simple or as complex as you want. A form consists of multiple pages, each with sections, and each section has form elements. Some examples of form elements are inputs like text fields, dropdowns, checkboxes, etc. But also dividers, buttons, alerts, headers, text, tables, and videos.

For a more in-depth overview of Forms, read this article.

Example

Let's take a simple calculator ruleset, for example.

Setting up our ruleset

1. Create an input named 'a' of type number.

2. Create an input named 'b' of type number.

3. Create a rule named 'sum' with the following expression: a + b.

4. Create a rule named 'product' with the following expression: a * b.

5. Save the ruleset.

Adding a form

Now, we can create a form for this ruleset. We will create a form with one page and two sections. The first section will contain the inputs 'a' and 'b', and the second section will contain the outputs 'sum' and 'product'.

1. In the left menu, click on the '+' next to Forms, similar to how you created the input and rules.

2. Give the form a name, for example 'Calculator'.

3. Click on the created Page element to expand it, and give it a name; it does not matter what you name it.

4. Add a section to the page.

Creating the form input

Now, we can start adding elements to the first section.

1. Click on the Section element to expand it

2. Click on the '+ Element' button to add an element of type 'Input'

3. Click on the element to expand it

4. Set its 'Label' property to 'First input'

5. Under 'Property binding', set the 'Path' property to 'a'; you can pick this from the dropdown

6. Set the 'Input type' to 'Number'

You've created the first input. Now, let's clone this element to create the second input.

The cloned element will be added below the original element, so you may need to scroll to see it

1. On the far right of the element header, click the clone button (next to the delete button)

2. Click on the cloned Section element to expand it

3. Change the 'Label' property to 'Second input'

4. Change the 'Path' property to 'b'

Creating the form outputs

Now that we've created the inputs let's create the outputs.

1. Click on the '+ Add section' button to add a new section

2. Click on the '+ Element' button to add an element of type 'Output'

3. Click on the element to expand it

4. Set its 'Label' property to 'Sum'

5. Under 'Property binding', set the 'Path' property to 'sum'; you can pick this from the dropdown

6. You can leave the 'Output type' as 'Text'

Now, let's clone this element to create the second output.

1. Click the clone button of the Sum element

2. Change the 'Label' property to 'Product'

3. Change the 'Path' property to 'product'

Creating the execute ruleset button

We're almost done. Now, we need to add a button to the form that will execute the ruleset.

1. Click on the '+ Element' button to add an element of type 'Button'

2. Click on the element to expand it

3. Set its 'Label' property to 'Calculate'

4. Under 'On click actions, ' click on the '+' button

5. Select 'Execute ruleset' instead of 'Nothing'

Previewing our form

Now, we're ready to test the form. Save the ruleset and click on the 'Preview' button in the top right corner of the screen.

You should see two inputs, a button, and two outputs. When you fill in the inputs and click the button, the outputs should update.