Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • type : 'colorscheme'
  • value : Renders color options according to assigned hex color code. 

    Code Block
    languagejs
    //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
    languagejs
    //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
    languagejs
    //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>';
    		}
    		

...