Ask — Sources and Related Resources

Change how Ask lists articles: where the links open, how the dates read, the layout, and the markup of each item.

Ask lists articles in two places: the sources that an answer cites, and the related resources under the answer. Below we open the links in the same tab, change the date format, switch the related resources to cards, and then write the markup of an item, with the authors added.

You need a working Ask page first. See Ask — Quick Start.

The two lists

Each change below goes to useLayouts on client.ui.asks, the context, so that follow-up answers get it too. The key is the role of the list: sources or related_resources. Your options are merged over the defaults, so set only what you change. Set them before the template goes into the page.

Open links in the same tab

Each item is a link to the article's url, and it opens in a new tab. To open it in the same tab, set link.open to false:

client.ui.asks.useLayouts({
  sources: { link: { open: false } },
  related_resources: { link: { open: false } },
});

Change the date format

Each item shows published_at, or created_at or updated_at when the record has no published_at. The default format is Mar 5, 2026. Give the date template the options of toLocaleDateString, with locale added:

const dateFormat = { locale: "en-GB", year: "numeric", month: "long", day: "numeric" };

client.ui.asks.useLayouts({
  sources: { templates: { date: dateFormat } },
  related_resources: { templates: { date: dateFormat } },
});

date can also be a locale string, such as "de-DE", or a function that gets the date value from the record and returns the text.

Change the layout

Give the layout type before the options. This shows the related resources as cards, and keeps their links in the same tab:

client.ui.asks.useLayouts({
  related_resources: ["cards", { link: { open: false } }],
});

Write the markup of an item

To draw an item your own way, give the article template. This one shows the number, the title, the authors and the date of each source.

An item can show only the fields that the request asks for, so first add authors to the field list. The list replaces its default, so keep the fields that the page still uses:

client.ui.asks.useApi({
  source_fl: ["cover_image", "url", "created_at", "updated_at", "published_at", "authors"],
});

Then write the template. Start it with tagPair, which returns the opening and closing tag of the item. The tags link to the article and carry the attributes that the SDK uses to record clicks:

function renderArticle(layout, state, data, meta) {
  const { tagPair, escapeHtml } = layout.templates.helpers;
  const [openTag, closeTag] = tagPair(layout, data);
  const authors = (data.authors || []).map(escapeHtml).join(", ");
  const date = data.published_at
    ? new Date(data.published_at).toLocaleDateString("en-US", { dateStyle: "medium" })
    : "";
  return openTag +
    `<span class="miso-citation-index" data-index="${meta.index + 1}"></span>` +
    `<div class="my-source-title">${escapeHtml(data.title)}</div>` +
    `<div class="my-source-byline">${[authors, date].filter(Boolean).join(" · ")}</div>` +
    closeTag;
}

client.ui.asks.useLayouts({
  sources: { templates: { article: renderArticle } },
});

Keep these in mind when you write one:

• The number of a source. The miso-citation-index element draws it, in the same style as the citations in the answer. Use meta.index + 1, so that [1] in the answer points to the first source. Leave it out for related resources, which are not cited.
• Escape every value from the record with escapeHtml.
• Format the date yourself. The date option applies to the default markup only.
• Style your own classes in your CSS.

If it does not work

Next

• UI Customization — change the headings, the parts and the order of the page.
• Citation Links — the class, the attributes and the tooltip of each citation.