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.
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
.
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 (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
is 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.
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.
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
).
- See the @jack-henry/banno-plugin-framework-bridge topic for details.
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
The plugin
is able to utilize the webview to display information to the user, clicking the view more
button will open a larger, fullscreen, webview which you can use to render larger content. In order to navigate back to the dashboard, users will have to utilize the browser back function.
Mobile
The plugin
is able to utilize the webview to display information to the user, clicking the view more
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
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
Web
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
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 dynamically 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 keep your plugin
design matching the overall theme of the Banno Apps automatically.
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:
- Article: Dark Mode Support in WebKit
- Video: Supporting Dark Mode in Your Web Content
- Spec: prefers-color-scheme
Responsive and Adaptive Web Design
- Article: 9 basic principles of responsive web design
- Article: Responsive web design basics
- Article: The building blocks of responsive design