Tag Archive section

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 และสังเกตุความเปลี่ยนแปลงดู

HTML5 IE หน้าเว็บเพี้ยน

อ้ายอีที่ขัดขวางการเจริญเติมโตของเว็บเทคโนโลยีกันมานานคงไม่พ้น internet explorer ไออี ตัวปัญหาเจ้าเก่าเจ้าประจำ ดั้งเดิมนั้นเอง เพราะว่ามันโดนฝั่งมากับ windows และต่างจาก chrome, Firefox, opera ตรงที่เจ้าอื่นๆมันจะ update อัตโนมัติ พยามพัฒนาตัวเองให้เป็นคนใหม่ มีความสามารถมากขึ้นเสมอๆ แต่เจ้าที่ตัวนี้ user ต้องพยามในการอัพเดตมันเอง แถมวินโดวน์เก่าๆ ยังไม่สามารถลงเวอร์ชั่นที่ล่าสุดได้ตามข้อจำกัดของวินโดว์นั้นๆ

ถ้าเราใช่ HTML5 และ tag ใหม่ อย่าง article, aside, footer, header, nav, section, time หวังว่าท่าน google จะทรงโปรด เพราะว่าแบ่งข้อมูลให้ท่านพิจารณาในการทำ SEO อย่างเต็มที่ แต่กลับกลายเป็นว่าหน้าเว็บเละอย่างไม่เคยเป็นมาก่อนใน IE8 ลงไป ลองใช้ compatibility mode ไล่ version ต่ำลงมาเรื่อยๆ ถึงจะเห็นว่าเป็นที่ IE9 ลงมา

เป็นเพราะว่ามันเห็น tag ใหม่ๆ อย่าง article, aside, footer, header, nav, section, time เป็นการเขียนผิด โดนกะลาครอบอยู่กับ HTML4 สมัยเมื่อ 10 ปีที่แล้ว แถมพาลไม่สนใจ css ที่มี tag พวกนี้อยู่ด้วย วิธีแก้คือสร้าง object ใหม่อีกครั้งด้วย JavaScript

'article aside footer header nav section time'.replace(/\w+/g,function(n){document.createElement(n)})

หรือจะใช้ tools อย่าง html5shiv

<!--[if lt IE 9]>
    <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

เราก็จะสามารถใช้ css กับเท็กใหม่ๆ พวกนี้ได้และควรใช้ css reset ไว้ด้วยครับ ช่วยได้เยอะเลย เกือบจะต้องเริ่มต้นเขียนกันใหม่