Skip to content

Simple Grid

1 Purpose

This template example can be used for general lists or reports. It uses sc-datatables and the html panel components to create a reporting grid, along with a styling definition for the panel. The example in particular is a template that lists templates. In general this should be one of the first templates created when first building an application as it helps to group all of the templates that are created. The 'appTags' field is used for grouping. Make sure your newly created templates contain an 'appTag' field that you can group by.

The comandBar is hidden and sc-datatables set to 'disableSave':true to prevent the template from creating documents The columns display the summaryName of the document as well as the documentId with the JSON editor override Id attached. This allows one click access to the template for editing purposes.

2 Template Example

  "components": [
        {
            "componentName": "sc-static-html",
            "fullWidth": true,
            "name": "panelStyle",
            "html": "<style>.panel-A {background: #ffffff;border:0px} .panel-A > .panel-heading {font-size:1.25em;height:35px;line-height:16px; color:#ffffff ; background: #000000} </style>"
        },
        {
            "componentName": "sc-static-html",
            "fullWidth": true,
            "name": "panelTP",
            "label": "Templates",
            "wrapAction": "open",
            "wrapHtmlType": "wrap",
            "wrapClass": "panel-A"
        },
        {
            "componentName": "sc-datatables",
            "label": "Templates",
            "name": "templateGrid",
            "rowsPerPage": 50,
            "showReload": true,
            "listAllDocuments": false,
            "gridColumns": [
                {
                    "displayName": "Name",
                    "enableColumnMoving": true,
                    "enableColumnResizing": true,
                    "field": "systemHeader.summaryName",
                    "type": "url",
                    "width": 1,
                    "href": "/#/form/{{{documentId}}}",
                    "sort": {
                        "direction": "asc",
                        "precedence": 2
                    },
                    "urlOpenIn": "currentWindow"
                },
                {
                    "displayName": "JSON",
                    "enableColumnMoving": true,
                    "enableColumnResizing": true,
                    "field": "documentId",
                    "type": "url",
                    "width": 1,
                    "href": "/#/form/{{{documentId}}}/74746c80-8378-11e6-99b1-71ee944cf59f",
                    "urlOpenIn": "currentWindow"
                },
                {
                    "displayName": "appTags",
                    "enableColumnMoving": true,
                    "enableColumnResizing": true,
                    "field": "appTags",
                    "type": "string",
                    "width": 1
                }
            ],
            "filter": "{'query':{'bool':{'filter':[{'term':{'appTags':'formbird'}},{'term':{'systemHeader.systemType':'template'}},{'term':{'appTags':'support'}}]}}}",
            "disableAutoDisplay": true,
            "disableSave": true,
            "columnSearch": true,
            "fullWidth": true,
            "delayBeforeCallNum": 200
        },
        {
            "componentName": "sc-static-html",
            "wrapHtmlType": "wrap",
            "wrapAction": "close",
            "name": "panelTP"
        }
    ],
    "appTags": [
        "formbird",
        "support",
        "adminReport"
    ],
    "formColor": "#1B132D",
    "hideCommandBar": true

3 Customization

The example provided may require the following fields to be changed (the list is not exhaustive, just a reminder to check some items)
1. Styling definition
2. name fields of the components
3. label fields of the components
4. search criteria for sc-datatables
5. columns for sc-datatables
6. appTags array
7. formColor