SharePoint Online: Completing Basic
Operations using NAPA tool
2013
FLEXMIND SOLUTIONS
WWW.FLEXMINDSOLUTIONS.COM
FLEXMIND ...
In this Article we are going to show you how we can perform CRUD operation in SharePoint online using
NAPA tool.
Napa tool...
Open the Napa development tool, this will ask to create a new project or you can work on previously
existing project
In th...
When you try to run your application, it will appear something like this
Add a JavaScript file and name it as AppWeb.js.
A...
In the script shown below we are calling JavaScript anonymous function, which will be called when
Default.aspx page loaded...
createitem();
event.preventDefault();
});
$("#deleteitembutton").click(function (event) {
deleteitem();
event.preventDefau...
context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
}
// This function is executed if the above call is su...
listCreationInfo.set_title(listTitle);
listCreationInfo.set_templateType(SP.ListTemplateType.genericList);
lists = web.get...
// Refresh the list of items.
getitems();
}
functiononItemCreationFail(sender, args) {
// The item couldn’t be created – d...
functiononGetItemsSuccess(sender, args) {
// The list items were retrieved.
// Show all child nodes.
varlistItemEnumerator...
Now here we will create a new list say name it as “Contacts” and then click on create list
Now let’s add a new item to the list Contacts, in the JavaScript code shown above there we are adding
item to the Title fi...
alert(hostweburl);
alert(appweburl);
varscriptbase = hostweburl + '/_layouts/15/';
$.getScript(scriptbase+'SP.Runtime.js',...
functiononQueryFailed(sender, args) {
alert('Request failed. ' +args.get_message() +
'n' + args.get_stackTrace());
}
}
fun...
Upcoming SlideShare
Loading in …5
×

Sharepoint Online App development using NAPA Tool.

2,516 views
2,306 views

Published on

This Slide will explain that how we can create a basic CRUD operation in SharePoint Online 2013 using NAPA tool. it uses JSOM to fetch the data from sites.

Published in: Technology, Design
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
2,516
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
40
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Sharepoint Online App development using NAPA Tool.

  1. 1. SharePoint Online: Completing Basic Operations using NAPA tool 2013 FLEXMIND SOLUTIONS WWW.FLEXMINDSOLUTIONS.COM FLEXMIND SOLUTIONS | www.flexmindsolutions.com
  2. 2. In this Article we are going to show you how we can perform CRUD operation in SharePoint online using NAPA tool. Napa tool SharePoint online development, -- how to install it Create the list in the app web – Performing read write update operation Then trying to read the list item from host URL Then to work on client web part to show the detail Ref: http://msdn.microsoft.com/en-us/library/jj163201.aspx http://msdn.microsoft.com/en-us/library/jj163201.aspx http://msdn.microsoft.com/en-us/library/fp179912.aspx http://msdn.microsoft.com/en-us/library/office/apps/jj164022.aspx http://blogs.msdn.com/b/uksharepoint/archive/2013/02/22/manipulating-list-items-in-sharepoint- hosted-apps-using-the-rest-api.aspx
  3. 3. Open the Napa development tool, this will ask to create a new project or you can work on previously existing project In this blog, I am going to discuss about the basicCreate, Read and Delete operationon the list created in the app web hosted on the hosted SharePoint developer site. Check the Napa online developer tool, how the content is organized for you before you began with the development, here we have Content folder where you can put in all the Custom CSS, Images, Pages which contain default.aspx which is set up as a start page to run when the app is loaded and finally the script folder which contain all the script. Office 365 SharePoint farm, support only SharePoint hosted app model, so application development done here is using JavaScript (with the SharePoint 2013 JSOM library) and HTML Open the default.aspx and add the following content to it.
  4. 4. When you try to run your application, it will appear something like this Add a JavaScript file and name it as AppWeb.js. Add this JavaScript reference to the default.aspx like this:
  5. 5. In the script shown below we are calling JavaScript anonymous function, which will be called when Default.aspx page loaded. 'use strict'; var context = SP.ClientContext.get_current(); var user = context.get_web().get_currentUser(); var web = context.get_web(); var lists = web.get_lists(); varlistItemCollection; varhostweburl; (function () { // This code runs when the DOM is ready and creates a context object which is // needed to use the SharePoint object model $(document).ready(function () { hostweburl = decodeURIComponent( getQueryStringParameter("SPHostUrl")); //alert(hostweburl); getUserName(); $("#getListCount").click(function (event) { getWebProperties(); event.preventDefault(); }); $("#createlistbutton").click(function (event) { createlist(); event.preventDefault(); }); $("#deletelistbutton").click(function (event) { deletelist(); event.preventDefault(); }); displayLists(); $("#createitembutton").click(function (event) {
  6. 6. createitem(); event.preventDefault(); }); $("#deleteitembutton").click(function (event) { deleteitem(); event.preventDefault(); }); // Update the list items dropdown when a new list // is selected in the Lists dropdown. $("#selectlistbox").change(function (event) { getitems(); event.preventDefault(); }); }); //SP.SOD.executeFunc('core.js', 'SP.ClientContext', createHostWebURLofAPP); functiongetQueryStringParameter(paramToRetrieve) { varparams = document.URL.split("?")[1].split("&"); varstrParams = ""; for (vari = 0; i<params.length; i = i + 1) { varsingleParam = params[i].split("="); if (singleParam[0] == paramToRetrieve) returnsingleParam[1]; } } functiongetWebProperties() { // Get the number of lists in the current web. context.load(web); context.load(lists); context.executeQueryAsync(onWebPropsSuccess, onWebPropsFail); } functiononWebPropsSuccess(sender, args) { alert('Number of lists in web: ' + lists.get_count() + web.get_url()); } functiononWebPropsFail(sender, args) { alert('Failed to get list. Error: ' + args.get_message()); } // This function prepares, loads, and then executes a SharePoint query to get // the current users information functiongetUserName() { context.load(user);
  7. 7. context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail); } // This function is executed if the above call is successful // It replaces the contents of the 'message' element with the user name functiononGetUserNameSuccess() { $('#message').text('Hello ' + user.get_title()); } // This function is executed if the above call fails functiononGetUserNameFail(sender, args) { alert('Failed to get user name. Error:' + args.get_message()); } functiondisplayLists() { // Get the available SharePoint lists, and then set them into // the context. lists = web.get_lists(); context.load(lists); context.executeQueryAsync(onGetListsSuccess, onGetListsFail); } functiononGetListsSuccess(sender, args) { // Success getting the lists. Set references to the list // elements and the list of available lists. varlistEnumerator = lists.getEnumerator(); varselectListBox = document.getElementById("selectlistbox"); if (selectListBox.hasChildNodes()) { while (selectListBox.childNodes.length>= 1) { selectListBox.removeChild(selectListBox.firstChild); } } // Traverse the elements of the collection, and load the name of // each list into the dropdown list box. while (listEnumerator.moveNext()) { varselectOption = document.createElement("option"); selectOption.value = listEnumerator.get_current().get_title(); selectOption.innerHTML = listEnumerator.get_current().get_title(); selectListBox.appendChild(selectOption); } } functiononGetListsFail(sender, args) { // Lists couldn’t be loaded - display error. alert('Failed to get list. Error: ' + args.get_message()); } functioncreatelist() { // Create a generic SharePoint list with the name that the user specifies. varlistCreationInfo = newSP.ListCreationInformation(); varlistTitle = document.getElementById("createlistbox").value;
  8. 8. listCreationInfo.set_title(listTitle); listCreationInfo.set_templateType(SP.ListTemplateType.genericList); lists = web.get_lists(); varnewList = lists.add(listCreationInfo); context.load(newList); context.executeQueryAsync(onListCreationSuccess, onListCreationFail); } functiononListCreationSuccess() { displayLists(); } functiononListCreationFail(sender, args) { alert('Failed to create the list. ' +args.get_message()); } functiondeletelist() { // Delete the list that the user specifies. varselectListBox = document.getElementById("selectlistbox"); varselectedListTitle = selectListBox.value; varselectedList = web.get_lists().getByTitle(selectedListTitle); selectedList.deleteObject(); context.executeQueryAsync(onDeleteListSuccess, onDeleteListFail); } functiononDeleteListSuccess() { displayLists(); } functiononDeleteListFail(sender, args) { alert('Failed to delete the list. ' +args.get_message()); } functioncreateitem() { // Retrieve the list that the user chose, and add an item to it. varselectListBox = document.getElementById("selectlistbox"); varselectedListTitle = selectListBox.value; varselectedList = web.get_lists().getByTitle(selectedListTitle); varlistItemCreationInfo = newSP.ListItemCreationInformation(); varnewItem = selectedList.addItem(listItemCreationInfo); varlistItemTitle = document.getElementById("createitembox").value; newItem.set_item('Title', listItemTitle); newItem.update(); context.load(newItem); context.executeQueryAsync(onItemCreationSuccess, onItemCreationFail); } functiononItemCreationSuccess() {
  9. 9. // Refresh the list of items. getitems(); } functiononItemCreationFail(sender, args) { // The item couldn’t be created – display an error message. alert('Failed to create the item. ' +args.get_message()); } functiondeleteitem() { // Delete the item that the user chose. varselectListBox = document.getElementById("selectlistbox"); varselectedListTitle = selectListBox.value; varselectedList = web.get_lists().getByTitle(selectedListTitle); varselectItemBox = document.getElementById("selectitembox"); varselectedItemID = selectItemBox.value; varselectedItem = selectedList.getItemById(selectedItemID); selectedItem.deleteObject(); selectedList.update(); context.load(selectedList); context.executeQueryAsync(onDeleteItemSuccess, onDeleteItemFail); } functiononDeleteItemSuccess() { // Refresh the list of items. getitems(); } functiononDeleteItemFail(sender, args) { // The item couldn’t be deleted – display an error message. alert('Failed to delete the item. ' +args.get_message()); } functiongetitems() { // Using a CAML query, get the items in the list that the user chose, and // set the context to the collection of list items. varselectListBox = document.getElementById("selectlistbox"); varselectedList = selectListBox.value; varselectedListTitle = web.get_lists().getByTitle(selectedList); varcamlQuery = newSP.CamlQuery(); camlQuery.set_viewXml("<View><ViewFields>" + "<FieldRef Name='ID' />" + "<FieldRef Name='Title' />" + "</ViewFields></View>')"); listItemCollection = selectedListTitle.getItems(camlQuery); context.load(listItemCollection, "Include(Title, ID)"); context.executeQueryAsync(onGetItemsSuccess, onGetItemsFail); }
  10. 10. functiononGetItemsSuccess(sender, args) { // The list items were retrieved. // Show all child nodes. varlistItemEnumerator = listItemCollection.getEnumerator(); varselectItemBox = document.getElementById("selectitembox"); if (selectItemBox.hasChildNodes()) { while (selectItemBox.childNodes.length>= 1) { selectItemBox.removeChild(selectItemBox.firstChild); } } while (listItemEnumerator.moveNext()) { varselectOption = document.createElement("option"); selectOption.value = listItemEnumerator.get_current().get_item('ID'); selectOption.innerHTML = listItemEnumerator.get_current().get_item('Title'); selectItemBox.appendChild(selectOption); } } functiononGetItemsFail(sender, args) { // The list items couldn’t be retrieved - display an error message. alert('Failed to get items. Error: ' + args.get_message()); } })(); When you run the project it will upload the new app package to your SharePoint online developer hosted web and open up App Web page
  11. 11. Now here we will create a new list say name it as “Contacts” and then click on create list
  12. 12. Now let’s add a new item to the list Contacts, in the JavaScript code shown above there we are adding item to the Title field only. Similarly we can delete the item from the list, select the item from the drop and click on Delete Selected item Update? To read the data from list in the hosting web from app web: 'use strict'; varhostweburl; varappweburl; varclientContext; $(document).ready(function () { hostweburl = decodeURIComponent( getQueryStringParameter("SPHostUrl")); appweburl = decodeURIComponent( getQueryStringParameter('SPAppWebUrl') );
  13. 13. alert(hostweburl); alert(appweburl); varscriptbase = hostweburl + '/_layouts/15/'; $.getScript(scriptbase+'SP.Runtime.js',function(){ $.getScript(scriptbase + 'SP.js', function () { $.getScript(scriptbase + 'SP.RequestExecutor.js', createHostWebURLofAPP); } );}); }); functioncreateHostWebURLofAPP() { var factory; varappContextSite; varcollList; clientContext= newSP.ClientContext(appweburl); factory = newSP.ProxyWebRequestExecutorFactory(appweburl); clientContext.set_webRequestExecutorFactory(factory); appContextSite = newSP.AppContextSite(clientContext, hostweburl); this.web = appContextSite.get_web(); collList = this.web.get_lists(); clientContext.load(this.web); clientContext.load(collList); // // alert(hostweburl); // clientContext.executeQueryAsync(onQuerySucceeded, onQueryFailed); clientContext.executeQueryAsync(Function.createDelegate(this, onQuerySucceeded), Function.createDelegate(this, onQueryFailed)); functiononQuerySucceeded() { varlistInfo = ''; varlistEnumerator = collList.getEnumerator(); while (listEnumerator.moveNext()) { varoList = listEnumerator.get_current(); listInfo += '<li>' + oList.get_title() + '</li>'; } alert('Title: ' + this.web.get_title() + ' Description: ' + this.web.get_description()); }
  14. 14. functiononQueryFailed(sender, args) { alert('Request failed. ' +args.get_message() + 'n' + args.get_stackTrace()); } } functiongetQueryStringParameter(paramToRetrieve) { varparams = document.URL.split("?")[1].split("&"); varstrParams = ""; for (vari = 0; i<params.length; i = i + 1) { varsingleParam = params[i].split("="); if (singleParam[0] == paramToRetrieve) returnsingleParam[1]; } }

×