Banno Digital Toolkit

Authentication Framework

Protect user data with OAuth 2.0 and OpenID Connect—both industry standards.

Consumer API

Build your own apps and services faster using the same API that Banno uses.

Plugin Framework

Extend the functionality of the Banno Digital Platform by building plugins.

Admin API

Manage and integrate the back office using the same API that Banno uses.
JACK HENRY ENTERPRISE

jXchange Developer Portal

Translate business information between Jack Henry and third-party software products.
Banno Digital Toolkit

Design Guidelines

Learn how to appy color, iconography, typography, and voice to your creations.

@jack-henry/banno-plugin-framework-bridge

Concepts

The @jack-henry/banno-plugin-framework-bridge (or “Plugin Bridge” for short) is a JavaScript module that provides an interface between a Plugin and Banno Online and Banno Mobile.

Routing

The Plugin Bridge contains a router which can automatically convert <a> HTML anchor tag clicks into routable events.

A common use case for the Plugin Bridge is to trigger the Expanded View from the Card Face.

  • See the User Interface topic for more details on the relationship between the Card Face and Expanded View.

Enabling

After installation, you can enable the router by adding this code snippet to your HTML page:

Enabling the Router 
<script type="module">
    import { enableRouter } from "/js/banno-plugin-framework-bridge.js";
    enableRouter();
</script>

The router will automatically convert HTML anchor tags to be used with the Plugin Bridge.

HTML anchor tags without a target attribute will be treated as normal links. There isn’t any significance to the naming of the link path.

You can use these to drill down into information within the Card Face.

Normal Link 
<a href="/internalpage">Internal page via normal link</a>

HTML anchor tags with a target="_top" attribute are treated as special links. There isn’t any significance to the naming of the link path.

You can use these to trigger opening the Expanded View and display plugin content that requires more screen real estate.

Expanded View Link 
<a target="_top" 
href="/expandedview">Expanded View via link target</a>
  • See the User Interface topic for more details about the Expanded View and how it is rendered in Banno Online compared to Banno Mobile.

HTML anchor tags with a target="_top" attribute and an href attribute with special values can be used to deep link to specific areas of Banno Online and Banno Mobile.

In this example, assume that code in your tech stack will substitute the [BANNO_ONLINE_ORIGIN] (without the parentheses) with the appropriate origin for Banno Online for your financial institution.

  • For the Garden demo institution the [BANNO_ONLINE_ORIGIN] would be https://digital.garden-fi.com.
Deep Link 
<a target="_top" 
href="[BANNO_ONLINE_ORIGIN]/app/launch">Back to Dashboard via deep link</a>
Special Values for Deep Links

The list of special values for deep links will be documented in the future.

HTML anchor tags with a target="_blank" attribute and an href attribute will be intercepted and converted into an embedded web browser link.

<a target="_blank" href="/external">Open link in new tab or external web browser</a>

In Banno Online, the link will open in a new browser tab.

In Banno Mobile, the link will open in an embedded web browser.

  • For iOS, this uses a SFSafariViewController.
  • For Android, this uses a Chrome Custom Tab.
Mobile Authentication

The plugin ’s web view and the embedded web browser do not share cookie storage. Therefore, in Banno Mobile, the user will be un-authenticated when opening an embedded web browser link.

Installation

Tech Stack Compatibility

Although the examples use Node.js, please note that Node.js is not required and other tech stacks are compatible with the Plugin Bridge.

Node.js

If you’re using Node.js and npm, you’ll want to update your package.json to add @jack-henry/banno-plugin-framework-bridge as a dependency:

Example of package.json dependency 
...
{
    ...
  "dependencies": {
      "@jack-henry/banno-plugin-framework-bridge": "^1.0.0"
  }
}

After updating and saving the package.json file, you can install the dependency:

Install dependency 
npm install

Other Tech Stacks

You can also install the @jack-henry/banno-plugin-framework-bridge as a dependency in other tech stacks.

  • Please visit your specific tech stack’s community pages for documentation on how to install a JavaScript module as a dependency.