Building a simple Form app

Using Pages, Functions and Javascript to build a customized app.

Starting out with a simple Form

When creating Apps inside Jestor, you're usually going to break them down into three main components:

  1. The standard page: what the user will see as soon as he opens the app.
  2. Javascript functions: what will happen as the user interacts with the app.
  3. Standard functions: back-end functions that do things like search for information or create records. They may also return front-end values.

So, in the case of a simple form to create a record in a table, you're probably looking at:

  1. A page with input fields and a Submit button.
  2. A JS function to get the information from the fields and call a standard function.
  3. A function that creates a new record in a table through a Jestor.create().

First we're going to build a very basic form: a text input and a submit button. This will create a company in a Companies table and display a message confirming the record was created, as well as displaying the ID of this new record.

Building the app

First things first, we'll create a page called CompanyForm. We'll create the HTML for the form, which we can write in the Front-End part of the Page. In it, we'll have an input field and a button.

1552
<input type="text" id="name" label="Name">
<button id="submit">Submit</button>

The result is this page:

1552

Now we're going to create a JS function called SubmitForm that is activated when the Submit button is clicked. It's going to call a standard function called CreateCompany (which we haven't created yet, but we'll get around to that).

1508
$(document).ready(function(){
    $('#submit').click(function(){
        callFunction("createcompany",{company_name:$('#name').val()},null,false);
    });
});

As you can see, when we've built this function in a way that, when the submit button is clicked, it's going to call a createcompany standard function, sending the text on the name field of the page as the variable company_name.

Now, we're going to create the standard function createcompany. This function will use the information on $data['company_name'] (that is, what it's receiving from the form) to create a company record.

We'll also go ahead and create a message to be displayed as feedback, and return it through the Front-End part of the function by using {{}} to access the Back-End variables.

1552
$company = Jestor.create('companies',['name' => $data['company_name']]);
$message = $company['name']." was created as a company with id = ".$company['id_companies'];
{{ $message }}

Now, we're going to go back to the page itself and add an element where we can render this message. We're also going to add the Javascript function to the page SubmitForm.

1508
{{ Jestor.addJS('submitform') }}

<input type="text" id="name" label="Name">
<button id="submit">Submit</button>
<br><br><span id="company_created"></span>

Finally, we're going to modify the JS function SubmitForm so the result we get from the standard function CreateCompany (that is, $message), is rendered on the new HTML element. We can do that by passing the HTML element ID and setting reload to true.

1552
$(document).ready(function(){
    $('#submit').click(function(){
        callFunction("createcompany",{company_name:$('#name').val()},'company_created',true);
    });
});

Alright! So now let's test this new app:

800

Success 🎉

Everything is working as intended!

🚧

Create forms with individual elements

Be aware that using an HTML form tag on Jestor won't work appropriately: create each field as an individual element, as we did in this example.