Create a Menu

We'll create a 'menu' to assist users to navigate the application.

We'll use the 'sc-static-html' component and CSS to construct some simple buttons.

Note: The template JSON shown below differs slightly from the video.

When you create a new template, it's given a unique 'documentId'. Replace the documentId's in the hyperlinks on the template below with your corresponding documentId's

{
    "systemHeader": {
        "templateId": "74746c80-8378-11e6-99b1-71ee944cf59f",
        "systemType": "template",
        "summaryName": "Example Application Menu"
    },
    "appTags": [
        "myApplication",
        "menu"
    ],
    "components": [
        {
            "componentName": "sc-static-html",
            "html": "<style>.btnA{min-width:220px;height:50px;background:#5dad3e;border-width:0px;border-radius:4px;display:inline-flex;align-items:center;justify-content:space-around} .heading{font-size:1.25em;text-decoration: underline}</style>",
            "visible": false
        },
        {
            "componentName": "sc-static-html",
            "wrapClass": "panel-primary",
            "wrapAction": "open",
            "wrapHtmlType": "wrap",
            "name": "panel1",
            "label": "Menu",
            "fullWidth": true
        },
        {
            "componentName": "sc-static-html",
            "html": "<p class='heading'>New</p>",
            "fullWidth": true
        },
        {
            "componentName": "sc-static-html",
            "html": "<a href='/form/0c2e4e80-bc5a-11e8-a2bd-b59ebc037265' class='btn btnA' style='color:white'>New Issue</a>"
        },
        {
            "componentName": "sc-static-html",
            "html": "<a href='/form/c0df4e70-bbcd-11e8-a6f4-cb3fa698f246' class='btn btnA' style='color:white' >New Contact</a>"
        },
        {
            "componentName": "sc-static-html",
            "html": "<a href='/form/53bd7810-bad0-11e8-9c0c-e3ee36fd7cf7' class='btn btnA' style='color:white' >New Organisation</a>"
        },
        {
            "componentName": "sc-static-html",
            "html": "<hr><p class='heading'>Reference And Reports</p>",
            "fullWidth": true
        },
        {
            "componentName": "sc-static-html",
            "html": "<a href='/form/d0588840-bc62-11e8-b8c1-7599a653903f' class='btn btnA' style='color:white' >Contacts</a>"
        },
        {
            "componentName": "sc-static-html",
            "html": "<a href='/form/d0588840-bc62-11e8-b8c1-7599a653903f' class='btn btnA' style='color:white' >Organisations</a>"
        },
        {
            "componentName": "sc-static-html",
            "html": "<a href='/form/a3631aa0-bc65-11e8-835d-c95942798e65' class='btn btnA' style='color:white' >All Issues</a>"
        },
        {
            "componentName": "sc-static-html",
            "html": "<a href='/form/40409dc0-bba3-11e8-95f3-8da5a81303d1' class='btn btnA' style='color:white' >Templates / Documents</a>"
        },
        {
            "componentName": "sc-static-html",
            "name": "panel1",
            "wrapAction": "close",
            "wrapHtmlType": "wrap"
        }
    ],
    "hideCommandBar": true
}