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

Before proceeding with this article, I recommend you visit and study the following previous parts:

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 per 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 unable to decide how to start.”.

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.
Add "Napa" Office 365 Development Tools from the SharePoint Store.
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.
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 delete a list form a selection of drop down.
Here we will have a drop down associated to a button. The drop down will reflect all the lists in the site and on the selection of it a user can delete a its directly by clicking on a button next to it.
Let's see how we will do it.
Now when your app has been created, you will come on the default.aspx page of your app displaying the code behind.
Paste this code under PlaceHolder Main.

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

Code
1. - <div id="starter">
2. - <p>
3. - Lists
4. - <br />
5. - <select id="selectlistbox" ></select><button id="deletelistbutton">Delete Selected List</button></div>
6. -
- Here we are creating a button and a drop down box 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 functions.
Under the document.ready function, paste the following lines of code to call the function.
1. $(document).ready(function () {
2. $("#deletelistbutton").click(function (event) {
3. deletelist();
4. event.preventDefault();
5. });
6. displayLists();
7. });
Here under the document.ready function we are calling our function on page load.
Then paste the following function where we will display all the lists in a drop down that a user can select to delete:
1. function displayLists() {
2. // Get all the SharePoint lists and add them to context.load
3. lists = web.get_lists();
4. context.load(lists);
5. context.executeQueryAsync(onGetLists, onGetListsFail);
6. }
8. function onGetLists (sender, args) {
9. // Get the makes and set the elements to the list box.
10. var listEnumerator = lists.getEnumerator();
11. var selectListBox = document.getElementById("selectlistbox");
12. if (selectListBox.hasChildNodes()) {
13. while (selectListBox.childNodes.length >= 1) {
14. selectListBox.removeChild(selectListBox.firstChild);
15. }
16. }
17. while (listEnumerator.moveNext()) {
18. var selectOption = document.createElement("option");
19. selectOption.value = listEnumerator.get_current().get_title();
20. selectOption.innerHTML = listEnumerator.get_current().get_title();
21. selectListBox.appendChild(selectOption);
22. }
23. }
25. function onGetListsFail(sender, args) {
26. // Display the error
27. alert('Failed to fetch lists. Error: ' + args.get_message());
28. }
Now here we will get the main function of deleting it.
1. function deletelist() {
2. // Delete the list that the user selects.
3. var selectListBox = document.getElementById("selectlistbox");
4. var selectedListTitle = selectListBox.value;
5. var selectedList = web.get_lists().getByTitle(selectedListTitle);
6. selectedList.deleteObject();
7. context.executeQueryAsync(onDeleteList, onDeleteFail);
8. }
10. function onDeleteList () {
11. displayLists();
12. }
14. function onDeleteFail(sender, args) {
15. alert('Failed to delete the list. ' + args.get_message());
16. }
- Now once clicked on delete, the display list will not show the deleted list.

- Now after this, let's deploy the code.
Once you make all necessary updates to you code, click on the Play icon button that states “Run Project”.
It will first prepare then deploy then launch.
Here we have our app deployed with a button stating “Delete Selected List” and a drop down showing all the list name.
Select the list form the drop down you want to delete and click on the button.
Your list will be deleted.

Here it was our third app showing how to delete lists on selection. Soon we will see many new apps on our way. Until then, keep learning.

Cheers!