...
- type : 'colorscheme'
value : Renders color options according to assigned hex color code.
Code Block language js //The first hex color code indicates the color group //Hex color code after the first color code would be render as seen in example picture above //Numbers of color can be determined based on number of hex color code after the first hex color code (color group) //This example contains 5 colors "value" : "#e9e9e9;#FFFFFF;#AABEB2;#00652D;#00796b;#004c40" //This example contains 1 color "value":"#e9e9e9;#FFFFFF" //This example contains 3 colors "value":"#e9e9e9;#3b2d2d;#7d0956;#0cf2e7"
- If we wish to access the property editor, the code can be located at the directory located at the disk drive Joget is downloaded (Example : <joget dx8 <Joget DX 8 installation folder>/apache-tomcat-9.0.62/webapps/jw/js/jquery/jquery.propertyeditor.js)
Color group, color choices, and no. of color options can be determine at the array called schemeOptions (line 10368):
Code Block language js //Shows color group: #e9e9e9 //With 5 colors options //With 15 color choices schemeOptions : [ "#e9e9e9;#FFFFFF;#996C67;#291715;#c41c00;#ff5722", "#e9e9e9;#FFFFFF;#D3B8B9;#774B4E;#d32f2f;#9a0007", "#e9e9e9;#FFFFFF;#C1ADB8;#2a8ffb;#2a0814;#e72a6d", "#e9e9e9;#FFFFFF;#90AECF;#2a8ffb;#4a0072;#7b1fa2", "#e9e9e9;#FFFFFF;#7EB3C7;#334A52;#512da8;#140078", "#e9e9e9;#FFFFFF;#7AB5B7;#324B4C;#303f9f;#001970", "#e9e9e9;#FFFFFF;#AECAC7;#2C6562;#1976d2;#004ba0", "#e9e9e9;#FFFFFF;#AFA4DA;#312D4A;#304ffe;#0026ca", "#e9e9e9;#FFFFFF;#9debf9;#007252;#00838f;#005662", "#e9e9e9;#FFFFFF;#AABEB2;#00652D;#014048;#ff5722", "#e9e9e9;#FFFFFF;#BEBDAB;#565737;#2e7d32;#005005", "#e9e9e9;#FFFFFF;#D5C1B5;#755741;#827717;#524c00", "#e9e9e9;#FFFFFF;#D8BEBB;#AC2C2E;#8d6e63;#5f4339", "#e9e9e9;#FFFFFF;#7FD1AE;#757575;#0f2f4a;#0072d2", "#e9e9e9;#FFFFFF;#A4BEB8;#006651;#546e7a;#29434e" ],
If you wanted to change the no. of color options shown, simply change the number in line: 10424, 10426 & 10450 to the desired number such as 3. You are required to change the no of color options in the schemeOptions too.
Code Block language js //Line 10424 & 10426 if (colors.length === 6) { //Change 6 to desired number html += '<colorgroup style="background:'+colors[0]+';">'; for (var i=1; i<6; i++) { //Change 6 to desired number html += '<color style="background:'+colors[i]+';"></color>'; } html += '</colorgroup>'; } else { html += '<colorgroup><color></color><color></color><color></color><color></color><color></color></colorgroup>'; } //Line 10450 for (var i = 1; i < 6; i++) //Change 6 to desired number { html += '<color style=\"background:'+values[i]+';\"></color>'; }
...