UI Forms and Fields

Warning

This code is for the pre-4.4.0 extension. If you are writing a Tecton SSR or CSR extension refer to the Tecton Documentation.

The Caliper SDK is intended as a full-stack tool: we provide tools to serve the data you need in a UI that matches the rest of our online banking experience. Any HTML you return from q2_post will be rendered when the form is accessed in Online. That means we can do this to make an form with an input field:

def default(self):
    return '''
        <form>
            <label for="user_name">User Name</label>
            <input id="user_name" name="user_name" />
        </form>
    '''

That works, but usually you would want your form to have error handling, a responsive interface, JavaScript validation, and lots of other features. That’s starting to get complicated! Luckily, the Caliper SDK provides a simple interface to abstract some of that complexity away. In the tutorial, we generated a simple form to accept user input:

async def handle_initial_call(self):
    rows = [
        fields.Row(
            [
                fields.InputField('input_1', 'Input 1', True)
            ],
            grid_size='M'
        )
    ]
    html = forms.Q2Form(
        "GetAccounts",
        rows
    )
    return html

def q2_post(self):
    ...
    html_response = self.handle_initial_call()
    ...
    return html_response

This took advantage of the HTML generation in q2_sdk.ui to create an input field labeled ‘User Name’, the value of which was written into self.form_fields on POST with the key ‘user_name’. The True as the third parameter told the server to make this a ‘required’ input, which meant Online would validate that it was filled out before allowing submission of the form. That’s a lot of information in a small piece of code! Let’s see how it works:

The q2_sdk.ui module contains two submodules: fields and forms. The first holds code necessary to generate Q2 Online compliant HTML elements such as InputFields, SpanFields, and SelectFields. The latter contains code for combining fields and displaying them in a user friendly and responsive interface that will work appropriately across devices. It also injects Javascript into the Online response for features such as input validation.