Q2 Forms

Embedding HTML and JavaScript into the Q2 Online platform is an important step in building your extension. With the many-layered Q2 architecture, this is no simple task. Fortunately, we’ve provided several helpers, depending on your extension type.

Tecton Server Side Rendered Extension

From your extension, return an instance of forms.Q2TectonForm. All the routing, authentication, and styling will be handled for you:

async def default(self):
    template = self.get_template('index.html.jinja2', {})

    html = self.get_tecton_form(
        "FormName",
        custom_template=template,
    )
    return html

The template that is returned is generated at q2_sdk/templates/ui/q2_tecton_form.html.jinja2

Methods that this generated JavaScript defines:

submitForm(routingKey) - Sends all input fields to the python server, invoking the function bound to routing_key.
validate_input_fields() - Returns false if any non-optional q2-input fields have a .errors array
validateSingleInput(input) - Given an input field, checks that its value is not empty
navigateToFormId(form_id) - Redirects the browser to form_id (can be a name or an int). Shortcut for tecton.actions.navigateTo

Tecton Client Side Rendered Extension

No form object needed here! Client Side Rendered Tecton extensions are similar to Single Page Applications, so you can choose any framework you like (or none at all) and simply build HTML/JavaScript/CSS as normal.

Design your server as a REST API, returning Python dictionaries, which will be available to your frontend as JSON objects.

For more details, check out the Client Side Rendering Tutorial

Pre-4.4 Online Extension

From your extension, return an instance of forms.Q2Form. This will embed your custom HTML into a template which the SDK provides that works with all the versions of Q2 Online Banking that have existed over the years. The details of how to route, how to make network calls, and several other concerns are gracefully abstracted away:

async def default(self):
    template = self.get_template('index.html.jinja2', {})

    html = forms.Q2Form(
        "FormName",
        custom_template=template,
        routing_key="submit"
    )
    return html

For a more detailed explanation, check out the Online Banking Form Tutorial

The template that is returned can be found at q2_sdk/templates/ui/q2_form.html.jinja2

Methods that this JavaScript defines:

submitForm(routingKey) - Sends all input fields to the server, invoking the function bound to routing_key.
validate_input_fields() - Returns false if any required input fields are empty.
navigateToFormId(form_id) - Redirects the browser to form_id (can be a name or an int). Shortcut for wedgeIntegrationController.transitionToRoute
setInitialSubmitStatus() - Disables submit button if required inputs exist.
build_modal(title, message, type) - Shortcut for wedgeIntegrationController.send('showQuickModal')
clearModal() - Shortcut for wedgeIntegrationController.send('clearModal')
q2_ajax(request, routingKey, onSuccess, onFailure) - Make an asynchronous call to the server.

SSO Extension

SSO extensions aren’t truly rendered in Q2 Online, since HTML is provided by a third party provider. However, accomplishing an SSO is similar– return an Caliper SDK Object, In this case q2_sdk.core.http_handlers.sso_handler.Q2SSOResponse:

async def default(self):
    response = Q2SSOResponse(ResponseType.LINK_OUT, response="http://www.q2ebanking.com")
    return response

For a more, check out the SSO Extension Tutorial