# Customizable ResultView

**URL:** <https://discuss.elastic.co/t/customizable-resultview/230578>\
**Category:** Elastic Search\
**Tags:** elastic-app-search\
**Created:** [April 30, 2020, 2:49pm UTC](https://discuss.elastic.co/t/customizable-resultview/230578 "2020-04-30T14:49:51Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![skiptheyeets](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/skiptheyeets/32/67440_2.png) [@skiptheyeets](https://discuss.elastic.co/u/skiptheyeets)\
**Post date:** [April 30, 2020, 2:49pm UTC](https://discuss.elastic.co/t/customizable-resultview/230578/1 "2020-04-30T14:49:51Z")

</div>

How customizable ResultView can be? I have been trying to create my own view where every search hit is listed in the result body without success and not where what to modify to make it work. Any workarunds? Could a React component be passed?

## Current output

Foo

ID: Foo  
Hits: "This is a **test**. I have **test** ed something."

## Wanted output

Foo

ID: Foo  
Hits:

- Hit 1: "This is a **test**."
- Hit 2: "I have **test** ed something."

## Code

```javascript
import React from "react";

export default ({ result }) => (
    <li className="sui-result">
        <div className="sui-result__header">
            <span
                className="sui-result__title"
                dangerouslySetInnerHTML={{ __html: result.id.snippet }}
            />
        </div>
        <div className="sui-result__body">
            <ul className="sui-result__details">
                <li>
                    <span className="sui-result__key">ID</span>{" "}
                    <span
                        className="sui-result__value"
                        dangerouslySetInnerHTML={{
                            __html: result.id.raw
                        }}
                    />
                </li>
                <li>
                    <span className="sui-result__key">Contents</span>{" "}
                    <span
                        className="sui-result__value"
                        dangerouslySetInnerHTML={{
                            __html: result.description.snippet
                        }}
                    />
                </li>
            </ul>
            <p>result.description.snippet</p>
        </div>
    </li>
);

```

---

<div class="post-metadata">

**Author:** ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)\
**Post date:** [May 4, 2020, 1:25pm UTC](https://discuss.elastic.co/t/customizable-resultview/230578/2 "2020-05-04T13:25:29Z")

</div>

Hey, it's not clear to me what the issue is. You just want the results to be listed and formatted as a bulleted list? If so, check that the outputted html is a valid unordered list (`<ul>`) with list elements (`<li>`) inside of it. If that is true and you still don't see bullet points then you may just need to write some CSS for that.

---

<div class="post-metadata">

**Author:** ![skiptheyeets](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/skiptheyeets/32/67440_2.png) [@skiptheyeets](https://discuss.elastic.co/u/skiptheyeets)\
**Post date:** [May 4, 2020, 2:53pm UTC](https://discuss.elastic.co/t/customizable-resultview/230578/3 "2020-05-04T14:53:59Z")

</div>

Indeed. Using the National Parks example from GitHub, could you show me a way to do that?

---

<div class="post-metadata">

**Author:** ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)\
**Post date:** [May 5, 2020, 12:19pm UTC](https://discuss.elastic.co/t/customizable-resultview/230578/4 "2020-05-05T12:19:14Z")

</div>

Sure: [https://codesandbox.io/s/search-ui-national-parks-example-with-bullets-sn2xs?file=/src/App.js](https://codesandbox.io/s/search-ui-national-parks-example-with-bullets-sn2xs?file=/src/App.js)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [June 2, 2020, 12:19pm UTC](https://discuss.elastic.co/t/customizable-resultview/230578/5 "2020-06-02T12:19:22Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.