I am loading a list of options from our backend in an AMP email, and we are storing the selected option in a state variable which is set as the value of an <input> element. We would like to select the first element by default (doing this on a button press is OK), but we don’t see a way to do this in AMP Email.
An example snippet:
<!doctype html>
<html ⚡4email data-css-strict>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js" async></script>
<script custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js" async></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
</head>
<body>
<amp-list
width="auto"
height="100"
layout="fixed-height"
src="https://amp.dev/static/inline-examples/data/amp-list-urls.json"
>
<template type="amp-mustache">
<div class="url-entry">
<button on="tap:AMP.setState({ selected: '{{title}}' })">{{title}}</button>
</div>
</template>
</amp-list>
<input type="text" [value]="selected" />
<button>Submit</button>
</body>
</html>
A few things I’ve tried (these all assume we are adding an event to the button):
- When a button is pressed and
selectedis null, settingselectedto the first item from the list response. But there is no way to get the data from the list. - Same as above, but trying to get data from the list from AMP State initialized with
src. This is not available for the Email context. - Looking for some callback after the
amp-listdata loads to call a setState on. To my understanding, there is no callback onamp-listthat is run after data loads.