{
  "id": "mySliderControl",
  "controlType": "htmlTemplate",
  "widthClassMd": "col-md-4",
  "refersToConfigSource": "",
  "htmlTemplateContent": "<style>\r\n    .slidecontainer {\r\n\r\n        width: 100%;\r\n        /* Width of the outside container */\r\n    }\r\n\r\n    /* The slider itself */\r\n    .slider {\r\n        -webkit-appearance: none;\r\n        /* Override default CSS styles */\r\n        appearance: none;\r\n        width: 100%;\r\n        /* Full-width */\r\n        height: 25px;\r\n        /* Specified height */\r\n        background: #d3d3d3;\r\n        /* Grey background */\r\n        outline: none;\r\n        /* Remove outline */\r\n        opacity: 0.7;\r\n        /* Set transparency (for mouse-over effects on hover) */\r\n        -webkit-transition: .2s;\r\n        /* 0.2 seconds transition on hover */\r\n        transition: opacity .2s;\r\n    }\r\n\r\n    /* Mouse-over effects */\r\n    .slider:hover {\r\n        opacity: 1;\r\n        /* Fully shown on mouse-over */\r\n    }\r\n\r\n    /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */\r\n    .slider::-webkit-slider-thumb {\r\n        -webkit-appearance: none;\r\n        /* Override default look */\r\n        appearance: none;\r\n        width: 25px;\r\n        /* Set a specific slider handle width */\r\n        height: 25px;\r\n        /* Slider handle height */\r\n        background: #04AA6D;\r\n        /* Green background */\r\n        cursor: pointer;\r\n        /* Cursor on hover */\r\n    }\r\n\r\n    .slider::-moz-range-thumb {\r\n        width: 25px;\r\n        /* Set a specific slider handle width */\r\n        height: 25px;\r\n        /* Slider handle height */\r\n        background: #04AA6D;\r\n        /* Green background */\r\n        cursor: pointer;\r\n        /* Cursor on hover */\r\n    }\r\n</style>\r\n<div class=\"slidecontainer\">\r\n    <input type=\"range\" min=\"1\" max=\"100\" value=\"50\" class=\"slider rangeSlider\" >\r\n</div>",
  "events": [
    {
      "name": "onSubDataRequest",
      "code": "$(app.getHtmlElement(\"mySliderControl\")).find(\".rangeSlider\")[0].oninput = function() {\r\n    app.setFieldValue(\"myOutput\", this.value);\r\n}"
    }
  ],
  "index": 5
}

{
  "id": "costCenterTree",
  "controlType": "htmlTemplate",
  "refersToConfigSource": "",
  "htmlTemplateContent": "<style>\r\n    .bbjsTree{\r\n        \r\n    }\r\n</style>\r\n<input type=\"text\" value=\"\" class=\"input ccTreeSearch\" style=\"margin:0em auto 1em auto; display:block; padding:4px; border-radius:4px; border:1px solid silver;\" />\r\n<div class=\"bbjsTree\" id=\"tree\"></div>",
  "events": [
    {
      "name": "onSubDataRequest",
      "code": "debugger;\r\n//Lib laden, wenn noch nicht passiert\r\nif (!window.jsTree) {\r\n    $('head').append(`<link href=\"https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css\" rel=\"stylesheet\">`);\r\n    await jQuery.getScript(\"https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js\");\r\n    window.jsTree = true;\r\n}\r\n//Daten und HTML Elemente besorgen\r\nlet ccResult = app.sqlRead(\"getAllCostcentersForTree\");\r\nlet treeElement = $(app.getHtmlElement(\"costCenterTree\")).find(\".bbjsTree\");\r\nlet searchInput = $(app.getHtmlElement(\"costCenterTree\")).find(\".ccTreeSearch\");\r\n\r\n//Daten transformieren, könnte auch schon in sql passieren.\r\nlet ccTreeData = ccResult.map(x => {\r\n    return {\r\n        id: x.id,\r\n        text: x.ccName,\r\n        parent: x.ccParentId ? x.ccParentId : \"#\"\r\n    };\r\n});\r\n\r\n//Alten tree zerstören\r\ntreeElement.jstree(\"destroy\");\r\n\r\n//Events verknüpfen und tree Erzeugen\r\ntreeElement\r\n    .on('create_node.jstree', async function (e, newNode, position) {//wenn Context Menu Create geklickt wurde\r\n        let createApp = app.startBrixxbox({\r\n            appName: \"costCenter\",\r\n            additionalValues: {\r\n                ccParentId: newNode.parent,\r\n                ccName: newNode.node.text\r\n            },\r\n        });\r\n        await createApp.addEventListener(\"onRecordSaved\", function (brixxApi, eventArgs) {\r\n            app.refresh(\"costCenterTree\");\r\n        })\r\n    })\r\n    .on('changed.jstree', function (e, data) {\r\n        for (let i = 0; i < data.selected.length; i++) {\r\n            console.log(\"Selected: \" + data.instance.get_node(data.selected[i]).text)\r\n        }\r\n    })\r\n    .jstree({\r\n        'core': {\r\n            \"check_callback\": true,\r\n            \"data\": ccTreeData,\r\n            \"themes\": {\r\n                \"variant\": \"large\"\r\n            }\r\n        },\r\n        \"checkbox\": {\r\n            \"keep_selected_style\": false\r\n        },\r\n        \"plugins\": [\"wholerow\",  \"dnd\", \"search\", \"contextmenu\"]\r\n        //\"checkbox\",\r\n    });\r\n\r\n//Suchfeld Events verknüpfen\r\nlet to = false;\r\nsearchInput.keyup(function () {\r\n    debugger;\r\n    if (to) { clearTimeout(to); }\r\n    to = setTimeout(function () {\r\n        var v = searchInput.val();\r\n        treeElement.jstree(true).search(v);\r\n    }, 250);\r\n});"
    }
  ],
  "index": 14
}