Tag Archive ซ่อน

Joget: แสดงเซ็กชั่นฟอร์มแบบแท็บ

การกำหนดให้แสดง section ของฟอร์มโดยเปลี่ยนค่าใน input เหมือน Joget: กำหนดการแสดงไม่แสดง section ด้วย input มันไม่ค่อยจะเป็นธรรมชาติเท่าไหร่ ผู้ใช้จะคุ้นเคยกับ tabs มากกว่า

ทำได้โดย

  1. ให้ทำตามวิธี Joget: กำหนดการแสดงไม่แสดง section ด้วย input ก่อน
  2. ให้ลาก Custom HTML มาในตำแหน่งที่ต้องการ ใส่ javascript ตามตัวอย่าง
    <ul class="nav nav-tabs" id="tabsA">
    <li class="nav-item">
    <a class="active nav-link show" data-toggle="tab" href="#section1">Section 1</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#section2">Section 2</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#section3">Section 3</a>
    </li>
    </ul>
    <script src="/jw/assets/scripts.js"></script>
    <script>
    $(document).ready(function() {
    
    navSection();
    
    });
    </script>
  3. ไฟล์ javascript ที่เก็บ function แยกเอาไว้ reused ได้หลายๆ ครั้ง
    /*
    pitt phunsanit
    show / hide section with tabs
    version 1
    */
    function navSection() {
    let hash = window.location.hash.substr(1);
    let visibilityControl = $("#visibilityControl");
    let tabsA = $("#tabsA");
    
    if (hash != visibilityControl.val()) {
    $('a[href="#' + hash).click();
    visibilityControl.val(hash);
    }
    
    $("li > a", tabsA).on("click", function() {
    visibilityControl
    .val(
    $(this)
    .attr("href")
    .substr(1)
    )
    .trigger("change");
    });
    }

การแสดงไม่แสดง form section จะเห็นเป็น tabs ธรรมดาๆ ดูเป็นธรรมชาติขึ้นมากกว่าเดิม ตัวอย่างฟอร์ม

{"className":"org.joget.apps.form.model.Form","properties":{"id":"sectionTabs","loadBinder":{"className":"org.joget.apps.form.lib.WorkflowFormBinder"},"tableName":"prototypes","description":"","name":"Section Tabs","storeBinder":{"className":"org.joget.apps.form.lib.WorkflowFormBinder"}},"elements":[{"elements":[{"elements":[{"className":"org.joget.apps.form.lib.HiddenField","properties":{"id":"visibilityControl","workflowVariable":"","value":"section1","useDefaultWhenEmpty":""}},{"className":"org.joget.apps.form.lib.CustomHTML","properties":{"id":"dynamicTabsA","autoPopulate":"","value":"<ul class=\"nav nav-tabs\" id=\"tabsA\">\n    <li class=\"nav-item\">\n        <a class=\"active nav-link show\" data-toggle=\"tab\" href=\"#section1\">Section 1<\/a>\n    <\/li>\n    <li class=\"nav-item\">\n        <a class=\"nav-link\" data-toggle=\"tab\" href=\"#section2\">Section 2<\/a>\n    <\/li>\n    <li class=\"nav-item\">\n        <a class=\"nav-link\" data-toggle=\"tab\" href=\"#section3\">Section 3<\/a>\n    <\/li>\n<\/ul>\n<script src=\"\/jw\/assets\/scripts.js\"><\/script>\n<script>\n    $(document).ready(function() {\n\n        navSection();\n\n    });\n<\/script>","label":""}}],"className":"org.joget.apps.form.model.Column","properties":{"width":"100%"}}],"className":"org.joget.apps.form.model.Section","properties":{"id":"section1","loadBinder":{"className":"","properties":{}},"visibilityControl":"","regex":"","visibilityValue":"","storeBinder":{"className":"","properties":{}},"permission":{"className":"","properties":{}},"label":""}},{"elements":[{"elements":[{"className":"org.joget.apps.form.lib.TextField","properties":{"id":"field1","readonlyLabel":"","workflowVariable":"","maxlength":"","encryption":"","validator":{"className":"","properties":{}},"value":"","label":"Section 1","readonly":"","size":""}}],"className":"org.joget.apps.form.model.Column","properties":{"width":"100%"}}],"className":"org.joget.apps.form.model.Section","properties":{"id":"section1","loadBinder":{"className":"","properties":{}},"visibilityControl":"visibilityControl","regex":"","visibilityValue":"section1","storeBinder":{"className":"","properties":{}},"permission":{"className":"","properties":{}},"label":"Section 1"}},{"elements":[{"elements":[{"className":"org.joget.apps.form.lib.TextField","properties":{"id":"field2","readonlyLabel":"","workflowVariable":"","maxlength":"","encryption":"","validator":{"className":"","properties":{}},"value":"","label":"Section 2","readonly":"","size":""}}],"className":"org.joget.apps.form.model.Column","properties":{"width":"100%"}}],"className":"org.joget.apps.form.model.Section","properties":{"id":"section2","loadBinder":{"className":"","properties":{}},"visibilityControl":"visibilityControl","regex":"","visibilityValue":"section2","storeBinder":{"className":"","properties":{}},"permission":{"className":"","properties":{}},"label":"Section 2"}},{"elements":[{"elements":[{"className":"org.joget.apps.form.lib.TextField","properties":{"id":"field3","readonlyLabel":"","workflowVariable":"","maxlength":"","encryption":"","validator":{"className":"","properties":{}},"value":"","label":"Section 3","readonly":"","size":""}}],"className":"org.joget.apps.form.model.Column","properties":{"width":"100%"}}],"className":"org.joget.apps.form.model.Section","properties":{"id":"section3","loadBinder":{"className":"","properties":{}},"visibilityControl":"visibilityControl","regex":"","visibilityValue":"section3","storeBinder":{"className":"","properties":{}},"permission":{"className":"","properties":{}},"label":"Section 3"}}]}

Joget:กำหนดการแสดงไม่แสดง section ด้วย input

joget ได้เตรียมการแสดงฟอร์และไม่แสดงฟอร์มตามเงื่อนไขไว้โดยวิธีที่ง่ายที่สุดคือ แสดง section ตามค่าใน input ที่มี

  1. ในหน้า form builder ให้ลาก Hidden Field หรือ Text Field มาในตำแหน่งที่ต้องการ ตั้งชื่อเช่น visibilityControl
  2. ไปที่ section ที่ต้องการควบคุมการแสดง คลิก Edit Section
  3. คลิก next
  4. คลิก next
  5. กำหนด Visibility Control Rules โดย
    • Join Type เลือก And หรือ Or ตามเงื่อนไขที่ต้องการ
    • Reverse Value ให้ติ๊กถ้าต้องการให้ทำงานเมื่อ มีค่าตรงข้ามกับค่าใน Field
    • Field ID ที่เก็บสถานะ เช่น visibilityControl
    • Field Value ค่าที่ต้องการนำมาเปรียบเที่ยบ
    • Using Regular Expressions? ถ้าใช้ Regular Expressions เปรียบเทียบเช่น 5|8|2525 จะแสดง section เมื่อค่าใน visibilityControl เท่ากับ 5 หรือ 8 หรือ 2525

ทดลองเปลี่ยนค่าของ visibilityControl และสังเกตุความเปลี่ยนแปลงดู