Jquery with sharepoint list basics

Jquery basics with sharepoint list

Reference urls: http://geekswithblogs.net/SoYouKnow/archive/2011/08/20/a-dummies-guide-to-sharepoint-and-jqueryndashgetting-amp-setting-sharepoint.aspx

http://geekswithblogs.net/SoYouKnow/archive/2011/07/28/a-dummies-guide-to-sharepoint-and-jqueryndashgetting-started.aspx

http://geekswithblogs.net/SoYouKnow/archive/2011/04/06/setting-sharepoint-drop-down-lists-w-jquery---20-items.aspx



<input type=”text” id=”myText”>

$(“#myText”)--->calling id 

 “title” is an ATTRIBUTE of the element, and the value of that attribute is our SharePoint field’s display name. 
$(“input[title=’My Text Field’]”)-->calling sharepoint field (My Text Field)

So, the above jQuery says “Search all the input elements for one with the attribute of title with a value of “My Text Field”.

Getting & Setting SharePoint Form Fields

//getting the value from list  field My Text Field

var textValue = $(“input[title=’My Text Field’]”).val();

To set the value we would use:

$(“input[title=’My Text Field’]”).val(textValue);

the value is equal to some text that time(Similar to all the senerios)

//getting the value from list  field My Text Field is No

var textValue = $(“input[title=’My Text Field’]”.val=="NO");

To set the value we would use:

$(“input[title=’My Text Field’]”).val(textValue);

Lookup and Choice fields

getting and setting this field are:

var mySelectValue = $(“select[title=’My Choice’]”).val();

$(“select[title=’My Choice’]”).val(mySelectValue);

It is important to note that you are setting and getting the option Value, not the displayed text. Also, if you go above 20 items things get really funky if you are using IE.  Luckily I already did a whole blog post on that:
Setting SharePoint Lookup Lists w/ jQuery (+/- 20 items)

Date Fields

Getting and setting that value would be:

var myDateValue = $(“input [title=’My Date Field’]”).val();

$(“input [title=’My Date Field’]”).val(myDateValue);

Checkboxes

if( $("input[title='My Check  box']").is(':checked'))
{
   alert("it's checked");
}
If you want to check or uncheck a checkbox programmatically you simply need to set or remove the “checked” attribute of the element. To uncheck a checkbox:

$("input[title='My Check  box']").removeAttr('checked');

To check a checkbox:

$("input[title='My Check  box']").attr('checked','checked'); 

Dropdowns 

$(document).ready(function(){
  //Define which columns to show/hide by default
  $('nobr:contains("fld1")').closest('tr').hide();
 $('nobr:contains("fld2")').closest('tr').hide();
$('nobr:contains("fld3")').closest('tr').hide();

//Show/hide columns based on Drop Down Selection
$("select[title='dp3']").change(function() {
  if ($("select[title='dp3']").val() == "NO") {
  $('nobr:contains("fld3")').closest('tr').hide();
  } else if($("select[title='dp3']").val() == "YES"){
    $('nobr:contains("fld3")').closest('tr').show();
  }
 });

color coading to sharepoint list columns using javascript(with out calculate columns)

color coading to sharepoint list columns using javascript(with out calculate columns)

i have Status column with three status Red,Amber,Green

Add this code in sharepoint list(ALLITEMS.ASPX) content editor webpart.different column is having any of this status (Red,Amber,Green) that place also color coading will work automatically


Code

<script src="/sites/testingsite/SiteAssets/jquery-1.9.0.min.js" type="text/javascript"></script>
<script type="text/javascript">$(document).ready(function(){
$(".ms-formbody:contains('Red')").each(function()
{
if( $(this).html().toLowerCase().indexOf("div")==-1)
{
var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" redstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
});
$(".ms-formbody:contains('Amber')").each(function()
{
if( $(this).html().toLowerCase().indexOf("div")==-1)
{
var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" amberstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
 });
$(".ms-formbody:contains('Green')").each(function()
{
if( $(this).html().toLowerCase().indexOf("div")==-1)
{
  var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" greenstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
 });
$(".ms-vb2:contains('Red')").each(function()
{
if( $(this).text()=="Red")
{
  var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" redstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
});
$(".ms-vb2:contains('Amber')").each(function()
{
if( $(this).text()=="Amber")
{
  var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" amberstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
 });

$(".ms-vb2:contains('Green')").each(function()
{
if( $(this).text()=="Green")
{
var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" greenstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
 });

});</script>
<style type="text/css">
.redstatus{
padding:2px; border: 1px red; background-color:red;color:#FFFFFF;width:80px;
}
.amberstatus{
padding:2px; border: 1px orange; background-color:orange;color:#FFFFFF;width:80px;
}
.greenstatus{
padding:2px; border: 1px green; background-color:green;color:#FFFFFF;width:80px;
}
</style>

Screenshot

After adding the different status Processcheck with statuses Inprogress,Completed,Resolved

Here is the code

<script src="/sites/magellanreporting/SiteAssets/jquery-1.9.0.min.js" type="text/javascript"></script>
<script type="text/javascript">$(document).ready(function(){
$(".ms-formbody:contains('Red')").each(function()
{
if( $(this).html().toLowerCase().indexOf("div")==-1)
{
var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" redstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
});
$(".ms-formbody:contains('Amber')").each(function()
{
if( $(this).html().toLowerCase().indexOf("div")==-1)
{
var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" amberstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
 });
$(".ms-formbody:contains('Green')").each(function()
{
if( $(this).html().toLowerCase().indexOf("div")==-1)
{
  var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" greenstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
 });
$(".ms-formbody:contains('Inprogress')").each(function()
{
if( $(this).html().toLowerCase().indexOf("div")==-1)
{
var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" inprogresstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
});
$(".ms-formbody:contains('Completed')").each(function()
{
if( $(this).html().toLowerCase().indexOf("div")==-1)
{
var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" completedstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
 });
$(".ms-formbody:contains('Resolved')").each(function()
{
if( $(this).html().toLowerCase().indexOf("div")==-1)
{
  var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+="resolvedstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
 });

$(".ms-vb2:contains('Red')").each(function()
{
if( $(this).text()=="Red")
{
  var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" redstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
});
$(".ms-vb2:contains('Amber')").each(function()
{
if( $(this).text()=="Amber")
{
  var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" amberstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
 });

$(".ms-vb2:contains('Green')").each(function()
{
if( $(this).text()=="Green")
{
var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" greenstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
 });
$(".ms-vb2:contains('Inprogress')").each(function()
{
if( $(this).text()=="Inprogress")
{
  var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" inprogressstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
});
$(".ms-vb2:contains('Completed')").each(function()
{
if( $(this).text()=="Completed")
{
  var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" completedstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
 });

$(".ms-vb2:contains('Resolved')").each(function()
{
if( $(this).text()=="Resolved")
{
var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" resolvedstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
 });

});</script>
<style type="text/css">
.redstatus{padding:2px; border: 1px red; background-color:red;color:#FFFFFF;width:80px;}
.amberstatus{padding:2px; border: 1px orange; background-color:orange;color:#FFFFFF;width:80px;}
.greenstatus{padding:2px; border: 1px green; background-color:green;color:#FFFFFF;width:80px;}
.inprogressstatus{padding:2px; border: 1px blue; background-color:blue;color:#FFFFFF;width:80px;}
.completedstatus{padding:2px; border: 1px Brown; background-color:Brown;color:#FFFFFF;width:80px;}
.resolvedstatus{padding:2px; border: 1px Purple; background-color:Purple;color:#FFFFFF;width:80px;}
</style>


Screenshot

Groupby choice column using dataview webpart

Groupby choice column using dataview webpart

Reference url: http://technology.feedfury.com/content/38130758-solved-can-t-group-by-choice-column-in-sharepoint-list-view.html

To group by a Choice field which allows multiple selections (checkboxes), convert the Web Part to a Data View using SharePoint Designer, then apply grouping doing the following: 1. From the "Common Data View Tasks" menu for the Data View Web Part, select "Sort and Group:" from the options to open the Sort and Group Dialog, add any field into the Sort Order section to activate the "Edit Sort Expression..." button. Click the "Edit Sort Expression..." button to open the Advanced Sort Dialog. 2. From the list of fields, add the Choice field, and make sure that the field reference is the only value in the "Edit the XPath expression" input. The field reference should begin with an @ symbol followed by the internal name of the SharePoint column/field (example: @Location). The value from the selected column will display in the Preview box if items in the list/library match the specified criteria, which in this case is a simple column/field value (no conditions or calculations required). 3. Press OK on to close the Advanced Sort Dialog. Select the Choice Field from the list of fields in the "Sort Order:" box, then select "Show Group Header" under Group Properties. This will result in items being grouped by the value in the choice field which allows multiple selections.
Steps to follow for  Dataview webpart (Ignore Above)

1)By defaultly list comes with xslt list view webpart (use allitems.aspx or create custom view for all items.aspx(make it as default view))

remove that xslt webpart-->goto insert add -->empty data view--> select datasource that list name--->

after that screen visible like this.in this select appropriate fields using ctrl button shown in the form(data source details)

After that select multiple field view from Insert select field as aashown in the above diagram

select the dtaview webpart and select the sort and group from the Options in Menu

it will show one popup from there select Add sort expression

Clixk on add and  select the choice field

Click on ok. Select group header after that(shown below)

after that it will show like below.if you want to enable insert, delete, edit, operations inside the form then select the options inside the inline editing

Page loading status or progressbar using javascript

Page loading status or progressbar using javascript

Reference url: http://spjsblog.com/2013/05/06/dynamic-forms-for-sharepoint-now-with-field-tooltip/

Add this code in page content editor webpart

<style type="text/css">
.dffsOverlay{
 font-size:16px;
 padding-top:100px;
 text-align:center;
 width:100%;
 height:100%;
 background-color:#F5F5F5;
 position:absolute;
 top:0;
 left:0;
 z-index:9999;
 cursor:default;
}
</style>
<div id='dffs_loadingOverlay' class='dffsOverlay'>Loading, please wait...</div>
<script type="text/javascript">
 setTimeout(function(){
  var oDiv = document.getElementById("dffs_loadingOverlay");
  if(oDiv !== null){
   oDiv.innerHTML = "<span style='font-size:20px'><br><br>Click to View the Form.</span>";
   oDiv.onclick = function(){
       this.parentNode.removeChild(this);
   };
  }
 },5000);
</script>

Assign sharepoint list field values using javascript(Ecmascript)

Refer the below link:http://spjsblog.com/2010/05/28/get-or-set-value-for-sharepoint-field-in-newform-editform-and-dispform-get-only-in-dispform/

http://www.c-sharpcorner.com/UploadFile/anavijai/get-and-set-the-list-item-value-in-sharepoint-2010-using-ecm/


Add the script in List newform.aspx or editform.aspx(after editing the item) or dispform.aspx Content editor webpart.(sometimes functionality doesnt work that time  add the content editor webpart below the form

Maintain both Content editor webpart and form into single div)


<script src="/sites/newsite/SiteAssets/jquery-1.9.0.min.js" type="text/javascript"></script><script src="/sites/newsite/SiteAssets/spjs-utility.js" type="text/javascript"></script><script type="text/javascript">
function PreSaveAction()
{
fields = init_fields_v2();
// Get value from a multicheck field(multi selection check box value)
var myRichTextValue = getFieldValue('Statuscheck');
// set the value to assignfield(single line text field)
setFieldValue('assignedfield',myRichTextValue);
return true;
}</script>


Presaveaction(will save the form actions at the time of clicking the save button)

Statuscheck:checkbox with multiple selection
assignedfield':single line text field

Download the spjs-utility.js :http://spjsfiles.com/index.php?dir=SharePoint+JavaScripts%2Fspjs-utility%2F

code to itterating through each and choice in checkbox using jquery

Follow the same steps like above

<script src="/sites/newsite/SiteAssets/jquery-1.9.0.min.js" type="text/javascript"></script><script src="/sites/newsite/SiteAssets/spjs-utility.js" type="text/javascript"></script><script type="text/javascript">

function PreSaveAction()
{
fields = init_fields_v2();
// Get value from a multicheck field(multi selection check box value)
var myRichTextValue = getFieldValue('Statuscheck');
if (myRichTextValue == "A") {
             setFieldValue('assignedfield',"A");
         }
         else if (myRichTextValue == "B") {
           setFieldValue('assignedfield',"B");
         }
         else if (myRichTextValue == "C") {
            setFieldValue('assignedfield',"C");
         }
// set the value to assignfield(single line text field)
setFieldValue('assignedfield',myRichTextValue);
alert(myRichTextValue);
return true;
}</script>



Assign sharepoint list field values using Ecmascript
Refer the below link:http://www.c-sharpcorner.com/UploadFile/anavijai/get-and-set-the-list-item-value-in-sharepoint-2010-using-ecm/
Add this code in list content editor webpart(Allitem.aspx page) or content place holder main in sharepoint designer allitems.aspx page

<script language="ecmascript" type="text/ecmascript">
       var listItem;
        var list;
        var clientContext;
        function getSetListItem() {
        var uid=document.getElementById('textbox1').value;
            this.clientContext = SP.ClientContext.get_current();
            if (this.clientContext != undefined && clientContext != null) {
                var webSite = clientContext.get_web();
                this.list = webSite.get_lists().getByTitle("Assignvalue");
                this.listItem = list.getItemById(uid);
                clientContext.load(this.listItem);
                this.clientContext.executeQueryAsync(Function.createDelegate(this, this.OnLoadSuccess),
Function.createDelegate(this, this.OnLoadFailed));
            }
        }
        function OnLoadSuccess(sender, args) {
            var value = this.listItem.get_item("Multicheck");
             alert("value");
            this.listItem.set_item("assignfield", value);
            this.listItem.update();
            this.clientContext.load(this.listItem);
            this.clientContext.executeQueryAsync(Function.createDelegate(this, this.OnLoadSuccess1),
Function.createDelegate(this, this.OnLoadFailed));
        }
        function OnLoadSuccess1(sender, args) {
            alert(this.listItem.get_item("assignfield"));
        }
        function OnLoadFailed(sender, args) {
            alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
        }</script><input id="textbox1" type="text"/>&#160; <input id="btnGetSetListItem" onclick="getSetListItem()" type="button" value="Get &amp; Set List Item"/>

Hiding perticular controls based on sharepoint group

Hiding perticular controls based on sharepoint group

http://ankursharepoint.blogspot.in/2012/11/hide-controls-for-particular-sharepoint.html

Getting the user details using javascript

Getting the user details using javascript

Refer the below urls

http://spjsblog.com/2012/01/08/pull-user-list-property-from-people-picker-and-write-to-separate-textfield/


http://spjsblog.com/2011/09/18/pull-e-mail-from-people-picker-and-write-to-a-separate-textfield-updated-version/


http://spjsblog.com/2010/04/06/pull-e-mail-from-people-picker-and-write-to-a-separate-textfield/


Filter list view based on membership in SharePoint group


http://spjsblog.com/2010/02/16/filter-list-view-based-on-membership-in-sharepoint-group/


Hiding perticular controls based on sharepoint group

http://ankursharepoint.blogspot.in/2012/11/hide-controls-for-particular-sharepoint.html

Sharepoint list item querystring id using javascript

Sharepoint list item querystring id using javascript

Easy way

Add this code in content editor webpart or content placeholder main  in sharepoint designer(dispform.aspx or editform.aspx)

<script type="text/javascript">

var itemId = GetUrlKeyValue("ID");
alert(itemId);</script>


(OR)

Add this code in content place holder main(allitems.aspx,dispform.aspx.......)  or content editor webpart

<script type="text/javascript">
//Call the javascript function in page load
onload=function()
{
    var query = location.search.substring(1);
    var SplitQuerry=query.split('&');
    var SplitId= SplitQuerry[0];
    var Id=SplitId.split('=');
  alert(Id);
}
</script>

Parent-child data filter using query string id

Firstway:(will work only for by default list dispform.doesnt work to the custom dispform.aspx)

Create two lists one is parent and another one is child .child list contains a lookup as parent list

 list advanced settings -->set modal popup to-->No(last option)
after that goto parent list -->click on any item dispform-->Edit page-->Click on list below-->insert Related list

After that data directly filter based on parent item

Secondwayway:(will work custom dispform and by default list form)

Create two lists one is parent and another one is child .child list contains a lookup as parent list

Given lookup parent title with id in childlist

 list advanced settings -->set modal popup to-->No(last option)

after that goto parent list -->click on any item dispform-->Edit page-->Addwebpart-->list and libraries-->select child list

here the child list will come above parent in dispform .if u want below then goto Sharepoint designer -->parentlist dispform-->design-->cut the child list content-->paste below the parent (both the parent and child will be in single table and single div)-->save

Goto parent dispform in desigener and follow the below steps
In side of "xsltListviewwebpart, on your page add below lines....

Add below line in <ParameterBindings>

<ParameterBinding Name="Param1" Location="QueryString(ID)" DefaultValue="" />

After that add below line in "<Query>"
<Where>
      <Eq>
       <FieldRef Name="Workstream_x003a_ID"/>
       <Value Type="Text">{Param1}</Value>
      </Eq>
     </Where>


Workstream_x003a_ID---->Child llokup parent ID field in child list. child list thename isWorkstream_x003a_ID
Param1:query string id in the url

Color code status indicator to sharepoint list column using javascript

Reference url:
http://www.sharepointkings.com/2010/04/sharepoint-custom-so-called-kpi.html

Sharepoint Custom so called KPI

Hay Guys,

In general KPI most of the time we are having simple requirement.

Like if Risk is high or status is incomplete then it should show in RED.
If Low then Green and Medium then orange.

Same functionality we had done for listview webpart which show Red/green/yellow icon based on status.

Here is the example
In our list we had a column called criticality with dropdown values

High
Low
Medium

Check the screenshot below

And check another one after what we had done.

So you can see it looks like KPI
This is similar like
http://www.sharepointkings.com/2008/12/highlight-sharepoint-list-rows.html
but everyone is asking regarding this KPI so we had done this.

Now, What we had done
It’s nothing just a trick of javascript/jquery
Here is the code

$(document).ready(function() {
var strURL = window.location.href;
if ((strURL.toUpperCase().indexOf("Lists/Risk%20Management".toUpperCase()) != -1) ||
(strURL.toUpperCase().indexOf("Lists/Risk Management".toUpperCase()) != -1)) {
//alert('pp');
$(".ms-vb2:contains('High')").each(function() {
var tempDIV = document.createElement("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.innerHTML = "<img src='_LAYOUTS/SPKings/Images/Red.gif' />"; //$(this).text();
//alert($(this).html());
$(this).text("");
$(this).append(tempDIV);

});
$(".ms-vb2:contains('Low')").each(function() {
var tempDIV = document.createElement("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.innerHTML = "<img src='_LAYOUTS/SPKings/Images/Green.gif' />"; //$(this).text();
//alert($(this).html());
$(this).text("");
$(this).append(tempDIV);

});
$(".ms-vb2:contains('Medium')").each(function() {
var tempDIV = document.createElement("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.innerHTML = "<img src='_LAYOUTS/SPKings/Images/Amber.gif' />"; //$(this).text();
//alert($(this).html());
$(this).text("");
$(this).append(tempDIV);

});
$(".ms-vb2:contains('No Criticality')").each(function() {
var tempDIV = document.createElement("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.innerHTML = "<img src='_LAYOUTS/SPKings/Images/NoData.gif' />"; //$(this).text();
//alert($(this).html());
$(this).text("");
$(this).append(tempDIV);

});
}

});

What we had done is we are checking URL
If it is out target list, then we apply javascript and as you can see we are finding High and replacing that with Red.gif.

Same way for other criticality also

You can use image from image library also. We had used images from layouts.

Don’t forget to include jquery.JS to make it work.

Guys, this is not recommended way for authentic KPI but for time being or for demo purpose where we are not having time and have to show a lot of thing this will act as icings on the cake

Show/Hide Columns based on dropdown selection

Code:- Add this code in list dispform.aspx as a content editor webpart

<script src="/sites/Newsite1/SiteAssets/jquery-1.9.0.min.js" type="text/javascript"></script><script type="text/javascript">

// Execute the following JavaScript after the page has fully loaded, when it's ".ready"
$(document).ready(function(){
  //Define which columns to show/hide by default
  $('nobr:contains("fld1")').closest('tr').hide();
 $('nobr:contains("fld2")').closest('tr').hide();
$('nobr:contains("fld3")').closest('tr').hide();

//Show/hide columns based on Drop Down Selection
$("select[title='dp3']").change(function() {
  if ($("select[title='dp3']").val() == "NO") {
  $('nobr:contains("fld3")').closest('tr').hide();
  } else if($("select[title='dp3']").val() == "YES"){
    $('nobr:contains("fld3")').closest('tr').show();
  }
 });
 $("select[title='dp1']").change(function() {
  if ($("select[title='dp1']").val() == "NO") {
  $('nobr:contains("fld1")').closest('tr').hide();
  } else if($("select[title='dp1']").val() == "YES"){
    $('nobr:contains("fld1")').closest('tr').show();
  }
 });
$("select[title='dp2']").change(function() {
  if ($("select[title='dp2']").val() == "NO") {
  $('nobr:contains("fld2")').closest('tr').hide();
  } else if($("select[title='dp2']").val() == "YES"){
    $('nobr:contains("fld2")').closest('tr').show();
  }
 });

});</script>


Default value for the dropdown is no.so currently fields are hided once you select the YES corresponding fields will be enable...

Reference URL:

http://bingggg.blogspot.in/2011/11/showhide-columns-based-on-drop-down.html

https://www.nothingbutsharepoint.com/sites/eusp/pages/showhide-lookup-fields-with-jquery.aspx

 https://www.nothingbutsharepoint.com/sites/eusp/pages/showhide-lookup-fields-with-jquery.aspx

Print preview using javascript

<script type="text/javascript">
function displayMessage(printContent) {
var inf = printContent;
win = window.open("print.htm", 'popup');
win.document.write(inf);
win.document.close(); // new line
}
</script>

<a href="javascript:void(0);" onclick="displayMessage(printarea.innerHTML)">

<a href="javascript:void(0);" onclick="displayMessage(printarea.innerHTML)">
Print Preview</a>

<div id="printarea"></div>

<div id="printarea">print the text</div>

Color coading to SharePoint List rows conditionally

Reference Url:http://www.sharepointkings.com/2008/12/highlight-sharepoint-list-rows.html

 

Highlight SharePoint List rows conditionally

Hi All,here is some JQuery Stuff that will help you to highlight rows of SharePoint List items based on some condition.

<script type="text/javascript">
if(typeof jQuery=="undefined"){
var jQPath="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/";
document.write("<script src='",jQPath,"jquery.min.js' type='text/javascript'><\/script>");
}
</script>
<script>
$(document).ready(function(){
$Text = $("td .ms-vb2:contains('Sales')");
$Text.parent().css("background-color", "green");
$Text =$("td .ms-vb2:contains('Account')");
$Text.parent().css("background-color", "orange");
});
</script>

above JQuery code will highlight if Column has 'Sales' then row will highlight with color green.if column has value Account then it will highlight with orange color.

Look at second Post http://www.sharepointkings.com/2009/04/sharepoint-calculated-column-and-jquery.html

color coading to sharepoint list columns with screen shots

SharePoint calculated column and jQuery Highlight row

Hi All,
Here I am writing new blog after long time I highly apologies to our all regular SharePointKings readers. I have explore what you can do by SharePoint calculated column and jQuery here is small practical stuff follow the instructions and do it yourself you will surely enjoy this work I am sure.
Sometimes you need to represent SharePoint List in terms of legend like in map. Say for example you have result list and you want to show those Student who got less than 35% marks Should Have “Red” Legend, those who got 100% marks with “Blue” Legend , those who got >65% with “Pink” Legend , those who got >70% with Yellow, marks > 60 with Green.

Follow the steps
1. Create Result SharePoint custom list

 2. Create column StudentName single line text.

3. Create Column Color with Calculated Column.

Copy and Paste following code in formula.

=IF((Marks*100)>=100,"#0000FF",IF((Marks*100)>=70,"#FFFF00",IF((Marks*100)>60,"#FF00FF",IF((Marks*100)>=35,"#00FF00","#FF0000"))))

4. Create another column called Display

Copy and paste following formula

="<DIV style='border: 1px "&Color&" solid;background-color:"&Color&";color:#FFFFFF;'>"&Marks*100&"<DIV>"

5. Now your fields looks like this

6. Open new form and Add Student Name and Marks obtained by him.

7. Once you enter marks for student your SharePoint list looks like this

8. Edit Page and add the below script in content editor webpart

<script src="/sites/testingsite/SiteAssets/jquery-1.9.0.min.js" type="text/javascript"></script><script type="text/javascript">

$(document).ready(function(){
$(".ms-vb2:contains('<DIV')").each(function(){
var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
});}); </script>

9) finally look like this

Color coading to sharepoint list column

Reference url:
http://www.sharepointkings.com/2009/04/sharepoint-calculated-column-and-jquery.html

I have five status shown below based on status selection we need to highlight the color to perticular column

Steps:
1)Create status field(Status)
2)we need color to perticuar status based on status selection .create one more column(status color) for displaying color

status color  =IF([Issue Status]="Awaiting SME Action","#4682B4",
IF([Issue Status]="Consultation Provided","#1E90FF",
IF([Issue Status]="Document review /Approval Provided","#2F4F4F",
IF([Issue Status]="Awaiting Seed Funding","#008080",
IF([Issue Status]="Recevied Seed funding","#33CC33",
IF([Issue Status]="No Impacted","#A0522D",
IF([Issue Status]="Closed Request","#FF9999",
IF([Issue Status]="Estimation provided","#008000"))))))))


3)Create one more column for displaying the div tag(replace the status color and status column names in DIV tag)


="<DIV style='border: 1px "&status color&" solid;background-color:"&Color&";color:#FFFFFF;'>"&Status&"<DIV>"

4)Add this below code in content editor webpart

<script src="/sites/testingsite/SiteAssets/jquery-1.9.0.min.js" type="text/javascript"></script><script type="text/javascript">

$(document).ready(function(){
$(".ms-vb2:contains('<DIV')").each(function(){
var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
});}); </script>

Calculated column examples

1)Currentagreed date is greater than now  and status equal to something that time display Yes   and Currentagreed date is less than now  and status equal to something that time display  Invalid 
I have totally four status(red,amber,green,completed).Now means current date
Formula: =IF(OR(AND(CurrentAgreed>Now,Status="Red"),AND(CurrentForecast>Now,Status="Red")),"Yes",
IF(OR(AND(CurrentAgreed>Now,Status="Green"),AND(CurrentForecast>Now,Status="Green")),"Yes",
IF(OR(AND(CurrentAgreed>Now,Status="Amber"),AND(CurrentForecast>Now,Status="Amber")),"Yes",
IF(OR(AND(CurrentAgreed>Now,Status="Completed"),AND(CurrentForecast>Now,Status="Completed")),"Yes",
IF(OR(AND(CurrentAgreed<Now,Status="Red"),AND(CurrentForecast<Now,Status="Red")),"Invalid",
IF(OR(AND(CurrentAgreed<Now,Status="Green"),AND(CurrentForecast<Now,Status="Green")),"Invalid",
IF(OR(AND(CurrentAgreed<Now,Status="Amber"),AND(CurrentForecast<Now,Status="Amber")),"Invalid",
IF(OR(AND(CurrentAgreed<Now,Status="Completed"),AND(CurrentForecast<Now,Status="Completed")),"Invalid"))))))))


2)And combination with multiple conditions

=IF(OR(AND(CurrentAgreed<Now,Status="Red"),AND(CurrentForecast<Now,Status="Red"),AND(CurrentAgreed<Now,Status="Green"),AND(CurrentForecast<Now,Status="Green"),AND(CurrentAgreed<Now,Status="Amber"),AND(CurrentForecast<Now,Status="Amber")),"Invalid","Yes")

3)Using Two if conditions with multiple and conditions
=IF(OR(AND(CurrentAgreed<Now,Status="Red"),AND(CurrentForecast<Now,Status="Red"),
AND(CurrentAgreed<Now,Status="Green"),AND(CurrentForecast<Now,Status="Green"),
AND(CurrentAgreed<Now,Status="Completed"),AND(CurrentForecast<Now,Status="Completed"),
AND(CurrentAgreed<Now,Status="Amber"),AND(CurrentForecast<Now,Status="Amber")),"Invalid",
IF(OR(AND(CurrentAgreed>Now,Status="Red"),AND(CurrentForecast>Now,Status="Red"),
AND(CurrentAgreed>Now,Status="Green"),AND(CurrentForecast>Now,Status="Green"),
AND(CurrentAgreed>Now,Status="Completed"),AND(CurrentForecast>Now,Status="Completed"),
AND(CurrentAgreed>Now,Status="Amber"),AND(CurrentForecast>Now,Status="Amber")),"Yes"))

4)Using div tag inside the if condition

1.       IF  CurrentAgreed>=Today AND CurrentForecast >= Today  THEN  IsValid.Text=”Yes”, IsValid.Backgroundcolor=”none”

2.       No. The IsValid and Status columns are entirely separate.  If CurrentAgreed<Today OR CurrentForecast <today THEN IsValid.Text=”No”, IsValid.Backgroundcolor=”Amber”

 

Formula:=IF(AND(CurrentForecast>Now,CurrentAgreed>Now),"Yes",IF(OR(CurrentForecast<Now,CurrentAgreed<Now),"<DIV style='border: 1px #FFC200 solid;background-color:#FFC200;color:#FFFFFF;'>No<DIV>"))

 

 

 

 

5)Using Multiple if conditions
=IF([Issue Status]="Awaiting SME Action","#4682B4",
IF([Issue Status]="Consultation Provided","#1E90FF",
IF([Issue Status]="Document review /Approval Provided","#2F4F4F",
IF([Issue Status]="Awaiting Seed Funding","#008080",
IF([Issue Status]="Recevied Seed funding","#33CC33",
IF([Issue Status]="No Impacted","#A0522D",
IF([Issue Status]="Closed Request","#FF9999",
IF([Issue Status]="Estimation provided","#008000"))))))))

6)Calculating the difference between two times with hours,minutes and seconds

=TEXT(Opentime-Completedtime,"h:mm:ss")

7)Getting the total time with hours,minutes and seconds

=TEXT(H1time+H2time+H3time+Hcwtime+Hwatime+Hactime,"h:mm:ss")

Workrequest creation

Workrequest num: =(LEFT(TEAM,1)&Year&CONCATENATE("WR-",REPT(0,4-LEN(incrementid)),incrementid))                     ex: A12WR-0251

(hear both incremented above through workflow only)

Year: =RIGHT(Filteryear,2)

Filteryear =TEXT(Created,"yyyy")

Incremented: (number field(number of decimal fields:automatic))

Incremented:through auto increment workflow

 Auto increment id workflow:

One more scenario for workrequest num creation

Workrequest no: =(Title&Filtermonth&Filterdate&Year&CONCATENATE("R",REPT(0,4-LEN(Autonumber)),Autonumber))                          ex: CSP042613R0000 (csp means title)

Filterdate: =TEXT(Created,"dd")

FilterYear:       =TEXT(Created,"yyyy")

Last two digits in year   year: =RIGHT(Filteryear,2)

Filtermonth :     =TEXT(Created,"mm")

Autonumber :Through designer workflow as specified above

Event reciver examples in sharepoint 2010

Itemdeleting event reciver

 public override void ItemDeleting(SPItemEventProperties properties)

       {

           base.ItemDeleting(properties);

           //listitem title name equal new that time event will fire

           if (properties.ListItem["Title"].ToString() == "new")

           {

               properties.ErrorMessage = "Dont delete the item title starts with new";

        // firing event will restrict the user any action will happen

               properties.Cancel = true;

           }

           else

           {

               properties.Cancel = false;

           }

           //SPUtility.Redirect(properties.Web.Url, SPRedirectFlags.DoNotEndResponse, HttpContext.Current);

       }

Itemadded event reciver

public override void ItemAdded(SPItemEventProperties properties)

       {

           base.ItemAdded(properties);

           SPListItem item = properties.ListItem;

           //update only date for this column.if u add or update any data in the new date column..

           item["newdate"] = DateTime.Now.ToString();

           item.Update();

          

       }