Serving a dynamic form

We now know how to display a static HTML page using a service linked to a template.

The next step is to create a form, powered by a package to serve dynamic content.

First, we will create a template that looks a bit nicer and shows a form.

Create a new template named order-phone-form and set the HTML content to the following:

<!doctype html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Order a phone</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
  <style>
    :root {
      --pico-font-size: 87.5%;
    }

    main {
      max-width: 480px;
      margin: auto;
      padding: 2rem 1rem;
    }
  </style>
</head>
<body>
  <main>
    <h2>Order a phone</h2>
    <form method="post">
      <label>
        Your name
        <input type="text" name="name" placeholder="Enter your name">
      </label>
      <label>
        Phone
        <select name="phone">
          <option value="">Select desired phone</option>
          <option value="iphone">iPhone</option>
          <option value="android">Android</option>
        </select>
      </label>
      <button type="submit">Submit</button>
    </form>
  </main>
</body>
</html>

As you can see, the template now contains the code for the entire HTML page, including the doctype preamble, <html>, <head> and <body> sections. To keep the HTML as short as possible, we are using the Pico CSS framework to provide basic styling. When creating your own templates, you can use any HTML/CSS/JS framework you like, such as Bootstrap, React or Angular.

tip

As before when creating a package with AutomatorScript, this tutorial assumes that you are familiar with the basics of HTML. If you need a refresher, please take a look at the MDN HTML tutorial.

The HTML editor in the automator also helps you by providing code completion and showing explanations of HTML elements when you hover over them.

Switch to the Services tab, create a service with the following fields and press Save:

Name: order-phone
Service type: HTML page
GET template: order-phone-form

To see the URL of the service, select the DummyJSON account in the Service URLs section.

Copy the bottom URL to the clipboard and paste it into a new browser tab. It should look like this:

The order phone form

Much better!

So far, the form is still static. We will now create a package that will serve dynamic content to the template.

Go to the Packages tab and add a package called "Order Phone Form". Fill in the subject and summary in the header comment, and add the following code:

const $phones = rest_get("/products/search?q=phone", "DummyJSON")?.products;

This uses the rest_get function to retrieve a list of phones from the DummyJSON API.

Notice that we are assigning the result to the $phones variable. The dollar sign at the beginning of the variable name is a special symbol that allows us to access the variable in the template.

Switch to the package settings. Make sure that the Enabled checkbox is checked and add a trigger with the following settings:

Trigger type: Service GET
Account: DummyJSON
Service: order-phone

This links the package to the service, so that it will be triggered when the service URL is accessed in the browser.

We also need to adjust the template to display the list of phones.

Go to the order-phone-form template. Set the Render mode field to Curly braces {{ ... }}. This field is used to select your preferred syntax for including dynamic content in the template. Read more about it on the Render mode page.

tip

Which syntax you choose is largely a matter of personal preference, but there are situations in which a certain style is ruled out, because it conflicts with the web framework that you might be using in your template. For example, the Angular framework uses curly braces for its template syntax, so if you are using Angular, your template cannot use the curly braces render mode.

Next, replace the <select> element (line 32 through line 36) with the following code:

{{@$phones}}
<select name="phone">
  <option value="">Select desired phone</option>
  {{*phone}}
    <option value="{{phone.title}}">{{phone.title}}</option>
  {{*}}
</select>
{{@}}

This fragment uses the Loop syntax to loop through the list of phones and display a select option for each phone.

Finally, press Save, switch to the browser tab with the form and reload it. The form now displays a list of phones:

The order phone form with a list of phones