Using jquery to control SharePoint display-computing bar KPI and Tag Cloud

ArticleDirectory

• Calculation bar KPI
• Tag Cloud

Calculation bar KPI

Moss 2007 has the ability to create a KPI list, but must be an Enterprise Edition.

For the purpose of project management, I need to track the status of some key milestones in a list and use red, green, and yellow lights to indicate the milestone status respectively. This status may represent the end date or some other key status values.

We can use the calculation bar to output the final results, and then use jquery to process these results to add visual effects to them to make them more vivid. After completion, it is shown as follows:

Previously we often use the calculation column to implement some complex formula calculation and output the corresponding HTML content, here can actually directly output an image-for example, "/_ layouts/images/kpiryg-0.gif ". This method is feasible, although the fldtypes. xml file under the server 12 directory needs to be edited. Here, I want to introduce a more end-user-oriented approach.

In this example, I created a simple list and stored three values in a single line text field: "kpi_green", "kpi_yellow", and "kpi_red ". If you use the calculation column, you only need to output the three values.

Next, you only need to add a Content Editor webpart on the page and paste the following script to the HTML source editor.CodeUse jquery's tag selector to select all the TD elements with CSS classes as "ms-vb2" and containing "kpi_green", "kpi_yellow", "kpi_red. Traverse these elements, hide them, set the corresponding HTML content, and then re-display these elements with a nice sliding effect.

<SCRIPT src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> </SCRIPT> <SCRIPT type = "text/JavaScript"> $ (document ). ready (function () {$ ('td. ms-vb2: Contains ("kpi_green"), TD. ms-vb2: Contains ("kpi_yellow"), TD. ms-vb2: Contains ("kpi_red ")'). each (function () {$ (this ). hide (); Publish (this).html(setcolour(publish (this).html (); $ (this ). show ("slow") ;}) ;}; function setcolour (value) {var strimage = "" Switch (value) {Case "kpi_green ": strimage = "kpidefaultlarge-0.gif" break; Case "kpi_yellow": strimage = "kpidefaultlarge-1.gif" break; Case "kpi_red": strimage = "kpidefaultlarge-2.gif" break ;} return "
 

Tag Cloud

Tag Cloud can be used to quickly locate Sharepoint list items or documents. It is easy to use. You only need to add a single-line text-type custom bar, "tags", to any existing list or library. The next step is to add one or more tags to the list item during editing. (Multiple tags are separated by semicolons ). The above KPI list is used for demonstration, as shown in:

The added demo data:

The final goal of a tag is to retrieve the list items. For end users, you only need to click the tag you are concerned about to quickly find the corresponding item. This is what we will achieve.

Let's take a look at the running effect:

Click a tag, such as Sharepoint ". The displayed dialog box lists all items that contain SharePoint tags.

The implementation process of this solution is as follows:

1. query a Sharepoint list and create all the tags.

2. Use jquery to create a tag cloud

3. When a user clicks a tag, the user queries the tag list and finds all items that contain the tag.

4. In the displayed jquery dialog box, all matching items are displayed. (You can add corresponding links or content based on your actual application)

Note: This solution only applies to one list. For multiple lists, cross-site, and website sets, this article does not cover the scope.

I will use the following tools:

1. spservices

2. dynacloud jquery plug-in

The first thing to do is to add scripts and CSS file references to the page. I am using SharePoint designer to add the reference to the page <asp: content contentplaceholderid = "placeholderadditionalpagehead" runat = "server">. The content is as follows:

 

<SCRIPT type = "text/JavaScript" src = "/_ layouts/scripts/jquery-1.3.2.min.js"> </SCRIPT> <SCRIPT type = "text/JavaScript" src = "/_ layouts /scripts/jquery-ui-1.7.3.custom.min.js </SCRIPT> <SCRIPT type = "text/JavaScript" src = "/_ layouts/scripts/jquery. SPServices-0.5.6.min.js & gt; </script & gt; <SCRIPT type = "text/JavaScript" src = "/_ layouts/scripts/jquery. dynacloud-5.js "> </SCRIPT> <link type =" text/CSS "rel =" stylesheet "href ="/_ layouts/scripts/CSS/smoothness/jquery-ui-1.7.3.custom.css "/>
 

The rest of the work is to add the Content Editor webpart on the page and write our code in the HTML source editor. For your convenience, we will explain the segments here, and the complete code will be listed at the end.

First, we need to query the list to build our tag cloud data source. The spservices library compiled by Marc is used here to facilitate the call of SharePoint Web Services.

$ (). Spservices ({operation: "getlistitems", async: false, listname: "KPI", camlviewfields: "<viewfields> <fieldref name = 'tags'/> </viewfields> ", completefunc: function (xdata, status) {$ (xdata. responsexml ). find ("[nodename = z: Row]"). each (function () {$ ('# cloudcontent '). append ($ (this ). ATTR ("ows_tags "). replace (/;/g, ""); $ ('# cloudcontent '). append ("");});}});
 

We traverse all the results and append the result tag (replace ";" with a space) to a div element with the ID cloudcontent.

Then, we simply call the dynacloud plug-in to apply magic to tags and turn them into tag clouds.

 
$. Dynacloud. Sort = true; $ ("Div. dynacloud"). dynacloud (); $ ('# cloudcontent'). Hide ();
 

For more information about the plug-in options, see the complete documentation.

At this time, the tag cloud has become very beautiful. But it does not do anything. The intention of the dynacloud plug-in is to create a tag cloud outside the hidden area of a webpage. When you click a tag, the text is highlighted. This is obviously useless to us, so we need to modify the code of this plug-in.

Open the plug-in file in SharePoint designer and replace the position in the figure.

Replace the highlighted text with a dialog box to display our search results. Therefore, we need to define a querytaglist function on the page. In this function:

1. Clear the DIV that will be used in the jquery dialog box.

2. query the list through spservices. Filter the result set using the clicked tag.

3. Use the expected result set to build the HTML content to be displayed in the dialog box.

Function querytaglist (texttoquery) {detail ('{dialog'}.html (""); $ (). spservices ({operation: "getlistitems", async: false, listname: "KPI", camlquery: "<query >\< where >\< contains >\< fieldref name = \" tags \ "/>\< value type = \" text \ ">" + texttoquery +" </value >\</contains >\</where >\< orderby >\< fieldref name = \ "title \" ascending = \ "True \"/>\</ orderby >\</query> ", camlviewfields: "<viewfields> <fieldref name = 'tags'/> <fieldref name = 'title'/> </viewfields>", completefunc: function (xdata, status) {$ (xdata. responsexml ). find ("[nodename = z: Row]"). each (function () {if ($ (this ). ATTR ("ows_tags "). indexof (texttoquery)>-1) {// we want the dialog to close when someone opens a form var mouseup = "$ ('# dialog '). dialog ('close'); "; var url =" <div> "+ $ (this ). ATTR ("ows_title") + "</div>" $ ('# dialog '). append (URL) $ ('# dialog '). dialog ('option', 'show ', 'blind'); $ (' # dialog '). dialog ('option', 'width', 400); $ ('# dialog '). dialog ('option', 'height', 200); $ ('# dialog '). dialog ('open ');}});}});}

The following is the complete code:

<Script language = "JavaScript" type = "text/JavaScript"> var strtags = ""; $ (document ). ready (function () {jquery ("# dialog "). dialog ({bgiframe: True, autoopen: false, modal: True, show: 'slide'}); $ (). spservices ({operation: "getlistitems", async: false, listname: "KPI", camlviewfields: "<viewfields> <fieldref name = 'tags'/> </viewfields> ", completefunc: function (xdata, status) {$ (xdata. responsexml ). find ("[nodename = z: Row]"). each (function () {$ ('# cloudcontent '). append ($ (this ). ATTR ("ows_tags "). replace (/;/g, ""); $ ('# cloudcontent '). append ("") ;};}}); $. dynacloud. sort = true; $ ("Div. dynacloud "). dynacloud (); $ ('# cloudcontent '). hide () ;}); function querytaglist (texttoquery) {parameters ('your dialog'tags .html (""); $ (). spservices ({operation: "getlistitems", async: false, listname: "KPI", camlquery: "<query >\< where >\< contains >\< fieldref name = \" tags \ "/>\< value type = \" text \ ">" + texttoquery +" </value >\</contains >\</where >\< orderby >\< fieldref name = \ "title \" ascending = \ "True \"/>\</ orderby >\</query> ", camlviewfields: "<viewfields> <fieldref name = 'tags'/> <fieldref name = 'title'/> </viewfields>", completefunc: function (xdata, status) {$ (xdata. responsexml ). find ("[nodename = z: Row]"). each (function () {if ($ (this ). ATTR ("ows_tags "). indexof (texttoquery)>-1) {// we want the dialog to close when someone opens a form var mouseup = "$ ('# dialog '). dialog ('close'); "; var url =" <div> "+ $ (this ). ATTR ("ows_title") + "</div>" $ ('# dialog '). append (URL) $ ('# dialog '). dialog ('option', 'show ', 'blind'); $ (' # dialog '). dialog ('option', 'width', 400); $ ('# dialog '). dialog ('option', 'height', 200); $ ('# dialog '). dialog ('open ');}});}});} </SCRIPT> <Div id = "cloudcontent" class = "dynacloud"> </div> <Div id = dynacloud> </div> <Div id = dialog Title = "KPI list tag search result "> </div>

 

References

Use jquery to create KPIs out of calculated Columns

Use jquery to create a tag cloud