4. Create your First Page

What is a Page?

Think of a page like a FileMaker layout. It will contain any combination of fields, buttons, data tables, text, labels, etc. that you place onto it. The primary difference is that a BetterForms page is not tied to a Table Occurrence, but will have access to whatever data you pass into it individually through the Data Model.

This guide assumes that you already have a working knowledge of basic JSON formatting and terminology. If you have never worked with JSON before, we recommend you start here first.

The Data Model

All data that can be seen by the page lives in the data model. The data model is merely a JSON object that can be pre-populated with data from your FileMaker Server, then modified by the user through simply input fields.

When you run a Scoped Hook, the data model is passed with the request so that you can save the data back to your FileMaker database.

Page Schema

The page schema is where you define the elements that live on your page. It's also in JSON format!

The fields array is the list of elements on your page. When you get to building your own pages, you can use the reference section to learn more about how each element works.

If you're familiar with HTML, you know that pages are built from the top of the screen down by default without specifying any position information, and the same concept is at play here. Using Bootstrap CSS, you can specify how wide an element should be, then the elements stack on the page accordingly.

Creating a Page

If you haven't already, create a new page. Click "New Page" from the Pages menu to follow along! Your initial page will have some default elements, then we'll add another one just to view some data.

You'll need to set a Scoped Hook Set Name for the page, but the page name and description can remain at their defaults for now.

For this form, let's turn the Authentication toggle to off ("No Auth") so that we don't have to worry about a login page for this form

In the Schema Editor tab, search the snippets for "HTML" and click the copy button for HTML - Data Model Inspector to copy it on your clipboard. This snippet is a JSON object that we'll paste at the end of the fields array. Don't forget to include a comma between the last element and the new one!

When you're done, the bottom of your schema should look something like this:

[{
    "schema": {
        "fields": [{...}, {
            "actions": [{
                "action": "validate"
            }, {
                "action": "showAlert",
                "options": {
                    "text": "Replace this action with an runUtilityHook",
                    "title": "Replace me!",
                    "type": "information"
                }
            }],
            "buttonClasses": "btn btn-info",
            "hint": "This button schema has an actions key that takes an array of actions. Actions after the validate will only run if validation is successful.",
            "label": "My Button",
            "styleClasses": "col-md-6",
            "text": "Validate and Run Actions",
            "type": "button"
        }, {
            "html": "<pre>{{model}}</pre>",
            "label": "Data Model Inspector",
            "styleClasses": "col-md-6",
            "type": "html"
        }]
    },
    "showPanelHeader": true,
    "title": "This is the form panel header, this text is in the formSchema. hide with misc setting key 'showPanelHeader'"
}]

The schema editor might seem overwhelming at first, but it's actually very well organized. To help you understand the structure, try clicking the triangles near the line numbers to collapse objects or arrays down and help you get your bearings!

Alternatively, while you're learning you may find it useful to use a JSON editor like jsoneditoronline.org. Simply copy/paste your JSON in there to view it in a different format.

Add some Data

In the Data Model tab, add a few JSON items so that they exist on the page. The element that we added to the schema will display this data on the page so that we can see if it's working properly. For example:

{
    "nameFirst": "John",
    "nameLast": "Doe"
}

Viewing your Page

You can always click the Preview button in the page editor to view your page rendered, however you often want to preview it within your own site. To do this, simply replace the app.fmbetterforms.com part of the URL with your own domain as configured in your site settings.

Don't forget to save your page before previewing it in a new tab!

Go ahead and preview this page in your own site to make sure all the elements appear correctly. You should see the Data Model displayed as plain text below the button.