Create an App in Office 365 and SharePoint 2013: Part 2

As we saw from my last article how to create an App in Office 365 and SharePoint 2013 and create an app Part 1, here in this article we will see a different app that you will be able to use in your daily job profiles and it's actually going to help you a lot.

As in my last statement, “When we all see some new apps, the first thing of a techie guy that comes in mind is “Even I want to make an app” but people either get carried away or are not able to determine how to start.”

Create an App in Office 365 and SharePoint 2013: Part 1

So, let's go ahead and determine how to implement our new app.

• Open your site in Office 365 or on On-Premise.
• Click on the Site Settings and click on Add an app.

Figure 1: Office 365 Setting

• Add "Napa" Office 365 Development Tools from the SharePoint Store.

Figure 2: Site Contents

• Once you have added the tool, it will be available in your site contents. This app is a tool to start building apps for Office and SharePoint.
• Once added, click on it.

Figure 3: Build the App

• It will ask you what kind of app you want to build, for us it will be App for SharePoint.
• Provide it a name and click on Create.
• In this article we will create an app where on a button click you will be able to create a list.
• Here we will have a button placed on the site where we will create a list by just clicking on it rather than going to site contents and counting it manually.
• Now when your app has been created, you will see in the default.aspx page the code behind.
• Paste following code under PlaceHolder Main.

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

Code

<div id="starter">
<input type="text" value="List name" id="createlistbox"/><button id="createlistbutton">Create List</button>
</div>

Here we are creating a button where we will generate an event.

Now we need to write a function for the button to call, so click on App.js.

Here in App.js, copy the following variables on the top:

var context = SP.ClientContext.get_current();
var user = context.get_web().get_currentUser();
var web = context.get_web();
var lists = web.get_lists();
var listItemCollection;

Here we assign the variables to be used in the functions.

Under the document.ready function, paste in the flowing lines of code to call the function.

$(document).ready(function()
{
    $("#createlistbutton").click(function(event)
    {
        createnewlist();
        event.preventDefault();
    })
}

Here under the document.ready function we are calling our function on page load.

Then paste the following function where we will write our function of createnewlist:

function createnewlist()
{
    // Create a new SharePoint list with the name on the text box.
    var listCreateInfo = new SP.ListCreationInformation();
    var listname = document.getElementById("createlistbox").value;
    listCreateInfo.set_title(listname);
    listCreateInfo.set_templateType(SP.ListTemplateType.genericList);
    lists = web.get_lists();
    var newList = lists.add(listCreateInfo);
    context.load(newList);
    context.executeQueryAsync(onListCreationSuccess, onListCreationFail);
}
}
function onListCreationFail(sender, args)
{
    alert('Failed to create the list. ' + args.get_message());
}

• Now if you create a similar list with duplicate names the error in the message will tell you that a list with the same name exists so kindly use a different name.
• In that case when you click on the button, the list with a different name will be created or else it will throw an error.
• Now after this, let's deploy the code.
  

Figure 4: Bar

• Once you have made all the necessary updates to you code, click on the Play icon button that states “Run Project”.
• It will first prepare, then deploy and launch.

Figure 5: Output

• Here we have our app deployed with a button stating “Create List”.
• Add the list name there and click on Create List.

Figure 6: Add the List Name

• Your list will be created.

Here it was our second app demonstrating to create lists in a single click. Soon we will see many new apps on our way. Until then, keep learning.