User Interface

Plugins are based on web technology (i.e. HTML + CSS + JavaScript). The main content that you’ll create will render in a webview.

Plugins should be designed to be responsive and adapt to a variety of screen sizes to accommodate a great user experience for both Banno Mobile and Banno Online users.

Note

Plugins are only accessible to users via the banking Dashboard after logging in. If a plugin is enabled for a user they are able to add it directly to their Dashboard, but will not be able to access the plugin from outside the Dashboard context.

Alternatives to Plugins

Plugins have a specific look-and-feel, work well for many situations, and are an excellent way to extend Banno’s user interface.

However, if you wish to extend Banno’s UI in ways which do not fit the typical pattern for a plugin, then you may want to consider creating an External application with a different Link type.

Other Link types

For more information on other Link types, see these topics on Knowledge.Banno.com:

Anatomy

Plugins are rendered as UI summary cards on the Dashboard of our apps. An optional primary action leads users to a full screen webview.

Card Face

Plugin Anatomy - Card Face

1. Card title

The Title displayed in the card’s header. Determined by your plugin configuration.

The ellipsis menu opens a menu for the card. More on this in the Card Menu section.

3. Webview

The webview contains your web app’s content.

Its size is determined by the Initial height in your plugin configuration.

The web address to be loaded is determined by the External Application in your plugin configuration.

4. Primary action (optional)

This natively-drawn button leads to a full-screen embedded webview of your External Application.

The action button Label and the expanded view External Application is determined by your plugin configuration.

If there is no primary action button configured, the bottom edge of the webview becomes the bottom edge of the card.

Note

Plugins are limited to customizing the webview portion of the Card Face. In addition to the web interface, the action button can also be used in order to direct users to a full-screen embedded view of your application which will allow you to utilize a larger portion of the user’s screen.

Alternative to Primary Action Button

An alternative to configuring a primary action button is to use the @jack-henry/banno-plugin-framework-bridge JavaScript module to route click events (such as triggering the Expanded View).

See the @jack-henry/banno-plugin-framework-bridge topic for details.

Web vs. Mobile

Plugins are available to users on both desktop and mobile applications, without any modification to your plugin. However, you should keep in mind that the experience is slightly different.

Web

Desktop Plugin

Note

The plugin is able to utilize the webview to display information to the user, clicking the view more button will open a larger, fullscreen, webview which you can use to render larger content. In order to navigate back to the dashboard, users will have to utilize the browser back function.

Mobile

Mobile Plugin

Note

The plugin is able to utilize the webview to display information to the user, clicking the view more button will open an additional, larger webview within the existing mobile view. Closing the larger view will return the user to the mobile dashboard view.