ใน SharePoint List จะสร้างแถบสี หรือใส่ สัญลักษณ์ให้กับ Column ของข้อมูลที่สนใจได้อย่างไร (SharePoint 2007)

          ใน SharePoint List ต่างๆ เช่น Issure Tracking หรือจะเป็น Task List โดยปกติ ก็จะแสดงข้อมูลในฟิลด์ต่างๆ โดยไม่ได้มีลูกเล่นหรือสีสันบ่งบอกความแตกต่างของแต่ละ Item  เราลองมาประยุกต์ใช้ Calculate Column เพื่อทำให้ SharePoint List ของเราสะดวกต่อการดูข้อมูล โดยใช้สีมาเป็นตัวบ่งบอกกันคะ  ดังรูปด้านล่างนี้คะ      
        

                จากตัวอย่าง อธิบายขั้นตอนโดยคร่าวๆ ก่อนนะคะ  Column ที่ถูกแสดงเป็นสัญลักษณ์ หรือข้อความที่ถูก Hightlight พวกนี้ (เช่น Column ที่ชื่อ Traffic Light,Indicator,Font Color และ Background Color) เป็น Calculate Column  โดย Column ที่ใช้ในการกำหนดเป็น Condition คือ Column Priority ที่ไว้บอกความสำคัญของ Issue นั้นๆ โดยที่ Calculate Column  ก็ให้ใส่ Code HTML ที่ต้องการแสดงผล ว่าจะให้แสดงผลเป็นสัญลักษณ์ หรือ เป็นแถบสี จากนั้น เราต้องใส่ Code เพื่อให้ Code HTML นั้นถูกแสดงผลด้วยนะคะ โดยใส่ Code นี้ไว้ที่ Content Editor Web Part คะ โดยให้ใส่ที่ด้านล่างของ List ที่แสดงนะคะ

               งั้นมาดูขั้นตอนโดยละเอียดกันดีกว่าคะ
               1. ไปที่ List ที่ต้องการ เช่น Issue Tracking หรือ Task แล้วกด Settings
               2. กด Create Column เพื่อจะสร้าง Column แบบ Calculate Column
               3. ใส่ Column Name
               4. เลือก The type of information in this column เป็น Calculated (calculation based on other columns)
               5. ตรง Additional Column Settings ส่วนของ Formula ให้ใส่ Code เหล่านี้ลงไป โดยเลือกตามต้องการนะคะ โดยดูตัวอย่างจากรูปด้านบนคะ ว่าการแสดงผลเป็นอย่างไร
                     ***จากตัวอย่าง  Column ที่เอามาเป็นเงื่อนไขในการแสดงผลคือ Column ที่ชื่อ Priority โดยส่วน Code ตรง  CHOOSE(RIGHT(LEFT(Priority,2),1),”red”,”orange”,”green”) เป็นการตัดเอาตัวเลขข้างหน้าของ Priority (เช่น (1) High, (2) Normal, (3) Low) มาเป็นตัวเลือกว่าจะให้แสดงผลเป็นสีใด โดยเรียงตามลำดับ***
                                – แบบ Traffic light (actually a big bullet!):
                                    =”<DIV style=’font-weight:bold; font-size:24px; color:”&CHOOSE(RIGHT(LEFT
                                        (Priority,2),1),”red”,”orange”,”green”)&”;’>&bull;</DIV>”

                                – แบบ Indicator (reusing the default SharePoint KPI images):
                                    =”<DIV><IMG src=’/_layouts/images/KPIDefault-”&(3-RIGHT(LEFT(Priority,2),1))&
                                        ”.gif’ /></DIV>”

                                – แบบ Font color:
                                    =”<DIV style=’font-weight:bold; font-size:12px; color:”&CHOOSE(RIGHT(LEFT
                                        (Priority,2),1),”red”,”orange”,”green”)&”;’>”&Priority&”</DIV>”

                                – แบบ Background color:
                                    =”<DIV style=’font-size:12px; background-color:”&CHOOSE(RIGHT(LEFT
                                       (Priority,2),1),”red”,”orange”,”green”)&”;’>”&Priority&”</DIV>”

                6. กด OK                
                7. จากนั้น Add Web Part ที่ชื่อ Content Editor Web Part ลงไปที่หน้าที่แสดงผลของ List โดยไปที่
                      Site Actions > Edit Page
                8. กด Add a Web Part ที่ชื่อ  Content Editor Web Part ซึ่งอยู่ในหมวด Miscellaneous
                9. นำ  Content Editor Web Part ลากมาอยูตำแหน่งส่วนล่างของ List
             10. ที่ Content Editor Web Part กด edit > Modify Shared Web Part
             11. จะปรากฎหน้าต่างด้านขวา ให้เลือก Source Editor… และใส่ Code ด้านล่างลงไป เพื่อให้ Code ที่ใส่ในขั้นตอนที่ 5 
                    ได้ถูกแสดงผลเป็น HTML ได้อย่างถูกต้อง เพราะถ้าไม่อย่างนั้น Calculate Column  ที่ถูกเพิ่มเข้าไปก็จะแสดงใน
                     ส่วน Code เป็น Text ธรรมดา

<script type=”text/javascript”>
//
// Text to HTML
// Feedback and questions: Christophe@PathToSharePoint.com
//
var theTDs = document.getElementsByTagName(“TD”);
var i=0;
var TDContent = ” “;
while (i < theTDs.length) {
try {
TDContent = theTDs[i].innerText || theTDs[i].textContent;
if ((TDContent.indexOf(“<DIV”) == 0) && (TDContent.indexOf(“</DIV>”)
>= 0)) {
theTDs[i].innerHTML = TDContent;
}
}
catch(err){}
i=i+1;
}
//
// ExpGroupRenderData overwrites the default SharePoint function
// This part is needed for collapsed groupings
//
function ExpGroupRenderData(htmlToRender, groupName, isLoaded) {
var tbody=document.getElementById(“tbod”+groupName+”_”);
var wrapDiv=document.createElement(“DIV”);
wrapDiv.innerHTML=”<TABLE><TBODY id=\”tbod”+ groupName+”_\”
isLoaded=\””+isLoaded+ “\”>”+htmlToRender+”</TBODY></TABLE>”;
var theTBODYTDs = wrapDiv.getElementsByTagName(“TD”); var j=0;
var TDContent = ” “;
while (j < theTBODYTDs.length) {
try {
TDContent = theTBODYTDs[j].innerText || theTBODYTDs
[j].textContent;
if ((TDContent.indexOf(“<DIV”) == 0) && (TDContent.indexOf
(“</DIV>”) >= 0)) {
theTBODYTDs[j].innerHTML = TDContent;
}
}
catch(err){}
j=j+1;
}
tbody.parentNode.replaceChild(wrapDiv.firstChild.firstChild,tbody);
}
</script>

             12. กด Save
             13. ในส่วน Layout  ให้ติ๊ก Hidden เพื่อซ่อน Content Editor Web Part นี้
             14. กด OK
             15. กด Exit Edit Mode ที่ด้านบนขวาของ Page

                     เท่านี้ก็เสร็จเรียบร้อยแล้วนะคะ นำไปประยุกต์ใช้กันได้เลยคะ และสำหรับสูตรที่ไว้ใช้ใน Formula ที่ไว้ใช้ใน Calculate Column สามารถไปดูรายละเอียดสูตรอื่นๆได้ที่นี่เลย >> คลิกๆ ที่นี่เลยจ๊ะ

credit : http://blog.pathtosharepoint.com/2008/09/01/apply-color-coding-to-your-sharepoint-lists/