AMP
JA
English Français العربية Español Italiano Indonesia 한국어 Português Русский Türkçe 中文
  • email

Advanced Server Request

View demo Open in playground

Introduction

This sample demonstrates how to display data from a server in an email and refresh it subsequently while taking the user's input into account.

Because AMP for Email doesn't allow binding to [src] in amp-list, it uses a combination of amp-list and amp-form that share the same amp-mustache template. When the form is submitted for the first time, the amp-list is hidden and the form's response takes its place.

Implementation

Define a template and give it an id to allow it to be used from both amp-list and amp-form.

<template id="animal-template"
  type="amp-mustache">
  <p>This displays data sent from a server.</p>
  {{#animal}}
    <p>You have selected {{animal}}.</p>
  {{/animal}}
</template>

When the user changes the selection, the change event triggers the form submission and hides the amp-list: on="change:animal-form.submit,animal-list.hide".

The amp-form renders the server response using the same template as amp-list, making the switch from amp-list to amp-form appear seamless.

Use a placeholder to make the loading state look the same as the submitting state for the form.

Select an animal to update the server response.

Loading ...
Loading ...
 
<form id="animal-form"
  method="get"
  action-xhr="https://amp.dev/documentation/examples/api/echo">
  <div>
    <p>Select an animal to update the server response.</p>
    <select name="animal"
      on="change:animal-form.submit,animal-list.hide">
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="parrot">Parrot</option>
    </select>
  </div>
  <div submitting>Loading ...</div>
  <div submit-success
    template="animal-template"></div>
</form>
<amp-list id="animal-list"
  items="."
  single-item
  template="animal-template"
  src="https://amp.dev/documentation/examples/api/echo"
  layout="fixed-height"
  height="50">
  <div placeholder>Loading ...</div>
</amp-list>
Need further explanation?

If the explanations on this page don't cover all of your questions feel free to reach out to other AMP users to discuss your exact use case.

Go to Stack Overflow
An unexplained feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Edit sample on GitHub