REST CRUD (Insert,Update,Delete,Get) Operations Using SharePoint Hosted App - Office 365

SharePoint adds the ability for you to remotely interact with SharePoint sites by using REST. Now, you can interact directly with SharePoint objects by using any technology that supports standard REST capabilities.

You can perform basic create, read, update, and delete (CRUD) operations by using the Representational State Transfer (REST) interface provided by SharePoint.

In this article we will do CRUD operations using REST. For understanding purposes I am going to divide this article into two parts. The first two points I will discuss in this article; the  remaining four points I will discuss in another article.

1. Create List in Office 365 SharePoint Site
2. Creation of Project using SharePoint Hosted App
3. Html code for User Interface
4. Write Business logic for Insert, Update, Delete, Get data functionalities.
5. Deploy the Project
6. Test the application.

Create List in Office 365 SharePoint Site

• Login to Office 365 SharePoint and Create List in site.
• In this case, I have created the list name Employee and created three columns EmpName (Default Title column name changed to EmpName), Salary and Address.
  
   

Creation of Project using SharePoint Hosted App

Find the below steps to create the project.

• Select SharePoint Add- in template
• Give the Proper Name for the project. In this case I have given project name spRESTCrudOperations.
  
  

• Give the SharePoint Site URL and select SharePoint Hosted App option.
  
  

• Give Office 365 credentials and click on finish button
  
  
  
  

• Once you click on Finish button, project will be created.
  
  

• In solution explorer, you can find SharePoint hosted app structure. Contains Default pages, Scripts, AppManifest file
  
  

• AppManifest file looks like this.
  
  
  
• App.js file looks like this under Scripts
  
  

• Default.aspx looks like this under Pages.
  
  

Code:

In this article, we will discuss from the third point onward, as we have already discussed  the first two points in Part One.

1. Create a List in Office 365 SharePoint Site
2. Creation of Project using SharePoint Hosted App
3. HTML code for User Interface
4. Write Business logic for Insert, Update, Delete, Get data functionalities under App.js file.
5. Deploy the Project
6. Test the application.

HTML Code for User Interface

In default.aspx page, we will do some changes as mentioned below.

• Add the below script tags after jQuery script tag.
  
  1. <script type="text/javascript" src="_layouts/15/sp.runtime.js"></script>  
  2. <script type="text/javascript" src="_layouts/15/sp.js"></script>  
  

• Write the below HTML code for User Interface under ContentPlaceHolderID.
  
  1. <table class="centerTable">    
  2.      <tr>    
  3.          <td>    
  4.              <table>    
  5.     
  6.                  <tr>    
  7.                      <td><span style="color: red; font: bold;"></span>ID </td>    
  8.                      <td>    
  9.                          <input type="text" id="empID" class="csValue" size="40" />    
  10.                      </td>    
  11.                  </tr>  
  12.                  <tr>    
  13.                      <td><span style="color: red; font: bold;"></span>EmployeeName </td>    
  14.                      <td>    
  15.                          <input type="text" id="empName" class="csValue" size="40" />    
  16.                      </td>    
  17.                  </tr>    
  18.                  <tr>    
  19.                      <td><span style="color: red; font: bold;"></span>Salary </td>    
  20.                      <td>    
  21.                          <input type="text" id="empSalary" class="csValue" size="40" />    
  22.                      </td>    
  23.                  </tr>    
  24.                  <tr>    
  25.                      <td><span style="color: red; font: bold;"></span>Address </td>    
  26.                      <td>    
  27.                           
  28.                          <textarea name="Text1" cols="40" rows="5" id="empAddress" class="csValue"></textarea>    
  29.                      </td>    
  30.                  </tr>    
  31.     
  32.     
  33.              </table>    
  34.                 
  35.          </td>    
  36.     
  37.      </tr>    
  38.  </table>    
  39.  <table>    
  40.      <tr>    
  41.     
  42.          <td>    
  43.              <input type="button" value="Clear" id="btnClear" style="background-color: #4CAF50; border: none; color: white; padding: 7px 15px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; margin: 4px 2px; cursor: pointer;" />    
  44.          </td>    
  45.     
  46.     
  47.          <td>    
  48.              <input type="button" value="Submit" id="btnCreate" style="background-color: #4CAF50; border: none; color: white; padding: 7px 15px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; margin: 4px 2px; cursor: pointer;" />    
  49.          </td>    
  50.   
  51.           <td>    
  52.              <input type="button" value="Update" id="btnUpdate" style="background-color: #4CAF50; border: none; color: white; padding: 7px 15px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; margin: 4px 2px; cursor: pointer;" />    
  53.          </td>   
  54.            <td>    
  55.              <input type="button" value="GetData" id="btnGet" style="background-color: #4CAF50; border: none; color: white; padding: 7px 15px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; margin: 4px 2px; cursor: pointer;" />    
  56.          </td>   
  57.   
  58.           <td>    
  59.              <input type="button" value="Delete" id="btnDelete" style="background-color: #4CAF50; border: none; color: white; padding: 7px 15px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; margin: 4px 2px; cursor: pointer;" />    
  60.          </td>   
  61.   
  62.            
  63.      </tr>    
  64.     
  65.     
  66.     
  67.  </table>    
  

Write Business logic for Insert, Update, Delete, Get data functionalities under App.js file.
We are writing some methods for insert, update, delete, and get data and clear data operations.

• createEmployee();
• UpdateEmployee();
• GetEmployeeDetails();
• ClearData();
• GetEmployeeDetailsByID(); 

• createEmployee() method looks like this.
  
  1. function createEmployee() {  
  2.   
  3.      $.ajax({  
  4.          url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items",  
  5.          type: "POST",  
  6.          contentType: "application/json;odata=verbose",  
  7.          data: JSON.stringify  
  8.  ({  
  9.      __metadata:  
  10.      {  
  11.          type: "SP.Data.EmployeeListItem"  
  12.      },  
  13.      Title: $("#empName").val(),  
  14.      Salary: $("#empSalary").val(),  
  15.      Address: $("#empAddress").val()  
  16.  }),  
  17.          headers: {  
  18.              "Accept": "application/json;odata=verbose", // return data format  
  19.              "X-RequestDigest": $("#__REQUESTDIGEST").val()  
  20.          },  
  21.          success: function (data, status, xhr) {  
  22.              $("#tblEmployees").empty();  
  23.              GetEmployeeDetails();  
  24.              alert("Successfully Submitted");  
  25.          },  
  26.          error: function (xhr, status, error) {  
  27.              alert(JSON.stringify(error));  
  28.          }  
  29.      });  
  30.  }   

• UpdateEmployee() method looks like below.
  
  1. function UpdateEmployee() {  
  2.   
  3.         var id = $("#empID").val();  
  4.         $.ajax({  
  5.             url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items('" + id + "')", // list item ID    
  6.             type: "POST",  
  7.             data: JSON.stringify  
  8.             ({  
  9.                 __metadata:  
  10.                 {  
  11.                     type: "SP.Data.EmployeeListItem"  
  12.                 },  
  13.                 Title: $("#empName").val(),  
  14.                 Salary: $("#empSalary").val(),  
  15.                 Address: $("#empAddress").val()  
  16.   
  17.             }),  
  18.             headers:  
  19.             {  
  20.                 "Accept": "application/json;odata=verbose",  
  21.                 "Content-Type": "application/json;odata=verbose",  
  22.                 "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
  23.                 "IF-MATCH": "*",  
  24.                 "X-HTTP-Method": "MERGE"  
  25.             },  
  26.             success: function (data, status, xhr) {  
  27.                 $("#tblEmployees").empty();  
  28.                 GetEmployeeDetails();  
  29.                 alert("Date Updated Successfully");  
  30.             },  
  31.             error: function (xhr, status, error) {  
  32.                 alert(JSON.stringify(error));  
  33.             }  
  34.         });  
  35.     }   

• GetEmployeeDetails() Method looks like below.
  
  1. function GetEmployeeDetails() {  
  2.         $.ajax({  
  3.             url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items?$select=Title,Salary,Address",  
  4.             type: "GET",  
  5.             headers: { "Accept": "application/json;odata=verbose" }, // return data format  
  6.             success: function (data) {  
  7.                 //console.log(data.d.results);  
  8.                  
  9.                 for (var i = 0; i < data.d.results.length; i++) {  
  10.                     var item = data.d.results[i];  
  11.                     $("#tblEmployees").append(item.Title + "\t" + item.Salary + "\t" + item.Address + "<br/>");  
  12.                 }  
  13.             },  
  14.             error: function (error) {  
  15.                 alert(JSON.stringify(error));  
  16.             }  
  17.         });  
  18.   
  19.   
  20.   
  21.     }   

• GetEmployeeDetailsByID() method looks like this.
  
  1. function GetEmployeeDetailsByID() {  
  2.         var idValue = $("#empID").val();  
  3.   
  4.   
  5.         $.ajax({  
  6.             url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items('" + idValue + "')",  
  7.             type: "GET",  
  8.             headers: { "Accept": "application/json;odata=verbose" }, // return data format  
  9.             success: function (data) {  
  10.                 $("#empName").val(data.d.Title);  
  11.                 $("#empSalary").val(data.d.Salary);  
  12.                 $("#empAddress").val(data.d.Address);  
  13.                 $("#tblEmployees").empty();  
  14.                 GetEmployeeDetails();  
  15.             },  
  16.             error: function (error) {  
  17.                 alert(JSON.stringify(error));  
  18.             }  
  19.         });  
  20.     }   

Finally, the App.js code looks like below. 

1. 'use strict';  
2. var hostWebUrl;  
3. var appWebUrl;  
4. var listName = "Employee";  
5. ExecuteOrDelayUntilScriptLoaded(initializePage, "sp.js");  
6.   
7. function initializePage() {  
8.     var context = SP.ClientContext.get_current();  
9.     var user = context.get_web().get_currentUser();  
10.   
11.     // This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model  
12.     $(document).ready(function () {  
13.   
14.   
15.   
16.         GetEmployeeDetails();  
17.   
18.         $("#btnCreate").on('click', function () {  
19.             createEmployee();  
20.             ClearData();  
21.   
22.   
23.         });  
24.         $("#btnUpdate").on('click', function () {  
25.             UpdateEmployee();  
26.             ClearData();  
27.   
28.   
29.         });  
30.   
31.         $("#btnClear").on('click', function () {  
32.   
33.             ClearData();  
34.   
35.         });  
36.   
37.         $("#btnGet").on('click', function () {  
38.             $('#empName').val("");  
39.             $("#empSalary").val("");  
40.             $("#tblAddress").val("");  
41.             $("#tblEmployees").empty();  
42.             GetEmployeeDetailsByID();  
43.   
44.         });  
45.   
46.         $("#btnDelete").on('click', function () {  
47.             deleteEmployee();  
48.             ClearData();  
49.   
50.   
51.   
52.         });  
53.   
54.   
55.     });  
56.   
57.   
58.   
59.   
60.     function deleteEmployee() {  
61.         var id = $("#empID").val();  
62.   
63.         $.ajax  
64.         ({  
65.             url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items('" + id + "')",  
66.             type: "POST",  
67.             headers:  
68.              {  
69.                  "Accept": "application/json;odata=verbose",  
70.                  "Content-Type": "application/json;odata=verbose",  
71.                  "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
72.                  "IF-MATCH": "*",  
73.                  "X-HTTP-Method": "DELETE"  
74.              },  
75.             success: function (data, status, xhr) {  
76.                 $("#tblEmployees").empty();  
77.                 GetEmployeeDetails();  
78.   
79.                 alert("Successfully record deleted");  
80.             },  
81.             error: function (xhr, status, error) {  
82.                 alert(JSON.stringify(error));  
83.             }  
84.         });  
85.     }  
86.   
87.   
88.     function ClearData() {  
89.   
90.         $("#empID").val("");  
91.         $('#empName').val("");  
92.         $("#empSalary").val("");  
93.         $("#empAddress").val("");  
94.   
95.     }  
96.     function GetEmployeeDetailsByID() {  
97.         var idValue = $("#empID").val();  
98.   
99.   
100.         $.ajax({  
101.             url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items('" + idValue + "')",  
102.             type: "GET",  
103.             headers: { "Accept": "application/json;odata=verbose" }, // return data format  
104.             success: function (data) {  
105.                 $("#empName").val(data.d.Title);  
106.                 $("#empSalary").val(data.d.Salary);  
107.                 $("#empAddress").val(data.d.Address);  
108.                 $("#tblEmployees").empty();  
109.                 GetEmployeeDetails();  
110.             },  
111.             error: function (error) {  
112.                 alert(JSON.stringify(error));  
113.             }  
114.         });  
115.     }  
116.   
117.   
118.   
119.     function UpdateEmployee() {  
120.   
121.         var id = $("#empID").val();  
122.         $.ajax({  
123.             url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items('" + id + "')", // list item ID    
124.             type: "POST",  
125.             data: JSON.stringify  
126.             ({  
127.                 __metadata:  
128.                 {  
129.                     type: "SP.Data.EmployeeListItem"  
130.                 },  
131.                 Title: $("#empName").val(),  
132.                 Salary: $("#empSalary").val(),  
133.                 Address: $("#empAddress").val()  
134.   
135.             }),  
136.             headers:  
137.             {  
138.                 "Accept": "application/json;odata=verbose",  
139.                 "Content-Type": "application/json;odata=verbose",  
140.                 "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
141.                 "IF-MATCH": "*",  
142.                 "X-HTTP-Method": "MERGE"  
143.             },  
144.             success: function (data, status, xhr) {  
145.                 $("#tblEmployees").empty();  
146.                 GetEmployeeDetails();  
147.                 alert("Date Updated Successfully");  
148.             },  
149.             error: function (xhr, status, error) {  
150.                 alert(JSON.stringify(error));  
151.             }  
152.         });  
153.     }  
154.   
155.     function createEmployee() {  
156.   
157.         $.ajax({  
158.             url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items",  
159.             type: "POST",  
160.             contentType: "application/json;odata=verbose",  
161.             data: JSON.stringify  
162.     ({  
163.         __metadata:  
164.         {  
165.             type: "SP.Data.EmployeeListItem"  
166.         },  
167.         Title: $("#empName").val(),  
168.         Salary: $("#empSalary").val(),  
169.         Address: $("#empAddress").val()  
170.     }),  
171.             headers: {  
172.                 "Accept": "application/json;odata=verbose", // return data format  
173.                 "X-RequestDigest": $("#__REQUESTDIGEST").val()  
174.             },  
175.             success: function (data, status, xhr) {  
176.                 $("#tblEmployees").empty();  
177.                 GetEmployeeDetails();  
178.                 alert("Successfully Submitted");  
179.             },  
180.             error: function (xhr, status, error) {  
181.                 alert(JSON.stringify(error));  
182.             }  
183.         });  
184.     }  
185.     function GetEmployeeDetails() {  
186.   
187.   
188.   
189.         $.ajax({  
190.             url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items?$select=ID,Title,Salary,Address",  
191.             type: "GET",  
192.             headers: { "Accept": "application/json;odata=verbose" }, // return data format  
193.             success: function (data) {  
194.                 //console.log(data.d.results);  
195.   
196.   
197.                 var table = $("#tblEmployees");  
198.                 var html = "<thead><tr><th>ID</<th><th>Name</th><th>Salary</th><th>Address</th></tr></thead>";  
199.   
200.   
201.   
202.                 for (var i = 0; i < data.d.results.length; i++) {  
203.                     var item = data.d.results[i];  
204.                     //$("#tblEmployees").append(item.Title + "\t" + item.Salary + "\t" + item.Address + "<br/>");  
205.   
206.   
207.                     html += "<tr><td>" + item.ID + "</td><td>" + item.Title + "</td><td>" + item.Salary + "</td><td>" + item.Address + "</td></tr>";  
208.   
209.   
210.                 }  
211.                 table.html(html);  
212.             },  
213.             error: function (error) {  
214.                 alert(JSON.stringify(error));  
215.             }  
216.         });  
217.   
218.   
219.   
220.     }  
221.   
222.   
223.     function manageQueryStringParameter(paramToRetrieve) {  
224.         var params =  
225.         document.URL.split("?")[1].split("&");  
226.         var strParams = "";  
227.         for (var i = 0; i < params.length; i = i + 1) {  
228.             var singleParam = params[i].split("=");  
229.             if (singleParam[0] == paramToRetrieve) {  
230.                 return singleParam[1];  
231.             }  
232.         }  
233.     }  
234.   
235.     // This function prepares, loads, and then executes a SharePoint query to get the current users information  
236.     function getUserName() {  
237.         context.load(user);  
238.         context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);  
239.     }  
240.   
241.     // This function is executed if the above call is successful  
242.     // It replaces the contents of the 'message' element with the user name  
243.     function onGetUserNameSuccess() {  
244.         $('#message').text('Hello ' + user.get_title());  
245.     }  
246.   
247.     // This function is executed if the above call fails  
248.     function onGetUserNameFail(sender, args) {  
249.         alert('Failed to get user name. Error:' + args.get_message());  
250.     }  
251. }   

Deploy the Project

Right click on the solution and select the "Deploy" option.

• Once you deploy it, the system will ask for Ofice 365 credentials. Enter the credentials.
• Trust the app like in the below screen.
  
   

• You can see the User Interface page like below.
  
   

Test the application

Here, we will test for "Submit" button.

• Enter Employee Name, Salary, and Address values and click on the "Submit" button. Leave the ID text box empty for it is auto-generated.
  
  

• Once you click on Submit button, the data will be displayed in the below table.
  
  
  
• To test Get Data, enter the ID value in text box. Example - I entered 15 in ID text box and clicked on "Get Data" button. The list Item data will be displayed in the respective text boxes.
  
   

• To test Clear functionality, click on "Clear" button; the data will be cleared for textboxes.
  
  

• To test "Delete" functionality, enter the ID value and click on Delete button. Example- I have entered ID 15 in text box and clicked on Delete button. List Item ID 15 record will be removed from the list.
  
  
  
   

Site Re-Indexing In Office 365 SharePoint Site

Hi, in this blog I am going to describe the process to initiate site re-indexing in Office 365 SharePoint sites. It helps to initiate search crawl and enables the site to be consider edduring the next search crawl. Let's get to the steps.

 

On the site, click Settings > Site Settings.

 

 

 

Once we are at site settings, click search and offline availability under Search group.

In the search and offline availability section, click Reindex site button.

 

  

This will show anwarning popup where we have to confirm the site re-indexing.

 

 

 

Click on Reindex site again to confirm. The content will be re-indexed during the next scheduled search crawl.

Get Office 365 Data In Excel Using MS Graph API

I will show how you can quickly fetch Office 365 data of your organization in MS Excel using Microsoft Graph API. We will fetch an organization’s users list in MS Excel with MS Graph. Once you learn to use MS Graph API in MS Excel, you can explore more options by yourself.

To make this article easy to follow, let’s identify a real-world requirement and then see how we can solve it using MS Graph API and Excel.

Requirement

Suppose you are working in the IT department of an organization who employs 500+ users. On a weekly basis, new employees join your organization while some leave too. The receptionist needs up-to-date information about all the employees and their contact details. You are asked to provide her a simple solution. You create an Excel workbook for her using MS Graph API data feed which will show the list of employees which she can refresh anytime to get the latest updates.

What is MS Graph API?

Excerpt from here.

“You can use the Microsoft Graph API to interact with the data of millions of users in the Microsoft cloud. Use Microsoft Graph to build apps for organizations and consumers that connect to a wealth of resources, relationships, and intelligence, all through a single endpoint: https://graph.microsoft.com”

For more on MS Graph API, please go here.

There is no coding involved to follow steps of this article. However, if you want to follow along with the steps, then it’s better to have Office 365 developer account as mentioned in “Prerequisite” section below.

Prerequisite

• Office 365 developer account

You may have access to Office 365 through your employer/organization account. However, it is strongly advised that you don’t use your live/organization account to follow steps of this article. Instead, use Office 365 developer account. Use your live/organization account only when working in a production environment.

Read my blog on how to get Office 365 developer account for 1 year free here.

Getting Started

I assume you have Office 365 developer account and you also have MS Excel installed on your computer. Open MS Excel and create a new workbook.

Go to “Data” tab in ribbon and click “Get Data” on left side.



When “Get Data” menu expands, click on "From Other Sources >> From OData Feed”, as shown below.

Once you click on “From OData Feed”, you will see a dialog to enter OData feed URL.



Why we choose this option?

MS Graph API is based on open web standards and it supports OData V4. MS Graph API accepts and returns data in JSON format, making it easy to integrate with other applications and technologies.

We want to access the list of all users of an organization. The MS Graph API endpoint https://graph.microsoft.com/v1.0/users returns all users of an organization.

Enter https://graph.microsoft.com/v1.0/users in the text box under URL and click OK.



Once you click on OK, you will see a dialog where you can specify your credentials to connect to MS Graph API.



Click on “Organizational account”, then click on “Sign in” button.



You will see “Office 365 Sign in” dialog.



Don’t use your organization/live account to sign in. Instead, use your Office 365 developer account.

After successful login, the “Office 365 Sign in” dialog will close, and your status on OData feed dialog will change to “signed in”.



Click on "Connect" button to continue.

It may take some time to fetch the result from MS Graph API call depending on your internet connection, but it will not be more than a few seconds. Once MS Excel fetches the users using MS Graph API, it will show you the result in a dialog.

For demo purposes, I have created some users in Office 365 Admin Portal using my developer account. I suggest, you also create some demo users with your Office 365 developer account using Office 365 Admin Portal.

You will see a result dialog filled with your organization’s users like the following.



Notice that the “Load” button has a down arrow. Click on it and you will see “Load” and “Load To…” options.



Click on “Load To…” link by which you will see an “Import Data” dialog.



This dialog has options for how you want to view the data and where you want to place the data. You can import the data to new worksheet too. We will not do anything special in this dialog. I just wanted to show you the options available in Excel. Click on OK button and the dialog will close.

As “New worksheet” was selected in “Import Data” dialog, you will see that a new sheet has been added to Excel and data is populated.

What has happened here?

MS Excel has received the JSON data result from MS Graph API in response to the call to https://graph.microsoft.com/v1.0/users endpoint, and converted it to a data table for you. What you see here is the list of all properties it got from MS Graph API.

By default, Excel will load all the columns it received from MS Graph API, some columns will not have data and you will not want to display all the columns. We will see in some time how you can choose only some columns to be displayed.

Also, if you note on right side new section “Queries & Connections” has been added.



Right click on “Query1” and click “Edit”.



You will see that “Query Editor” is opened in a popup, click on “Choose Columns”.



You will see a “Choose Columns” dialog.



Uncheck the very first “(Select All Columns)” checkbox, then select only the below columns, and click OK.

• displayName
• jobTitle
• mail
• mobilePhone
• officeLocation

You will see now that the Query Editor will only show the columns we selected in the above step.



Click on “Close & Load” button at the top left to continue.

The Query Editor will close and your Excel now shows you only those columns you selected.



Good job! You got your organization’s data in Excel using MS Graph API. How simple it was!

Now, let’s come back to the receptionist’s requirement I mentioned at the start of the article. A new employee has just joined the office. She needs his details in this Excel too. What should she do?

For this demo to work, I have opened Office 365 Admin Portal and added a new user named “Graph Explorer” to my organization using Office 365 developer account. I suggest you also add a new demo user to your developer account using “Office 365 Admin Portal” -> “Add a user” link.

After adding a new user in Admin Portal, right click on “Query1” in Excel and click “Refresh”.



Excel will once again connect to MS Graph API to fetch the result and refresh the contents in the worksheet.



Do you see the user “Graph Explorer” now in the first row?

So, the reception’s requirement is fulfilled. Every time she wants the latest data, she has to just hit “refresh” and MS Graph API will do the rest.

What’s next?

The purpose of this article was only to show you how MS Graph API data can be consumed in MS Excel, which I have shown above. Similarly, you can try calling some other MS Graph API endpoints by yourself.

Useful URL Shortcuts For SharePoint Online

These shortcuts are very useful to developers and make our work faster. This article covers eight shortcut URLs which we can use in our daily practice.

In my next article, we will cover another eight shortcuts.

Now, let’s get started.

1 Create

Aim - We use this shortcut when we want to create a custom list or library or anything like that.

URL - Yoursite/_layouts/create.aspx

In my case, Yoursite = https -//lt16.sharepoint.com/sites/learn

I should append /_layouts/create.aspx to my site URL.

So, my final URL becomes - https -//lt16.sharepoint.com/sites/learn/_layouts/create.aspx

Please follow the same procedure for all the below examples.

Please refer to the below screenshot when using this shortcut URL.

2 Site Column Gallery

Aim - This shortcut is useful when we want to see all the available site columns in SharePoint Online.

URL - Yoursite /_layouts/mngfield.aspx

Please refer to the below screenshot while using this shortcut URL.

3 People and Group

Aim - This shortcut is useful when we want to check people or groups in SharePoint. It shows all the available members in a current site.

URL - Yoursite /_layouts/people.aspx

Please refer the below screenshot when you use this shortcut URL.

4 Manage User Permissions

Aim - If we want to break an existing permission or we want to assign permission for a current site, we can use this shortcut.

URL - Yoursite /_layouts/user.aspx

Please refer to the below screenshot while using this shortcut URL.

5 Site Content Type

Aim - This shortcut is useful when we wish to check all OOTB and custom content types available in the current site or subsite.

URL - Yoursite /_layouts/mngctype.aspx

Please refer to the below screenshot when you use this shortcut URL.

6 Site Content and Structure Manager

Aim - This shortcut shows the structure of a current site. Apart from this, it is also showing all the available content of a selected site.

Using this content and structure manager, we can copy, move, or delete the selected site or subsite very easily.

URL - Yoursite /_layouts/sitemanager.aspx

Please refer the below screenshot to use this shortcut URL.

7 Site Setting

Aim - It’s a very useful URL shortcut. As a SharePoint developer and user, many times, we need to access the site settings. Basically, site settings show us various available settings for the current site or subsite.

URL - Yoursite /_layouts/settings.aspx

Please refer to the below screenshot to use this shortcut URL.

8 Site Content

Aim - When we want to check the site content of the current site or subsite, we can refer this shortcut URL.

URL - Yoursite /_layouts/viewlsts.aspx

Please refer the below screenshot to use this shortcut URL.

1 Workflows

• Aim - Using this shortcut URL we can view all associate workflow with the current site or subsite.
• URL - Yoursite /_layouts/wrkmng.aspx

In my case, Yoursite = https://lt16.sharepoint.com/sites/learn

I should append /_layouts/ wrkmng.aspx with my site URL.

So, my final URL becomes - https://lt16.sharepoint.com/sites/learn/_layouts/wrkmng.aspx

Please follow the same procedure for all the below examples. Please refer to the below screenshot when we use this shortcut URL.

2 Manage Site Collection Administrator

• Aim - If we need to assign permission for the site collection, we can use this URL shortcut and assign permission to the user as a site collection administrator.
• URL - Yoursite /_layouts/mngsiteadmin.aspx

Please refer to the below screenshot when we use this shortcut URL.

3 Manage Site and Workspace

• Aim - This feature shows workspace for sites, document, meetings. We can also delete or create the site from here.
• URL - Yoursite /_layouts/mngsubwebs.aspx

Please refer to the below screenshot when we use this shortcut URL.

4 Recycle Bin

• Aim - As we all know recycle bin is a garbage of deleted or removed files. Using this URL shortcut we can directly go through the recycle bin.
• URL - Yoursite /_layouts/AdminRecycleBin.aspx

Please refer to the below screenshot when we use this shortcut URL.

5 Solution Gallery

• Aim - This feature shows all available solutions in the current site. We can activate or deactivate solution from here. We can use this URL shortcut to go through solution gallery.
• URL - Yoursite /_catalogs/solutions/

Please refer to the below screenshot when we use this shortcut URL.

6 Master Page Gallery

• Aim - Using this URL shortcut we can check Master Page Gallery. This one is the most useful feature of SP.
• URL - Yoursite /_catalogs/masterpage/

Please refer to the below screenshot when we use this shortcut URL.

7 Web Part Gallery

• Aim - To view all available web part from the current site, we can use this URL shortcut.
• URL - Yoursite /_catalogs/wp/

Please refer to the below screenshot when we use this shortcut URL.

8 List Template Gallery

• Aim - Using this URL shortcut we can view all available list template associated with the current site or subsite.
• URL - Yoursite/_catalogs/lt/

Please refer to the below screenshot when we use this shortcut URL.

Menu In Single Page Application

%-- _lcid="1033" _version="15.0.4420" _dal="1" --%>

<%-- _LocalBinding --%>

<%@ Page language="C#" MasterPageFile="~masterurl/default.master"    Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,Version=15.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:webpartpageexpansion="full" meta:progid="SharePoint.WebPartPage.Document"  %>

<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Import Namespace="Microsoft.SharePoint" %> <%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<asp:Content ContentPlaceHolderId="PlaceHolderPageTitle" runat="server">

                <SharePoint:ListItemProperty Property="BaseName" maxlength="40" runat="server"/>

</asp:Content>

<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">

<script type="text/javascript" src="../../SiteAssets/Scripts/jquery-1.11.2.min.js"></script>

<style> 

    .navigation { 

        width: 80px; 

        height: 10px; 

        background: burlywood; 

        padding: 14px; 

        margin-bottom: 20px; 

        border: 1px solid white; 

        font-weight: bold; 

        cursor: pointer; 

    } 

  

    div#divNavigation { 

        display: flex; 

    } 

</style> 

                <meta name="GENERATOR" content="Microsoft SharePoint" />

                <meta name="ProgId" content="SharePoint.WebPartPage.Document" />

                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                <meta name="CollaborationServer" content="SharePoint Team Web Site" />

                <SharePoint:ScriptBlock runat="server">

                var navBarHelpOverrideKey = "WSSEndUser";

                </SharePoint:ScriptBlock>

<SharePoint:StyleBlock runat="server">

body #s4-leftpanel {

                display:none;

}

.s4-ca {

                margin-left:0px;

}

</SharePoint:StyleBlock>

</asp:Content>

<asp:Content ContentPlaceHolderId="PlaceHolderSearchArea" runat="server">

                <SharePoint:DelegateControl runat="server"

                                ControlId="SmallSearchInputBox"/>

</asp:Content>

<asp:Content ContentPlaceHolderId="PlaceHolderPageDescription" runat="server">

                <SharePoint:ProjectProperty Property="Description" runat="server"/>

</asp:Content>

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

 

<script type="text/javascript"> 

    function hideshow(elmt) { 

        if (elmt == "divtab1") { 

            $("#HomeContent").show(); 

            $("#HRContent").hide(); 

            $("#ITContent").hide(); 

            $("#ContactContent").hide(); 

            $("#QuestionsContent").hide(); 

        } else if (elmt == "divtab2") { 

            $("#HomeContent").hide(); 

            $("#HRContent").show(); 

            $("#ITContent").hide(); 

            $("#ContactContent").hide(); 

            $("#QuestionsContent").hide(); 

        } else if (elmt == "divtab3") { 

            $("#HomeContent").hide(); 

            $("#HRContent").hide(); 

            $("#ITContent").show(); 

            $("#ContactContent").hide(); 

            $("#QuestionsContent").hide(); 

        } else if (elmt == "divtab4") { 

            $("#HomeContent").hide(); 

            $("#HRContent").hide(); 

            $("#ITContent").hide(); 

            $("#ContactContent").show(); 

            $("#QuestionsContent").hide(); 

        } else if (elmt == "divtab5") { 

            $("#HomeContent").hide(); 

            $("#HRContent").hide(); 

            $("#ITContent").hide(); 

            $("#ContactContent").hide(); 

            $("#QuestionsContent").show(); 

        } 

    } 

</script>

 

<div id="divmain"> 

    <div id="divNavigation"> 

        <div id="divtab1" onclick="hideshow(this.id);" class="navigation"> Home </div> 

        <div id="divtab2" onclick="hideshow(this.id);" class="navigation">HR </div> 

        <div id="divtab3" onclick="hideshow(this.id);" class="navigation">IT </div> 

        <div id="divtab4" onclick="hideshow(this.id);" class="navigation">Contact US </div> 

        <div id="divtab5" onclick="hideshow(this.id);" class="navigation">Questions </div> 

    </div> 

    <div id="divContent"> 

        <div id="HomeContent"> 

            <div> Add ur Content for home page </div> 

        </div> 

        <div id="HRContent" style="display:none"> 

            <div> Add ur Content for HR page </div> 

        </div> 

        <div id="ITContent" style="display:none"> 

            <div> Add ur Content for IT page </div> 

        </div> 

        <div id="ContactContent" style="display:none"> 

            <div> Add ur Content for Contact page </div> 

        </div> 

        <div id="QuestionsContent" style="display:none"> 

            <div> Add ur Content for Questions page </div> 

        </div> 

    </div> 

</div> 

                <div class="ms-hide">

                <WebPartPages:WebPartZone runat="server" title="loc:TitleBar" id="TitleBar" AllowLayoutChange="false" AllowPersonalization="false" Style="display:none;"><ZoneTemplate>

                <WebPartPages:TitleBarWebPart runat="server" HeaderTitle="Untitled_3" Title="Web Part Page Title Bar" FrameType="None" SuppressWebPartChrome="False" Description="" IsIncluded="True" ZoneID="TitleBar" PartOrder="2" FrameState="Normal" AllowRemove="False" AllowZoneChange="True" AllowMinimize="False" AllowConnect="True" AllowEdit="True" AllowHide="True" IsVisible="True" DetailLink="" HelpLink="" HelpMode="Modeless" Dir="Default" PartImageSmall="" MissingAssembly="Cannot import this Web Part." PartImageLarge="" IsIncludedFilter="" ExportControlledProperties="True" ConnectionID="00000000-0000-0000-0000-000000000000" ID="g_17fd993a_941a_4a6b_af46_082710afe3fd" AllowClose="False" ChromeType="None" ExportMode="All" __MarkupType="vsattributemarkup" __WebPartId="{17FD993A-941A-4A6B-AF46-082710AFE3FD}" WebPart="true" Height="" Width=""></WebPartPages:TitleBarWebPart>

 

                </ZoneTemplate></WebPartPages:WebPartZone>

  </div>

  <table class="ms-core-tableNoSpace ms-webpartPage-root" width="100%">

                                                                <tr>

                                                                                <td id="_invisibleIfEmpty" name="_invisibleIfEmpty" valign="top" width="100%">

                                                                                <WebPartPages:WebPartZone runat="server" Title="loc:FullPage" ID="FullPage" FrameType="TitleBarOnly"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </td>

                                                                </tr>

                                                                <SharePoint:ScriptBlock runat="server">if(typeof(MSOLayout_MakeInvisibleIfEmpty) == "function") {MSOLayout_MakeInvisibleIfEmpty();}</SharePoint:ScriptBlock>

                                </table>

</asp:Content>