@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
andExpanded 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
.
Normal Links
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>
Expanded View Links
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.
Deep Links
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 behttps://digital.garden-fi.com
.
Deep Link <a target="_top" href="[BANNO_ONLINE_ORIGIN]/app/launch">Back to Dashboard via deep link</a>
The list of special values for deep links will be documented in the future.
Embedded Web Browser Links
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.
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
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.