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