Sunday, July 18, 2021

JSON Create List Item Script Editor Webpart

JSON Create List Item  - Script Editor Web part (5000 Records)


<button onclick="CreateListItem();" type="button">Click me​</button>

 

<script src="https://code.jquery.com/jquery-2.2.4.js" type="text/javascript"></script>

<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>

<script type="text/javascript" src="/_layouts/15/sp.js"></script>

 

<script type="text/javascript">

    function CreateListItem() {

        alert('Updating Data');

        try

        {           

 // You can optionally specify the Site URL here to get the context

            // If you don't specify the URL, the method will get the context of the current site

            // var clientContext = new SP.ClientContext("http://MyServer/sites/SiteCollection");

            var clientContext = new SP.ClientContext(); 

            var oWeb = clientContext.get_web(); 

            // Specify list title here

            var oList = oWeb.get_lists().getByTitle("Employee");

             // Get Item using CAML Query

           // var camlQuery = new SP.CamlQuery(); 

            // New "ListItemCreationInformation" Object 

            // Set value for each column here

            //oListItem.set_item('Title', 'New item value');

            //oListItem.set_item('Notes', 'This is dummy data');

            for (var i = 0; i < 5000; i++) {

                var oListItemCreationInformation = new SP.ListItemCreationInformation();

                var item = oList.addItem(oListItemCreationInformation);

                item.set_item("Name", "Test Title " + i);

                if (i < 20) {

                    item.set_item("Age", 25);

                    item.set_item("Salary", 25000 + i);

                }

                else if (i > 20 && i < 100) {

                    item.set_item("Age", 30);

                    item.set_item("Salary", 25000 + i);

                }

                else {

                    item.set_item("Age", 35);

                    item.set_item("Salary", 25000 + i);

                }

                item.set_item("Office", "Office  " + i);

                item.set_item("Position", "Position  " + i); 

                item.set_item("Title", "Title  " + i);

                item["StartDate"] = Date.now();

                item.update();  

                clientContext.load(item); 

                // Execute the query to the server.

                clientContext.executeQueryAsync(onsuccess, onfailed);

            }

        }

        catch (ex) {

            alert(ex.message);

        }

    }

 

    function onsuccess() {

      //  console.log("Success");

    }

 

    function onfailed(sender, args) {

        console.log('Failed' + args.get_message() + '\n' + args.get_stackTrace());

    }

</script>



// Bind All above list items to JQUery Data table:


<!DOCTYPE html>  
<html>  
<head>  
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>      
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>  
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">  
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables.jqueryui.min.css">    
</head>

<script type="text/javascript">
$(document).ready(function() {  
    loadItems();  
});  
  

function loadItems() {  
    var siteUrl = _spPageContextInfo.siteAbsoluteUrl;  

    var oDataUrl = siteUrl + "/_api/web/lists/getbytitle('Employee')/items?$select=Title,Position,Office,Age,StartDate&$top=5000"
    
    debugger;
    $.ajax({  
        url: oDataUrl,  
        type: "GET",  
        dataType: "json",  
        headers: {  
            "accept": "application/json;odata=verbose"  
        },  
        success: mySuccHandler,  
        error: myErrHandler  
    });  
}  

function mySuccHandler(data) {  
    try {  
        debugger;
        $('#table_id').DataTable({  
            
            "aaData": data.d.results,  
            "aoColumns": [
            {  
                "mData": "Title"  
            }, 
            {  
                "mData": "Position"  
            }, 
            {  
                "mData": "Office"  
            }, 
            {  
                "mData": "Age"  
            },
            {  
                "mData": "StartDate"  
            }           
            ]  
        });  
    } catch (e) {  
        alert(e.message);  
    }  
}  
  
function myErrHandler(dataerrMessage) {  
    alert("Error: " + errMessage);  

</script>





<body>  
   <div>  
    <table id="table_id" class="display" cellspacing="0" width="100%">  
        <thead>  
            <tr>  
                <th>Name</th>  
                <th>Position</th>  
                <th>Office</th>  
                <th>Age</th>  
                <th>StartDate</th>          
            </tr>  
        </thead>  
        <tfoot>
            <tr>  
                <th>Name</th>  
                <th>Position</th>  
                <th>Office</th>  
                <th>Age</th>  
                <th>StartDate</th>                 
            </tr> 
        </tfoot>  
    </table>  
    </div>  
</body>  
</html>  

 


No comments:

Post a Comment