Widgets

A “widget” is a lightweight block of content or functionality that can decorate many of the core online banking workflows.

Almost all pages have a top and bottom “fence”. These fences are only visible once a widget has been configured to display inside it. Caliper SDK extensions can be configured to be displayed as a widget in any of these widget fences, and a widget will have access to the same capabilities and elements as a full page extension.

Since widgets are a environment configuration that is configured in our “theme” JS files (and not in the DB) we have created a system where you can test/dev widgets without updating the theme javascript file.

In an actual online banking environment these configurations will be set at deployment time of your widget.

Warning

Widgets will call your extension every time a user visits that page. It is critical that the widgets are performant and not overburdening to Online or your core. A widget should utilize caching whenever possible. We recommend Tecton CSR extensions to minimize data payloads and leverage browser-side caching.

Warning

In some older versions of Online 4.4, the tectonWidget may fail to load due to the Ardent not loading the configuration when you start your extension. In this case do a full refresh of the application in your browser.

Many common pages have widget fences that a widget can be displayed in. These fences help determine and adjust the display of the widget when handling different viewports and screensizes, and during resizing.

Widgets
../../_images/dashboard_widgets.png

Landing Page
../../_images/accounts_widgets.png

Account Details
../../_images/messages_widget.png

Messages
../../_images/transfer_widget.png

Transfer
../../_images/settings.alerts.index_widgets.png

Alerts
../../_images/settings.security.index_widgets.png

Security Settings
../../_images/activityCenter_widgets.png

Activity Center

The above support is for Tecton widgets. Non-Tecton widgets are limited to the right fence. If you feel you need a non-Tecton widget, please contact the SDK team.

The above is also not an exhaustive list of all pages in online banking. Generally every page can have a top and bottom widget. If there is a specific page you want to add a widget to and it’s not documented above, please contact the SDK team.

In order to see your widget on a specific widget location you will need to specify your widget’s location using URL query parameters.

For example, if you wanted to see your widget in the dashboard.bottom location and your widget’s extension name was CoolExtension with the default entrypoint of Main, then you would use the url:

uux.aspx?widget_location=dashboard.bottom&widget_name=CoolExtension.Main

Another example, if you wanted to see your widget in the top location of another extension named AwesomeExtension and your widget’s extension name was CoolExtension with the default entrypoint of Main, then you would use the url:

uux.aspx?widget_location=extension/AwesomeExtension/Main.top&widget_name=CoolExtension.Main

A brand new extension is not required for a widget. Using a different entry point will allow you to use the same extension with just a different route on the python side. For example, if your extension is MyWidget you could add an entrypoint Widget and then load your widget with:

uux.aspx?widget_location=dashboard.bottom&widget_name=CoolExtension.Widget

To generate the Widget entrypoint, use the q2 tecton command.

There is no need to q2 install or q2 add_to_nav for this new entry point. You can begin using it immediately.

If you are not sure if the widget config is working properly, you can also access your extension by navigating directly to it:

https://stack.q2developer.com/sdk/{stack_name}/ardent/uux.aspx#/extension/CoolExtension/Main

Widget Permissions

Out of the box, widgets are on for all digital banking users. If you want to have granular control then you can add logic to check a user property and render nothing if the user property is not enabled.

from q2_sdk.core.http_handlers.tecton_server_handler import Q2TectonServerRequestHandler
from q2_sdk.hq.db.user_property_data import UserPropertyData
from q2_sdk.core.cache import cache

class SavvyMoneySSOServerRequestHandler(Q2TectonServerRequestHandler):

    WEDGE_ADDRESS_CONFIGS = {
        'property_name': 'FeatureGroupCustUser/CoolExtensionWidget'
    }

    ## quick user property check, if this returns 'False' then your handler should return empty
    @cache(300, use_session_cache=True)
    async def check_user_property(self) -> bool:
        upd_params = UserPropertyData(self.logger, hq_credentials=self.hq_credentials)
        property_name = self.wedge_address_configs['property_name']
        upd_get_response = await upd_params.get(
            property_name,
            user_id=self.online_user.user_id,
            group_id=self.online_user.group_id,
            customer_id=self.online_user.customer_id
        )

        if len(upd_get_response) > 0:
            return upd_get_response[0].PropertyValue.text is 'True'

        return False

Loading Spinner

A common use case is to hide the loading spinner, allowing end users blissful ignorance if the widget is not intended to load for them. In this case, a Community Post already exists with some great details.