Search results come in all shapes and sizes. But for any search, it’s all about the goods: concise, rich results which represent larger documents. And it’s better when it’s fast. For that, we’re releasing Result Settings for Elastic App Search. <img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt01caa5b56d869649/5d72ce3d9c44590436852c99/app-search-result-settings-blog-feature.png" data-sys-asset-uid="blt01caa5b56d869649" alt="Result Settings in Elastic App Search" style="box-shadow: .5px .5px 2px gray;border-radius: 5px;margin-left: auto;margin-right: auto;display: block;"/><h2>What’s App-ening?</h2><a href="https://www.elastic.co/app-search">Elastic App Search</a> is an API-centric search engine with accessible dashboard tools for humans of all kind. Quickly write search into all of your applications, from ecommerce to internal logging, game and mobile app functionality, automated content placement or just simple search; the applications are as broad as your imagination. And then use sleek visual tools to refine and perfect them.App Search is a <a href="https://www.elastic.co/app-search/service">managed service</a> by Elastic. Or it’s a self-managed distribution which you can host yourself for free with a basic Elasticsearch license. You can <a href="https://www.elastic.co/downloads/app-search">download it here</a>. We don’t even ask for an email!&nbsp;Result Settings will be available in the self managed version in the 7.5.0 stack release.<h2>Setting the standard</h2>Result Settings provide two main benefits for search creators. You can:<ol><li>Highlight query matches using &lt;em&gt; tags via snippet fields.</li><li>Enable, disable, and customize fields to optimize query performance.</li></ol>In other words, you can trim out any excess from your search query responses so that they are as concise as they need to be. And then you can use snippets on your text fields to highlight query matches for improved scan-ability of search results.Setting a performant standard query defers deeper and more intensive for queries when you need them.&nbsp;Searchers will experience snappy, rich search where they need it.<h2>Buttons in action</h2>Let’s take a deeper look at Result Settings. Imagine that we have a document like this:<pre class="prettyprint">{ “nps_link”: { “raw”: “https://www.nps.gov/grsm/index.htm” }, “title”: { “raw”: “Great Smoky Mountains” }, “date_established”: { “raw”: “1934-06-15T05:00:00+00:00” }, “world_heritage_site”: { “raw”: “true” }, “states”: { “raw”: [ “Tennessee”, “North Carolina” ] }, “description”: { “raw”: “The Great Smoky Mountains, part of the Appalachian Mountains, span a wide range of elevations, making them home to over 400 vertebrate species, 100 tree species, and 5000 plant species. Hiking is the park’s main attraction, with over 800 miles (1,300 km) of trails, including 70 miles (110 km) of the Appalachian Trail. Other activities include fishing, horseback riding, and touring nearly 80 historic structures.” }, “visitors”: { “raw”: 11312786 }, “id”: { “raw”: “park_great-smoky-mountains” }, “location”: { “raw”: “35.68,-83.53” }, “square_km”: { “raw”: 2114.2 }, “acres”: { “raw”: 522426.88 } } </pre>It’s a US National Park!… Well, a JSON document representing a US National Park. By default, this result will appear in its whole, raw form. It’s quite large. And that isn’t ideal.Most users would search for a park by its name or&nbsp;a trait, something like “mountains”.&nbsp; The queries are often vague enough that multiple results will appear. If we were to return an object of such heft for each result, that would put undue strain on the search engine. And it would be more of a burden to manage on the front-end. We want to return a smaller object, one that contains only the title of the park and a smaller subset of the description text. And we want to highlight query matches and HTML escape the responses so that our searchers see results which clearly contain whatever it is they are seeking. With such a small, polished object, search will be both quick and valuable. To do this, open Result Settings, un-check the fields which you do not want to include in your result object, and then set a concise character limit for the fields which you do want. And then make a choice: are the text fields raw or snippets? If we select snippet, query matches are highlighted - encapsulated in &lt;em&gt; tags - so that they’re enriched for easy scanability.When complete, it would look like this: <img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt20e72dd9dc324717/5d72ce9a9901373e4fb50209/app-search-result-settings-blog-usage.png" data-sys-asset-uid="blt20e72dd9dc324717" alt="Updating result set settings within Elastic App Search" style="box-shadow: .5px .5px 2px gray;border-radius: 5px;margin-left: auto;margin-right: auto;display: block;"/> After we click Save, the default search result becomes much tighter and quicker, helping your users get where they’re trying to go:<pre class="prettyprint">{ “title”: { “snippet”: “Great Smoky &lt;em&gt;Mountains&lt;/em&gt;” }, “description”: { “snippet”: “The Great Smoky &lt;em&gt;Mountains&lt;/em&gt;, part of the Appalachian &lt;em&gt;Mountains&lt;/em&gt;, span a wide range of elevations” }, “id”: { “raw”: “park_great-smoky-mountains” } } </pre>Should you need to provide larger responses and filter or expand upon this slim foundation, that's no problem. The full, dynamic set of search APIs can surface whatever is needed.<h2>Summary</h2>Elastic App Search is the quickest and easiest way to get search built into a wide array of valuable applications. You can start a <a href="https://www.elastic.co/app-search/service?elektra=performant-rich-search-results-blog">14-day free trial of the managed service</a> or <a href="https://www.elastic.co/downloads/app-search">download it for free</a>. Result Settings will be there, ready to optimize and enrich your queries. Result Settings are available today within the managed service. Read the <a href="https://swiftype.com/documentation/app-search/guides/result-settings">Result Settings Guide</a>&nbsp;in the documentation to learn more.&nbsp;Not into the UI thing? You can do all of this <a href="https://swiftype.com/documentation/app-search/api/search-settings">through the API</a>.

app-search-result-settings-blog-banner.jpg

app-search-result-settings-blog-thumb.jpg

Elastic App Search: Performant, Rich Search Results with Result Settings

Elastic App Search provides you with a robust set of API endpoints to build any type of search experience. While modern tools and a blank canvas can be inspiring, we want you to craft functional and valuable things as quickly as possible. And so, we bring you the App Search Reference UI. 
<h2>Open Sourcery
</h2>The <a href="https://github.com/swiftype/app-search-reference-ui-react">Elastic App Search Reference UI</a> is written in&nbsp;React. It is an open source developer tool that has been woven into the App Search dashboard. Its goal is twofold:
<ol>
<li>Provide a clean and dynamic search preview to experiment with features like facets, pagination, and sorting.</li>
<li>Generate a quality design and developmental foundation for new search experiences. &nbsp;
</li>
</ol>You can see a live Reference UI by visiting: <a href="https://parks.swiftype.info">https://parks.swiftype.info</a>.
<h2>Field Day
</h2>Before we dig deeper into the Reference UI, we should consider a key goal of App Search: provide relevant search. Relevance is the key to the value of search, for both your end-user and your business goals. But what does it mean, to be relevant?
Relevance is how well a result can fulfill the needs of the user or system that requested it. In technical terms, a query is analyzed against document fields and the most relevant document is returned given how well the field values match the query.
Code and national parks feel like a nice pair, and so we will take a practical look at the Reference UI through the eyes of the national parks data set. It has a schema containing the following fields:
<pre class="prettyprint">{
 "description": "text",
 "nps_link": "text",
 "states": "text",
 "title": "text",
 "visitors": "number",
 "world_heritage_site": "text",
 "location": "geolocation",
 "acres": "number",
 "square_km": "number",
 "date_established": "date"
}
</pre>Within this data set, a park is less vast and wood-y, like this…
<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt5594e4870938fc30/5c304c8fc0508d076e1712e1/mosquito-creek.jpg" data-sys-asset-uid="blt5594e4870938fc30" alt="" "="">
… And more concise and document-y, like this…
<pre class="prettyprint">{
 "nps_link": "https://www.nps.gov/cong/index.htm",
 "title": "Congaree",
 "date_established": "2003-11-10T06:00:00+00:00",
 "world_heritage_site": "false",
 "states": "South Carolina",
 "description": "On the Congaree River, this park is the largest portion of old-growth floodplain forest left in North America. Some of the trees are the tallest in the eastern United States. An elevated walkway called the Boardwalk Loop guides visitors through the swamp.",
 "visitors": 143843,
 "id": "park_congaree",
 "location": "33.78,-80.78",
 "square_km": 106.3,
 "acres": 26275.82
}
</pre>While not nearly as lush, the JSON-ified version is more searchable. We want to match queries against field values with great accuracy, which is why we need structure.
If we search for “old growth” within our search engine, Congaree National Park will be our first result. The text “old-growth” is included as part of the value of the `description` field. But we also return 10 other parks which describe themselves as “old-growth”: Yellowstone, Yosemite, Petrified Forest...
The results are relevant&nbsp;—&nbsp;we searched for “old growth” and we returned 10 parks which contain old-growth forests. But, what now? We have 10 results and we would like 1.Relevance can be fine tuned by the search provider or by the search user.
A search provider can leverage a feature like App Search Curations to promote, rearrange, and hide documents for a given query. If Yellowstone park would make a better first result for “old growth” forests, then we can curate the result set to place it on top. If Congaree were to close its doors to visitors, we could hide it from our results.
A search user can use the interactive tools provided within the search experience. Two such tools are present within the Reference UI: facets and sorting. A user can choose to narrow down the parks by state and whether or not they are a world heritage site. They can sort by the number of acres or the number of visitors.
An excellent search experience will not just provide relevant and tuned results by default, but allow searchers to further explore into the result data.
<h2>Back to the Lab </h2>After our trip to the woods, we are now back within the App Search dashboard. We have an Engine filled with national parks and we have clicked the Reference UI button within Engine navigation.
Configuring the Reference UI is a matter of defining fields...
<ul>
	<li>Title Field: The prominent name or title to display within search results. We will use the <code>title</code> field.</li>
	<li>Facet Field: A facet is a count based on a field. It is a way to refine search results using a shared field value as a grouping point. We will facet using the <code>state</code> and <code>world_heritage_site</code> fields.</li>
	<li>Sort Field: Ascending, or descending? And based on which field? We will choose the <code>acres</code> and <code>visitors</code> fields, so that people can find parks which are large or small, busy or quiet.</li>
	<li>URL Field: Search results will often link back to something else within your website or application: a product, an article, whatever it may be. We have the <code>nps_link</code> field.</li>
</ul>As we fill in these fields, the image to the left will illuminate which function you are tuning. Give it a try using your own Engine, or your national parks demo Engine.
<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt85998fee2ed05d5e/5c304c8825a401fc6fe4f49b/reference-ui-with-fields.png" data-sys-asset-uid="blt85998fee2ed05d5e" alt="" "="">
When we click Generate a Preview, it appears just like our sample application. And when we search for “old growth"...
<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltbbd9c245556d3fe8/5c304c84ebb7714d66027022/reference-ui-search-demo.png" data-sys-asset-uid="bltbbd9c245556d3fe8" alt="" "="">
We get parks. Old growth parks! Our search term is highlighted, we have a Relevance dropdown to change our sort order and field, a Show dropdown to change the size of our result set, and a sidebar with our faceting parameters: states and world heritage sites. But we still have 10 parks… No problem, the user will use the faceting, sorting, and pagination tools available and pick the best one.
<h2>Growing the Seed </h2>If you were just looking to experiment with relevance tuning or seeking inspiration, then we might be finished. If we want to start building, then we can click Download.
Clicking download retrieves a .zip file containing the Reference UI repository pre-populated with your configuration data. The repository will also contain a unique <code>config/engine.json</code> generated by App Search based on your account and field information.
It looks like this:
<pre class="prettyprint">{
 "engineName": "sample-engine",
 "hostIdentifier": "host-2376rb",
 "searchKey": "search-soaewu2ye6uc45dr8mcd54v8", 
 "fields": [
 "description",
 "nps_link",
 "location",
 "states",
 "title",
 "visitors",
 "world_heritage_site",
 "acres",
 "square_km",
 "date_established"
 ],
 "sortFields": [
 "visitors",
 "acres"
 ],
 "facets": [
 "states",
 "world_heritage_site"
 ],
 "titleField": "title",
 "urlField": "nps_link"
}
</pre>Now, within the unzipped Reference UI repository…
<pre class="prettyprint">npm install && npm start
</pre>Your Reference UI will run locally and provide search out of the box. The UI is yours to fork, customize, and build upon however you wish. The repository is maintained should you want to report issues or contribute changes upstream.
The Reference UI is not far from a viable search implementation. Styling can be changed within <code>src/styles</code> and the HTML structure can be altered within <code>src/components</code>. The README included within the repository will guide you through the relationship between the React components and the App Search APIs which perform the heavy lifting of search.
As with any open source initiative, we are excited to see what sort of UIs the community will create. Perhaps your next search experience will not only provide relevant and valuable search to your users, but inspire others to push the state of search to exciting new places.
<h2>Summary </h2>The Elastic App Search Reference UI is a foundation to help you build or test great search experiences. Whether you are looking to explore your relevance tuning in a closer-to-production sandbox or you are building a brand new experience, you have the tools you need and the seed to get started. You can read the Reference UI guide in the <a href="https://swiftype.com/documentation/app-search/guides/reference-ui">App Search documentation</a> for more information.
Enjoy the Reference UI and Elastic App Search with a <a href="/cloud/app-search-service">14-day free trial</a> — no credit card required.

plants-growin-nicely.jpg

plant-yaaaas.jpg

Kickstart Search with the Elastic App Search Reference UI

Start free trial

Blog Footer CTA

Sign up for Elastic Cloud free trial

Brian Earwood

Надсилаючи цю форму ви погоджуєтеся з <a href="/legal/terms-of-use">Умовами надання послуг Elastic</a>. Ваші особисті дані будуть опрацьовані відповідно з <a href="/legal/privacy-statement">Положеннями про конфіденційність Elastic</a>.

Newsletter GDPR Text - Ukrainian

By submitting you acknowledge that you've read and agree to our <a href="/legal/elastic-cloud-account-terms" target="_self">Terms of Service</a>, and you agree to receive the <a href="/legal/privacy-statement#how-we-use-the-information" target="_self">selected communications</a> at the contact details you provided above. See <a href="/legal/privacy-statement/" target="_self">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.

Communication Preferences - ONLY for /communication-preferences

By submitting you agree to <a href="/agreements/global/cloud-services-monthly" rel="nofollow">Elastic Cloud Terms of Service</a>. Your personal data will be processed in accordance with <a href="/legal/privacy-statement">Elastic's Privacy Statement</a>.

Cloud Trial GDPR Text

Intentionally Blank

By submitting you acknowledge that you've read and agree to our <a href="/legal/serverless-preview-terms" target="_blank">Terms of Service</a>, and that Elastic may <a href="/legal/privacy-statement#how-we-use-the-information" target="_blank">contact you</a> about our related products and services, using the details you provide above. See <a href="/legal/privacy-statement/" target="_blank">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.

Serverless GDPR Text

提交即表示您確認已詳閱並同意我們的<a href="/legal/elastic-cloud-account-terms" target="_blank">服務條款</a>，且同意 Elastic 使用您在上方提供的個人資料<a href="/legal/privacy-statement#how-we-use-the-information" target="_blank">與您聯絡</a>，為您提供相關產品和服務的資訊。如需詳細說明或隨時想停止收到產品和服務資訊，請參閱 <a href="/legal/privacy-statement/" target="_blank">Elastic 的隱私聲明</a>。

Newsletter GDPR Text - TW

By submitting you acknowledge that you've read and agree to our <a href="/legal/elastic-cloud-account-terms" target="_blank">Terms of Service</a>, and that Elastic may <a href="/legal/privacy-statement#how-we-use-the-information" target="_blank">contact you</a> about our related products and services, using the details you provide above. See <a href="/legal/privacy-statement/" target="_blank">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.By submitting this form, I agree to Elastic sharing my contact information with Google Cloud. I also agree to Elastic giving my information to the vendor for the purpose of shipping my food package.

GDPR Text + Google Cloud

Inviando la registrazione (1) esprimi il consenso ai <a href="/legal/terms-of-use">termini e condizioni di Elastic</a> e <a href="/legal/privacy-statement">all’informativa sulla privacy</a>, nonché (2) a ricevere saltuarie e-mail.

Newsletter GDPR Text - Italian

By submitting you acknowledge that you've read and agree to our <a href="/legal/terms-of-use" target="_blank">Terms of Service</a>, and that Elastic may <a href="/legal/privacy-statement#how-we-use-the-information" target="_blank">contact you</a> about our related products and services, using the details you provide above. See <a href="/legal/privacy-statement/" target="_blank">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.

Newsletter GDPR Text

Load more

Overview

Can't make it? Register and we'll send you the recording. You'll also receive an email with related content

Can't make it? Register and we'll send you the recording. You'll also receive an email with related content.

You'll also receive an email with related content.

You'll also receive an email with related content

Speakers

Close

See more insights

The content on this page is not available in the selected language. As Elastic grows globally, we continue to support content in multiple languages.

Author

Articles by Brian Earwood

Elastic App Search: Performant, Rich Search Results with Result Settings

Kickstart Search with the Elastic App Search Reference UI

Follow us

About us

Join us

Partners

Trust & Security

Investor relations

Excellence Awards