Pre-requisites

Enable oic.ics.featureflag.spa.designer feature flag to see the new Integration designer pages.

What's New

New UI is built using Oracle JavaScript Extension Toolkit (Oracle JET)  utilizing full benefits of JavaScript, CSS3 and HTML5 design and development principles. Highlights Of New UI experience 

• Compliance with latest UX standards and consistent user experience across integration designer list pages.

• Significant improvement in page load performance.

• Smooth scrolling through large data sets in the list pages.

• Faster navigation experience across pages.

• New Feature: Config UI for Integrations.

Changes in the top-level menu structure

The top level menu in Suite UI has been restructured to make way for the new UI. When the logged in user has access to designer pages, a click on the 'Integrations' menu now opens a sub-menu with links to designer landing pages instead of page re-direction. Click the sub-menu links displays the respective landing page.

Let's see the behavior explained through screens

Existing Oracle Integration home page menu structure

Clicking on the 'Integrations' menu redirects a user to Integration pages through a complete browser refresh. A switch back to the home page is done by clicking on the 'Home' icon which also does a full page refresh.

New Menu Structure:

Integrations (Designer Pages) , Monitoring, and Settings becomes top level menus in the suite home page with the structure.

Integrations

All the designer pages are moved under the 'Integrations' menu.

As mentioned above, after the SPA Designer feature is enabled the 'Integrations' menu item in the OIC suite home will have a drill-down option which can be seen with the 'Arrow' next to the name.

Clicking on 'Integrations' will slide out the existing menu and show the respective Integration features. Clicking on features/pages loads the respective content on the right side without refreshing the page.

To go back to the home page menu items, users can click on the 'Arrow' point to the left side in the header section.

Monitoring

User can access all the from the top level 'Monitoring' menu.  User can access all the Integration monitoring pages under the 'Integration' sub-menu under the 'Monitoring' top level menu.

Settings

User can access all the from the top level 'Settings' menu.  User can access all the Integration specific settings pages under the 'Integration' sub-menu under the 'Settings' top level menu.

 .   

Designer UI Experience

Common list view experience

The designer pages follow the new common list view pattern which combines the toolbar and table view to full-fill the complete functionalities of the integration designer resources. The toolbar includes the features like searching, sorting and filtering with the other features of showing applied filter and sorting details, refresh option and summary text. 

The table view has number 0f unique features and one of them is to show only required and minimal data on a row and the secondary or extra details are shown as part of detail view section of that row. The table row will show an overlay on mouse over will include the primary action buttons, action menu and open/close detail view.

Toolbar Features

Searching

On the toolbar, the search icon will appear on left most and the search input text field will open when click on the search icon. The input text will show the placeholder text depends on the type of resource list page.

Type the name and press <Enter> key will give the list of resources by applying the search by contains criteria. 

There will be a cross icon next to search input field, click on the cross icon will clear and close the search input field and get the result without search input criteria.

Filtering

On the toolbar, the filter icon appears next to the search icon. The filter options are not shown on toolbar but all the filter options are appears on a popup which can be launched by clicking on the filter icon.

The filter popup will have one or more filter options of different types which makes it easier to choose the desired filtering and sorting user wants to apply on the list. 

Sorting

The sorting menu is not available separately on the toolbar but this will be available as part of filter popup which we have explained in the above section.

The sorting options will be applied with filter options by 'Apply' action on filter popup.

Filter and Sorting Details

The filter and sorting detail section will show all the filter and sort options applied. This section will render the details with the key value pair of applied filters and sorters. Each key value pair detail section has a cross icon to remove the filter or sorter individually. There will be 'Clear' option at the end of all the filter and sorter details to clear all the filters and sorter options.

Summary Detail

The summary detail section will show the number of total resources as a result after applying the search and filters, and how many resources are rendered and can be viewed in the list view port. 

Default Filters

The default filter has been introduced on Integrations, Connections, Lookups and Libraries designer listing pages. The default filter of updatedBy criteria with the logged in username.

This filter will be applied on new browser session and this filter is preserved while navigating to different pages and even the subsequent login on the same browser session. Once the updatedBy filter is removed, then this default filter will not be applied even on subsequent login on the same browser session.

Accessing Actions

The actions are referred as primary actions and secondary actions which are accessible on overlay actions panel. This overlay actions panel will be rendered on mouse over of that row.

On the actions panel, there would be maximum two primary actions based on the current status of that resource and the remaining actions are referred as secondary actions which will be rendered as menu items and that can be launched by hamburger icon on actions panel.

Detail View Section

The minimum and required details of any resource will be shown in the individual row and complete or extra details will be shown in its details section. The details section can be opened by the open details icon on the action overlay panel.

Editor Experience

Connection Editor

Connection editor page is used to configure connection properties and security policy to be used in the orchestration canvas.

In the new UI experience user can easily configure the endpoint information without going through multiple pop-ups. 

Lookup Editor

Lookup editor page is used to store mapping of various values used by different applications, so it can be used in the integration for auto mapping.

Navigating across various mapping for a large table is fast using the paging control. 

Library Editor

Library editor page is used to configure functions to be used in the orchestration canvas and also to export/import metadata.

In the new UI experience we make it easier to configure the function with just a single click. Users can just select the checkbox next to the functions in the left panel and it automatically gets configured for both Orchestration and XPath types. Users can modify the param types and Save it.

Here is the improved UI experience on the editor page where all the files/functions part of the registered library are exposed in the 'Functions' panel.

Clicking on the checkbox next to the function and you are set to go to use the function as orchestration callout or XPath.

Timezone Preference

By default Designer pages are displayed based on the browser's timezone. To override the default and to set a preferred timezone use Preferences menu under the User Menu. When timezone preference is saved the page refreshes to display contents based on timezone set in preferences. The change in timezone is saved in cookies and persists across browser sessions.

Report Incident

While in the designer pages click on Report Incident menu brings up the Report Incident dialog.

Make relevant entries and select Create to report an incident.

New Features

Integration Configuration

New functionality and Single UI to perform various operations for an integration:

• View all dependent resources for the integration, 
• View the usage and status information of dependent resource 
• Configure dependent resource and persist the changes
• Perform all the above operation during import or after import at a later stage.