Sharepoint New: June 2013

Thursday, June 27, 2013

How to create a simple Popup window using jQuery?

Hi everyone, Hope all are doing good.Here in this post i would like to demonstrate you on how to create a simple pop-up window using jQuery.Though there are many other ways you can create a pop-up ,evolution of jQuery kept it too simple which made me to share with you a brief and simple example in which we create a beautiful pop-up window on clicking a simple link.

By the way ,We all know how frequent we come across pop-up windows througout the web environment.Pop-up windows made it flexible to display message,alert or even a form to fill instaltly without being redirected to a new form.Ultimately it lessens the burden on the server reducing the number of page traversals and postbacks.

When you open the html file given below in a browser it renders a page with a single link Click here to see Pop-UpThe moment you click the link a window pops up in which i have displayed some text.Instead of text it could be even a form which can be made to be filled and posted to the server or to any other page linked to it.

The whole document is given below in which i included the stylesheet and jQuery script files too.Copy the code into your webform and run or directly open it in your browser.

<html>
<head>
    <style type="text/css">
        .popupBody * {
            MARGIN-RIGHT: 15px;
        }
 
        .popupBody {
            OVERFLOW: auto;
            HEIGHT: 500px;
            MARGIN-LEFT: 7%;
            WIDTH: 92.8%;
        }
 
        .popupTitle {
            BACKGROUND-COLOR: #e13e43;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
 
            .popupTitle H2 {
                HEIGHT: 40px;
                COLOR: white;
                PADDING-BOTTOM: 5px;
                PADDING-TOP: 15px;
                PADDING-LEFT: 20px;
                MARGIN: 0px;
            }
 
        #lean_overlay {
            HEIGHT: 100%;
            BACKGROUND: #000;
            POSITION: fixed;
            LEFT: 0px;
            FILTER: alpha(opacity=30);
            Z-INDEX: 100;
            DISPLAY: none;
            TOP: 0px;
            WIDTH: 100%;
            opacity: 0.3;
        }
 
        .popupClose {
            RIGHT: 12px;
            POSITION: absolute;
            Z-INDEX: 2;
            TOP: 12px;
            text-decoration: none;
            color: white;
        }
 
        .popupContent {
            BORDER-TOP: #ccc 1px solid;
            BORDER-RIGHT: #ccc 1px solid;
            BORDER-BOTTOM: #ccc 1px solid;
            BORDER-LEFT: #ccc 1px solid;
            DISPLAY: none;
            TOP: 10%;
            width: 35%;
            height: 45%;
        }
 
        .popupWindow {
            WORD-WRAP: break-word;
            FONT-SIZE: 13px;
            HEIGHT: auto;
            FONT-FAMILY: san serif;
            BACKGROUND: white;
            POSITION: absolute;
            MARGIN-LEFT: 28%;
            Z-INDEX: 11000;
            LETTER-SPACING: 1px;
            WIDTH: 40%;
            -moz-box-shadow: 0 0px 4px rgba(0, 0, 0, 0.7);
            -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
            box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
        }
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            /****** Close popup ******/
            $(document).on('click', '.popupClose', function (e) {
                e.preventDefault();
                $('.popupWindow').css('display', 'none').removeClass('popupWindow');
                $("#lean_overlay").remove();
            });
            /******Trigger popup ********/
            $('.popupTrigger').click(function () {
                var dialog = $(this).next('.popupContent');
                $('.popupClose').css('display', 'block');
                dialog.css('display', 'block').addClass('popupWindow');
 
                var overlay = $("<div id='lean_overlay'> </div>").css('display', 'block').addClass('popupClose');
                $("body").append(overlay);
                return false;
            });
        });
 
    </script>
 
</head>
<body>
 
    <div class="popup">
        <a class="popupTrigger" href="#">Click here to see popup</a>
        <!--  This is the model popup content  -->
        <div class="popupContent">
            <!-- Titel for popup goes in <h2> tag ---->
            <div class="popupTitle">
                <h2>Simple pop up using jquery </h2>
            </div>
            <!-- Body of popup goes into <p> tag -->
            <div class="popupBody">
                <a class="popupClose" href="">Close</a>
                <p>

                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 

when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
               </p>
            </div>
        </div>
    </div>
 
</body>

Now you are able to create a simple and beautiful pop-up window.You can try not only plain text in it but also design according to our taste and could even create a form with any control you could use in your webpages.Hope you understand this and try to apply it in your applications whereever you feel it required.

Thursday, June 20, 2013

Workflows in Sharepoint 2010 .....Basic Definition

What is a WorkFlow in Sharepoint 2010?

Workflow feature in sharepoint ,in simple words is a collection of a sequence of steps programmed to perform a bussiness process reducing the number of human interactions and chance for the errors that prevail during the interactions respectively.
Worlflow is the best feature adopted by sharepoint architects, sharepoint designers and admins to lessen the human interaction and thereby improving the bussiness processes.
Generally the Workflow feature uses forms which are intended or say programmed to interact with the users with certain logic that describes the behaviour of the respective workflow.
Inorder to understand clearly what a workflow is, and how they are created, you need to be clear with two things that a workflow contains in it.
So you need to understand two basic things:

Forms used by the workflow to interact with the users
Logic defined in the background that reflects the workflow’s behaviour

The main difference you could notice implementing the workflow feature is ,If we practice conventional methods to perform a bussiness process that involved a group of people or a group of organisations then we need to follow a series of steps which may be formal or an informal implicitly understood way which involves more human interactions , finally to come out with a decision which really consumes lot of processing time and also creates scope for errors.
Where, coming with a well designed automated workflow could serve you the same with a lot of ease and error free saving lot of process time and enhancing the quality of the decisions and finally resulting an effective perfomance of a bussiness process.
Some of the examples where we could implement workflows are:

Routing a document or a form to a section of designated personnels for their approval
Collecting feedback form from a group of organisations etc

Like the above scenarios we could implement workflows in a wide range of bussiness processes with its own behaviour.
In the next post we shall discuss the different types of workflows and some examples where we create simple workflows.

Sunday, June 16, 2013

Brief Introduction on WebParts used in Sharepoint 2010

What is a sharepoint Web Part ?

A sharepoint webpart is one of the best component with high modularity and resuability utilized by Sharepoint Services webpage. A webpart is a composure of a description file and an external code providing the functionality.
Webpart description file:It is an xml file which contains property names and settings required for the webpart,and also includes a reference to web part assembly.

Types of web parts in sharepoint 2010:

Content Editor Webpart
Media webpart
Page viewer webpart
Silverlight webpart
Bussiness data webpart
Chart webpart
Infopath Form Webpart
Content Query webpart

Content Editor Web part

It is mainly intended to add tables,hyperlinks,images and formatted text to a webpage Though it uses hyperrlinks it cannot be used used to connect to other websites.

Media Web part

This webpart is used to play audio and video files which is actually a silverlight based webpart.It supports all video and audio formats which are supported in silverlight. For example silverlight does not support flash,and so does the sharepoint media webpart.

Page Viewer Web part

In order to display a webpage,folder or a file on a webpart page.Page viewer webpart is used. It can display the above mentioned web parts in all the browsers that support html IFRAME element. Files and folders can be displayed only with microsoft internet explorer.

Silverlight Web part

At the sharepoint webpart level,In order to integrate rich and powerful applications Silverlight web parts can be used. It can be placed anywhere on the user interface along with the sharepoint 2010.

Bussiness Data Web part

This web part is used when we have an external content with a few actions defined on it which could be able to read and write data on to an external system.

Chart Web part

This web part comes into scope when there is a requirement or utility where users could be able to check the perfomance and other information at a single glance. Adding this webpart to the sharepoint website enables user to check the perfomance and additional information at a single look. For example a chart web part can make users view the overall sales and other information regarding sales across the globe in a single map or a graph.

Infopath Form Web part

Inorder to display infopath enabled or infopath editable Lists or Libraries,Infopath Form webpart acts as a best source which is an advanced pick in sharepoint 2010. There are three kinds of infopath documents you can create and could display "Create","Edit" and "Dispaly List" forms and you can customize them accordingly from Edit webpart windows.

Content Query Web part

This web part is mainly used to wind up information from multiple lists into a single view.You can personalize the simplified content and male them look as you want. The pages on sites using this web part should be activated with publishing infrastructure feature.

Friday, June 14, 2013

Integrating StyleCop with MSBuild

How to use StyleCop

StyleCop is an open source static code analysis tool from microsoft which is used to maintain coding standards for the c# code

Step1:
Download style cop from this url
http://stylecop.codeplex.com/releases/view/
Step2 Install it in MSBuild Mode as show below

sample project to test style cop

Follow the slides initially

Now run the project it won’t show any warning ,we have run style cop manually .

We can integrate this process to MSBuild by adding tag in ‘.csproj ‘ file.

To do that we have unload project first then open “csproj” file to include those tags.

Edit csproj file

Copy the path of the file styleCop.Targets

Include that stylecop.Targets path in import tag in csproj file

Now save changes and reload the project. Now buid /run solution , you find warnings on fly as shown below

To show those warnings as errors add following tag to csproject file as shown below in the rounded code

Save and reload project . Now run/build project . you will see following screen

using(SqlConnection) statement in c#

Main idea to use ‘using’ vs conventional way to open and close connection to server

Generally there are two types of datatypes which we commonly use

Basic or primitive datatype.
Whenever these datatypes are declared stack allocates memory for them and the data persists till the loop ends.
Reference datatype
When these datatypes are declared unlike for primitive datatypes memory is allocated in the heap memory where the data persists till the heap memory is full.

So when we create a sqlconnection object which is a reference datatype memory is allocated in the heap and the object persists even if the connection is closed.So if there are multiple instances in your code using the connection object ,each instance occupies memory in the heap which reduces the performance.

So using(SqlConnection con=new SqlConnection) overcomes this issue.

It helps disposing an object automatically once the connection is closed .So no extra memory is used even if you have multiple instances of your sql connection.

The using statement has an inbuilt a try-finally statement that calls the Dispose method.

Here in this post I would like to make you clear on how and why to use ‘using(SqlConnection) rather simply opening and closing the connection while you are trying to deal with SQL Server. Generally when we try to interact with the database ,we simply create a connection object as

SqlConnection con=new sqlConnection();

We then use the connection object to establish a connection to the server which we normally do it in the try block, then followed by a catch to display any exceptions and ultimately winding up in the finally winding up in the finally block in which we cclose the connection made to the server.

Here is the simple conventional example which most of us follow to establish a connection In the below example I am trying to insert the details of a person into the database.


            var cs = ConfigurationManager.ConnectionStrings["connectionString"].ConnectionString;
       SqlConnection cn = new SqlConnection(cs)
        {
            
            var addContact = "INSERT INTO Contacts  VALUES (@FirstName, @Email,@Phone, @LandLine,@Website, @Address)";
            SqlCommand cmd = new SqlCommand(addContact, cn);
            cmd.Parameters.Add("FirstName", SqlDbType.NVarChar).Value = cnt.FirstName;
            cmd.Parameters.Add("Email", SqlDbType.NVarChar).Value = cnt.Email;
            cmd.Parameters.Add("Phone", SqlDbType.NVarChar).Value = cnt.Mobile;
            cmd.Parameters.Add("LandLine", SqlDbType.NVarChar).Value = cnt.LandLine;
            cmd.Parameters.Add("Website", SqlDbType.NVarChar).Value = cnt.Website;
            cmd.Parameters.Add("Address", SqlDbType.NVarChar).Value = cnt.Address;
            try
            {
                cn.Open();
                cmd.ExecuteNonQuery();
                status = true;
            }
            catch (Exception e)
            {
                return status;
            }
            finally

As you see in the above example we just opened the connection to the server,inserted details then closed the connection. Now look at the same example using the ‘using’ statement


        var cs = ConfigurationManager.ConnectionStrings["connectionString"].ConnectionString;
       using( SqlConnection cn = new SqlConnection(cs))
        {
            // insert the parameters
            try
            {
                cn.Open();
                cmd.ExecuteNonQuery();
                
            }
            catch (Exception e)
            {
       
            }
            
}
// we need not specially close the connection ,con.close()
that is the speciality of using statement,
It automatically closes the instance and disposes the object.

Therefore using(sqlConnection) disposes the objects and releases the connection soon after the interaction with the database,which helps to reduce the heap memory used and thus increasing the perfomance.