| Panel |
|---|
| borderColor | green |
|---|
| borderWidth | 1 |
|---|
| titleBGColor | #ddffcc |
|---|
| borderStyle | solid |
|---|
| title | Definition |
|---|
|
| English |
|---|
This tutorial cater for use cases that requires a highly customized spreadsheet. The Spreadsheet form element uses the Handsontable library, specifically version 6.2.2 for Joget Workflow V6. There are a wealth of plugins and APIs in the library documentation to change the cell appearance, cell selection, dynamic data, dynamic validation, and much more. |
| Thai |
|---|
บทช่วยสอนนี้รองรับกรณีการใช้งานที่ต้องการสเปรดชีตที่กำหนดเองสูง องค์ประกอบแบบฟอร์มสเปรดชีตใช้ไลบรารี Handsontable ซึ่งเป็นรุ่นเฉพาะ 6.2.2 สำหรับ Joget Workflow V6 มีปลั๊กอินและ API มากมายในเอกสารประกอบห้องสมุดเพื่อเปลี่ยนรูปลักษณ์ของเซลล์การเลือกเซลล์ข้อมูลแบบไดนามิกการตรวจสอบความถูกต้องแบบไดนามิกและอื่น ๆ อีกมากมาย |
|
...
| Info |
|---|
|
In Figure 1, we can add in more spreadsheet properties available in the library documentation. The configuration here is formatted as JSON. Usually for simple configurations, a single object and value in Custom Settings would suffice. But for more complex ones, this configuration can be used in combination with a Custom HTML form element to complete a functionality. Do scroll down below for a few examples referenced from the documentation. | Thai |
|---|
ในรูปที่ 1 เราสามารถเพิ่มคุณสมบัติสเปรดชีตเพิ่มเติมที่มีอยู่ในเอกสารประกอบของห้องสมุด การกำหนดค่าที่นี่ถูกจัดรูปแบบเป็น JSON ปกติแล้วสำหรับการกำหนดค่าอย่างง่ายวัตถุและค่าเดียวในการตั้งค่าแบบกำหนดเองก็เพียงพอแล้ว แต่สำหรับสิ่งที่ซับซ้อนกว่านี้การกำหนดค่านี้สามารถใช้ร่วมกับองค์ประกอบแบบฟอร์ม HTML ที่กำหนดเองเพื่อใช้งานได้อย่างสมบูรณ์ เลื่อนลงด้านล่างเพื่อดูตัวอย่างจากเอกสาร |
|
Example 1 - Limit Cell Selection
...
| Code Block |
|---|
|
<script>
$(function(){
var hot = FormUtil.getField("_yourSpreadsheetFormElementIdHere_").data("hot");
//console.log(hot.getSettings());
//hot.setDataAtRowProp(0, '_yourcellColumnIdHere_', '_myNewValue_');
});
</script> |
Example 4 - Add New Row using Javascript
After performing example 3 above, we can use the script below to programmatically add new rows into the speadsheet.
| Code Block |
|---|
|
<script>
var col = hot.countRows();
hot.alter('insert_row', col, 1);
hot.setDataAtCell(col, 0, '-Name-');
hot.setDataAtCell(col, 1, '-Surname-');
hot.setDataAtCell(col, 2, '-Age-')
</script> |
Reference: https://jsfiddle.net/ck4859zm/