My First NAPA App - o365 SP2013 Preview

What is NAPA ???

 

NAPA is the easiest way to start building apps for the new Cloud App Model introduced in SP2013. You can think of it as a super simple development environment with no installations on the local machines & an online companion to Visual Studio. This is a free app for SharePoint to facilitate rapid application development.

App Model - what is it?

Within the last decade the Internet has evolved tremendously from simple pages to robust social sites that support loosely coupled yet highly integrated third party apps. From the beginning of SharePoint to today, SharePoint has also made significant changes from being a portal site to our newest release. SharePoint 2013.

 

For the developer and ultimately benefiting the user, SharePoint 2013 has made a significant investments to provide a new way to bring custom solutions to users with the new web standards based cloud app model that are easily discoverable and yet will give IT and developers peace of mind knowing that they can scale, are safely isolated from SharePoint yet can leverage the full capabilities of SharePoint.

 

 

One of the new features of SharePoint 2013 development model is the App model. Using this new App model, developers can easily extend SharePoint 2013 and build great apps that integrate with the numerous services. Today web is filled with many services i.e.

Financial data, WikiPedia, Bing Search and Maps etc.  Even SharePoint, Dynamics CRM can provide data for us. This model make it easy for developers to integrate these services into SharePoint for consumption and build solutions that solves specific user needs.

Apps enable SharePoint 2013 users to extend the capabilities of SharePoint 2013 to address specific business needs by allowing users to connect to data and services both from within an organization as well as in the public cloud.

How is it different that what was offered before in SP2010?

The new cloud app model gives the developer the freedom of choice in how they implement apps for SharePoint. No longer are you tied to writing on top of the SharePoint platform, now you can write along-side it with the tools and web hosting platforms of your choice… Whether it is on premise or in the cloud… Whether the platform is IIS/ASP.NET, a part of the Windows Azure family of hosting options or a non-Microsoft web hosting platform.  The final choice is up to you.

 

 

Now we have had WebParts and the like for SharePoint for some time and we can provide similar experiences creating full-trust and sandbox solutions.  The issue is that these apps are tightly integrated with the platform and require some amount of touch to insure as technology advances that our customizations can advance with it.  This is were apps differ, apps are loosely coupled and not dependent on the SharePoint as a platform, but dependent on SharePoint as a service. Apps execute “off-server”, hence they don’t actually run on the SharePoint box but instead are hosted in their own hosting environment which could be the browser, a Window Azure service, ASP.NET or even a non-Microsoft web hosting platform such as Linux or Amazon Web Services.

 

 Life cycle for app for SharePoint development :

 

Developement - Let's build our very first Napa App on the cloud:

Create a new SP2013 preview account by following the instructions here

 

The Team site that is provisioned by default, Let's try to add NAPA app.

 

 

 

 

 

 

 

 

 

You will see that it does not get added. Don't panic yet,  Go to see the details of the error.

 

So we need a site with a developer template / developer features turned on. Hence I go ahead and create a new developer Site. 

 

 

 

 

 

And YAY it gets added !!

 

 

 

 

 

Now, Let's create a new Project:

 

 

 

 

 

 

 

 

 

 

Some changes that we need to do in the 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 src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js" type="text/javascript">>/script>
	<!-- Add your CSS styles to the following file -->
	<link rel="Stylesheet" type="text/css" href="../Content/App.css" />
	<!-- Add your JavaScript to the following file -->
	<script type="text/javascript" src="../Scripts/App.js">>/script>
	</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">
	<div>
	<p id="message">
	<!-- The following content will be replaced with the user name when you run the app - see App.js -->
	initializing...
	</p>
	</div>
	<br />
	<div>
	<button id="getListCount">Get count of lists in web>/button>
	</div>
	<br />
	<div id="starter">
	<input type="text" value="List name here" id="createlistbox"/>>button id="createlistbutton">Create List>/button>
	<p>
	Lists
	<br />
	<select id="selectlistbox" onchange="getitems()">>/select><button id="deletelistbutton">Delete Selected List>/button>
	<p>
	Items
	<br />
	<input type="text" value="item name here" id="createitembox"/>>button id="createitembutton">Create Item>/button>
	</p>
	<p>
	<select id="selectitembox">>/select><button id="deleteitembutton">Delete Selected Item>/button>
	</p>
	</p>
	</div>
	</asp:Content>

view raw gistfile1.html hosted with ❤ by GitHub

 

And Now changes to App.js file

	var context;
	var web;
	var user;
	// This code runs when the DOM is ready. It ensures the SharePoint
	// script file sp.js is loaded and then executes sharePointReady()
	$(document).ready(function () {
	SP.SOD.executeFunc('sp.js', 'SP.ClientContext', sharePointReady);
	});
	// This function creates a context object which is needed to use the SharePoint object model
	function sharePointReady() {
	context = new SP.ClientContext.get_current();
	web = context.get_web();
	getUserName();
	$("#getListCount").click(function (event) {
	getWebProperties();
	event.preventDefault();
	});
	$("#createlistbutton").click(function (event) {
	createlist();
	event.preventDefault();
	});
	$("#deletelistbutton").click(function (event) {
	deletelist();
	event.preventDefault();
	});
	welcome();
	displayLists();
	$("#createitembutton").click(function (event) {
	createitem();
	event.preventDefault();
	});
	$("#deleteitembutton").click(function (event) {
	deleteitem();
	event.preventDefault();
	});
	}
	function welcome() {
	// Get the user information, and try to load it into the current
	// context.
	this.web = context.get_web();
	this.user = web.get_currentUser();
	this.context.load(user);
	this.context.executeQueryAsync(onUserReqSuccess, onUserReqFail);
	}
	function onUserReqSuccess() {
	// The current user information is loaded into the context – continue.
	}
	function onUserReqFail(sender, args) {
	// The current user information couldn’t be loaded into the context - display an
	// error.
	alert('Failed to find current user. ' + args.get_message());
	}
	function getWebProperties() {
	// Get the number of lists in the current web.
	this.web = context.get_web();
	this.lists = this.web.get_lists();
	this.context.load(this.lists);
	this.context.executeQueryAsync(Function.createDelegate(this, this.onWebPropsSuccess), Function.createDelegate(this, this.onWebPropsFail));
	}
	function onWebPropsSuccess(sender, args) {
	alert('Number of lists in web: ' + this.lists.get_count());
	}
	function onWebPropsFail(sender, args) {
	alert('failed to get list. Error:' + args.get_message());
	}
	function displayLists() {
	// Get the available SharePoint lists, and then set them into
	// the context.
	this.web = context.get_web();
	this.lists = this.web.get_lists();
	this.context.load(this.lists);
	this.context.executeQueryAsync(Function.createDelegate(this, this.onGetListsSuccess), Function.createDelegate(this, this.onGetListsFail));
	}
	function onGetListsSuccess(sender, args) {
	// Success getting the lists. Set references to the list
	// elements and the list of available lists.
	var listEnumerator = this.lists.getEnumerator();
	var selectListBox = 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()) {
	var selectOption = document.createElement("option");
	selectOption.value = listEnumerator.get_current().get_title();
	selectOption.innerText = listEnumerator.get_current().get_title();
	selectListBox.appendChild(selectOption);
	}
	}
	function onGetListsFail(sender, args) {
	// Lists couldn’t be loaded - display error.
	alert('failed to get list. Error:' + args.get_message());
	}
	function createlist() {
	// Create a generic SharePoint list with the name that the user specifies.
	this.web = context.get_web();
	var listCreationInfo = new SP.ListCreationInformation();
	var listTitle = document.getElementById("createlistbox").value;
	listCreationInfo.set_title(listTitle);
	listCreationInfo.set_templateType(SP.ListTemplateType.genericList);
	this.lists = web.get_lists();
	var newList = this.lists.add(listCreationInfo);
	context.load(newList);
	context.executeQueryAsync(onListCreationSuccess, onListCreationFail);
	}
	function onListCreationSuccess() {
	displayLists();
	}
	function onListCreationFail(sender, args) {
	alert('Failed to create the list.' + args.get_message());
	}
	function deletelist() {
	// Delete the list that the user specifies.
	this.web = context.get_web();
	var selectListBox = document.getElementById("selectlistbox");
	var selectedListTitle = selectListBox.value;
	var selectedList = web.get_lists().getByTitle(selectedListTitle);
	selectedList.deleteObject();
	context.executeQueryAsync(onDeleteListSuccess, onDeleteListFail);
	}
	function onDeleteListSuccess() {
	displayLists();
	}
	function onDeleteListFail(sender, args) {
	alert('Failed to delete the list.' + args.get_message());
	}
	// This function prepares, loads, and then executes a SharePoint query to get the current users information
	function getUserName() {
	user = web.get_currentUser();
	context.load(user);
	context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
	}
	// This function is executed if the above call is successful
	// It replaces the contents of the 'helloString' element with the user name
	function onGetUserNameSuccess() {
	$('#message').text('Hello ' + user.get_title());
	}
	// This function is executed if the above call fails
	function onGetUserNameFail(sender, args) {
	alert('Failed to get user name. Error:' + args.get_message());
	}
	function createitem() {
	// Retrieve the list that the user chose, and add an item to it.
	this.web = context.get_web();
	var selectListBox = document.getElementById("selectlistbox");
	var selectedListTitle = selectListBox.value;
	var selectedList = web.get_lists().getByTitle(selectedListTitle);
	var listItemCreationInfo = new SP.ListItemCreationInformation();
	var newItem = selectedList.addItem(listItemCreationInfo);
	var listItemTitle = document.getElementById("createitembox").value;
	newItem.set_item('Title', listItemTitle);
	newItem.update();
	context.load(newItem);
	context.executeQueryAsync(onItemCreationSuccess, onItemCreationFail);
	}
	function onItemCreationSuccess() {
	// Refresh the list of items.
	getitems();
	}
	function onItemCreationFail(sender, args) {
	// The item couldn’t be created – display an error message.
	alert('Failed to create the item.' + args.get_message());
	}
	function deleteitem() {
	// Delete the item that the user chose.
	this.web = context.get_web();
	var selectListBox = document.getElementById("selectlistbox");
	var selectedListTitle = selectListBox.value;
	var selectedList = web.get_lists().getByTitle(selectedListTitle);
	var selectItemBox = document.getElementById("selectitembox");
	var selectedItemID = selectItemBox.value;
	var selectedItem = selectedList.getItemById(selectedItemID);
	selectedItem.deleteObject();
	selectedList.update();
	context.load(selectedList);
	context.executeQueryAsync(onDeleteItemSuccess, onDeleteItemFail);
	}
	function onDeleteItemSuccess() {
	// Refresh the list of items.
	getitems();
	}
	function onDeleteItemFail(sender, args) {
	// The item couldn’t be deleted – display an error message.
	alert('Failed to delete the item.' + args.get_message());
	}
	function getitems() {
	// Using a CAML query, get the items in the list that the user chose, and
	// set the context to the collection of list items.
	this.web = context.get_web();
	var selectListBox = document.getElementById("selectlistbox");
	var selectedList = selectListBox.value;
	var selectedListTitle = web.get_lists().getByTitle(selectedList);
	var camlQuery = new SP.CamlQuery();
	camlQuery.set_viewXml("<View><ViewFields>" +
	"<FieldRef Name='ID' />" +
	"<FieldRef Name='Title' />" +
	"</ViewFields></View>')");
	this.listItemCollection = selectedListTitle.getItems(camlQuery);
	context.load(this.listItemCollection, "Include(Title, ID)");
	context.executeQueryAsync(Function.createDelegate(this, this.onGetItemsSuccess), Function.createDelegate(this, this.onGetItemsFail));
	}
	function onGetItemsSuccess(sender, args) {
	// The list items were retrieved.
	// Show all child nodes.
	var listItemEnumerator = this.listItemCollection.getEnumerator();
	var selectItemBox = document.getElementById("selectitembox");
	if (selectItemBox.hasChildNodes()) {
	while (selectItemBox.childNodes.length >= 1) {
	selectItemBox.removeChild(selectItemBox.firstChild);
	}
	}
	while (listItemEnumerator.moveNext()) {
	var selectOption = document.createElement("option");
	selectOption.value = listItemEnumerator.get_current().get_item('ID');
	selectOption.innerText = listItemEnumerator.get_current().get_item('Title');
	selectItemBox.appendChild(selectOption);
	}
	}
	function onGetItemsFail(sender, args) {
	// The list items couldn’t be retrieved - display an error message.
	alert('failed to get items. Error:' + args.get_message());
	}

view raw gistfile1.js hosted with ❤ by GitHub

To Change the look and feel of the site changes can be done to our App.css

The O/P looks as below:

I added the code for an embedded Bing map

 <p>A simple embedded map.</p>  
    <iframe width="400" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"  
      src="http://dev.virtualearth.net/embeddedMap/v1/silverlight/aerial?zoomLevel=10&center=47.5_-122.5&pushpins=47.5_-122.5"/>  

 

The app is ready for testing and starts appearing in your gallery

 

 

A couple of items that I tried to add to my NAPA app are below for reference using JavaScript Client Object Model

1. Add a People picker to your page:

 Changes to the App.js file

 

	// Run your custom code when the DOM is ready.
	$(document).ready(function () {
	// Specify the unique ID of the DOM element where the
	// picker will render.
	initializePeoplePicker('peoplePickerDiv');
	});
	// Render and initialize the client-side People Picker.
	function initializePeoplePicker(peoplePickerElementId) {
	// Create a schema to store picker properties, and set the properties.
	var schema = {};
	schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
	schema['SearchPrincipalSource'] = 15;
	schema['ResolvePrincipalSource'] = 15;
	schema['AllowMultipleValues'] = true;
	schema['MaximumEntitySuggestions'] = 50;
	schema['Width'] = '280px';
	// Render and initialize the picker.
	// Pass the ID of the DOM element that contains the picker, an array of initial
	// PickerEntity objects to set the picker value, and a schema that defines
	// picker properties.
	this.SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);
	}
	// Query the picker for user information.
	function getUserInfo() {
	// Get the people picker object from the page.
	var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDiv_TopSpan;
	// Get information about all users.
	var users = peoplePicker.GetAllUserInfo();
	var userInfo = '';
	for (var i = 0; i < users.length; i++) {
	var user = users[i];
	for (var userProperty in user) {
	userInfo += userProperty + ': ' + user[userProperty] + '<br>';
	}
	}
	$('#resolvedUsers').html(userInfo);
	// Get user keys.
	var keys = peoplePicker.GetAllUserKeys();
	$('#userKeys').html(keys);
	}

view raw gistfile1.html hosted with ❤ by GitHub

Changes to the default.aspx file  

	<SharePoint:ScriptLink name="clienttemplates.js" runat="server" LoadAfterUI="true" Localizable="false" />
	<SharePoint:ScriptLink name="clientforms.js" runat="server" LoadAfterUI="true" Localizable="false" />
	<SharePoint:ScriptLink name="clientpeoplepicker.js" runat="server" LoadAfterUI="true" Localizable="false" />
	<SharePoint:ScriptLink name="autofill.js" runat="server" LoadAfterUI="true" Localizable="false" />
	<SharePoint:ScriptLink name="sp.js" runat="server" LoadAfterUI="true" Localizable="false" />
	<SharePoint:ScriptLink name="sp.runtime.js" runat="server" LoadAfterUI="true" Localizable="false" />
	<SharePoint:ScriptLink name="sp.core.js" runat="server" LoadAfterUI="true" Localizable="false" />
	<div id="peoplePickerDiv"></div>
	<div>
	<br/>
	<input type="button" value="Get User Info" onclick="getUserInfo()"></input>
	<br/>
	<h1>User info:</h1>
	<p id="resolvedUsers"></p>
	<h1>User keys:</h1>
	<p id="userKeys"></p>
	</div>

view raw gistfile1.txt hosted with ❤ by GitHub

2. Add a Embedded Bing Search to your page:

Add the below to Deafult.aspx

	<SharePoint:SPAppIFrame ID="SPAppIFrame1" runat="server" Src="http://www.bing.com" Width="100%" Height="100%"></SharePoint:SPAppIFrame>

view raw gistfile1.html hosted with ❤ by GitHub

Important links for reference

MSDN