AMP
  • email

Advanced Server Request

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="post" 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" max-items="1" template="animal-template" src="https://amp.dev/static/inline-examples/data/amp-list-animals.json" layout="fixed-height" height="85">
  <div placeholder>Loading ...</div>
</amp-list>
Precisa de explicações mais detalhadas?

Se as explicações nesta página não respondem a todas as suas perguntas, entre em contato com outros usuários de AMP para discutir seu caso de uso específico.

Ir para o Stack Overflow
Falta explicar algum recurso?

O projeto AMP incentiva fortemente sua participação e contribuições! Esperamos que você se torne um participante assíduo de nossa comunidade de código aberto, mas também agradecemos contribuições pontuais para problemas que você tenha particular interesse.

Editar amostra no GitHub