Create, Retrieve, Update and Delete SharePoint list item using-rest-api-and-jquery

https://tjendarta.wordpress.com/2014/02/20/create-retrieve-update-and-delete-sharepoint-list-item-using-rest-api-and-jquery/

How to show modal pop up in SharePoint Online using client side code?

How to show modal pop up in SharePoint Online using client side code?


Here we will discuss how we can show modal popup using client side code in SharePoint online. The same code will also work in SharePoint 2016. Here we will use a script editor web part to insert the code into a web part page.

Below is the code which will open the dialog box when the page loads.

<script language="javascript" type="text/javascript"

src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 

<script language="javascript" type="text/javascript"> 

    $(document).ready(function() { 

        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', showModalPopUp); 

    }); 

function showModalPopUp() { 

       

    var options = { 

        url:'https://onlysharepoint2013.sharepoint.com/sites/Bhawana/Lists/Employees/AllItems.aspx',

        title: 'Employees', //Set the title for the pop up 

        allowMaximize: false, 

        showClose: true, 

        width: 500, 

        height: 350 

    }; 

       

    SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options); 

    return false; 

} 

</script>  

Below is the code which will display the modal popup on button click.

<script language="javascript" type="text/javascript"

src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 

<script language="javascript" type="text/javascript"> 

    $(document).ready(function() { 

        $("#btnShowPopup").click(function(){

            showModalPopUp();

        });

    }); 

function showModalPopUp() { 

       

    var options = { 

        url:'https://onlysharepoint2013.sharepoint.com/sites/Bhawana/Lists/Employees/AllItems.aspx',

        title: 'Employees', 

        allowMaximize: false, 

        showClose: true, 

        width: 500, 

        height: 350 

    }; 

      

    SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options); 

    return false; 

} 

</script> 

<input type="button" id="btnShowPopup" value="Show Modal up"/>

Once you save the code and click on the button the dialog will open like below:

Retrieve record from SharePoint by search column List using JavaScript

Retrieve record from SharePoint by search column List using JavaScript
Retrieve record from SharePoint List using JavaScript

.aspx
    <div>
         <div id="divGetCustomerdata">    
    </div>
        <div>
            <table>
                 <tr>
                <td>
                    <input id="txtID" type="text"  />
                </td>          
                <td >
                   <input id="btnCustomer" type="submit" value="Get Customer data" />
                </td>
            </tr>

            </table>
        </div>
        <table id="tblCustomer"></table>

    </div>

.js file

var clientcontext;
var hostWebUrl;
var appWebUrl;
var CustomercollListItem;

$(document).ready(function () {
    hostWebUrl = decodeURIComponent(manageQueryStringParameter('SPHostUrl'));
    appWebUrl = decodeURIComponent(manageQueryStringParameter('SPAppWebUrl'));
 
    $("#btnCustomer").click(function () {
        listAllCustomer();
    });
});


//This function is used to get the hostweb url
function manageQueryStringParameter(paramToRetrieve) {
    var params =
    document.URL.split("?")[1].split("&");
    var strParams = "";
    for (var i = 0; i < params.length; i = i + 1) {
        var singleParam = params[i].split("=");
        if (singleParam[0] == paramToRetrieve) {
            return singleParam[1];
        }
    }
}

// Get the List data

function listAllCustomer() {   

    var ctx = new SP.ClientContext(appWebUrl);

    var appContextSite = new SP.AppContextSite(ctx, hostWebUrl);

    var web = appContextSite.get_web();

    var oList = web.get_lists().getByTitle("Customer");

    if ($("#txtID").val().trim().length > 0 ) {

        // Get the specifiec columns of lists by columns filter

        var camlQuery = new SP.CamlQuery();

        //camlQuery.set_viewXml('<View><Query><Where><eq><FieldRef Name=\'ID\'/>' + '<Value Type=\'Number\'>' + $("#txtID").val() + '</Value></eq></Where></Query></View>');

        //camlQuery.set_viewXml('<View><Query><Where><Contains><FieldRef Name=\'FirstName\'/><Value Type=\'Text\'>' + $("#txtID").val() + '</Value></Contains></Where></Query></View>');

        camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'ID\'/><Value Type=\'Counter\'>' + $("#txtID").val().trim() + '</Value></Eq></Where></Query></View>');

        //returns the item collectionbased on the query with selected columns values       

        CustomercollListItem = oList.getItems(camlQuery, 'Include(ID, FirstName, LastName, Occupation, Location, Country, Comments)');

        ////returns the item collectionbased on the query

        //CustomercollListItem = oList.getItems(camlQuery);

    }

    else {

        // Get the All columns of lists

        var camlQuery = SP.CamlQuery.createAllItemsQuery();

        //camlQuery.set_viewXml('<View><RowLimit>10</RowLimit></View>');

        //returns the item collectionbased on the query with selected columns values       

        CustomercollListItem = oList.getItems(camlQuery, 'Include(ID, FirstName, LastName, Occupation, Location, Country, Comments)');

        //CustomercollListItem = oList.getItems(camlQuery);

    }  

    ctx.load(CustomercollListItem);

    ctx.executeQueryAsync(Function.createDelegate(this, this.ongetQuerySucceeded), Function.createDelegate(this, this.ongetQueryFailed));

}

function ongetQuerySucceeded(sender, args) {

    var listItemInfo = '';

    var table = $("#tblCustomer");

    var innerHtml = "<tr><td>ID</td><td>First Name</td><td>Last Name</td><td>Occupation</td>      <td>Location</td><td>Country</td><td>Comments</td></tr>";

    var listItemEnumerator = CustomercollListItem.getEnumerator();

    while (listItemEnumerator.moveNext()) {

        var oListItem = listItemEnumerator.get_current();

        innerHtml += "<tr><td>" + oListItem.get_item('ID') + "</td><td>" + oListItem.get_item('FirstName') + "</td><td>" + oListItem.get_item('LastName') + "</td><td>" + oListItem.get_item('Occupation') + "</td><td>" + oListItem.get_item('Location') + "</td><td>" + oListItem.get_item('Country') + "</td><td>" + oListItem.get_item('Comments') + "</td></tr>";

    }

    table.html(innerHtml);

}

function ongetQueryFailed(sender, args) {

    $("#divGetCustomerdata").text("Operation failed  " + arguments[1].get_message());   

}

JavaScript JQuery and REST API Links

http://ramdotnetdeveloper.blogspot.in/2015/09/fill-dropdown-from-list-using-jsom-ecma.html


http://ramdotnetdeveloper.blogspot.in/2015/09/ecmascript-client-object-model-retrieve.html

Add record into SharePoint List using JavaScript

Add record into SharePoint List using JavaScript


HTML Control
  <div>
        <table>
        <tr>
            <td colspan="2" >
                <label style="width: 200px; height: 50px; font-size: large; font: bold;">Customer Details</label>
            </td>
        </tr>
            <tr>
                <td>
                    <label for="txtFirstName">First Name</label>
                </td>
                <td>
                    <input id="txtFirstName" type="text" name="txtFirstName" />
                </td>

            </tr>
            <tr>
                <td>
                    <label for="txtLastName">Last Name</label>
                </td>
                <td>
                    <input id="txtLastName" type="text" name="txtLastName" />
                </td>

            </tr>
            <tr>
                <td>
                    <label for="txtoccupation">Occupation:</label>
                </td>
                <td>
                    <input id="txtoccupation" type="text" name="txtoccupation" />
                </td>

            </tr>
            <tr>
                <td>
                    <label for="txtlocation">Location:</label>
                </td>
                <td>
                    <input id="txtlocation" type="text" name="txtlocation" />
                </td>

            </tr>
            <tr>
                <td>
                    <label for="ddlCountry">Country:</label>
                </td>
                <td>
                    <select id="ddlCountry" name="ddlCountry">
                        <option value="0" selected>Select</option>
                        <option value="India">India</option>
                        <option value="USA">USA</option>
                        <option value="UK">UK</option>
                        <option value="SA">SA</option>
                    </select>
                </td>

            </tr>


            <tr>
                <td>
                    <label for="txtComments">Comments:</label>
                </td>
                <td>
                    <textarea id="txtComments" name="txtComments" cols="40" rows="5"></textarea>
                </td>

            </tr>

            <tr>
                <td>
                    <input id="btnsumbit" type="submit" value="Add" />
                </td>
                <td>
                   <input id="btnCancel" type="submit" value="Cancel" onclick="" />
                </td>
            </tr>

        </table>

    </div>


JS File:-

var clientcontext;
var hostWebUrl;
var appWebUrl;
var AddCustomerID = 0;


$(document).ready(function () {
    hostWebUrl = decodeURIComponent(manageQueryStringParameter('SPHostUrl'));
    appWebUrl = decodeURIComponent(manageQueryStringParameter('SPAppWebUrl'));
    //Add method
    $("#btnsumbit").click(function () {
        AddItemsToList();
    });
   
});


//This function is used to get the hostweb url
function manageQueryStringParameter(paramToRetrieve) {
    var params =
    document.URL.split("?")[1].split("&");
    var strParams = "";
    for (var i = 0; i < params.length; i = i + 1) {
        var singleParam = params[i].split("=");
        if (singleParam[0] == paramToRetrieve) {
            return singleParam[1];
        }
    }
}


//Add List Item to SP host web
function AddItemsToList() {
    var ctx = new SP.ClientContext(appWebUrl);//Get the SharePoint Context object based upon the URL
    var appCtxSite = new SP.AppContextSite(ctx, hostWebUrl);
    var web = appCtxSite.get_web(); //Get the Site  
    var list = web.get_lists().getByTitle("Customer"); //Get the List based upon the Title
    var listCreationInformation = new SP.ListItemCreationInformation(); //Object for creating Item in the List
    var listItem = list.addItem(listCreationInformation);
    listItem.set_item("Title", $("#txtFirstName").val());
    listItem.set_item("FirstName", $("#txtFirstName").val());
    listItem.set_item("LastName", $("#txtLastName").val());
    listItem.set_item("Occupation", $("#txtoccupation").val());
    listItem.set_item("Location", $("#txtlocation").val());
    listItem.set_item("Country", $("#ddlCountry").val());
    //var selectedText = $("#ddlCountry").find("option:selected").text(); Mango
    //var selectedValue = $("#ddlCountry").val();  1
    listItem.set_item("Comments", $("#txtComments").val());
    listItem.update(); //Update the List Item
    //AddCustomerID = listItem.get_id();
    ctx.load(listItem);
    //Execute the batch Asynchronously
    ctx.executeQueryAsync(
    Function.createDelegate(this, success),
    Function.createDelegate(this, fail)
    );
}

function success() {
    //alert("Item added successfully");
    //alert('Item added successfully: ' + AddCustomerID);
    $("#divSubmitMessage").html("<div style= 'color:green'>Record has been submitted</div>");
    ClearFields();
}

function fail(sender, args) {
    //alert('Failed to get user name. Error:' + args.get_message());
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}


function ClearFields() {
    $('#txtFirstName').val('');
    $('#txtLastName').val('');
    $('#txtoccupation').val('');
    $('#txtlocation').val('');
    $('#ddlCountry').prop('selectedIndex', 0);  
    $('#txtComments').val('');
}

Clear the Control using Jquery

Clear the Control using Jquery

   <div>
        <table>
        <tr>
            <td colspan="2" >
                <label style="width: 200px; height: 50px; font-size: large; font: bold;">Customer Details</label>
            </td>
        </tr>
            <tr>
                <td>
                    <label for="txtFirstName">First Name</label>
                </td>
                <td>
                    <input id="txtFirstName" type="text" name="txtFirstName" />
                </td>

            </tr>
            <tr>
                <td>
                    <label for="txtLastName">Last Name</label>
                </td>
                <td>
                    <input id="txtLastName" type="text" name="txtLastName" />
                </td>

            </tr>
            <tr>
                <td>
                    <label for="txtoccupation">Occupation:</label>
                </td>
                <td>
                    <input id="txtoccupation" type="text" name="txtoccupation" />
                </td>

            </tr>
            <tr>
                <td>
                    <label for="txtlocation">Location:</label>
                </td>
                <td>
                    <input id="txtlocation" type="text" name="txtlocation" />
                </td>

            </tr>
            <tr>
                <td>
                    <label for="ddlCountry">Country:</label>
                </td>
                <td>
                    <select id="ddlCountry" name="ddlCountry">
                        <option value="0" selected>Select</option>
                        <option value="India">India</option>
                        <option value="USA">USA</option>
                        <option value="UK">UK</option>
                        <option value="SA">SA</option>
                    </select>
                </td>

            </tr>


            <tr>
                <td>
                    <label for="txtComments">Comments:</label>
                </td>
                <td>
                    <textarea id="txtComments" name="txtComments" cols="40" rows="5"></textarea>
                </td>

            </tr>

            <tr>
                <td>
                    <input id="btnsumbit" type="submit" value="Add" />
                </td>
                <td>
                   <input id="btnCancel" type="submit" value="Cancel" onclick="" />
                </td>
            </tr>

        </table>
    </div>




Clear the Control using Jquery


function ClearFields() {
    $('#txtFirstName').val('');
    $('#txtLastName').val('');
    $('#txtoccupation').val('');
    $('#txtlocation').val('');
    $('#ddlCountry').prop('selectedIndex', 0);  
    $('#txtComments').val('');
}