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:
<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.
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.
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.
<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.
<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.
<a target="_top" href="[BANNO_ONLINE_ORIGIN]/app/launch">Back to Dashboard via deep link</a>
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.
Installation
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:
...
{
...
"dependencies": {
"@jack-henry/banno-plugin-framework-bridge": "^1.0.0"
}
}
After updating and saving the package.json file, you can install the dependency:
npm install
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.