SharePoint Blog

Wednesday, March 27, 2019

Getting tasks and sub-tasks from task list using SharePoint 2013/SP online and rest API

Saturday, March 23, 2019

CSS targeting for IE10 and IE11

use the below media query for IE 10 and 11

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
` % add classes here %
}

example:

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.lblpagetitle
{
margin-bottom:3%;
margin-top:-2.5%;
}
}

Thursday, March 7, 2019

Reading data from a CSV file using JQuery

Here is a quick code snippet on how to read data from a .CSV file using JQuery/Javascript
download papaparse.min.js and add the link to your code before running the below code

<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="data/papaparse.min.js"></script>
<title>Read CSV file using JavaScript and HTML5 </title>
<style>
.pdfobject-container { height: 500px;}
.pdfobject { border: 1px solid #666; }
</style>
</head>
<body>
<div class="container" style="padding:10px 10px;">
<h1>Read CSV file using JavaScript</h1>
<div id="header"></div>
<div class="well">
<div class="row">
<div class="form-inline">
<div class="form-group">
<label for="files">Upload a CSV formatted file:</label>
<input type="file" id="files" class="form-control" accept=".csv" required />
</div>
<div class="form-group">
<button type="submit" id="submit-file" class="btn btn-primary">Upload File</button>
</div>
</div>
</div>
<div class="row"

<div class="row" id="parsed_csv_list">
</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$('#submit-file').on("click",function(e){
e.preventDefault();
$('#files').parse({
config: {
complete: displayHTMLTable,
},
before: function(file, inputElem)
{
//console.log("Parsing file...", file);
},
error: function(err, file)
{
//console.log("ERROR:", err, file);
},
complete: function()
{
//console.log("Done with all files");
}
});
});

function displayHTMLTable(results){
var table = "<table class='table'>";
var data = results.data;

for(i=0;i<data.length;i++){
table+= "<tr>";
var row = data[i];
var cells = row.join(",").split(",");

for(j=0;j<cells.length;j++){
table+= "<td>";
table+= cells[j];
table+= "</th>";
}
table+= "</tr>";
}
table+= "</table>";
$("#parsed_csv_list").html(table);
}
});
</script>

Thursday, May 10, 2018

IIS 7.0 and above impotent error messages

200 - OK. The client request has succeeded.
400 - Bad request. The request could not be understood by the server due to malformed syntax. The client should not repeat the request without modifications.
401 - Access denied.
403 - Forbidden.
404 - Not found.
500 - Internal server error.
501 - Header values specify a configuration that is not implemented.
502 - Web server received an invalid response while acting as a gateway or proxy.
503 - Service unavailable.

Friday, February 10, 2017

Suggestions or Auto populate values in textbox using JQuery and C#(SharePoint 2013)

I have done this on SharePoint application page which is deployed under layouts folder, this can be also used in .net applications.
below is images shows you populated suggestions that are saved in database

First fill the data inside a gridview/table with fields that you need to auto populate
this can be done based on your coding capabilities

once you do it hide the table so that anyone cannot see it using CSS or code in my case i did with CSS
.GridHide is my class for hiding gridview and below other two classed is used to autocomplete list

<style type="text/css">
.GrdHide {
display:none;
}
ul.ui-autocomplete {
list-style: none;
}
.ui-autocomplete {
height: 200px;
overflow-y: scroll;
overflow-x: hidden;

}
</style>

Code in JQuery to populate table data inside textbox i did this for two textboxes for project name and project number you can repeat the same as many columns you want

function GetData() {
var MYProjNumb = new Array();
var MYProjName = new Array();

var table = $("#ctl00_PlaceHolderMain_hiddenGrd tbody"); //my table ID

table.find('tr').each(function (i) {
var $tds = $(this).find('td'),
ProjectNumber = $tds.eq(0).text(),
ProjectName = $tds.eq(1).text(),

//alert('Row ' + (i + 1) + ':\npNumber: ' + ProjectNumber
// + '\nPName: ' + ProjectName);
MYProjNumb.push(ProjectNumber);
MYProjName.push(ProjectName);

});
ProjNumber(MYProjNumb);
ProjName(MYProjName);
}
function ProjNumber(list) {
var PJlst = GetUnique(list);
$("[id*=txtProjNum]").autocomplete({
source: PJlst,
select: function (event, ui) {
}
});
}
function ProjName(list) {
var PNLst = GetUnique(list);
$("[id*=txtProjectName]").autocomplete({
source: PNLst,
select: function (event, ui) {
}
});
}

to display only unique values in auto suggestion box then use the below code

function GetUnique(list)
{
var unique = list.filter(function (itm, i, a) {
return i == a.indexOf(itm);
});
return unique;
}

call the above GetData() method on load of page

Wednesday, November 16, 2016

Checking selected value in all dropdowns using jquery

Below code works if you have multiple drop downs where you want to check the selected value in all drop downs in the form and see if this value is selected already, if selected then will show an alert message and change the selected value of that particular drop down

Add the "OnChange" in dropdown events as this onchange="ChkCurrent(this);
where 'id' is current value dropdown
function ChkCurrent(id) {
var ddlValues = new Array();
$("[id*='ddlstsCurrM']").each(function (i) {
if ($(this).val()== 1) {
ddlValues.push($(this).val());
}

});
if (ddlValues.length > 1)
{
alert("This value has been already selected");
var ddlid ="#"+id.id;
$(ddlid).val('0');

}
}

Thursday, August 11, 2016

Minimizing/hiding sub tasks on a tasks list in office 365

By default sharepoint will show all the subtask on a tasks list to minimize them use the below script by adding script editor webpart on tasks pages

<script src="https://sharepointsiteurl/SiteAssets/JS%20file/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".ms-commentcollapse-icon").click();

});
</script>