Introduction

The purpose of this tutorial is to showcase the q2-cores package using a practical example. It will set up a realistic scenario where a core call is needed and walk through the steps to:

Install the q2-cores package
Make a core call using an already existing core
Create a new core call

Initial Setup

The tutorial assumes that the Online Banking Form Tutorial has already been completed. If this has not been completed yet, please do that first.

Create a new extension

Before diving into the q2-cores package, there is some setup that needs to be done.

First, let’s create a new extension and name it AddressChange:

$ q2 create_extension -t tecton_server AddressChange

Note

Warning! Only one extension named “AddressChange” can exist in the database! If other developers at your organization are working through this tutorial, be sure to give your extension a unique name.

This will create the AddressChange extension folder and files, as well as registering the extension in the settings.py file

Find the index.html.jinja2 file in the templates directory, and replace its content with the below snippet.

<div class="q2-row">
    <q2-input
            class="q2-col"
            name="address_1"
            id="address_1"
            label="Address 1"
            oninput="validateInputEvent(event)"
    ></q2-input>
    <q2-input
            class="q2-col"
            name="address_2"
            id="address_2"
            label="Address 2"
            optional
            oninput="validateInputEvent(event)"
    ></q2-input>
</div>
<div class="q2-row">
    <q2-input
            class="q2-col"
            name="city"
            id="city"
            label="City"
            oninput="validateInputEvent(event)"
    ></q2-input>
    <q2-input
            class="q2-col"
            name="state"
            id="state"
            label="State"
            oninput="validateInputEvent(event)"
    ></q2-input>
    <q2-input
            class="q2-col"
            name="zip_code"
            id="zip_code"
            label="Zip Code"
            oninput="validateInputEvent(event)"
    ></q2-input>
</div>
<div class="q2-row">
    <q2-btn id="my_submit" color="primary">Submit</q2-btn>
</div>
<script src="{{ this.base_assets_url }}/index.js"></script>

Next, install the extension and add to the navigation.

Finally, execute q2 run and make sure the extension renders.