Interface logic

Last updated 7 months ago

Hook point

iCodeBetter gives you a skeleton of your business application as a result of interface configuration. You can give it muscles by writing code (JavaScript) at hook points .

So, let's add front-end logic at hook points of a form.

Toggle Visibility

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

Add checkbox component to our form.

Create a new form using form wizard.

After you click green tick a prompt asks if you would like to open grid wizard. Click ok.

Enter grid name.

Select the fields you want to add to grid.

You created form and grid!

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_person and double click on active_flag element. Change show order and update.

Now checkbox is above the age element.

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

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 select the grid. Save it.

If there are no user types available then first do the following.

  • Go to role groups and click new.

  • Do these configurations and save it.

Select the template and click new to add the grid.

Add the grid and save.

Click the template in left bottom corner or Preview.

You will see the result in React template!