Napa development tools for SharePoint 2013

Napa Development Tools for SharePoint 2013 provides a web based development environment where developers can build applications for SharePoint and Office 2013 right from their web browsers. Napa simplifies the development process, developers don’t need to setup a development environment and install all the tools necessary to build applications like Visual Studio etc.

Projects build in Napa can be later imported into Visual Studio for further development if required.

Setting up Napa

You need to create a development site in your SharePoint environment and install Napa development tools. Follow these steps to create a development site and install Napa (you need admin access to do the steps):

1. Open SharePoint admin center

2. In the Ribbon bar select New \ Private Site Collection

3. Select Developer Site from the Template section and fill the other details as required and click OK to create the development site

4. Once development site is created, you will be redirected to the home page where you can create apps for SharePoint.

5. Select Build an app tile to start developing apps, if it’s the first time, you will be redirected to SharePoint Store for downloading Napa Office 365 Development Tools. Select ADD IT to install Napa.

6. Select Trust It for confirmation window.

7. Once Napa is installed, you will be redirected to Site Contents page where you can see it installed.

8. Go to the Home page and select Build an App again. You will be redirected to https://www.napacloudapp.com/ where you can start building apps using Napa.

 

Writing your first App in Napa, Creating Contact Us App

Using Napa, you can create apps right from your web browser, you don’t need visual studio or SharePoint installed on your computer. You can create SharePoint apps remotely from anywhere.

Napa gives access to Client Side Object Model of SharePoint, you can create asp.net pages and javascript files to create Napa projects.

In this example we will create a Contact Us app that will give an UI to end users to fill out Contact Us details and the app will add the details to a Contact Us SharePoint list.

Follow these steps to create the app.

1. Open Napa by selecting Build an app in Home page of developer site.

2. Select App for SharePoint and enter Project name and select Create to create the app.

3. Napa will create the project and open the development environment

Let’s get familiar with the Napa environment.

1. In the bottom left side we’ve buttons for Running the app, exporting to visual studio etc.

2. In the left side, we have folders view (similar to Solution Explorer in Visual Studio) where you can manage your files (web pages, javascript files, css and image files)

3. The main area after folders view is where we work with code files like web pages, javascript files etc.

4. Select App.css in contents folder and add the following classes, we’ll be using these classes in our html.

.controls-width

{

width: 300px;

}

 

.table1

{

padding: 5px;

margin: 5px;

}

 

5. Open Default.aspx from Pages folder and add the following html in PlaceHolderMain section

<table class="table1">

<tr>

<td>Name:</td><td><input type="text" value="Name" id="txtName" class="controls-width"/></td>

</tr>

<tr>

<td>Email:</td><td><input type="text" value="Email" id="txtEmail" class="controls-width"/></td>

</tr>

<tr>

<td>Company:</td><td><input type="text" value="Company" id="txtCompany" class="controls-width"/></td>

</tr>

<tr>

<td>Subject:</td><td><input type="text" value="Subject" id="txtSubject" class="controls-width"/></td>

</tr>

<tr>

<td>Message:</td>

<td>

<textarea id="txtMsg" class="controls-width">

Message

</textarea>

</td>

</tr>

<tr>

<td></td>

<td>

<button id="btnSubmit">Submit</button>

<button id="btnClear">Reset</button>

</td>

</tr>

</table>

 

6. Select Run Project button in the toolbar to run the app, the project will go thru Package, Deploy & Launch phases before opening the Contact Us app page.

7. Close the app page and open App.js from scripts folder. Add the following code in App.js

'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();

 

var listFound = false;

 

(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 () {

$("#btnSubmit").click(function(event) {

createOrAddItemInContactUsList();

event.preventDefault();

});

});

 

function createOrAddItemInContactUsList() {

lists = web.get_lists();

context.load(lists);

context.executeQueryAsync(onCreateOrAddItemInContactUsListSuccess, onCreateOrAddItemInContactUsListFail);

}

function onCreateOrAddItemInContactUsListSuccess(sender, args) {

var listEnumerator = lists.getEnumerator();

 

while (listEnumerator.moveNext()) {

if (listEnumerator.get_current().get_title() == "ContactUsList") {

listFound = true;

}

}

if (listFound === false) {

createContactUsList();

}

else {

createContactUsListItem();

}

}

 

function onCreateOrAddItemInContactUsListFail(sender, args) {

// Lists couldn’t be loaded - display error.

alert('Failed to check ContactUsList. Error: ' + args.get_message());

}

function createContactUsList() {

var listCreationInfo = new SP.ListCreationInformation();

var listTitle = "ContactUsList";

listCreationInfo.set_title(listTitle);

listCreationInfo.set_templateType(SP.ListTemplateType.genericList);

lists = web.get_lists();

var newList = lists.add(listCreationInfo);

//var colEmail = newList.get_fields().addFieldAsXml("<Field Name='Email' DisplayName='Email' Type='Text' />");

 

var colEmail = newList.get_fields().addFieldAsXml('<Field DisplayName=\'Email\' Type=\'Text\' />', true, SP.AddFieldOptions.defaultValue);

var colCompany = newList.get_fields().addFieldAsXml('<Field DisplayName=\'Company\' Type=\'Text\' />', true, SP.AddFieldOptions.defaultValue);

var colSubject = newList.get_fields().addFieldAsXml('<Field DisplayName=\'Subject\' Type=\'Text\' />', true, SP.AddFieldOptions.defaultValue);

var colMessage = newList.get_fields().addFieldAsXml('<Field DisplayName=\'Message\' Type=\'Text\' />', true, SP.AddFieldOptions.defaultValue);

 

context.load(colEmail);

context.load(colCompany);

context.load(colSubject);

context.load(colMessage);

context.executeQueryAsync(onCreateContactUsListSuccess, onCreateContactUsListFail);

}

 

function onCreateContactUsListSuccess() {

alert('ContactUsList created successfully.');

createContactUsListItem();

}

 

function onCreateContactUsListFail(sender, args) {

alert('Failed to create ContactUsList. ' + args.get_message());

}

function createContactUsListItem() {

var lstContactUs = web.get_lists().getByTitle("ContactUsList");

var listItemCreationInfo = new SP.ListItemCreationInformation();

var newItem = lstContactUs.addItem(listItemCreationInfo);

var liName = document.getElementById("txtName").value;

var liEmail = document.getElementById("txtEmail").value;

var liCompany = document.getElementById("txtCompany").value;

var liSubject = document.getElementById("txtSubject").value;

var liMessage = document.getElementById("txtMsg").value;

newItem.set_item('Title', liName);

newItem.set_item('Email', liEmail);

newItem.set_item('Company', liCompany);

newItem.set_item('Subject', liSubject);

newItem.set_item('Message', liMessage);

newItem.update();

context.load(newItem);

context.executeQueryAsync(onCreateContactUsListItemSuccess, onCreateContactUsListItemFail);

}

function onCreateContactUsListItemSuccess() {

// Refresh the list of items.

alert('Contact Us Form submitted successfully.');

}

 

function onCreateContactUsListItemFail(sender, args) {

// The item couldn’t be created – display an error message.

alert('Failed to submit Contact Us Form. ' + args.get_message());

}

})();

 

Code Explanation:

We added the following functions in App.js:

createOrAddItemInContactUsList() – This function checks if ContactUsList SharePoint list exists in the app site and calls createContactUsList() or createContactUsListItem() accordingly.

createContactUsList() – This functions creates SharePoint list called ContactUsList with fields like Email, Company, Subject & Message.

createContactUsListItem() – This function creates a SharePoint list item with input values from the app web page.

8. Run the project again and submit the form:

Summary

Napa is a great online tool for rapid app development for SharePoint 2013. You can create apps that interact with all kind of 3rd party services like facebook, twitter and create interesting apps for SharePoint. You can also use 3rd party tools like bootstrap, jquery UI to improve or provide custom UI experience to the SharePoint users. Happy coding…

By Shameem Ahmed   Popularity  (893 Views)