Preparation - Template Modifications

Updated pdexter 2022-12-20

For the next few lessons, we will need an extra template created, plus modification to our current Rental Car template.

Step 1. Add the "Rental Car Booking" Template

• Create a new template with the following script.

• Change the term "acme" if you are using your own organisation name.

{
    "systemHeader": {
        "systemType": "template",
        "summaryName": "Acme Rental Car Booking"
    },
    "formColor": "AliceBlue",
    "appTags": [
        "acme",
        "rentalCarBooking"
    ],
    "components": [
        {
            "name": "appTags",
            "componentName": "sc-static-value",
            "value": [
                "acme",
                "rentalCarBooking"
            ]
        },
        {
            "componentName": "sc-text-box",
            "label": "Rental ID",
            "name": "rentalID",
            "enabled": false
        },
        {
            "componentName": "sc-related-document",
            "name": "rentalCarRel",
            "label": "Rental Car",
            "enabled": true,
            "mandatory": true
        },
        {
            "componentName": "sc-drop-down",
            "name": "status",
            "label": "Status",
            "defaultValue": "New",
            "enabled": false,
            "dropDownList": [
                "New",
                "Taken",
                "Returned"
            ]
        },
        {
            "componentName": "sc-party",
            "label": "Customer",
            "name": "customer",
            "fullWidth": true,
            "mandatory": true,
            "mandatoryFields": [
                "surname"
            ]
        },
        {
            "componentName": "sc-date-time",
            "label": "Pick Up Date",
            "name": "pickupDate"
        },
        {
            "componentName": "sc-date-time",
            "label": "To Return Date",
            "name": "plannedReturnDate "
        },
        {
            "componentName": "sc-date-time",
            "label": "Actual Return Date",
            "name": "actualReturnDate "
        },
        {
            "componentName": "sc-numeric",
            "name": "actualDaysRented ",
            "label": "Actual Days Rented"
        },
        {
            "componentName": "sc-note-box",
            "label": "Special Instructions",
            "name": "specialInstructions",
            "fullWidth": true
        },
        {
            "componentName": "sc-check-box",
            "label": "Car Condition OK at Pickup",
            "name": "conditionStartBool "
        },
        {
            "componentName": "sc-check-box",
            "mandatory": false,
            "label": "Car Condition OK on Return",
            "name": "conditionReturnBool "
        }
    ],
    "name": "Acme Rental Car Booking",
    "summaryNameRule": "Acme Rental Car Booking - {{customer.title}} {{customer.firstName}} {{customer.surname}}"
}

• Save the new template, noting the new documentId of the template. You will need this for the next step.

Step 2. Modify the Rental Car template

The following adds a child document grid to the Rental Car template.

• Open your "Rental Car" template.

• Add the following content to the end of the components section.

• Remember to change the organisation name "acme" if necessary.

{
    "componentName": "sc-datatables",
    "fullWidth": true,
    "detail": "",
    "visible": true,
    "filter": "{'query':{'bool':{'filter':[{'term':{'appTags':'acme'}},{'term':{'appTags':'rental'}},{'term':{'systemHeader.systemType':'document'}}, {'term': {'rentalCarRel.documentId': '{{document.documentId}}'}}]}}}",
    "gridColumns": [
        {
            "displayName": "Rental ID",
            "type": "string",
            "width": 1,
            "field": "rentalID"
        },
        {
            "displayName": "Surname",
            "type": "string",
            "width": 3,
            "field": "customer.surname"
        },
        {
            "displayName": "Pickup Date",
            "field": "pickupDate",
            "type": "date",
            "width": 1,
            "name": "pickupDate",
            "filter": "dateFilter",
            "cellFilter": "date:'dd MMM yyyy'"
        },
        {
            "displayName": "To Return",
            "field": "plannedReturnDate",
            "type": "date",
            "width": 1,
            "name": "plannedReturnDate",
            "filter": "dateFilter",
            "cellFilter": "date:'dd MMM yyyy'"
        },
        {
            "displayName": "Actual Return",
            "field": "actualReturnDate",
            "type": "date",
            "width": 1,
            "name": "actualReturnDate",
            "filter": "dateFilter",
            "cellFilter": "date:'dd MMM yyyy'"
        },
        {
            "displayName": "Status",
            "field": "status",
            "filter": null,
            "type": "string",
            "width": 1,
            "name": "status"
        }
    ],
    "listAllDocuments": false,
    "name": "gridRentals",
    "label": " ",
    "template": [
        {
            "name": "Car Rental Booking",
            "templateId": "// Place your Rental Car Rental template id here //",
            "default": {
                "rentalCarRel": "documentId"
            }
        }
    ]
}

• Copy the documentId of your Rental Car Rental template from Step 1, and replace the value of template.templateId of the last sc-datatables component field with it, where the script "// Place your Rental Car Rental template id here //" is.

Testing

• Open an existing Rental Car document.

• You should see an empty grid at the bottom.

• Click the bottom field "Add a new child document"

• Click "Car Rental Booking" from the dropdown.

• A new subdocument should appear below the grid, corresponding to your new template.

If the above is true, you have successfully implemented the necessary template changes and addition!