Interface logic

In this example, we will toggle visibility of a component by a checkbox.

So let's add a checkbox component to our form. Click New Editor and then SQL DDL Command for VCS. Write this SQL query and click save.

alter table x_person add column active_flag smallint not null default 0;

Create a new form using form wizard.

After you click savea prompt asks if you would like to open grid wizard. Click ok.

Enter grid name. Tick Visible? to add a field to grid. Then, click tick icon on the left to save.

Go to form frm_checkbox and change UI Component of active_flag to Checkbox.

We will toggle age element of the form by checkbox. So it would look better if checkbox was above the age element. Age element's order is 40 and checkbox's order is 50. So let's make checkbox's order 35.

Select frm_checkbox and double click on active_flagelement. Change show order and update.

Now checkbox is above the age element.

Double click on age element, scroll down to Frontend JS Hook and write this code. Click save.

,hidden:!values.active_flag

What happened under the hood? We selected React template for this guide. So let's look at what's happening with React code.

Basically we added hidden prop to age element of the form with value set to !values.active_flag

<form>
  //other elements here...
  <label>
    Age
  </label>
  <input type="text" hidden={!values.active_flag} />
</form>

values is the state of form that has active_flag property.onChage function of the checkbox element calls setState to set active_flag value to event.value .

Okay you wrote your first hook point. Now let's see the result.

Go to Pages, click new, and give it a name. Save it.

Click save again.

Go to page tpl_checkbox , select Page Objects and click new button to add your grid.