SharePoint Journey

Monday, September 4, 2017

Jquery popup window Example

Save the below code as a html file & open with IE or any browser.

HTML & Jquery Code:

<html>

<head>

<link href="

https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>

</script>

</script>

$(document).ready(function(){

var dialog, form;

//dialog.dialog("open");

dialog = $( "#popup" ).dialog({

autoOpen: false,

height: 400,

width: 700,

modal: true,

buttons: {

"Add Company": function(){

alert("Hi alert");

Cancel: function() {

dialog.dialog("close");

}

close: function() {

}

});

form = dialog.find( "form" ).on( "submit", function( event ) {

event.preventDefault();

});

$( "#popupBtn" ).button().on( "click", function() {

dialog.dialog("open");

//var success = mdlLoadCountries();

});

</script>

</head>

<body>

<thead>

<tr>

<th>FirstName</th>

<th>LastName</th>

</tr>

</thead>

<tbody>

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

CURD Operations using Rest API in SharePoint 2013

Here you can find the some basic operation(Create,Update,Read,Delete) list items in SharePoint 2013 using Rest API. We can use the Content Editor web part to call the script files.

Include Script files in Content Editor:

Go to content editor -> Edit Source -> enter the code like below (code for including the script files)

For 'jquery.min.js' we can either use direct link from online or we can download to our SharePoint library & We can use that.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="/sites/<site>/<subsite>/SiteAssets/jquery-1.11.1.min.js"></script>
<script src="/sites/<site>/<subsite>/SiteAssets/Test.js" type="text/javascript"></script>
<button onclick="LoadControls()" type="submit">submit</button>

If you want to include any CSS files then include the below line
<link rel="stylesheet" type="text/css" href="/sites/<site>/<subsite>/SiteAssets/any.css"/>

Create & Upload your javascript file(s) ("Test.js") in SiteAssets/Any Library. User the below code in Test.js file.

//(Test.js)Read List item using REST:

//SP.SOD.executeFunc('sp.js', 'SP.ClientContext', LoadControls); //we can also use this function to load sp.js(which we mentioned(sp.js)  in the Content editor)
function LoadControls()
{
var deferred = $.Deferred();
var serverURL = _spPageContextInfo.webAbsoluteUrl;
var ListName = "Sharepoint ListName"; var filterValue = "YourFilterValue";
var listURL = String.format("{0}/_api/web/lists/getbytitle('"+ListName+"')/items?$select=ColumnName1,ColumnName2,ColumnName3&$filter=Title eq '"+filterValue +"'",serverURL);
$.ajax({
url: listURL,
type: "GET",
headers: {"Accept": "application/json;odata=verbose"},
cache: false,
success: function(data){
   var Name = data.d.results[0].ColumnName1;
   //var anyColumn= data.d.ColumnName; //this code when filter list with item id
var Age = parseFloat(data.d.results[0].ColumnName2) + 1; //increasing age
alert("Name & Age:" + Name + '&' + Age );
deferred.resolve();
},
error: function(err){
alert("Request failed :"+JSON.stringify(err));
}
});
return deferred.promise();
}

//Read all List item using REST:

//SP.SOD.executeFunc('sp.js', 'SP.ClientContext', LoadControls);  //we can also use this function to load sp.js(which we mentioned(sp.js)  in the Content editor)
function LoadControls()
{
var deferred = $.Deferred();
var serverURL = _spPageContextInfo.webAbsoluteUrl;
var listURL = String.format("{0}/_api/web/lists/getbytitle('VLATestList')/items?$select=Title, Name, Age",serverURL);
$.ajax({
   url: listURL,
   type: "GET",
   headers: {
   "accept": "application/json; odata=verbose"
   },
   success: function(data){
   // Looping multiple items
   $.each(data.d.results, function(index, item){
   alert("Item: " + index);
   alert(item.Title); //You will get title here
   alert(item.Name); //You will get name here
   alert(item.Age); //You will get email here
   });
   },
   error: function(err){
   alert("Error while fetching list items: " + JSON.stringify(err));
   }

   });
   return deferred.promise();
}

//Create List item using REST:

//SP.SOD.executeFunc('sp.js', 'SP.ClientContext', LoadControls);  //we can also use this function to load sp.js(which we mentioned(sp.js)  in the Content editor)
function LoadControls()
{
var serverURL = _spPageContextInfo.webAbsoluteUrl;
   var listUrl = String.format("{0}/_api/web/lists/GetByTitle('ListName')/items",serverURL);
   $.ajax({
   url: listUrl,
   type: "POST",
   data: JSON.stringify({
   '__metadata': {'type': 'SP.Data.ListNameListItem' },  //(Ex. if our list name is testList then it should be like 'testListListItem')
   'Title': 'ABC',
   'Name': 'XYZ',
   'Age': 10
   }),
   headers: {
   "Accept": "application/json;odata=verbose",
   "content-type": "application/json; odata=verbose",
   "X-RequestDigest": $("#__REQUESTDIGEST").val()
   },
   success: function(data){
   alert("Item added successfully!");
   },
   error: function(err){
   alert("Error while adding item: " + JSON.stringify(err));
   }

   });
}

//Update List item using REST:

//SP.SOD.executeFunc('sp.js', 'SP.ClientContext', LoadControls);  //we can also use this function to load sp.js(which we mentioned(sp.js)  in the Content editor)
function LoadControls()
{
var itemID = 1;

var serverURL = _spPageContextInfo.webAbsoluteUrl;
var listUrl = String.format("{0}/_api/web/lists/GetByTitle('ListName')/getItemByStringId("+itemID+")",serverURL);
$.ajax({
url: listUrl,
type: "POST",
data: JSON.stringify(
{
'__metadata': {
'type': 'SP.Data.ListNameListItem' //(Ex. if our list name is testList then it should be like 'testListListItem')
},
'ColumnName1': "Our New Value",
'ColumnName2':"Our New Value",
}),
headers: {
"Content-Type": "application/json;odata=verbose",
"Accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-Http-Method": "PATCH",
"IF-MATCH": "*"
},
success: function () {
// window.location = "<New URL to be redirected>";
alert('item updated & Updated ID:' +itemID);
},
error: function(err){
   alert("Error while deleting item: " + JSON.stringify(err));
   }
});

}

//Delete List item using REST:

//SP.SOD.executeFunc('sp.js', 'SP.ClientContext', LoadControls);  //we can also use this function to load sp.js(which we mentioned(sp.js) in the Content editor)
function LoadControls()
{
var itemID = 7;

var serverURL = _spPageContextInfo.webAbsoluteUrl;
var listUrl = String.format("{0}/_api/web/lists/GetByTitle('ListName')/items("+itemID+")",serverURL);
$.ajax({
   url: listUrl,
   type: "POST",
   headers: {
   "Accept": "application/json;odata=verbose",
   "content-type": "application/json; odata=verbose",
   "X-RequestDigest": $("#__REQUESTDIGEST").val(),
   "X-HTTP-Method": "DELETE",
   "If-Match": "*"
   },
   success: function(data){
   alert("Item deleted successfully!");
   },
   error: function(err){
   alert("Error while deleting item: " + JSON.stringify(err));
   }

   });
}

Here is some other useful links for your reference link1 Link2 Link 3
CRUD operations using JSOM : Click HereClick Here
From this link you can find the difference between CSOM vs JSOM vs SSOM vs REST

Web.config

Web.config is the main settings and configuration file for a web application.
The file is an XML document that defines configuration information regarding the web application.

Where is SharePoint web.config?

There is a separate web.config file for each Web Application / IIS Website which is running an
instance of SharePoint.
For example, there will be a web.config file in the root of the virtual directory for each application.
There is also a separate web.config file which contains configuration details for the "_layouts", "_catalogs", etc directories of SharePoint sites.

Use the force attribute to explicitly re-install the feature.

Sometimes when we try deploy the visual web parts solution to share point site, we might get an error like

"Error occurred in deployment step 'Add Solution': A feature with ID 15/bb6298f9-f2c1-4dba-b8fa-1ae0c752bcf2 has already been installed in this farm. Use the force attribute to explicitly re-install the feature"

In order to resolve this issue, set AlwaysForceInstall atttribute to True in featurename.Template.xml file.

<?xml version="1.0" encoding="utf-8" ?>
<Feature xmlns="http://schemas.microsoft.com/sharepoint/" AlwaysForceInstall="TRUE">
</Feature>

Alternatively, we can use power shell command also.

Install-SPSolution <solutionname>.wsp -GACDeployment -Force

Ajax Loader

To display loading symbol while ajax call, you can use the below code.

Content Editor Code:

Style.css Code:

.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 )
        url('/sites/<sitename>/SiteAssets/Images/ajax-loader.gif') //Use any images from your site
        50% 50%
        no-repeat;
}

body.loading {
    overflow: hidden;
}

body.loading .modal {
    display: block;
}

Test.js Code:

$(document).on({
ajaxStart: function() { $('body').addClass("loading"); },
ajaxStop: function() { $('body').removeClass("loading"); }
});

$(document).ready(function()
{
//Ajax Code for loading data to you page
});

Get query string from javascript

By using the below code we can get the query string value & we can pass it to new URL.

var QuerystringID = getParameterByName("ID");
if(QuerystringID != "")
{
window.location = "<NewUrl>?DID="+ QuerystringID ;
}

//below function get the query string value from URL
function getParameterByName(name)
{
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}