Character Limit using JQuery in SharePoint

In this post, we will learn how to implement Character Count (here in this example, maximum allowed 2000 characters) using JQuery in SharePoint.

Prerequisite:
1. Create a SharePoint List with a column named "Comments" - data type Multi line text with plain text as the option selected
2. SharePoint Designer 2013 for editing the SharePoint list with span and to identify the ID of the field created

Solution:
1. Open the SP site in SharePoint designer, navigate to the list -> Create a custom new form -> Edit it.
To know how to create a custom new form in SharePoint Designer, read this article.
2. Below is the HTML code for my "Comments field in SharePoint Designer:

1 2 3 4 5 6 7 8 9 10 11 12

<tr> <td width="190px" valign="top" class="ms-formlabel"> <H3 class="ms-standardheader"> <nobr>Enter your comment:</nobr> </H3> </td> <td valign="top" class="ms-formbody" style="background-color:#ffffff; width:400px;"> <SharePoint:FormField runat="server" id="ff6{$Pos}" ControlMode="New" FieldName="Comments" __designer:bind="{ddwrt:DataBind('i',concat('ff6',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Comments')}" /> <SharePoint:FieldDescription runat="server" id="ff6description{$Pos}" FieldName="Comments" ControlMode="New" /> <span title="2000" id="commentsCount">2000</span><span> Characters Left</span> </td> </tr>

Make a note that I have added a Span tag below the SharePoint control to display the Characters. Also, we have declared it as 2000 characters for this example.

Now, add a script tag or a separate file (then refer it inline) -> add the below code in it save it:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

$(document).ready(function() { //Character count for comments text $("textarea[name*='ff6']").keyup(function () { characterCount('ff6', '#commentsCount'); }); }); //Character count for multiline text function characterCount(controlID,spanId) { var controlVal = $("textarea[name*='" + controlID + "']"); var cmax = $(spanId).attr("title"); if(controlVal.val().length >= cmax) { controlVal.val(controlVal.val().substr(0, cmax)); } $(spanId).text(cmax - controlVal.val().length); }

In this above JS, "ff6" is the ID of the SharePoint control.

Save the form and JS, try typing inside the control you can see the characters been automatically counted and decreases as you type. Cool Isn't it? 😉
Please share this post by clicking the below social buttons if this helps you😎
Happy coding! 

Read More

Captcha using Java Script

Background:

Now a days, all the web sites requires inputs (contact us, feedback, etc.) from the end users. But many sites face a problem of spam or unwanted or junk messages. To avoid this we have a java script code which will generate the random codes which should be entered by the users manually.

This avoids the spam being automated or entered by the unwanted users being entered in to the site.

Solution:

Below is the code which consists of Java script implemented in HTML page for reference.

Below is the screenshot of the same:

Here is the link to download the image and hmtl file. Captcha using JavaScript.
Hope this component helps using it in your website to avoid spam and unwanted messages.

Read More

Change the Color of a Column in a List in SharePoint

In this article, we will know how to change the color of a column based upon the values in the column. It is something like “Color Indicator” in SharePoint.

Scenario:

We have a custom list used for Project Tracking. In the list, we have column named STATUS for tracking the project.

Whenever an item in the list is updated with the status in the column, then the background color of the status column should automatically change depending upon the status. Hence it gives a better UI for tracking the status.
Solution:

1. Create a custom list named “Project Tracking System” with the columns such as “Title”, “Description” and Status with the data type as shown below:

Columns with the data types to be created:

2. Now, we will insert 4-5 items in the list created. 

In the above list, we can see that the status column is updated, but it would be good when we have background color of the each status separately. It is gives easy tracking to the users.

3. We can achieve this through JAVA SCRIPT

4. Add a Content Editor Web part below the list as shown below:

5. Now in the content editor web part, add the below java script code (Open the tool pane->Source Editor->Place the Java Script->Click Ok) and save the page.
Add the below code in the script JavaScript tag

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

var colorCode = document.getElementsByTagName("td")// finding all the TD tags var i=0; for (i=0;i { if (colorCode[i].className=="ms-vb2") { if (colorCode[i].innerHTML=="Not Started")//finding the word to which the color has to be set { colorCode[i].style.backgroundColor='lightblue'; // setting the color depending upon the value colorCode[i].style.color='Black'; // setting the color of the words inside the content } if (colorCode[i].innerHTML=="Started") { colorCode[i].style.backgroundColor='Brown'; colorCode[i].style.color='Black'; } if (colorCode[i].innerHTML=="In Progress") { colorCode[i].style.backgroundColor='Orange'; colorCode[i].style.color='Black'; } if (colorCode[i].innerHTML=="Completed") { colorCode[i].style.backgroundColor='green'; colorCode[i].style.color='Black'; } if (colorCode[i].innerHTML=="Deffered") { colorCode[i].style.backgroundColor='Red'; colorCode[i].style.color='Black'; } } }

6. Now, you can see the status column background is changed depending upon the status inserted for each item as shown below:

It gives good interface to the users and also we can categorize the status easily.

Please free to comment and share the post, if it helps you!

Read More

Cascading dropdown (or) Filtered Values in Lookup Columns in SharePoint

Update: 27/06/2017

To know about implementing Cascading drop down or filtered lookup in SharePoint 2013 or SP Online using REST API, read this article: Cascading drop down in SharePoint using REST APIUpdate: 06/07/2017

To know about implementing multi-value lookup column and filtering values, read this article: Multi value Lookup Columns in SharePointTo know about the Basics of Lookup Columns read this article.Also, to know about the Enhancements of Lookup columns in SharePoint 2010 read this article.

Problem:

In SharePoint the cascading or the filtered values in the lookup columns are not present by default.

In this article, we will achieve this using the simple JavaScript.

Solution:

Consider the simple scenario that the user needs to input the values of Continent, Country, State and City which has to be the filtered values.

Steps:

1. Create four lists with the following column and corresponding types

Note: 

I haven’t used the default title column for any of the lists above and I have hide it from the default view.

To know how to hide the default title column from the list read this article.

2. The screen shots of the four custom lists created in the step 1 are shown below:

3. Now, we will create another custom list for testing the cascading dropdown in the SharePoint. Create a custom list with the following column and corresponding types

The screen shot of the created list is shown below:

4. When we click on the dropdowns in continent, country, state or city we will get the unfiltered values as shown below:

5. Now we add the java script to achieve the solution

General Code to be added:

1 2 3 4 5 6 7 8 9 10

// Execute the following JavaScript after the page has fully loaded, when it's ".ready" $(document).ready(function(){ $().SPServices.SPCascadeDropdowns({ relationshipList: "Display Name of Master List", relationshipListParentColumn: "Parent Column Internal Name from Master List", relationshipListChildColumn: "Child Column Internal Name from Master List", parentColumn: "Parent Column Display Name from List/Library", childColumn: "Child Column Display Name from List/Library" }); });

Description of the code

Note:

To know how to get the Internal Name of a column in a list in SharePoint, read this article.
Download of JQuery referred in the code can be found from jquery.com and codeplex.com

For ease of download for the readers, I have uploaded the script in the below links. Click to download the jquery-1.4.2.min.js and jquery.SPServices-0.5.3 min.js

Code in our case:

6. Now, we will insert this JQuery and achieve the cascading dropdown.

7. Click on New in the created custom list (Cascading Lookup Demo) as shown below:

8. Now, we will insert a Content Editor Web Part in the newform.aspx to place the JavaScript code in it.

 To know how to insert a web part in the NewForm.aspx without using SharePoint Designer read this article.

How to Insert a Web Part in NewForm.aspx without SharePoint designer

9. After inserting the web part, paste the code and save the web part.

Note: Place Content Editor Web Part below the list form or else the Java Script added won’t work.

10. We are done! Now, we will check the cascading drop down. So, when the continent is selected only countries with respect to the continent should be displayed (Filtered values) and then the state, city in the same case.

The results of various scenarios are shown below:

I have checked for the empty values scenario also. What if the child column is empty or does not contain values. Then after inserting the value, it should add empty values in the column as shown below:

After inserting the values the list is as follows: 

Advantages:

Ø  We can simply achieve the cascading drop down in lookup columns in SharePoint without using any third party tools

Ø  No need of SharePoint designer to achieve this result

 Disadvantages:

Ø  This won’t work in the Data Sheet View since we are inserting the J query in the aspx page only.

Ø  When the number of items in a look up column is greater than 20 then your drop down will change as follows:

We had more than 20 states in the States List (28 items with lookup values)

This happens only in the IE and not in the Chrome or any browsers.

Have a look at the page in the Chrome Browser:

The reason for this variations and the fix is explained well in this article. Below is the link

SharePoint Lookup field: how does it work and how to add JavaScript event handler function to it? 

Hope you have read a nice article.

Please free to comment. Always, your comments help me to write more.

Share this post to others if this helps you!

Note:

I have updated the code of this article on 08.06.2012 since readers of this article requires the following:

1. What is the case if there are more than 2 values (4 cascading or filtered values – using more number of variables)?

2. What is the case if there is an empty string in the child value?

3. To explain the solution with more details for ease of reading and understanding for the readers.

Update: 27/06/2017To know about implementing Cascading drop down or filtered lookup in SharePoint 2013 or SP Online using REST API, read this article: Cascading drop down in SharePoint using REST APIUpdate: 06/07/2017To know about implementing multi-value lookup column and filtering values, read this article: Multi value Lookup Columns in SharePoint

Read More

Checking whether a file uploaded is of .doc or .docx file format

We can use the Java Script to check whether the file uploaded is of 2003 or 2007 word format. Hence we can handle the validation in the client side.

Java Script

<script type="text/javascript" language="javascript">
   function FileFormatValidate()
   {
        var uploadControl = document.getElementById('<%=FileUpload1.ClientID%>').value;
        //Regular Expression for the fileupload control.
        var reg = /^(([a-zA-Z]:)|(file://%7b2%7d/w )/$?)(//(/w[/w].*)) (.doc|.docx|.DOC|.DOCX)$/;
        //Checking if the file is empty or not
        if (uploadControl.length > 0) 
        {
            //Checks with the control value.
            if (reg.test(uploadControl)) 
            {
                return true;
            }
           else 
            {
                //If the condition not satisfied shows error message.
                alert("Only .doc, docx files are allowed!");
                return false;
            }
         }
        else 
        {
            //If the File is Empty or No File is  selected to upload shows this 
error message.
            alert("Please select a file to Upload");
            return false;
        }
    } //End of function FileFormatValidate.
</script>

Design

<p style="height: 28px; width: 216px">
    <asp:Button ID="btn_Upload" runat="server" Height="25px" 
        onclick="btn_Upload_Click" OnClientClick="return FileFormatValidate();" Text="Upload" Width="128px" />
</p>

Hence you can validate and check the file being uploaded at the client side using this code. This can be re-used for any file formats by changing the Regular Expression.
Happy Coding!!!

Read More