Getting Started with Fusion:
Part Four - Creating a Great UX

The Fusion UI is where you configure your collection and test the search results. Ultimately, your end users need a separate interface, customized to provide a user experience that meets your organization’s standards.

To jumpstart your application development process, Lucidworks offers View, a pre-built Web application designed to work with Fusion out of the box. In this part of the tutorial, we’ll see how easy it is to install and customize View.

Before you begin

To proceed with this part of the tutorial, you must first complete Part 1, Part 2, and Part 3 in order to arrive at an indexed dataset that’s configured for faceted search and automatic boosting based on click signals.

1. Install Lucidworks View

  1. Download Lucidworks View for your platform.

  2. Unpack the archive file: tar -xf lucidworks-view-<platform>-<version>.gz

  3. Switch to the lucidworks-view directory: cd lucidworks-view

  4. Start the application: ./view.sh start

    When you start View, usually your browser opens to the login page automatically. If not, simply go to http://localhost:3000/ (or the next highest available port if 3000 is already in use). The login page appears.

  5. Use your Fusion username and password to log in to View.

The initial screen is empty:

Initial screen

Next we’ll configure View to access the data in our ml-movies collection and display it in a user-friendly way.

2. Configure the basic search experience

The configuration parameters for View are located in lucidworks-view/FUSION_CONFIG.js.

The minimum configuration to get search results is as follows:

  • The host and port parameters must point to a running instance of Fusion.

    Make sure that Fusion is running. For this tutorial, we assume that both Fusion and View are running on your local host. The default View configuration also assumes this, so we do not need to modify those parameters.

  • The collection parameter must be set to the name of the collection to search.

    The default value is MyCollection, so we must modify this parameter.

  1. Open the lucidworks-view/FUSION_CONFIG.js file.

  2. Set the value of collection to “ml-movies”.

  3. Save the file.

    In your browser, View reloads automatically to display our collection of movie data:

    Collection of movie data

    As you can see, additional configuration is needed to make this more user-friendly.

  4. Modify the values in FUSION_CONFIG.js as follows:

    1. Set query_pipeline_id to “ml-movies-default”.

    2. Set head_field to “title_txt”.

    3. Set fields_to_display to “['genres_ss', 'year_ti']”.

    4. Set field_display_labels to “{'genres_ss': 'Genres', 'year_ti': 'Year'}”.

  5. Save the file.

    Our display makes more sense now:

    Additional configuration

  6. In the search field, start typing something (anything).

    Type-ahead is enabled automatically, but the default field is id:

    Type-ahead

  7. In FUSION_CONFIG.js, set the value of typeahead_fields to “title_txt”.

  8. Start typing something in the search field again.

    Now View displays titles as type-ahead values:

    Titles as type-ahead values

3. Add your own branding

For this part, you can choose your own configuration values. Use your organization’s logo and colors, or select your own.

In our examples, we’ll use a "Movie Night" logo, which you can download if you like.

  1. Copy your logo file to the lucidworks-view/client/assets/img/logo folder.

  2. In FUSION_CONFIG.js:

    1. Set logo_location to “assets/img/logo/your-logo-filename”.

    2. Set search_app_title to the name of your organization.

  3. Save the file.

    Tip
    If you don’t see your new logo right away, restart View by typing ^C, then ./view.sh start in your console window.

    Branded logo

    Now we’ll configure the color scheme.

  4. Open the lucidworks-view/client/assets/scss/_settings.scss file.

  5. Set $primary-color, $secondary-color, and $highlight-color to colors from your organization’s palette.

    Tip
    You can also redefine $success-color to change the color of the search button, but keep in mind that this color is also used for notifications and type-ahead highlighting.
  6. Save the file.

    The View app reloads automatically again so that you can see the result immediately.

    Branded color

  7. For additional control over the color scheme, try uncommenting and redefining some of the other variables in _settings.scss.

    For our example below, we modified $body-font-color, $header-font-color, $titlebar-background, $accordion-title-background, and $blocklist-item-color.

    Other color changes

  8. Experiment with different color choices until you’re satisfied.

Tip
For more fine-grained control, experiment with the settings in the lucidworks-view/bower-components/foundation-apps/scss/components/ directory, or with the templates in the lucidworks-view/client/assets/components/document directory.

What’s next

Now we have a real search application powered by Fusion.

So much more is possible with Fusion. See our videos, blog, support site, and of course the rest of this documentation for more information about how to put Fusion to work on your own data. Lucidworks also offers training and consulting.