SharePoint Knockout js :- Get items from SharePoint List using Knockout js

1.Create a Custom List Name as "Emp" and Create a below Column Name

2.Create one Content Editor WebPart and  paste the below code

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>   
<script src="https://SiteCollectionUrl/sites/DevSite/Style%20Library/knockout-3.3.0.js"></script>   
<script src="https://SiteCollectionUrl/sites/DevSite/Style%20Library/ko.sp-1.0.min.js"></script>   

<script type="text/javascript"> 
function altRows(id){
if(document.getElementsByTagName){  

var table = document.getElementById(id);  
var rows = table.getElementsByTagName("tr"); 
 
for(i = 0; i < rows.length; i++){          
if(i % 2 == 0){
rows[i].className = "evenrowcolor";
}else{
rows[i].className = "oddrowcolor";
}      
}
}
}
window.onload=function(){
altRows('alternatecolor');
}
</script>

<style type="text/css">
table.altrowstable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #a9c6c9;
border-collapse: collapse;
}
table.altrowstable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table.altrowstable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
.oddrowcolor{
background-color:#d4e3e5;
}
.evenrowcolor{
background-color:#c3dde0;
}
</style>  

<script>   
   
    ExecuteOrDelayUntilScriptLoaded(MainFunction, "sp.js");   
    var completeEmployeeList = null;   
   
     
    function EmployeeList(title, firstname, lastname, location) {   
        var self = this;   
        self.Title = title;   
        self.FirstName = firstname;   
        self.LastName = lastname; 
        self.Location = location;   
    }   
       
    
    function EmployeeListViewModel() {   
        var self = this;   
       
        self.Employees = ko.observableArray([]);   
        self.AddEmployees = function (title, firstname, lastname, location) {   
            self.Employees.push(new EmployeeList(title, firstname, lastname, location));   
        }   
    }   
   
    function MainFunction() {   
        completeEmployeeList = new EmployeeListViewModel();             
        retrieveListItems();               
        ko.applyBindings(completeEmployeeList);   
    }   
   
    function retrieveListItems() {   
        var clientContext = new SP.ClientContext.get_current();   
        var oList = clientContext.get_web().get_lists().getByTitle('Emp');   
        var camlQuery = new SP.CamlQuery();   
        camlQuery.set_viewXml("<View><RowLimit>10</RowLimit></View>");   
        this.collListItem = oList.getItems(camlQuery);   
        clientContext.load(collListItem);   
        clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));   
    }   
   
    function onQuerySucceeded(sender, args) {   
        var listItemInfo = '';   
        var listItemEnumerator = collListItem.getEnumerator();   
        while (listItemEnumerator.moveNext()) {   
            var currentItem = listItemEnumerator.get_current();   
            completeEmployeeList.AddEmployees(currentItem.get_item("Title"), currentItem.get_item("FirstName"), currentItem.get_item("LastName"), currentItem.get_item("Location"));   
        }   
    }   
   
    function onQueryFailed(sender, args) {   
        alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());   
    }   
</script>   
   

<div id="divEmployeeList">   
   
    <h2>SharePoint with Knockout js Example</h2>   
    <br />   
   
  <table class="altrowstable" id="alternatecolor">
        <thead>   
            <tr>   
                <th>Title</th>   
                <th>FirstName</th>    
                <th>LastName</th>    
                <th>Location</th>   
            </tr>   
        </thead>   
        
        <tbody data-bind="foreach: Employees">   
            <tr>   
                <td data-bind="text: Title"></td>   
                <td data-bind="text: FirstName"></td> 
                <td data-bind="text: LastName"></td>    
                <td data-bind="text: Location"></td>   
            </tr>   
        </tbody>   
    </table>   

</div>  

output:- 

    

Continue Reading...

Add item to sharepoint apps using napa office 365 clientWebPart

1.Create a Custom List Name as "Emp" and Create a below Column Name

2.Paste the below code in ClientWebpart.aspx

<%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>
<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" language="C#" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<!-- The following tells SharePoint to allow this page to be hosted in an IFrame -->
<WebPartPages:AllowFraming runat="server" />

<html>
<head>
<!-- The following scripts are needed when using the SharePoint object model -->
<script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>

<!-- Add your CSS styles to the following file -->
<link rel="Stylesheet" type="text/css" href="../Content/App.css" />

<script type="text/javascript">
'use strict';

// Set the style of the client web part page to be consistent with the host web
(function () {
var hostUrl = '';
if (document.URL.indexOf('?') != -1) {
var params = document.URL.split('?')[1].split('&');
for (var i = 0; i < params.length; i++) {
var p = decodeURIComponent(params[i]);
if (/^SPHostUrl=/i.test(p)) {
hostUrl = p.split('=')[1];
document.write('<link rel="stylesheet" href="' + hostUrl + '/_layouts/15/defaultcss.ashx" />');
break;
}
}
}
if (hostUrl == '') {
document.write('<link rel="stylesheet" href="/_layouts/15/1033/styles/themable/corev15.css" />');
}
})();
</script>
</head>

<body>


<table align="center">
<tr>
<td>
<label>First Name</label>
</td>
<td>
<input id="firstname" type="text" />
</td>
</tr>
<tr>
<td>
<label>Last Name</label>
</td>
<td>
<input class="lastname type="text" />
</td>
</tr>
<tr>
<td>
<label>Location</label>
</td>
<td>
<input class="Location type="text" />
</td>
</tr>
<tr>
<td>
<input type="button" value="Save" onclick="SetEmpData();" />

</td>
</tr>
</table>
  
</body>
<script type="text/javascript">
    var context;
    var web;
    var list;
    var listitem;

  
    function SetEmpData()
    {
            context = SP.ClientContext.get_current();
            var url = "https://sharepoint22.sharepoint.com/sites/DevSite";
            var parentCtx = new SP.AppContextSite(context, url);
            web = parentCtx.get_web();
            context.load(web);
            list = web.get_lists().getByTitle('Emp');
            var itemCreateInfo = new SP.ListItemCreationInformation();
            var listItem = list.addItem(itemCreateInfo);
listItem.set_item("Title","Mr");
            listItem.set_item("FirstName", $('#firstname').val());  
            listItem.set_item("LastName", $('.lastname').val());  
listItem.set_item("Location", $('.Location').val());
            listItem.update();
            context.load(listItem);
            context.executeQueryAsync(
                    Function.createDelegate(this, this.onQuerySucceeded),
                    Function.createDelegate(this, this.onQueryFailed)
            );
        }

    function onQuerySucceeded(sender, args) {
        alert('Item Added SuccessFully');
    }

    function onQueryFailed(sender, args) {
        alert(args.get_message());
      
    }

</script>


</html>

 

3.output 

Continue Reading...

Programmatically Get items from sharepoint list in sharepoint apps using Napa office 365 tool

1.Create a Custom List Name as "Emp" and Create a below Column Name

2.Paste the below code in Default.aspx

<%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>

<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>

<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%-- The markup and script in the following Content element will be placed in the <head> of the page --%>

<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">

<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>

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

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

<!-- Add your CSS styles to the following file -->

<link rel="Stylesheet" type="text/css" href="../Content/App.css" />

<style type="text/css">

.myOtherTable { background-color:#FFFFE0;border-collapse:collapse;color:#000;font-size:18px; }

.myOtherTable th { background-color:#BDB76B;color:white;width:32%; }

.myOtherTable td, .myOtherTable th { padding:5px;border:0; }

.myOtherTable td { border-bottom:1px dotted #BDB76B; }

</style>

<!-- Add your JavaScript to the following file -->

<script type="text/javascript" src="../Scripts/App.js"></script>

</asp:Content>

<%-- The markup in the following Content element will be placed in the TitleArea of the page --%>

<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">

Page Title

</asp:Content>

<%-- The markup and script in the following Content element will be placed in the <body> of the page --%>

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

<h2>Get Items</h2>

<div class="EmpInfo" style="margin-top:10px;">

</div>

</asp:Content>

3.Paste the below code in  App.js 

'use strict';

    var hostweburl;

    var appweburl;

var sFullHtml = '';

    $(document).ready(function () {

     

        hostweburl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));

        appweburl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));

      

        var scriptbase = hostweburl + "/_layouts/15/";

       

        $.getScript(scriptbase + "SP.RequestExecutor.js", loadPage);

    });

   

    function getQueryStringParameter(paramToRetrieve) {

        var params = document.URL.split("?")[1].split("&");

        for (var i = 0; i < params.length; i = i + 1) {

            var singleParam = params[i].split("=");

            if (singleParam[0] == paramToRetrieve) return singleParam[1];

        }

    }

    function loadPage() {

       getListItems();

}

    //Retrieve all of the list items

    function getListItems() {

        var executor;

      

        executor = new SP.RequestExecutor(appweburl);

        executor.executeAsync({

            url: appweburl + "/_api/SP.AppContextSite(@target)/web/lists/getbytitle('Emp')/items?@target='" + hostweburl + "'",

            method: "GET",

            headers: {

                "Accept": "application/json; odata=verbose"

            },

            success: getListItemsSuccessHandler,

            error: getListItemsErrorHandler

        });

    }

    //Populate the selectListItems control after retrieving all of the list items.

    function getListItemsSuccessHandler(data) {

        var jsonObject = JSON.parse(data.body);

   var results = jsonObject.d.results;

sFullHtml += '<table id="TblEmpInfo" class="myOtherTable" >';

sFullHtml += ' <tr >';

sFullHtml += ' <th>First Name</th>';

sFullHtml += ' <th>Last Name</th>';

sFullHtml += ' <th>Location</th>';

sFullHtml += ' </tr>';

        for (var i = 0; i < results.length; i++) {

           

var Title=results[i].Title;

var Fname=results[i].FirstName;

var Lname=results[i].LastName;

var Location=results[i].Location;

 

sFullHtml += '<tr>';

                    sFullHtml += '<td align="left" valign="top">'+ Fname +'</td>';

                    sFullHtml += '<td align="left" valign="top">'+ Lname  +'</td>';

                    sFullHtml += '<td align="left" valign="top">'+ Location  +'</td>';

sFullHtml += '</tr>';

            

          

        }

sFullHtml += '</table>';

$(".EmpInfo").html(sFullHtml);

    }

    function getListItemsErrorHandler(data, errorCode, errorMessage) {

        alert("Could not get list items: " + errorMessage);

    }

4.After Publishing the App the output will look like this 

Continue Reading...