Archive

Posts Tagged ‘SharePoint’

SharePoint: Access denied error while calling web service from JavaScript

March 6, 2017 2 comments

Hi Friends,

I would like to share one very specific while calling web service from JavaScript, we were getting exception. Important point to note here is the code is working very fine if we access the page on server. But we are getting JavaScript ‘Error: Access is denied.’ Error while accessing the web page from client machine through browser.

error1

We are getting exception where we are calling the web service.

After some analysis the error came out as HTTP and HTTPS mixed content issue.

In our case HTTPS is configured on load balancer level and on ISS 7 level we have HTTP only hence web service call is working fine.

While accessing from outside URL is getting accessed only with HTTPS and non-secured request is also redirected with secured.

Problem fund that we have used ‘_spPageContextInfo.webAbsoluteUrl’ variable which is providing the HTTP path as SharePoint is unaware with existence of HTTPS as it is configured on load balancer level.

‘_spPageContextInfo.webAbsoluteUrl’ is supposed to give HTTPS path if HTTPS configured on ISS 7 level but as in our case SSL is configured on load balancer hence SharePoint is unaware about SSL.

Solution:

We have checked the protocol of the browser request using ‘document.location.protocol’ and if it is HTTPS then we replaced HTTP with HTTPS from the output of ‘_spPageContextInfo.webAbsoluteUrl’

change

This solution is working fine both in the case of HTTPS and HTTP.

Though this scenario is very specific but still this may help someone to understand the issue better.

SharePoint 2013: Modal Dialog position and scrolling issue with lengthy page

We have come across an issue with SharePoint modal dialog, while working with a lengthy page where due to some lengthy content vertical scroll bar were coming. We developed one web part form, which we have added at the center of the vertical screen. From that web part we can open a SharePoint Asset picker to select the image which opens a model dialog. The functionality was working as expected but we found an UI level issues.

Problem: When we try to launch SharePoint ‘Modal Dialog’ from the bottom of the huge scrolled page, we are not able to see the dialog and only see the bluer screen (overlay). The actual model dialog is getting opened at the top of the page and because of the current scroll position which is somewhere in between the screen or at the bottom, we are not able to see the popup.

Solution: The model dialog location is set by CSS class on the top of the screen, we need to override the css class to change the property. The name of the class is ms-dlgContent. We can add following css class in either master page or respective CSS.

.ms-dlgContent
{
position:fixed! important;
}

SharePoint 2013: Designer workflow error with ‘Call HTTP web service’ action

February 17, 2015 4 comments

While working on one of the workflow development task, it was required to have a web service call to fetch data from SharePoint. To achieve that I used ‘Call HTTP web service’ action but with that I was getting following exception “Unable to deserialize HTTP response content. Expected Content Type: ‘application/json’, ‘text/plain’ or ‘text/html’”.

Suspended

After struggling with this issue, the solution I used thought to share the solution with developer community.

Solution: The reason for the issue is, by default response from SharePoint REST is in XML and SharePoint designer workflow not able to parse the xml and needs JSON response. To resolve this issue we need to pass Accept and Content-Type as application/json;odata=verbose to request headers. This way we will get JSON response. To resolve this follow bellow steps.

  1. Go to SharePoint 2013 designer.
  2. Build a Dictionary variable named ‘WSHearder’WF1
  3. Add two values in newly created dictionary
Accept = application/json;odata=verbose
Content-Type = application/json;odata=verbose
WF2
  1. Now select ‘Call HTTP web service’ action and select Properties.              WF3
  2. Select newly created dictionary variable as value for ‘RequestHeaders’.WF4
  3. Press OK and publish the workflow.

SharePoint 2013: Querying SharePoint log files

December 31, 2014 Leave a comment

Hi Friends,

While working as a SharePoint developer every one of us need to go to SharePoint log files to check exact nature and cause of error. SharePoint logs provide us vital information to resolve the issue. SharePoint provides us correlation id to get the details about the issue, but it is difficult some times to go and check the log files and manually find the error in log and get the cause, as log files are huge sometimes.

To resolve this we have some PowerShell cmdlets which we can use to search in log files. Some of them are Get-SPLogEvent and Merge-SPLogFile. We can discuss about them in more detail below.

1. Get-SPLogEvent-

We can use Get-SPLogEvent to query log files when either single server farm in place or we have knowledge on which server the error gets logged.So Get-SPLogEvent will query the logs in the same server where PowerShell command gets executed.Some of the samples below –

get-splogevent | ?{$_.Message -like "*Monitored*" -and $_.Correlation -eq "2713db9c-f21e-e0bc-3393-95ddcbf60bd0"} | select Area, Category, Level, EventID, Message | Format-List > C:\Log1.log

Above command will search with specified correlation id and get the content where message contains ‘Monitored’ word and dump the requested fields (Area, Category, Level, EventID, Message) in file Log1.log

get-splogevent | ?{$_.Correlation -eq "2713db9c-f21e-e0bc-3393-95ddcbf60bd0"} | select Area, Category, Level, EventID, Message | Format-List > C:\Log2.log

Above command will search with specified correlation id and dump the requested fields (Area, Category, Level, EventID, Message) in file Log2.log at specified path

You can use the above commands directly also on powershell to get the details directly instead of creating a file out of it, like

get-splogevent | ?{$_.Message -like "*user*" -and $_.Correlation -eq "2713db9c-f21e-e0bc-3393-95ddcbf60bd0" -and $_.Level -eq "Medium" -and $_.Category -eq "App Deployment"} | select Area, Category, Level, EventID, Message

Above command will search with specified correlation id and get the content where message contains ‘user’ word , Level is ‘Medium’ and Category equals ‘App Deployment’ and display the requested fields (Area, Category, Level, EventID, Message) on PowerShell window.

get-splogevent -StartTime "12/11/2014 10:00" -EndTime "12/12/2014 18:00"

Above command will search the logs with specified date range and display on PowerShell window.

2. Merge-SPLogFile-

We can use Merge-SPLogFile to query log files when we have a scenario where mult-server farm in place and we do not have idea where exactly the error get logged. i.e. timer service is running on four servers and the current timer request is served by Server1 then error get logged on server1. Some of the samples below –

Merge-SPLogFile -Path "C:\Log1.log" -Overwrite -Message "*Monitored*" – Correlation "2713db9c-f21e-e0bc-3393-95ddcbf60bd0"

Above command will search with specified correlation id and get the content where message contains ‘Monitored’ word and dump the details in file Log1.log

Merge-SPLogFile -Path "C:\Log2.log" -Overwrite -Message "*Monitored*" – Correlation "2713db9c-f21e-e0bc-3393-95ddcbf60bd0"

Above command will search with specified correlation id and dump the details in file Log2.log

Merge-SPLogFile -Path "C:\Log3.log" -Overwrite -StartTime "12/11/2014 10:00" - EndTime "12/12/2014 18:00"

Above command will search the logs with specified date range and dump the details in file Log3.log.
Hope this will reduce some of the debugging efforts.

“As the year comes to an end, don’t look back at yesterday’s disappointment. Look ahead to God’s promises yet to unfold.” ― Buky Ojelabi, comtemporary blogger
Happy new year 2015.

SharePoint: Using Papercut for testing the email functionality in SharePoint.

October 31, 2014 Leave a comment

In many scenarios while working with SharePoint we may come across requirement to test emails. Like email alerts, emails from workflow, timer jobs or event receivers etc. In my case I need to test emails from Timer job.
While development phase it is not always possible to have a SMTP sever available to test those kind of functionality and in those scenarios Papercut is best utility available for our help. Papercut is a simplified SMTP server designed to only receive messages and serve the purpose of light weight SMTP.
You can use Papercut in .Net development or SharePoint development. You just need to download and install the Papercut on your SharePoint server.

Papercut-v3.1.0-S1
Some points to consider while using Papercut with SharePoint-
1. Papercut is only to receive emails.
2. In case of ASP.Net application provide host=”127.0.0.1″ port=”25″ in web.config file under mailsettings section.
3. For SharePoint, If you have single server farm then you don’t need to worry just install Papercut and set the ‘Outbound SMTP Server’ to localhost or 127.0.0.1 in ‘Configure outgoing e-mail settings’ under central admin, System settings.
4. You can now test by creating simple alert on any list.
5. If you have muti-server farm and testing email from timer job then need to find on which server timer service is running and on that sever you need to install Papercut also give this server IP in ‘Outbound SMTP Server’ in ‘Configure outgoing e-mail settings’ under central admin, System settings.
6. If timer service running on more than one server then make sure port 25 open between those servers to get emails from timer job.
Hope this will help.

Note: complete contribution, development and license rights are with the team who have developed this and as per the http://papercut.codeplex.com/license . This post is just to make readers aware that this kind of tool exists.

SharePoint 2013: jQuery table pagination sorter integration with JSLink

January 24, 2014 5 comments

Hi Friends,

While working one of the requirements I came across a scenario where I need to call a jQuery function after loading all the rows from data view. I implemented it using OnPostRender which I shown in my previous post.

After that I am thinking of integrating JSLink with some of the very useful jQuery plugin. In this post I am showing how to integrate a jQuery table sorter plugin with SharePoint 2013 JSLink.I have used tablesorter plugin by Christian Bach for demo purpose. http://mottie.github.io/tablesorter/docs/index.html

Download the package from above maintained table sorter site and upload the required css and js under SiteAssets folder on root site.

I have created a custom list with following columns. Added these columns in default view. You can create separate view also.

listsettings1

Added some test contents to show the functionality working.

listscontent

Created one JSLink(Student_Filter_Script.js) file which will alter the UI of the view. JS Link file is as following.

(function () {
var overrideCtx = {};
 overrideCtx.Templates = {};
 overrideCtx.Templates.Header = "<div class='pager'>Page: <select class='gotoPage'></select><img src='/sites/Demo/SiteAssets/addons/pager/icons/first.png' class='first' alt='First' title='First page' /><img src='/sites/Demo/SiteAssets/addons/pager/icons/prev.png' class='prev' alt='Prev' title='Previous page' /><span class='pagedisplay'></span> <!-- this can be any element, including an input --><img src='/sites/Demo/SiteAssets/addons/pager/icons/next.png' class='next' alt='Next' title='Next page' /><img src='/sites/Demo/SiteAssets/addons/pager/icons/last.png' class='last' alt='Last' title= 'Last page' /><select class='pagesize'><option selected='selected' value='10'>10</option><option value='20'>20</option><option value='30'>30</option><option value='40'>40</option></select></div><table id='myTable' class='tablesorter'><thead><tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Hindi</th><th>Calculus</th><th>Geometry</th></tr></thead><tfoot><tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Hindi</th><th>Calculus</th><th>Geometry</th></tr></tfoot><tbody>";
 overrideCtx.Templates.Footer = "</tbody></table><div class='pager'>Page: <select class='gotoPage'></select><img src='/sites/Demo/SiteAssets/addons/pager/icons/first.png' class='first' alt='First' title='First page' /><img src='/sites/Demo/SiteAssets/addons/pager/icons/prev.png' class='prev' alt='Prev' title='Previous page' /><span class='pagedisplay'></span> <!-- this can be any element, including an input --><img src='/sites/Demo/SiteAssets/addons/pager/icons/next.png' class='next' alt='Next' title='Next page' /><img src='/sites/Demo/SiteAssets/addons/pager/icons/last.png' class='last' alt='Last' title= 'Last page' /><select class='pagesize'><option selected='selected' value='10'>10</option><option value='20'>20</option><option value='30'>30</option><option value='40'>40</option></select></div>";
 overrideCtx.Templates.Item = CustomDemoItem;
 overrideCtx.OnPostRender = [];
 overrideCtx.OnPostRender.push(function(){ /* invoke your plugin code here to ensure the plugin has the content to work against */
 $(function(){

// define pager options
 var pagerOptions = {
 // target the pager markup - see the HTML block below
 container: $(".pager"),
 // output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
 output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
 // if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
 // table row set to a height to compensate; default is false
 fixedHeight: true,
 // remove rows from the table to speed up the sort of large tables.
 // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
 removeRows: false,
 // go to page selector - select dropdown that sets the current page
 cssGoto: '.gotoPage'
 };

// Initialize tablesorter
 // ***********************
 $("table")
 .tablesorter({
 theme: 'blue',
 headerTemplate : '{content} {icon}', // new in v2.7. Needed to add the bootstrap icon!
 widthFixed: true,
 widgets: ['zebra', 'filter']
 })

// initialize the pager plugin
 // ****************************
 .tablesorterPager(pagerOptions);

});
 });
 SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function CustomDemoItem(ctx)
{
 var html = "";
 html = "<tr>";
 html += "<td>" + ctx.CurrentItem.Title + "</td>";
 html += "<td>" + ctx.CurrentItem.Name + "</td>";
 html += "<td>" + ctx.CurrentItem.Sex + "</td>";
 html += "<td>" + ctx.CurrentItem.English + "</td>";
 html += "<td>" + ctx.CurrentItem.Hindi + "</td>";
 html += "<td>" + ctx.CurrentItem.Calculus + "</td>";
 html += "<td>" + ctx.CurrentItem.Geometry + "</td>";
 html += "</tr>";
 return html;
}

Uploaded this JS link file in master page gallery with properties as shown in bellow image.

JsLink_MasterPageGallery

I have added references for following css and JavaScript files in page layout, I have added in page layout but you can add in master page according to your requirement.

<!-- jQuery file -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<!-- css stylesheet refrences -->
<link href="/sites/Demo/SiteAssets/css/theme.blue.css" rel="stylesheet" type="text/css" />
<link href="/sites/Demo/SiteAssets/addons/pager/jquery.tablesorter.pager.css" rel="stylesheet" type="text/css" />
<!-- Tablesorter js -->
<script type="text/javascript" src="/sites/Demo/SiteAssets/js/jquery.tablesorter.js"></script>&nbsp;
<script type="text/javascript" src="/sites/Demo/SiteAssets/addons/pager/jquery.tablesorter.pager.js"></script>
<script type="text/javascript" src="/sites/Demo/SiteAssets/js/jquery.tablesorter.widgets.js"></script>

Edit the page to add list view web part on page and edit the XSLTListView web part to set newly created JS link file.

XSLT_JSLink_ref

Set the value as following.

~sitecollection/_catalogs/masterpage/JS_Link/Student_Filter_Script.js

Save the web part and you will see the beautiful effect of smooth client side sorting pagination, filtering and sorting using a JSLink file.

JSLinkView

Note: complete contribution, development and license rights are with the team who have developed tablesorter plugin. This post is just to show integration of SharePoint 2013 JSLink with jQuery plugin.

SharePoint 2013: Calling jQuery function on rendering complete event in JSLink

December 2, 2013 7 comments

Hello Friends,

Once again a new finding I wanted to share with you related to JSLink in SharePoint 2013.

Scenario:  I am displaying some data from list using a XSLTListView web part in SharePoint 2013 page. I have selected JSLink option to give a matching UI to that data.Data is getting rendered properly with new UI using my custom JSLink file but I wanted to call a jQuery function after loading of all the rows gets completed so that my jQuery call will not fail and will get the rendered rows properly.

Solution:

We need to provide a handler on OnPostRender event or we can call the function directly as shown in following code, though no huge difference between those two –

Option 1 –

(function () {
 var overrideCtx = {};
 overrideCtx.Templates = {};
 overrideCtx.Templates.Header = "";
 overrideCtx.Templates.Footer = "";
 overrideCtx.Templates.Item = CustomDemoItem;
 overrideCtx.OnPostRender = [];
 overrideCtx.OnPostRender.push(function()
 {
 //call your ready function here
 });
 SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

Option 2 –

(function () {
 var overrideCtx = {};
 overrideCtx.Templates = {};
 overrideCtx.Templates.Header = "";
 overrideCtx.Templates.Footer = "";
 overrideCtx.Templates.Item = CustomDemoItem;
 overrideCtx.OnPostRender = [];
 overrideCtx.OnPostRender.push(function(){OnPostRenderFunc(); });
 SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function OnPostRenderFunc(renderCtx) {
 //call your ready function here
}

Hope this will help some of the developer looking for same kind of answer.

Happy coding….