Skip to content

Create a Table for Reference Data

We'll create a template which displays our reference data - contacts and organisations

Notes:

  • hideCommandBar:true hides the command bar buttons
  • disableSave:true prevents the component from prompting a save if the data is changed.
{
    "systemHeader": {
        "systemType": "template",
        "templateId": "74746c80-8378-11e6-99b1-71ee944cf59f",
        "summaryName": "Reference Data"
    },
    "appTags": [
        "myApplication",
        "referenceData"
    ],
    "components": [
        {
            "componentName": "sc-static-html",
            "name": "panel1",
            "wrapAction": "open",
            "wrapHtmlType": "wrap",
            "wrapClass": "panel-primary",
            "fullWidth": true,
            "label": "Contacts",
            "disableSave": true
        },
        {
            "componentName": "sc-datatables",
            "name": "contactsRef",
            "showReload": true,
            "gridColumns": [
                {
                    "displayName": "Name",
                    "field": "systemHeader.summaryName",
                    "href": "/#/form/{{{documentId}}}",
                    "type": "url",
                    "urlOpenIn": "newWindow",
                    "width": 3
                },
                {
                    "displayName": "Phone",
                    "field": "phone",
                    "type": "string",
                    "width": 2
                },
                {
                    "displayName": "Email",
                    "field": "email",
                    "type": "string",
                    "width": 2
                },
                {
                    "displayName": "Organisation",
                    "field": "orgRel.name",
                    "type": "string",
                    "filter": "arrayFilter",
                    "width": 2
                }
            ],
            "filter": "{'query':{'bool':{'filter':[{'term':{'appTags':'contact'}},{'term':{'systemHeader.systemType':'document'}}, {'term':{'appTags':'myApplication'}}]}}}",
            "enableColumnMoving": true,
            "enableColumnResizing": true,
            "columnSearch": true,
            "fullWidth": true,
            "label": "Contacts"
        },
        {
            "componentName": "sc-static-html",
            "name": "panel1",
            "wrapHtmlType": "wrap",
            "wrapAction": "close"
        },
        {
            "componentName": "sc-static-html",
            "name": "panel2",
            "wrapAction": "open",
            "wrapHtmlType": "wrap",
            "wrapClass": "panel-primary",
            "fullWidth": true,
            "label": "Organisations"
        },
        {
            "componentName": "sc-datatables",
            "name": "organisation",
            "showReload": true,
            "gridColumns": [
                {
                    "displayName": "Name",
                    "field": "systemHeader.summaryName",
                    "href": "/#/form/{{{documentId}}}",
                    "type": "url",
                    "urlOpenIn": "newWindow",
                    "width": 3
                },
                {
                    "displayName": "Phone",
                    "field": "phone",
                    "type": "string",
                    "width": 2
                },
                {
                    "displayName": "Email",
                    "field": "email",
                    "type": "string",
                    "width": 2
                }
            ],
            "filter": "{'query':{'bool':{'filter':[{'term':{'appTags':'organisation'}},{'term':{'systemHeader.systemType':'document'}}, {'term':{'appTags':'myApplication'}}]}}}",
            "enableColumnMoving": true,
            "enableColumnResizing": true,
            "columnSearch": true,
            "fullWidth": true,
            "label": "Organisation",
            "disableSave": true
        },
        {
            "componentName": "sc-static-html",
            "name": "panel2",
            "wrapHtmlType": "wrap",
            "wrapAction": "close"
        }
    ],
    "hideCommandBar": true
}