Will code that works in an AMP Start template also work out of the box in amp-story? What changes are necessary?

Question

For example, will this Search Form used in Adventures made easy, an AMP Start template, work in amp-story? If not, why not?

AMP Start - Build responsive, lightning-fast AMP pages with our templates and components

https://www.ampstart.com/templates

  <!-- Search Form -->
  <div class="travel-hero-search">
    <label class="travel-input-icon travel-shadow flex col-12 relative rounded">
      <input class="travel-input travel-input-big travel-input-clear border block col-12 rounded" list="locations" type="text" name="query" placeholder="Where would you like to go?" on="
          change:AMP.setState({
            fields_query: event.value,
            fields_query_live: event.value,
            fields_query_edited: query_query != event.value
          });
          input-debounced:AMP.setState({
            fields_query_live: event.value
          });
        " value="" [value]="fields_query">

    <amp-list layout="flex-item" src="/api/places?types=(regions)&types=(cities)&input=" [src]="'/api/places?types=(regions)&types=(cities)&input=' + fields_query_live">
      <template type="amp-mustache">
        <datalist id="locations">
          {{#predictions}}
          <option value="{{description}}">
          {{/predictions}}
        </option></datalist>
      </template>
    </amp-list>

    <div class="travel-hero-search-dates flex my2 justify-around">
      <label class="travel-date-input relative bold flex-auto" [class]="'travel-date-input relative bold flex-auto' + (fields_departure ? ' travel-date-input-touched' : '')">
        <input class="block relative p0 z1" type="date" placeholder="yyyy-mm-dd" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" title="yyyy-mm-dd" name="departure" on="
            change:AMP.setState({
              fields_departure: true,
              fields_departure_edited: true
            })
          ">

    <a href="travel-results.amp" class="ampstart-btn travel-input-big rounded center bold white block col-12" on="
        tap:AMP.setState({
            ui_reset: false,
            ui_filterPane: false,
            query_query: fields_query,
            fields_query_edited: false,
            query_departure: fields_departure,
            fields_departure_edited: false,
            query_return: fields_return,
            fields_return_edited: false,
            query_maxPrice: fields_maxPrice,
            fields_maxPrice_edited: false,
            query_city: fields_city,
            fields_city_edited: false,
            query_type: fields_type,
            fields_type_edited: false,
            query_sort: fields_sort,
            fields_sort_edited: false,
        })
      ">
      Find Adventures & Tours
    </a>
  <!--/ Search Form -->

If the templates suit your needs, is there a reason you can't use them in a non-story AMP document? — Jon Newmuis
Most of your recent comments and answers on my question board appears to amount to: DON"T USE AMP STORY. If you don't have detailed answers, then you don't have to answer. At some point, someone who has used amp-story, who wants to provide an excellent user experience, will answer my questions. — MobiCycle Ltd
Sorry, not trying to tell you not to use AMP stories but rather trying to get a full understanding of what you are trying to accomplish to provide as detailed of an answer as possible. — Jon Newmuis
A full understanding of what I am trying to accomplish? I am just trying to get answers to my questions in order to understand amp-story. That is all. There will always be a myriad of use cases. I would suggest the focus should be on outlining what amp-story currently offers, what it will offer in the future and what it can not or will not offer rather than focus on what I am doing. Thanks. — MobiCycle Ltd

Jon Newmuis Jon Newmuis · Accepted Answer · 2018-10-14T18:09:05

No, for many reasons.

AMP story does not support scrolling; these templates all require scrolling.
The <amp-story> tag must be a direct child of body and may not have any other siblings; these templates all have other content as a child of body.
Many of the components used in these templates are disallowed in AMP stories.
Some of the components (e.g. links) used in the templates are possible within AMP stories but require different markup.

These templates are all meant to be used for non-story documents. Templates for stories are certainly possible, and hopefully will come soon.

The search form in the specified AMP Start template will not work in stories, as forms are currently not allowed within stories.

Will code that works in an AMP Start template also work out of the box in amp-story? What changes are necessary?

1 Answers