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.

jack-henry/banno-plugin-framework-bridge

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

Deployment

The specific path above assumes that the banno-plugin-framework-bridge.js and banno-plugin-framework-bridge.js.map files have been placed in a specific publicly-accessible location which can be served up by your web server.

If you have a different path for those files, then you’ll need to modify the import statement to match that different path.

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 normal links 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
Copying files for your build process

Unless you’re bundling your dependencies with a bundler like WebPack or rollup, then you’ll need to copy the banno-plugin-framework-bridge.js and banno-plugin-framework-bridge.js.map files from the node_modules/@jack-henry/banno-plugin-framework-bridge/dist folder over to a folder which can be accessed by your web pages.

You can do this manually or script this as part of your build process. The steps for either option are specific to your tech stack.

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.
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 Thu Jun 22 2023