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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s