Skip to content

Issue Form

Next we'll construct the 'Issue' template to record the issue details. To save a bit of time, I'll be copying from another template made previously, so that you don't have to watch me type out name and label fields. Components used in this template (not already described in previous template build documentation).

Notes:

  • The filter in sc-datatables uses 'handlebars' to get user generated information from the document.

  • {'term':{'reportedByRel.documentId':'{{document.reportedByRel.0.documentId}}'}} This is saying ... match the reportedByRel.documentId from all issues with the reportedByRel.documentId of this document.

  • The sc-static-html panels require an 'opening' definition and a 'closing' definition to wrap the components between them. The name of the opening panel must match the name of the closing panel and the panel open/close pair names must be unique on the template. You'll notice the panel names in the video eg: panel1, panel2 etc.

  • The summaryNameRule uses triple handlebars whereas the sc-datatables filter uses double handlebars. The definition of the array is reportedByRel.0.name which is slightly different to standard javascript which would be reportedByRel[0].name
  • At the bottom on the JSON is an array of 'rulesets' denoted by 'onFieldChangeClientRule'. Later in the example, you'll develop a ruleset to automate this template. Copy the documentId from the ruleset document and replace the documentId in this template to link the ruleset.
  {
    "systemHeader": {
        "templateId": "74746c80-8378-11e6-99b1-71ee944cf59f",
        "systemType": "template",
        "summaryName": "Issue Template"
    },
    "appTags": [
        "myApplication",
        "issue"
    ],
    "summaryNameRule": "Issue {{{reportedByRel.0.name}}} - {{{description}}}",
    "components": [
        {
            "componentName": "sc-static-value",
            "name": "appTags",
            "visible": false,
            "value": [
                "myApplication",
                "issue"
            ]
        },
        {
            "componentName": "sc-static-html",
            "label": "Reported By",
            "name": "panel1",
            "fullWidth": true,
            "wrapHtmlType": "wrap",
            "wrapAction": "open",
            "wrapClass": "panel-primary"
        },
        {
            "componentName": "sc-date-time",
            "name": "reportedDate",
            "label": "Date Reported"
        },
        {
            "componentName": "sc-related-document",
            "name": "reportedByRel",
            "filter": "{'query':{'bool':{'filter':[{'term':{'systemHeader.systemType': 'document'}},{'term':{'appTags':'contact'}},{'term':{'appTags':'myApplication'}}]}}}",
            "showDropDown": true,
            "label": "Reported By",
            "fieldDefault": {
                "orgRel": "orgRel"
            },
            "newTemplate": "c0df4e70-bbcd-11e8-a6f4-cb3fa698f246"
        },
        {
            "componentName": "sc-related-document",
            "label": "Organisation",
            "name": "orgRel",
            "enabled": false,
            "showDropDown": true,
            "filter": "{'query':{'bool':{'filter':[{'term':{'systemHeader.systemType': 'document'}},{'term':{'appTags':'organisation'}},{'term':{'appTags':'myApplication'}}]}}}"
        },
        {
            "componentName": "sc-static-html",
            "name": "panel1",
            "wrapHtmlType": "wrap",
            "wrapAction": "close"
        },
        {
            "componentName": "sc-static-html",
            "name": "panel2",
            "label": "Issue Description",
            "wrapClass": "panel-primary",
            "fullWidth": true,
            "wrapAction": "open",
            "wrapHtmlType": "wrap"
        },
        {
            "componentName": "sc-drop-down",
            "label": "Category",
            "name": "category",
            "dropDownList": [
                "1",
                "2",
                "3",
                "4"
            ]
        },
        {
            "componentName": "sc-note-box",
            "label": "Issue Description",
            "name": "description",
            "fullWidth": true
        },
        {
            "componentName": "sc-static-html",
            "name": "panel2",
            "wrapHtmlType": "wrap",
            "wrapAction": "close"
        },
        {
            "componentName": "sc-static-html",
            "name": "panel3",
            "label": "Assignment and Status",
            "fullWidth": true,
            "wrapClass": "panel-primary",
            "wrapAction": "open",
            "wrapHtmlType": "wrap"
        },
        {
            "componentName": "sc-drop-down",
            "name": "assignee",
            "label": "Assignee",
            "dropDownList": [
                "John",
                "Fred",
                "Jane",
                "Jim",
                "Harry",
                "Jenny"
            ]
        },
        {
            "componentName": "sc-drop-down",
            "label": "Status",
            "name": "status",
            "dropDownList": [
                "Started",
                "Completed"
            ]
        },
        {
            "componentName": "sc-date-time",
            "label": "Date Started",
            "name": "startedDate"
        },
        {
            "componentName": "sc-date-time",
            "label": "Date Completed",
            "name": "completedDate"
        },
        {
            "componentName": "sc-note-box",
            "name": "tasksPerformed",
            "label": "Tasks Performed",
            "fullWidth": true
        },
        {
            "componentName": "sc-static-html",
            "name": "panel3",
            "wrapHtmlType": "wrap",
            "wrapAction": "close"
        },
        {
            "componentName": "sc-static-html",
            "name": "panel4",
            "wrapAction": "open",
            "wrapHtmlType": "wrap",
            "wrapClass": "panel-primary",
            "fullWidth": true,
            "label": "Previous Issues"
        },
        {
            "componentName": "sc-datatables",
            "name": "previousReported",
            "showReload": true,
            "gridColumns": [
                {
                    "displayName": "Issue",
                    "field": "systemHeader.summaryName",
                    "href": "/form/{{{documentId}}}",
                    "type": "url",
                    "urlOpenIn": "newWindow",
                    "width": 3
                },
                {
                    "displayName": "Date Reported",
                    "field": "reportedDate",
                    "filter": "dateFilter",
                    "type": "date",
                    "width": 2
                },
                {
                    "displayName": "Issue Description",
                    "field": "description",
                    "type": "array",
                    "width": 2
                },
                {
                    "displayName": "Organisation",
                    "field": "orgRel.name",
                    "type": "string",
                    "filter": "arrayFilter",
                    "width": 2
                }
            ],
            "filter": "{'query':{'bool':{'filter':[{'term':{'appTags':'issue'}},{'term':{'systemHeader.systemType':'document'}}, {'term':{'reportedByRel.documentId':'{{document.reportedByRel.0.documentId}}'}}]}}}",
            "enableColumnMoving": true,
            "enableColumnResizing": true,
            "columnSearch": true,
            "fullWidth": true,
            "label": "Previous Issues"
        },
        {
            "componentName": "sc-static-html",
            "name": "panel4",
            "wrapHtmlType": "wrap",
            "wrapAction": "close"
        }
    ],
    "formColor": "#f3f3f3",
    "onFieldChangeClientRuleRel": [
        {
            "documentId": "2ff9ff80-bc87-11e8-b0d5-83dfd56805bc",
            "name": "myApplication - Issue - OnFieldChange"
        }
    ]
}