Skip to main content

Custom View APIs

Case Study: Expiration Dates for Whole Blood

Whole Blood doesn’t last forever! Dr. X is concerned that the technicians in her lab might inadvertently let Whole Blood donations expire before they’re tested and re-distributed. For any given Whole Blood sample, she has requested a countdown that displays the number of days remaining before the sample expires.

To meet this requirement, we’ll create a custom entity view that shows the number of days until expiration in bright red letters.

First create a new Entity Class called “Blood Products”.

Custom View APIs

Similar to Applets and Reports, Custom Entity Views come with many JS libraries preloaded:

    <script src="/static/js/jquery-3.6.0.min.js"></script>
    <script src="/static/js/spin.js"></script>
    <script src="/static/js/jquery.spin.js"></script>
    <script src="/static/js/d3.v2.js"></script>
    <script src="/static/js/fas-content.js"></script>
    <script src="/static/js/invokables.js"></script>
    <script src="/static/js/renderers.js"></script>
    <script src="/static/js/modules/vue/vue.min.js"></script>
    <script src="/static/js/modules/ag-grid/ag-grid-enterprise.min.js"></script>
    <script src="/static/js/modules/ag-grid/ag-grid-vue.umd.min.js"></script>
    <script src="/static/js/modules/l7-common/l7_common_ui.min.js"></script>
    <script src="/static/js/vue-treeselect.umd.min.js"></script>
    <script src="/static/js/v-calendar.umd.min.js"></script>
    <script src="/static/js/vuejs-datepicker.min.js"></script>
    <script src="/static/js/browser-polyfill.min.js"></script>
    <script src="/static/js/vue-multiselect.min.js"></script>
    <script src="/static/js/ej2-vue.min.js"></script>
    <script src="/static/js/moment.min.js"></script>

There are also a few useful objects loaded into the environment:

  • entity- which will look something like this:

    {
    "name": "ESP000001",
    "uuid": "c93c24a2-a627-4b82-ae72-0175c9942caf",
    "meta": {},
    "description": null,
    "barcode": "c93c24a2-a627-4b82-ae72-0175c9942caf",
    "barcodeType": "QR",
    "tags": [],
    "owner": {
        "name": "system admin",
        "uuid": "26fcd634-9100-4410-8751-7aff4fd4a3f9"
    },
    "type": "Whole Blood",
    "createdAt": "2022-01-29T22:34:57.055545Z",
    "updatedAt": "2022-01-29T23:56:51.062292Z",
    "sampleClass": "Sample",
    "typeUuid": "b5704ac6-d335-4ea4-8f94-d27d8f671acf",
    "deleted": false,
    "resourceVals": [
        {
            "uuid": "845830c9-f9e0-4d3f-b666-4feb565149c3",
            "url": null,
            "cls": "ResourceVal",
            "name": "Donor Initials",
            "desc": null,
            "barcode": null,
            "barcode_type": "QR",
            "fixed_id": "Donor Initials",
            "deleted": false,
            "tags": [],
            "owner": null,
            "created_at": "2022-01-29T22:34:57.055545Z",
            "updated_at": "2022-01-29T22:34:57.055545Z",
            "meta": {},
            "view_template": "",
            "value": "ABC",
            "expression": null,
            "dropdown": [],
            "var_type": "text",
            "required": true,
            "read_only": false,
            "in_sample_sheet": true,
            "error_msg": null,
            "dropdown_error_msg": null,
            "resource_var": "51f633cb-5695-4523-88f9-01ac851260ef"
        },
        {
            "uuid": "ef6c8861-09dc-47b9-b6fd-217e1786dfd7",
            "url": null,
            "cls": "ResourceVal",
            "name": "Donor DOB",
            "desc": null,
            "barcode": null,
            "barcode_type": "QR",
            "fixed_id": "Donor DOB",
            "deleted": false,
            "tags": [],
            "owner": null,
            "created_at": "2022-01-29T22:34:57.055545Z",
            "updated_at": "2022-01-29T22:34:57.055545Z",
            "meta": {},
            "view_template": "",
            "value": "1985-01-01",
            "expression": null,
            "dropdown": [],
            "var_type": "date",
            "required": true,
            "read_only": false,
            "in_sample_sheet": true,
            "error_msg": null,
            "dropdown_error_msg": null,
            "resource_var": "583772fc-1f4b-4e1c-9601-a6971869e453"
        }
    ],
    "workflowableResourceClass": "Blood Product"
}

  • appsApi

    4155932756.png

    • appsApi.$http

    • appsApi.$route

    • appsApi.$router

    • appsApi.$toast

      • For example:

        • appsApi.$toast({title: 'Error', description:'An error occured!', status: 'error'})

  • agGridLicense - license key for Ag Grid

In this section: