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.
  1. <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">  
Code
  1. <div id="starter">  
  2. <input type="text" value="List name" id="createlistbox"/><button id="createlistbutton">Create List</button>  
  3. </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:
  1. var context = SP.ClientContext.get_current();  
  2. var user = context.get_web().get_currentUser();  
  3. var web = context.get_web();  
  4. var lists = web.get_lists();  
  5. 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.
  1. $(document).ready(function()   
  2. {  
  3.     $("#createlistbutton").click(function(event)   
  4.     {  
  5.         createnewlist();  
  6.         event.preventDefault();  
  7.     })  
  8. }
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:
  1. function createnewlist()   
  2. {  
  3.     // Create a new SharePoint list with the name on the text box.  
  4.     var listCreateInfo = new SP.ListCreationInformation();  
  5.     var listname = document.getElementById("createlistbox").value;  
  6.     listCreateInfo.set_title(listname);  
  7.     listCreateInfo.set_templateType(SP.ListTemplateType.genericList);  
  8.     lists = web.get_lists();  
  9.     var newList = lists.add(listCreateInfo);  
  10.     context.load(newList);  
  11.     context.executeQueryAsync(onListCreationSuccess, onListCreationFail);  
  12. }  
  13. }  
  14. function onListCreationFail(sender, args)   
  15. {  
  16.     alert('Failed to create the list. ' + args.get_message());  
  17. }
  • 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.

Up Next
    Ebook Download
    View all
    Learn
    View all