AMP
  • email

Dynamically updating items in a feed

Introduction

This sample demonstrates how to display a feed of data, allowing the user to go through a large number of items in an email without having to scroll.

The sample uses a combination of amp-list, to fetch the initial items from the server and amp-form, to "refresh" a single item, by making a new server request.

Styles

We use CSS to hide the initially fetched item after the form is first submitted.

We also define a layout that allows us to have fixed card sizes, to ensure form submissions don't result in content jumps.

<style amp-custom>
  .amp-form-submit-success .initial-content,
  .amp-form-submitting .initial-content,
  .amp-form-submit-error .initial-content {
    display: none;
  }

  .card {
    width: 160px;
    height: 120px;
    margin: 10px;
    float: left;
    position: relative;
  }

  .card .next-button {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
</style>

Single item template

Define a template for a single item inside a card and give it an id. This template is used by amp-form for displaying new items.

In this case, we use a single amp-img.

<template id="item-template" type="amp-mustache">
  <amp-img src="{{items.imageUrl}}" layout="fixed" width="160" height="90"></amp-img>
</template>

Initial list of items

We define a template for the initial items and their layout and give it an id, allowing us to use it subsequently in an amp-list. This template is used by amp-list for fetching the initial up-to-date contents from the server.

It contains in itself an amp-form for each item which references the template defined above referred by its id. By using a different template for the amp-form, we're able to "refresh" a part of the content, namely the image in this case.

This template contains the same markup (in this case, a single amp-img) as used in the template above to render the initial items. This is wrapped inside <div class="initial-content"> which becomes hidden the first time the user submits the form.

<template id="list-template" type="amp-mustache">
  <form class="card" method="post" action-xhr="https://amp.dev/documentation/examples/api/photo-stream?single&width=160&height=90">
    <div class="initial-content">
      <amp-img src="{{imageUrl}}" layout="fixed" width="160" height="90"></amp-img>
    </div>

    <div submit-success template="item-template"></div>

    <input class="next-button" type="submit" value="Next">
  </form>
</template>

We use amp-list to render the initial items from the server using the template defined above referred by its id.

The height matches the combined height of our cards and their margins. The initial server response defines the number of cards to be displayed (in this case four).

<amp-list template="list-template" src="https://amp.dev/documentation/examples/api/photo-stream?width=160&height=90&items=4" layout="fixed" width="360" height="280">
</amp-list>
¿Necesita explicaciones más detalladas?

Si las explicaciones que se encuentran en esta página no responden todas sus preguntas, no dude en comunicarse con otros usuarios de AMP para discutir el caso de uso exacto.

Ir a Stack Overflow
¿Faltó que explicáramos alguna función?

¡El proyecto AMP alienta profundamente su participación y contribuciones! Esperamos que se convierta en un miembro permanente de nuestra comunidad de código abierto, pero también agradecemos las contribuciones esporádicas sobre los temas que le apasionan especialmente.

Editar ejemplo en GitHub