A Quick Tour of Onit's New React UI

by Leah Gilman Updated Dec 13, 2017

We're excited to introduce our new React User Interface (UI), a more responsive and sleek Onit experience.

If you're an existing Onit user, this tour will help reorient you to where we've moved things in our new interface; we'll take a look at the biggest changes we've made while providing comparison to the legacy UI so you can quickly orient yourselves.

As we take this tour, keep in mind that there's a few different ways to configure an Onit environment. An environment may or may not have Suites configured, for instance. Additionally, some users may only have access to some of the pages detailed below so you can disregard any sections that aren't familiar to you.

Navigating Your Environment

We've added a new navigation menu to both Suites and non-Suites environments.

To open and close your navigation menu, select the Menu icon in the top left corner of the header.

Navigation in the Legacy UI:

If your environment is set up with Suites, you'll already be used to a similar navigation menu. For environments without Suites, the Legacy UI provided navigation options in the top right corner of the page.

Creating New Transactions

Launching transactions

To launch a new transaction, you can now use the Plus icon in the header.

Launching transactions in the Legacy UI:

To launch new transactions in the Legacy UI, you're probably used to selecting the Launch button on the left side of the app dashboard.  

Submitting transactions

The Launch Form in our new UI looks very similar to the Legacy UI's.

In the new UI, required fields have an asterisks and are underlined in red.  

Submitting transactions in the Legacy UI:

The Launch Form in the Legacy UI is very similar to the new UI's form.

App Dashboards

Filtering Your Data

You can now set a filter or remove a filter with one click! This new UI for filtering also makes it easier to see what columns are filtered by at a glance.

To filter your data, select the line below the column name and type away.  To clear the filter, select the 'x' to its right.

Filtering in the Legacy UI:

In the Legacy UI, filtering is done by selecting the column header's dropdown, selecting the filter option and then typing a filter in.

A New Toolbar

We've added a new toolbar at the top right corner of your grids where many of the functions you used to find at the bottom of your grid now live.

1) Reset Filters clears any filters applied to your grid.

2) Refresh will refresh your grid.

3) Export provides a dropdown with the options Export and Export as List.

4) Column Selector is where you can add/remove columns from your grid. More on this function in the Adding/Removing Field Columns section below.

Toolbar options in the Legacy UI

Refreshing, resetting filters and exporting are all done from the bottom of the grid in the Legacy UI.

Adding/Removing Field Columns

1) To add/remove Fields from your view, select the Column Selector icon in the toolbar.

2) Drag/drop Fields from one side the other. You can also drag Displayed Fields up/down to reorder.

Adding/removing columns in the Legacy UI:

In the Legacy UI, users selected and deselected columns from one of the columns' dropdowns to add and remove them from the app dashboard.

Selecting Views

We've freed up some real estate for your app dashboard data by relocating Views, (which are saved layouts of your data), into a dropdown. To load a View in the new UI:

1) Open the View Selector.

2) Select a View.

Selecting Views in the Legacy UI:

Views were previously selected from panels on the left-hand side of the app dashboard.

Transaction View Pages

Depending on an app's configuration, layouts of transaction View Pages can differ slightly, but below is a brief overview of a basic View Page in the new UI.

1) Navigating to an app dashboard: To navigate to the dashboard of the app your transaction is in, use the navigation menu. In the example screenshot below, the user is viewing a transaction in the Matters app and could select the Matters navigation item to return to that app's dashboard.  
* You can also use the browser back button to quickly get back to the page you were previously on.

2) Commenting: To post a comment, click on the Post comment ... bar. You can see past comments and emails in the Activity panel below.

3) Phases: The Phases panel in the upper right corner of the View page displays what Phase a transaction is currently in.  

4) Participants: The Participants panel lists the participants on the current transaction.

Transaction View Pages in the Legacy UI:

You'll be familiar with transaction View Pages looking something like the screenshot below.

Help is always near!

We look forward to hearing your feedback on this new Onit experience. If you're experiencing issues or need to report a bug, submit a Support Ticket and we'll get back with you.

Previous Article Release Notes - Jan. 2017
Next Article Past Release Notes

© 2020 Onit, Inc.

docs.onit.com contains proprietary and confidential information owned by Onit, Inc. that is subject to copyright. Onit presents it exclusively to you for your sole use in conjunction with using Onit products. No portion of the materials contained herein may be used for any other purpose. No portion of the materials contained herein may be shared with third parties or reproduced in any form.