Sithik Blog's: Programmatically Get items from sharepoint list in sharepoint apps using Napa office 365 tool

By: Unknown on 22:16

Share it Please

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">

.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>

</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>

</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

Sithik Blog's

Friday, 13 February 2015

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

Share it Please

1 comment:

Followers

Follow The Author