{
"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
}Copy the code below as a Control in your App Config. Make adjustments to the onSubDataRequest event for your specific usecase and render the control with app.refresh("myTree") at any point.
Take a look at https://www.jstree.com/ for further configuration details and options.
// Alternative format of the node (id & parent are required)
{
id : "string" // required
parent : "string" // required
text : "string" // node text
icon : "string" // string for custom
state : {
opened : boolean // is the node open
disabled : boolean // is the node disabled
selected : boolean // is the node selected
},
li_attr : {} // attributes for the generated LI node
a_attr : {} // attributes for the generated A node
}Create a brixxbox TextBox myOutput for the Value of the Slider
{
"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
}