Jack Henry Digital Toolkit
JackHenry.dev
Learn how to develop with Jack Henry's digital banking platform to innovate faster and deliver top-notch experiences.
Digital Toolkit
Integrate with Jack Henry's plugin framework, authentication framework, admin API, and consumer API.
Enterprise Solutions
Integrate with Jack Henry's SilverLake, CIF 20/20, and Core Director banking cores.
SymXchange
Integrate with Jack Henry's Symitar credit union core.
Payments
Embed check deposits, ACH transactions, bill payments, card issuing and processing, and real-time payments.
Design Guidelines
Create stunning products with this set of visual guidelines
Light Mode ✓
Always display this site using light mode.
Dark Mode ✓
Always display this site using dark mode.
Device Setting ✓
Display this site using this device's light / dark mode setting.

User Interface

Plugin Framework > Architecture > 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.

Download the Mobile Apps for the Garden demo institution

The Banno Mobile apps for the Garden demo institution are available on Google Play and the App Store.

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

1. Card title

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

2. Ellipsis menu

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 button (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 are 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).

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
Note
The Card Face can use the webview to display information to the user. Tapping the action button will open a larger, full-screen webview which you can use to render larger content. In order to navigate back to the dashboard, users will have to use the browser’s back button.
Mobile
Note
The Card Face is able to use the webview to display information to the user. Tapping the action 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.

Expanded View

Note
Tapping on the primary action that corresponds to the plugin leads to a full-screen view of content.

1. Card title

The same as the card Title displayed in the Card Face. Determined by your plugin configuration.

2. Done

This button closes the modal view that contains the webview. This is not configurable.

3. Webview

The webview contains your web app’s content.

The External Application to be loaded is determined by your plugin configuration.

Web vs. Mobile Expanded View

Example: Web
Example: Mobile

Card Menu

1. Card title

The same as the card Title displayed in the Card Face. Determined by your plugin configuration.

2. Icon

An Icon of your choice from our available options. Determined by your plugin configuration.

This icon is also used in the Organize Dashboard view when the user adds a card.

3. Organize dashboard

All card menus contain a button that navigates the user to where they can change the dashboard card order.

Organize Dashboard

Note
Plugin cards might not be shown by default. Also note that the user can change their dashboard configuration, so plugins may appear in the Add a card menu within the Organize Dashboard control.

1. Card title

The same as the card Title displayed in the Card Face. Determined by your plugin configuration.

2. Icon

The same as the Icon displayed in the Card Menu. Determined by your plugin configuration.

3. Card description

The short Description of your card. Determined by your plugin configuration.

Theming

Plugins should render themselves in a pleasing way that matches the theme configured for your financial institution in Banno.

There are two different ways to retrieve the configured theme for your financial institution: the Institutions API or the Identity Token (when authenticating a user).

If you do not want to use the Banno theme data and instead prefer to render your content using generic light and dark mode support, then you’ll have to take appropriate action on a per-platform basis.

Institutions API

The Institutions API is offered as part of the Consumer API and is the best way to retrieve the theme data for your financial institution.

Part of the Institutions API is the themes endpoint to retrieve the themes configured for an institution. You should use the theme values returned from this API to create styles to match your plugin’s design to the themes configured for your financial institution in Banno.

In practice, financial institutions do not modify their theme on a frequent basis. This means that developers can retrieve the theme info, offline, then make that theme a static part of the configuration of the plugin for that specific institution.

This has the added benefit of being in line with our guidance on caching for performance (where possible).

Light theme vs Dark theme selection

The Banno UI uses the system settings / browser settings to determine whether to show the light theme or the dark theme.

The user cannot directly choose a theme. They can only indirectly change the theme by changing their settings to light mode or dark mode.

The user user cannot have light mode enabled with a dark theme, nor can the user have dark mode enabled with a light theme.

External Resources

Dark Mode and Color Schemes

If you want to learn more about handling dark mode and other color schemes in your web content, these external resources may be useful:

Responsive and Adaptive Web Design

Have a Question?
Have a how-to question? Seeing a weird error? Get help on StackOverflow.
Register for the Digital Toolkit Meetup where we answer technical Q&A from the audience.
Last updated Tue May 23 2023