Search UI Kit
SearchStax Studio provides resources to implement site search in the front-end of your web application. These resources are meant to accelerate the development of the site search page regardless of your environment.
Here is a brief overview of each of these resources.
Search UI App
To accelerate front-end development, we offer a pre-configured search user interface with essential features for a world-class search experience.
You can find the Search UI App under the Search UI Kit in the left navigation pane. You can either view the Search UI directly using the View button or copy the Search Experience Template URL and paste the URL in a separate browser window.
JavaScript or JS Frameworks
SearchStax Studio lets you build your search page using pre-built UI components in a variety of JavaScript frameworks in headless environments. You can find the JS Frameworks under the Search UI Kit in the left navigation pane.
There is a strong push toward headless CMS systems to manage, deliver and render content for users. For more background on headless content management systems, check out our blog post on What are Headless Content Management Systems?.
There are four JS Framework options:
- JavaScript – is a programming language that is used to create interactive web pages and can be used for both front-end and back-end development.
- Vue – is a JavaScript-based framework that uses a data object and HTML templates to create web applications, and is known to be smaller, faster and easier to use than other frameworks.
- React – is a JavaScript library that uses a state object and JSX to create web applications and is ideal for larger and more complex applications.
- Angular JS – is a JavaScript-based web application framework that supports full-stack development for building all types of web applications, especially single-page applications (SPAs), and based on the concept of components.
SearchStudio UX Packages
For each of the UX Packages, you can find the Framework description, the Getting Started page and NPM Package Libraries to build SearchStax Studio search pages:
| Framework Description | Getting Started Page | NPMJS Package |
| JavaScript | JS Getting Started | NPM Package |
| Vue | Vue Getting Started | NPM Package |
| React | React Getting Started | NPM Package |
| Angular | Angular Getting Started | NPM Package |
Widgets Directory
Here are the Widgets for each framework that can be used to create search experiences. The links go the NPMJS packages for each framework – JavaScript, Vue, React and Angular.
| Widget | JavaScript | Vue | React | Angular |
| Input | NPMJS | NPMJS | NPMJS | NPMJS |
| Results | NPMJS | NPMJS | NPMJS | NPMJS |
| Facets | NPMJS | NPMJS | NPMJS | NPMJS |
| Pagination | NPMJS | NPMJS | NPMJS | NPMJS |
| SearchFeedback | NPMJS | NPMJS | NPMJS | NPMJS |
| RelatedSearches | NPMJS | NPMJS | NPMJS | NPMJS |
| ExternalPromotions | NPMJS | NPMJS | NPMJS | NPMJS |
| Sorting | NPMJS | NPMJS | NPMJS | NPMJS |
Pages Directory
The Pages directory contains example applications that demonstrate how to use the various widgets together to build real apps. Follow the links to GitHub below to see the application that implements one or more of the available Framework-related widgets:
| App | JavaScript | Vue | React | Angular |
| Accelerator Page | Github Link | Github Link | Github Link | Github Link |
| Job Search App | Github Link | Github Link | Pending | Pending |
Search UI Rest APIs
SearchStax Studio includes a number of APIs to streamline and seamlessly accelerate the implementation process.
Selecting one of the APIs will provide you with the Endpoints needed to query the index or enable the search functionality.
- Search APIs – Search APIs are components that allow developers to seamlessly introduce search and auto-suggest capabilities to websites and applications
- Analytics APIs – the Analytics APIs are designed to capture the tracking and reporting analytics data used by the Studio
- Discovery APIs – the Discovery APIs drive the information for Popular Searches and Related Searches
- Ingest APIs – the Ingest API lets you update Solr documents
Questions?
Do not hesitate to contact the SearchStax Support Desk.