หากคุณมี List แต่ไม่สามารถใช้ InfoPath แต่ต้องการ Form ที่สวยๆ แบบ InfoPath คุณต้องใช้ HTML Form ซึ่งคุณจะต้องมีความรู้ต่อไปนี้

  • HTML
  • CSS
  • JavaScript
  • JQuery
  • JQuery UI

ก่อนอื่นต้องติดตั้ง JQuery และ JQuery UI ใน SiteAssets Directory ของ SharePoint

เพื่อความสะดวกควร Map Drive ของ Sub Site Directory เพื่อให้เข้าถึง File ต่างๆได้ด้วย Windows File Explorer

โดยเปิด Windows File Explorer แล้วคลิกขวาที่ Computer จากนั้นเลือกโดยคลิกซ้ายที่ Map network drive… ดังรูป

2016-07-13_154512

Copy URL ของ SharePoint Sub Site มา จากนั้นลบ html ออก เปลี่ยน / ให้เป็น \ ให้หมด จากนั้นเอามาปะในช่อง Folder ดังรูป และคลิก Finish

2016-07-13_154947

เราก็จะเห็น Directory ของ Sub Site นั้น ๆ ดังรูป  ซึ่ง File ทั้งหมดจะเก็บไว้ใน Directory SiteAssets

2016-07-13_155437

Download jQueary ได้จาก http://jquery.com/download/

โดย Download ตัวที่เป็น Compressed, production jQuery  นะครับเพราะมันจะเล็กและทำงานได้เร็วที่สุด

สร้าง Directory “jquery” ใต้ Directory “SiteAssets” จากนั้นเอา File ที่ Download มาวางไว้ rename เป็น jquery.js เพื่อให้สะดวกในการอ้างถึง

ในการสาธิตนี้เราจะสร้าง Custom List ชื่อว่า HTLM Form เพื่อเป็นตัวอย่าง  โดยจะมีเพียง Field หรือ Column เดียวชื่อว่า Title

จากรูปหากเราคลิกที่ List>Form Web Paths เราจะเห็นว่า SharePoint มี Form 3 Forms คือ

  • Default New Form ใช้แสดงเมื่อมีการ item/record ใหม่
  • Default Display Form ใช้แสดงเมื่อเปิดดู item
  • Default Edit Form ใช้แสดงเมื่อเปิดมา edit item

ในตัวอย่างเราจะแก้เพียง Form เดียว คือ Default New Form (3)

2016-07-13_161100

โดยเริ่มจากสร้าง Directory ใต้ SiteAssets directory ชื่อว่า “HTMLForm”  จากนั้นสร้าง File 2 File ชื่อว่า htmlform.html และ myjavascript.js

ซึ่ง สามารถ Download ได้โดยการคลิกขวาที่ชื่อ File ด้านบน จากนั้นเลือก Save Link as นะครับ

โดย Code ที่อยู่ใน myjavascript.js จะทำหน้าที่ไป copy html code ส่วนที่เป็น input control ของ SharePoint Form มาใส่ใน HTML form ที่เราสร้างใหม่ โดยแทนที่ “data-field-name” ของ htmlform.html ทำให้ Form ใหม่ของเรามี Control

จากนั้น เราจะ Add htmlform.html  ที่เราสร้างไว้ลงใน Default New Form โดยคลิกที่  List>Form Web Paths>Default new form

2016-07-13_161100

ระบบจะเปิด Form ให้ดังรูป ซึ่งเราจะ Add Web Part “Content Editor” โดยคลิกที่ “Add a Web Part”>Media and Content>Content Editor>Add ดังรูป

2016-07-13_163941

จากนั้นเราจะ edit Web Part ที่เราพึ่ง Add  โดยคลิก Drop Down ทางขวามือแล้วเลือก Edit Web Part

2016-07-13_164424

จากนั้นให้พิมพ์ข้อความด้านล่าง ลงในช่อง Content Link

../../SiteAssets/HTMLForm/htmlform.html

จากนั้นคลิกปุ่ม apply

2016-07-13_165257

หากมีข้อความดังรูปต่อไปนี้ในช่อง Content Editor ที่เราพึ่งสร้าง แสดงว่า Web Path หา File HTML ของเราเจอ จากนั้นให้คลิกปุ่ม OK และ Stop Editing ดังรูป

2016-07-13_165651

จากนั้นให้ปิด File  “htmlform.html” หากเปิดไว้ใน editor จากนั้นเปิดใหม่ จะเห็นว่า SharePoint สร้าง Code ส่วนที่เป็น Head ให้ อยู่ด้านล่างของ Code ของเราดังรูป

2016-07-14_084057

ซึ่งเราจะต้องย้ายขึ้นไปไว้บนสุด และเพิ่ม Code ในส่วนของ <head> เพื่อ Link กับ JavaScript ที่เป็น jQuery และที่เราเขียนเอง

ดังต่อไปนี้

<script src=”../../SiteAssets/jquery/jquery.js”></script>
<script src=”../../SiteAssets/HTMLForm/myjavascript.js”></script>

และเราต้องซ่อน Form เก่าของ SharePoint โดยการเพิ่ม CSS Code ในส่วนของ <head> ด้วยดังต่อไปนี้

<style type=”text/css”>
.ms-formtable { /*..Hidden SP stand form*/
display:none;
}
</style>

2016-07-14_085252

หากเราทดสอบ Add new item ใน List ของเรา จะเห็น Form ใหม่ของเรา และ Form ใหม่ของ SharePoint ถูกซ่อนไป ดังรูป

2016-07-14_090057

 

 

Leave a Reply