Friday, May 13, 2016

jQuery : Fundamentals 


What is jQuery?

jQuery is a lightweight JavaScript library that simplifies programming with JavaScript.

According to jQuery.com, jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traveral and manipulation, 
event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

Benefits of jQuery over JavaScript:
1. jQuery is cross-browser
2. jQuery is a lot more easy to use than raw javascript
3. jQuery is extensible
4. jQuery simplifies and has rich AJAX support
5. jQuery has large development community and many plugins. Example autocomplete textbox plugin.
6. Excellent documentation

Different between jQuery 1.x and 2.x:
jQuery 1.x supports all IE browser versions including IE 6/7/8 and latest.
jQuery 2.x supports IE browser versions except IE 6/7/8.
jQuery 2.x is small in size than jQuery 1.x as the backward compatibility code is removed from jQuery 2.x version.

jQuery Compressed vs Uncompressed versions:
Compressed version of jQuery does not contain formating. Removed all white spaces to reduce the size of the file. This is for production environment.
Uncompressed verion of jQuery is in readable format. This is used in dev/test/QA environments.

Sample:
Adding a click event handler for a button control
<script type="text/javascript">
   $('document').ready(function()
   {
      $('#button1').click(function ()
      {
    alert('jQuery Tutorial');
      }
   });
</script>
<input type="button" value="Click Me" id="button1" />

jQuery start points:
Method1: $('document').ready(function()  );
Method2: $().ready(function()  );   - Not recommended
Method3: $(function()  );

$(document).ready:
It is a jQuery event. 
It fires as soon as the DOM is loaded and ready to be manipulated by script. 
This is the easiest point in the page load process where the script can safely access elements in the page's HTML DOM. 
This event is fired before all the images, CSS etc.. are fully loaded.

$(window).load:
This event fires when the DOM and all the content on the page (images, CSS etc) is fully loaded.
Since the window load event waits for images, css etc to be fully loaded, this event fires after ready event.

Example:
<html>
<head>
   <title></title>
   <sript scr="scripts/jQuery-1.11.2.js"></script>
   <script type="text/javascript">
      $(window).load(function () {
           alert('Window loaded');
      });
      $(document).load(function () {
           alert('DOM loaded and ready');
      });
    </script>
</head>
<body>
</body>
</html>

In the above example, the first output is "DOM loaded and ready" and then second output is "Window loaded".

What is a CDN?
CDN stands for Content Delivery Network.
A CDN is a system of distributed servers that hosts resources such as images, CSS, JavaScript etc.

Companies like Microsoft, Google, Yahoo etc have a free public CDN from which we can load jQuery instead of hosting it on our own web server.

Microsoft jQuery CDN:
http://www.asp.net/ajax/cdn#jQuery_Releases_on_the_CDN_O

Google jQuery CDN:
http://developers.google.com/speed/libraries/devguide#jquery

Benefits of using CDN:
Distributed CDN Servers: The jQuery file can be downloaded from the CDN server that is closest to the user.

Browser Caching: jQuery is used on many popular websites. If a user has already visited a webpage that uses jQuery from a CDN, and then if he arrives
 at your page, the jQuery file has already been cached by the browser so there is no need to download it again.

Parallel Downloads: There is a browser limit on how many files can be concurrently downloaded from a given domain. This number varies from browser
 to browser. For example, if the browser allows only 2 concurrent downloads from a given domain, the 3rd download is blocked until one of the previous
 files has been fully downloaded. Since the jQuery file is on a CDN, it is being downloaded from a different domain. So this means, the browser
 allows another 2 parallel downloads from the CDN server.

Reduced server load: The HTTP request for jQuery file is handled by the CDN server, so the load on your web server is reduced. This also means there
 is a saving on your website bandwidth consumption which in turn will reduce your hosting cost.

Disadvantages: Your client firewalls may block the CDN. So you may have to request your clients to whitelist the CDN.

What if the required jQuery file cannot be downloaded from CDN:
Let's assume that, the CDN is down or because of some network issue. Then, we won't be able to download jQuery from CDN. In this case we will have
 to fall-back to use jQuery file that we hosted on our own server.

If jQuery is successfully downloaded, jQuery property is added to the window object. If this property is not found then jQuery is not downloaded.

<script scr="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.3.min.js">
</script>
<script>
   window.jQuery || document.write("<script src='Scripts/jquery-2.1.3.js'><\/script>");
</script>

jQuery Element selector:

To select the elements by tag name use jQuery element selector:
Syntax: $(element)

$('td')  // select all td elements
$('div a ') // select all anchor elements that are descendants of div element
$('div, span, a') // select all div, span and anchor elements

Selects all the tr elements on the page and changes their background colour to red
 $('tr').css('background-Color', 'red');

Alerts the HTML content of the table
 alert($('table').html());

Alerts the HTML content of each table row
$('table tr').each(function () {
     alert($(this).html());
});

Select and changes the background colour of all the div, span and anchor elements
$('div, span, a').css('background-Color', 'yellow');

Select all anchor elements that are descendants of div element
$('div a').css('background-Color', 'yellow');

Changes the background color of even rows to gray and odd rows to yellow on both the tables.
$('tr:even').css('background-Color', 'gray');
$('tr:odd').css('background-Color', 'yellow');

To change the background color of even rows to gray and odd rows to yellow just for one of the table, use #id selector along with element selector.
$('#table1 tr:even').css('background-Color', 'gray');
$('#table1 tr:odd').css('background-Color', 'yellow');

jQuery Class selector:

Syntax : $('.class') 

jQuery class selectors uses JavaScript's native getElementsByClassName() function if the browser supports it. 

$('.small') // Selects all elements with class small
$('.small,.big') // Selects all elements with class small or big
$('div.small,.big') // Selects div elements with class small and any element with class big

Selects all elements with class "small" and sets 5px solid red border
$('.small').css('border', '5px solid red');

Selects all elements with class "small" or "big" and sets 5px solid red border
$('.small, .big').css('border', '5px solid red');

Selects all elements with class "small" and all span elements with class "big" and sets 5px solid red border
$('.small, span.big').css('border', '5px solid red');

Selects all elements with class small that are nested in a an element with id=div2 and sets 5px solid red border
$('#div2 .small').css('border', '5px solid red');

Selects all elements with class small and sets 5px solid red border. Notice div1 has 2 classes - small and big.
$('.small').css('border', '5px solid red');

Selects all elements that has both the classes - small and big. There should be no space between the class names. 
$('.small.big').css('border', '5px solid red');

If you have a space between the two class names then we are trying to find descendants, i.e. find elements with class big that are descendants
of an element with class small.
$('.small .big').css('border', '5px solid red');

Another way to selects all elements that has both the classes - small and big is by using filter method. But this approach is
slower because it will first create a list of objects with class "small" and then removes elements that does not have class "big"
$('.small').filter('.big').css('border', '5px solid red');

jQuery attribute and attribute value selector:

Syntax : 
$('[attribute]')
$('[attribute="value"]')

$('[title]') // Selects all elements that have title attribute
$('div[title]') // Selects all div elements that have title attribute
$('[title="divTitle"]') // Selects all elements that have title attribute value - divTitle
$('div[title="divTitle"]') // Selects all div elements that have title attribute value - divTitle

Selects all elements with title attribute and sets 5px solid red border
$('[title]').css('border', '5px solid red');

Selects all div elements with title attribute and sets 5px solid red border
$('div[title]').css('border', '5px solid red');

Selects all elements with title attribute value - div1Title, and sets 5px solid red border
$('[title="div1Title"]').css('border', '5px solid red');

Selects all div elements with title attribute value - div1Title, and sets 5px solid red border
$('div[title="div1Title"]').css('border', '5px solid red');

Selects all div elements with both title and style attributes, and sets 5px solid black border
$('div[title][style]').css('border', '5px solid black');

Selects all div elements with title attribute value - divTitle, and style attribute value - background-color:red, and sets 5px solid black border
$('div[title="divTitle"][style="background-color:red"]').css('border', '5px solid black');

Selects all div elements with either title or style attributes, and sets 5px solid black border
$('div[title],[style]').css('border', '5px solid black');

jQuery Attribute value operators
Attribute Equals Selector [name="value"]
Attribute Not Equal Selector [name!="value"]
Attribute Contains Selector [name*="value"]
Attribute Contains Word Selector [name~="value"]
Attribute Contains Prefix Selector [name|="value"]
Attribute Starts With Selector [name^="value"]
Attribute Ends With Selector [name$="value"] 

Selects all elements that have title attribute value equal to div1Title
$('[title="div1Title"]') 

Selects all elements that have title attribute value not equal to div1Title
$('[title!="div1Title"]') 

Selects all elements that have title attribute value containing the given substring - Title
$('[title*="Title"]') 

Selects all elements that have title attribute value containing the given word - mySpan, delimited by spaces
$('[title~="mySpan"]')

Selects all elements that have title attribute value equal to myTitle or starting with myTitle followed by a hyphen (-)
$('[title|="myTitle"]') 

Selects all elements that have title attribute value starting with div
$('[title^="div"]')

Selects all elements that have title attribute value ending with Heading
$('[title$="Heading"]')

THIS IS
$('div[title!="div1Title"]').css('border', '5px solid red');
EQUIVALENT TO
$('div:not([title="div1Title"])').css('border', '5px solid red');
Posted by at No comments:
Labels:

Wednesday, May 11, 2016

REST API Call : Populate drop down control from values in List

Requirement: 

Place a drop down control named Language on a page and load list of languages from a SharePoint list.

Solution:

In SharePoint site, create a page. Insert Content Editor web part and place a div tag as below:
<div id="LanguageDrp"></div>
Place following script in a .js file and load the JS file from the page.

-------------------------------------------

var currLang = "";

function getLanguageList()
{
$("div#LanguageDrp").html("" );
   $.ajax({ 
             type: "GET",
             async:"true",
              contentType: "application/json;odata=verbose",
             headers: { "Accept": "application/json; odata=verbose" },
             url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('Language%20Filter')/items?$select=Title&$orderby=Order0",
             success: function(data){     
               var htmlLang = "";
               htmlLang += "<table cellpadding='5' cellspacing='5' style='width:60%'>";
               htmlLang += "<tr><td style='color:black;font-weight:bold'>Language</td><td><select id='selLang'>";
   
            $.each(data.d.results, function(index, item){  
                  if(currLang == item.Title)
                  {
                         htmlLang +="<option selected value='"+item.Title+"'>"+item.Title+"</option>";
                  }
                  else
                  {
                         htmlLang +="<option value='"+item.Title+"'>"+item.Title+"</option>";
                  }
             });
           
             htmlLang += "</select></td></tr>";
             htmlLang += "</table>";
       
             $("div#LanguageDrp").html(htmlLang );       
             $("div#LanguageDrp").closest('td').show();//css("display","block");
             $("div#LanguageDrp").closest('td').parent().css("width","100%");
             $("div#LanguageDrp").parent().parent().css("background","transparent");
     
   $('#selLang').change(function() {      
        
       var url = window.location.href;
       if (url.indexOf("?")>-1)
       {
           url = url.substr(0,url.indexOf("?"));
       }
       
       if(getParameterByName("Roles")!=null)
       {
    window.location.replace(url + "?Roles="+ getParameterByName("Roles")+ "&lang=" +$(this).val()  );
       }
       else if(getParameterByName("Related%20Topic")!=null)
       {
           window.location.replace(url + "?Related%20Topic="+ getParameterByName("Related%20Topic")+ "&lang=" +$(this).val()  );
       }
       else if(getParameterByName("Region")!=null)
       {
    window.location.replace(url + "?Region="+ getParameterByName("Region")+ "&lang=" +$(this).val()  );
       }      
       else
       {
    window.location.replace(url + "?lang=" +$(this).val()  );
          }
         });
             },
             error: function(data){
              $("div#LanguageDrp").html("<span style='color:red'><b>Unable to get Language Filter - Refresh the page to try again or contact Administrator </b></span>");
             }      });

}

$(document).ready(function()
{
 $("div#LanguageDrp").html(""); 
      
 if(getParameterByName("lang") == null)
 {
  currLang = "English";
 }
 else
 {
  currLang = getParameterByName("lang");
 }
 
 getLanguageList();
});



function getParameterByName( name ){
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)", 
      regex = new RegExp( regexS ),
      results = regex.exec( window.location.href );
  if( results == null ){
    return null;
  } else{
    return decodeURIComponent(results[1].replace(/\+/g, " "));
  }
}
-------------------------------------------
Posted by at No comments:

Wednesday, July 9, 2014

SharePoint 2013 Training Material

Basics of SharePoint 2013:
      SharePoint Overview
      SharePoint Tutorial
      Video:  SharePoint 2013 Overview (57 min)

      SharePoint 2013 training for IT pros
Note: Will keep adding more links to this page for future reference and readings.
    
Posted by at No comments:

Monday, June 30, 2014

Recovering Workflow History after 60 Days

I really like this article and helped out resolving the issue:

Reference Site: Recovering Workflow History After 60 Days

Workflow history is one of two things to SharePoint users. I suspect for the majority, they aren't even aware of it, and don't have any need for it. For a small minority, they are fully aware of it for one important reason – compliance. Workflows are nearly always used as part of a larger business process, and often these business processes require auditing to ensure compliance with whatever industry standard the business operates with. When SharePoint workflows are used, workflow history is usually seized upon by users as being an easy way to audit compliance. After all, it's easy to get at isn't it?
Certainly while the workflow is in progress, and for a couple of months afterwards it is. But what happens when the end of year audit arrives, and the auditor goes to look at the history for a workflow completed 11 months ago? Disaster – it's not there! There must have been many a frantic phone call between panicking compliance officers and frustrated IT staff along the lines of this:
  • [Compliance officer] "My workflow history has been deleted! The auditor is going to fail us! Where has it gone?"
  • [IT support] (probably after Googling "Workflow history deleted") "This is by design. SharePoint deletes workflow history after 60 days"
  • [Compliance officer] "WHAT?! Nobody told me that! Can you recover it?"
  • [IT support] "We can, we'll just need turn off the timer job and then restore the entire SharePoint farm for each month in question."
  • [Compliance officer] "How long will that take?"
  • [IT support] "Hmmm…."
Both parties are at fault here. The compliance officer for writing a feature of SharePoint into the compliance process without knowing how it worked, and IT for not explaining the 60 day "deletion" actually happens. The good news is though, workflow history isn't deleted, all we need to do is make it easier to find.

So Where Is Workflow History after 60 days?

Put simply, it's in the same place as it's always been. There's a hidden list in every SharePoint site with the workflow feature activated called "workflow history" and it's under lists, so pointing your browser at http://[sitename]/[subweb]/lists/workflow%20history/ will show you this list. It's not pretty, and certainly not usable by an end user in its default view, but it is the same content that was available from the item that the original workflow ran on. All that happens after a workflow has been closed for 60 days is that the relationship links between the item (list item or document) and the workflow history are removed from the database by a timer job. The reason this is done is that a workflow can consist of many individual steps, each of which gets recorded in the history list. Maintaining those links in the database for every workflow that ever runs in a site slows performance down. So Microsoft implemented a clean-up job to remove the links, making it appear from the item that the workflow history is gone. It's possible to disable the timer job, but this has to be done at the application level, will kill performance in the long term, and doesn't help you get back the "missing" workflow history.

Making Workflow History Usable Again

Knowing that all Workflow History is available in a list, all we need to do is link it back to the original item using a calculated column and a view. The basic steps are:
  • Create a view of the workflow history list that uses the filtered ID to present the history of a particular workflow in a recognisable format.
  • Create a new calculated column in the list or library that is associated with the workflow.
  • Write a formula in the calculated column that inserts the item/document ID into a link that can be passed to a view of the workflow history list.
Once we've completed these steps, any user who can open the item will be able to see the new link to the workflow history and view that. Now for the nitty gritty:

Create views of the Workflow History List

  1. Open the workflow history list at http://appname/subweb/workflow%20history/
  2. Create a new shared view; you'll need one for each list that has a workflow associated with it – if there's only one, call the new view "audit view", otherwise "workflow name – audit view" or something similar.
  3. You'll need to identify the List or Library ID (GUID) – You can use the full history list for this.
  4. As a minimum, add the following columns to the view:
    Date Occurred
    User ID
    Event Type
    Outcome
    Description
  5. Sort the view by "Date Occurred"
  6. Filter the view by "List ID" (List ID is equal to GUID – include the braces)
  7. Group by "Primary Item ID", then by "Workflow History Parent Instance"
  8. Save the view, try it out – add any other customisations your audit process may need.
At this point the view will return all history for a particular list, in the next steps we'll create a link that opens and filters workflow history for a particular item.

Create the calculated column for a list/library

  1. Within the list that is associated with the workflow, add a new calculated column. Do this for each list from which you need to see the workflow history.
  2. Enter the following formula, replacing appname and subweb with the address of your site, and viewname with the view you just created:
    =CONCATENATE("http://appname/subweb/Lists/Workflow%20History/viewname.aspx?&FilterField1=Item&FilterValue1=",ID)
  3. Add this column to the default view, or create an "auditor's view" of the list, containing this column and any other pertinent information.
  4. Now users can click on the link created dynamically by this column to return a filtered view of the workflow history, containing audit information on each step in every workflow that ran for this list item.

Make the workflow history easier to read

Out of the box, the workflow history contains a lot of GUIDs instead of real names (I suppose this is where deleting all those links made sense to Microsoft). To make it more human legible, you can add further calculated columns to the workflow history list to turn some of those column values back into real names. A good example is the workflow name, which is represented by "workflow association ID"
  1. Add a new calculated column called "Workflow name" to the workflow history list.
  2. Use the following formula:
    =IF([Workflow Association ID]="{GUID of particular workflow}", "Name of particular workflow",IF([Workflow Association ID]="{GUID of another particular workflow}", "Name of another particular workflow"))
  3. Now save and add this column to your workflow audit views.
That's all. It's clearly not as straightforward as being able to use the OOTB workflow history from the item, but if it means you can still access the same information anytime without harming the performance of the database, it's definitely worth doing! If you know you're going to need workflow history for multiple sites, it's probably worth adding the views at least to the site template before the sites are created, and you could even add the columns to the default libraries with some placeholder values to aid deployment.
Posted by at No comments:

Friday, May 17, 2013

SharePoint Reporting : PerformancePoint Services Dashboard using Analysis Services

Part - 1

 Part - 2 


Part - 3


Posted by at No comments:

Microsoft Analysis Services - Basic Presentations (Cube,Dimensions,Measures,Facts and So on)

Analysis Services - 01 Prerequisite Guide


Analysis Services - 02 Data Source Creation


Analysis Services - 03 Data Source Views


Analysis Services - 04 Cube Creation


Analysis Services - 05 Dimension Fundamentals


Analysis Services - 06 Dimension Hierarchies


Analysis Services - 07 Dimension Attribute Relationships


Analysis Services - 08 Dimension Storage


Analysis Services - 09 Dimension Discretization


Analysis Services - 10 Parent/Child Dimension Hierachies


Analysis Services - 11 Star and Snowflake Schemas
Posted by at No comments:
Labels: , , , ,

Wednesday, May 8, 2013

Project Server 2010 : Failed to provision site PWA with error: System.NullReferenceException: Object reference not set to an instance of an object.

Problem:
I was trying to take project server 2010 databases from PROD and refresh them in the DEV environment by using 5 database restore process (Reference: Project Server 2010 : Migration or Restore in New Farm) .
When I tried initially, the PWA site was missing the Project Site urls under Server Settings -> Project Sites page. Then, I deleted the SharePoint web application and also deleted the Project Server related 5 DBs manually. I restored the 5 DBs and added the project server content db to the newly created web application. When I tried to Provision the Project Web Application (PWA), it failed and I observed the following 3 error messages in Event Log:
Event Log: Error Log Entry 1
Failed to provision site PWA with error: System.NullReferenceException: Object reference not set to an instance of an object.
at Microsoft.SharePoint.SPSite..ctor(Guid id, SPFarm farm, SPUrlZone zone, SPUserToken userToken)
at Microsoft.SharePoint.SPSite..ctor(Guid id)
at Microsoft.Office.Project.Server.Administration.ProjectSite..ctor(Guid webAppId, Guid siteId, String adminName, Int32 lcid, Boolean needsUpgrade, PsiServiceApplication parent)
at Microsoft.Office.Project.Server.Administration.ProjectSiteCollection.Add(Guid webAppId, Guid siteId, String adminName, Int32 lcid, String PubDBConnString, String VerDBConnString, String WorkDBConnString, String RepDBConnString, Boolean needsUpgrade)
at Microsoft.Office.Project.Server.Administration.PsiServiceApplication.CreateSite(ProjectProvisionSettings provset)
Event Log Error Entry 2: Provisioning ‘PWA’: Project site object creation failed. Exception ‘System.NullReferenceException: Object reference not set to an instance of an object.
at Microsoft.SharePoint.SPSite..ctor(Guid id, SPFarm farm, SPUrlZone zone, SPUserToken userToken)
at Microsoft.SharePoint.SPSite..ctor(Guid id)
at Microsoft.Office.Project.Server.Administration.ProjectSite..ctor(Guid webAppId, Guid siteId, String adminName, Int32 lcid, Boolean needsUpgrade, PsiServiceApplication parent)
at Microsoft.Office.Project.Server.Administration.ProjectSiteCollection.Add(Guid webAppId, Guid siteId, String adminName, Int32 lcid, String PubDBConnString, String VerDBConnString, String WorkDBConnString, String RepDBConnString, Boolean needsUpgrade)
at Microsoft.Office.Project.Server.Administration.PsiServiceApplication.CreateSite(ProjectProvisionSettings provset)’.
Event Log Error Entry 3: ProjectSite not created.
SOLUTION:
Something in the SharePoint config or Project Server Config was corrupted.
After hours of trial, I ran the Project Server Installation wizard and did Repair of the installation. The repair process went successfully. 
After that, I did following:
a. Created Web Application with default root site collection.
b. Ensure that site is up and working fine.
c. Go to manage content databases, remove the content database for the above created web application.
d. Restored all the 5 databases in the database server.
e. Attached the project server content database(s) to the web application using the STSADM command (not thru UI). After attaching, if we go to View Site Collections option from Central Admin, we should be able to see PWA site collection for the above created web application.
f. Navigated to Project Server Service Application and created a new Project Web Application by pointing to restored Archive, Published, Reporting, Draft databases.
g. Project Web Application provisioning took sometime and provisioned successfully.
h. When I opened the PWA site, the site came up fine but faced few minor issues which I resolved with the help of following posts:

Finally happy with the output :)

Note: The above is just my experience. Please ensure you fully understand and leverage from my experience for your needs to avoid any further issues.
Posted by at No comments:
Labels: , , , , ,
Subscribe to: Posts (Atom)