Usage 

การใช้

Structure 

โครงสร้าง

[
    {
        title : 'Page Title',
        properties : [
            {
                name : 'Property Name',
                label : 'Property Label',
                description : 'Property Description', //optional, default is NULL
                type : 'Property Type',
                value : 'Property Value', //optional, default is null
                required : 'Mandatory or Not', //optional, 'true' or 'false', default is 'false'
                //… more attributes …
            }, //… more fields …
        ],
        validators : [  //optional
            //… properties custom validators …
        ],
        buttons : [  //optional
            //… custom properties page buttons …
        ]
    }, //… more properties page …
]

Sample Look and Feel

ตัวอย่างรูปลักษณ์

Field Types

ประเภทของฟิลด์

Auto Complete

ดำเนินการอัตโนมัติ

Check Box

ช่องทำเครื่องหมาย

Code Editor

เครื่องมือแก้ไขรหัส

Color

สี

Color Scheme (New)

This is a new feature in Joget DX 8

Combine Grid

รวมกริด

Custom Scripting (New)

สคริปต์ที่กำหนดเอง (ใหม่)

This is a new feature in Joget DX.

นี่เป็นคุณสมบัติใหม่ใน Joget DX

Element Select Box

องค์ประกอบเลือกกล่อง

File

ไฟล์

Fixed Row Grid

แก้ไขกริดแถว

columns : [
    {key : 'key', label : 'Columns'}, // first column will used to populate row label
    {key : 'value', label : 'Value', required: 'true'},
    {key : 'label', label : 'Label', required: 'true'},
    {key : 'width', label : 'Width', options:[
        {value : '10%', label : '10%'},
        {value : '20%', label : '20%'},
        {value : '30%', label : '20%'},
        {value : '40%', label : '20%'}
    ]}
],
rows : [
    {label : 'Username', required: 'true'},
    {label : 'Status'},
    {label : 'Message'},
    {label : 'Date'}
],
value : [
    {label : 'Username'},
    {label : 'Status'},
    {label : 'Message', width : '20%'},
    {label : 'Date', value : 'dateCreated'}
]

Grid

กริด

Header

หัวข้อ

Hidden Field

ซ่อนฟิลด์

HTML Editor

ตัวแก้ไข HTML

Icon Textfield (New)

This is a new feature in Joget DX.

นี่เป็นคุณสมบัติใหม่ใน Joget DX

Image

ภาพ

Label

ป้าย

Multi Select Box

กล่องเลือกหลายตัว

Password Field

ฟิลด์รหัสผ่าน

Radio Button

ปุ่มตัวเลือก

Readonly Text Field

ช่องข้อความแบบอ่านอย่างเดียว

Multiselect in Grid Interface (New)

เลือกได้หลายแบบในส่วนต่อประสานกริด (ใหม่)

This is a new feature in Joget DX.

นี่เป็นคุณสมบัติใหม่ใน Joget DX

Number (New)

หมายเลข (ใหม่)

This is a new feature in Joget DX.

นี่เป็นคุณสมบัติใหม่ใน Joget DX


 

Select Box

เลือกกล่อง

Text Area

พื้นที่ข้อความ

Text Field

ช่องข้อความ

Regular Express (Regex) Validation Attributes

แอตทริบิวต์การตรวจสอบความถูกต้องแบบด่วน (Regex)

{
    regex_validation : '^[a-zA-Z0-9_]+$',
    validation_message : 'Invalid ID!!'
}

Dependency Field Attributes

คุณสมบัติของฟิลด์

{
    control_field: 'chartType',
    control_value: 'bar|xy|area|bubble|line|candlestick|ohlc',
    control_use_regex: 'true',
}

Options Field Attributes

คุณสมบัติฟิลด์ตัวเลือก

options : [
    {value: 'value1', label : 'Value 1'},
    {value: 'value2', label : 'Value 2'},
    {value: 'value3', label : 'Value 3'}
]
options_ajax : '[CONTEXT_PATH]/web/json/console/app[APP_PATH]/datalist/options'
options_ajax_on_change : 'type'
options_ajax : '[CONTEXT_PATH]/web/json/app[APP_PATH]/plugin/org.joget.plugin.enterprise.SamplePlugin/service?action=getJson'
options_callback: 'DatalistBuilder.getColumnOptions'
options_script: 'var tempArray = [{\'label\':\'\',\'value\':\'\'}]; 
for(ee in DatalistBuilder.availableColumns){ var temp = {
\'label\' : UI.escapeHTML(DatalistBuilder.availableColumns[ee].label),
\'value\' : DatalistBuilder.availableColumns[ee].id}; 
tempArray.push(temp);}tempArray;'

Built-in JSON API for 'options_ajax' 

Built-in Javascript Function for 'options_callback'

Validator Types

ประเภทตัวตรวจสอบความถูกต้อง

AJAX

Page Button

ปุ่มหน้า

Variable

ตัวแปร

[CONTEXT_PATH]

[APP_PATH]

Retrieve Properties Value in Plugin

ดึงค่าคุณสมบัติในปลั๊กอิน

Single Value Field

เขตข้อมูลค่าเดียว

String value = getPropertyString("property_name");

Multi Values Field

ฟิลด์ค่าหลายค่า

String[] values = getPropertyString("property_name").split(";");

Combine Grid Field

รวมเขตข้อมูลกริด

String[] col1_values = getPropertyString("col1_name").split(";");
String[] col2_values = getPropertyString("col2_name").split(";");

Grid Field

ฟิลด์กริด

Object columns = getProperty("property_name");
if (columns != null) {
    for (Object colObj : (Object[]) columns) {
        Map col = (Map) colObj;
        String col1_value = (String) opt.get("col1_key");
        String col2_value = (String) opt.get("col2_key");
    }
}

Element Select Box

องค์ประกอบเลือกกล่อง

import org.joget.plugin.base.PluginManager;
import org.joget.apps.app.service.AppUtil;
import org.joget.plugin.base.ExtDefaultPlugin;
 
Object element = getProperty("property_name");
if (element != null && element instanceof Map) {
    Map elementMap = (Map) element;
    String className = (String) elementMap.get("className");
    Map<String, Object> properties = (Map<String, Object>) elementMap.get("properties");
 
    //convert it to plugin
    PluginManager pm = (PluginManager) AppUtil.getApplicationContext().getBean("pluginManager");
    ExtDefaultPlugin plugin = (ExtDefaultPlugin) pm.getPlugin(className);
    if (plugin != null) {
        plugin.setProperties(properties);
    }
}