UI Extension — Element

The <miso-list> element is a customizable list element to display search, autocomplete, and recommendation results (code example).


api — The Miso API to retrieve data

This attribute is required to create a model automatically. If you want to create a data model manually, skip this attribute.

<miso-list api="user_to_products">...</miso-list>

See the MisoListModel for accepted values.

Payload (optional) — The default payload when calling the Miso API.

  <script data-attr="payload" type="application/json">
      "fl": ["*"]

Auto-model (optional) — Set to false if you want to create and attach a data model manually.

<miso-list id="my-list" auto-model="false">...</miso-list>
const element = document.querySelector('#my-list');
element.model = new MisoListModel({ api, payload });

Template slot

Item — A required template to render each item of the data array.

  <template data-name="item">
    <li>${data.title}: $${data.sale_price}</li>

Container (optional) — An optional template for the container element holding the items. The default value is <div></div>. It will be created one time, initially.

  <template data-name="container">

As an example, combining the two templates above renders the data like this:

  <li>Plush Dog Toy: $17.99</li>
  <li>Chew Toy: $10.99</li>
  <li>Flying Disc: $13.99</li>


Start — Trigger the specified action as soon as the element and model are ready.

<miso-list on:start="load">

In the example above, the element will invoke the model's load() method as soon as possible, so the result will populate soon after the page loads.

Refresh — The element dispatches a refresh custom event when it’s re-rendered.

const element = document.querySelector('miso-list');
element.addEventListener('refresh', (event) => {
  // do some side effect when the element is refreshed.
Icon/Activity Icon/Add Icon/API Icon/Arrow/Down Icon/Arrow/Left Icon/Arrow/Right Icon/Arrow/TopRight Icon/Arrow/Up Icon/Bento Icon/Billing Icon/Bin Icon/Book Icon/Bookmark/Default Icon/Bookmark/Filled Icon/Calendar Icon/Caret/Down Icon/Caret/Up Icon/Chavron/DownIcon/Chavron/LeftIcon/Chavron/RightIcon/Chavron/UpIcon/Checknox/CheckedIcon/Checknox/Unchecked Icon/Checklist Icon/Chip Icon/Clipboard / Copied Icon/Clipboard/Default Icon/Clock/Stopwatch Icon/CMD Icon/Data/Catalog Icon/Data/Engine Icon/Data/Group Icon/Data/Interact Icon/Data/Users Icon/Dive Icon/Docs/Key Icon/Dojo Icon/Email Icon/Env/Development Icon/Env/Playground Icon/Env/Prod Icon/Folder Icon/Fullscreen/Collapse Icon/Fullscreen/Expand Icon/Guides/Multiple Icon/Guides/Single Icon/Hashtag Icon/Heart/Outline Icon/Heart/Solid Icon / Cart z Icon / Click Icon / Clock Icon / Data Icon / Doc Icon / EmptyCart z Icon/Social/Facebook Icon / Genome Incognito Icon / Money Icon/Social/ProductHunt Icon / Search Icon/Social/Twitter Icon / User Icon/Info/Error Icon/Info/Info Icon/Info/Question Icon/Info/Warning Icon/Interact/Download Icon/Interact/Edit Icon/Interact/External v2 Icon/Interact/External Icon/Interact/Filter Icon/Interact/Logout Icon/Interact/Options Icon/Interact/Re-order Icon/Interact/Reload Icon/Interact/Remove Icon/Interact/Replace Icon/Interact/Search Icon/Interact/Shuffle Icon/Interact/Undo Icon/Interact/Upload Icon/Interact/Video Icon/Invoice Icon/Loading Icon/Loading Icon/Lock/Locked Icon/Lock/Unlocked Icon/Lock Icon/Mapping Menu Icon/Notification Icon/Overview Icon/Person/Team Icon/Person/User Icon/Plan/Enterprise Icon/Plan/Growth Icon/Plan/Startup Icon/Plan/Trial Icon/Recipe Icon/Rocket Icon/Settings/App Icon/Settings/User Icon/Settings Icon/Shrine Icon/Sidebar/Close Icon/Sidebar/Open Icon/Slideout Icon/Sort/Ascending Icon/Sort/Default Icon/Sort/Descending Icon/Star/Filled Icon/Star/Outlined Stopwatch Icon/Support Icon/Tag Icon/Interact/Thumb/Dislike Icon/Interact/Thumb/Like Icon/Tick Icon/Trend/New Icon/Trend/Trending Icon/Tutorial Icon/Lock/Unlocked Icon/View/Grid Icon/View/List Icon/Watchlist/Add