Explore — UI Customization

Change the parts and the order of the related questions, and choose when each part shows.

The elements from the quick start are the whole Explore UI, so you change it in the HTML. Below we remove the query box, add a heading, and then show the block only when there are questions.

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

Move, add and remove elements

The quick start puts these elements on the page:

<miso-explore>
  <miso-related-questions></miso-related-questions>
  <miso-query></miso-query>
</miso-explore>

<miso-explore> connects the Miso elements inside it to the workflow. Inside it, put the elements in any order, leave out the ones you do not want, and add your own HTML between them:

Element	What the reader sees
`<miso-related-questions>`	The questions about the article.
`<miso-query>`	A box where the reader asks a question of their own.
`<miso-error>`	The error message when the request fails.

This version shows a heading and the questions, without the query box:

<miso-explore>
  <h3>Questions about this article</h3>
  <miso-related-questions></miso-related-questions>
</miso-explore>

Show a part at the right moment

The heading above shows even when Miso has no questions for the article. The visible-when attribute shows an element only in the states it names. Put it on a <miso-explore>, or on an element inside one.

Value	Shows the element when
`initial`	The workflow has not sent a request yet.
`loading`	The request is out, and no data has arrived.
`ready`	The data is arriving or has arrived.
`ongoing`	The data is still arriving.
`done`	All the data has arrived.
`erroneous`	The request failed.
`empty`	No Miso element in the container has data.
`nonempty`	At least one Miso element in the container has data.

Separate values with spaces to show the element in any of them: visible-when="initial loading".
Join a state to empty or nonempty with + to need both: visible-when="ready+empty".
Only the Miso elements that show data count toward empty and nonempty. The query box and the buttons do not.
The SDK shows the element with display: block !important. To lay it out as a flex row or a grid, put visible-when on a wrapper around it.

Put visible-when="nonempty" on the container, and the whole block, heading included, shows only when there are questions:

<miso-explore visible-when="nonempty">
  <h3>Questions about this article</h3>
  <miso-related-questions></miso-related-questions>
</miso-explore>

A failed request has no questions, so this block stays hidden then too. To tell the reader that the request failed, add a second <miso-explore> for the error message. Both containers connect to the same workflow. This time visible-when is on an element inside the container, which works the same way:

<miso-explore>
  <div visible-when="erroneous">
    <miso-error></miso-error>
  </div>
</miso-explore>

For more than one Explore unit on a page, give both containers the same unit-id.

If it does not work

Symptom	Cause
The console shows `… needs to be placed under a workflow container element`	A Miso element is outside every `<miso-explore>`.
An element with `visible-when` always shows	The attribute name is wrong, or the element is outside every `<miso-explore>`. The name is `visible-when`.
A flex row breaks into lines when it shows	`visible-when` sets `display: block`. Put it on a wrapper.

Related Questions — where a question takes the reader, and how each question looks.
Events — run your own code when the questions load and when the reader picks one.
API Configuration — how many questions, and which articles they come from.

API Configuration

Related Questions

Explore — UI Customization

Move, add and remove elements

Show a part at the right moment

If it does not work

Next