Determine the number of unread messages in Office365 using SharePoint Online

Currently working on a project with the goal of enhancing the visual appeal of a SharePoint Online site, I've hit a roadblock. Users are requesting to see the number of unread messages in their Office365 inbox on the home page's left banner.

To achieve this, I added a section in the master page where I intended to display the result using the Rest API:

$.ajax ({
    type: "GET",
    url: " https://outlook.office365.com/ews/odata/Me/Folders/Inbox",
    dataType : "json",
    success : function (resp) {
        // count unread messages 
    },
    error : function (e) {
        alert (' Error121212 :' + JSON.stringify (e));
    }
 })

However, I encountered an error related to cross-domain issues. Even after attempting to use JSONP, I faced challenges (uncaught syntax error unexpected token).

I'm seeking advice on whether this approach is best practice, especially considering the need for authentication. When trying JSONP, an authentication popup disrupts the process, leading to callback errors...

I'm hoping to find a solution that doesn't involve developing a deployment requiring a Wsp...

Thank you in advance for any assistance provided.

javascriptajaxjsonsharepointoffice365

Answer №1

It appears that there may be a mistake in the URL you are using for the ajax request. The correct URL to retrieve inbox messages through the API is: 

https://outlook.office365.com/api/v1.0/me/folders/inbox/messages

After receiving the response, you can iterate through the objects with the IsRead property set to false using a simple for loop and then display the count of those unread messages.

Answer №2

The problem at hand is dealing with CORS issues, which arise when browsers reject cross-domain requests. In order to work around this issue, there are a few options available:

  • Adjust the response header on the remote server - unfortunately, this is not feasible in this case
  • Utilize a proxy to manage the requests - this is where SharePoint apps can be beneficial.

Although you mentioned a preference for avoiding WSP style deployment, it's necessary to use the SharePoint App Model in this situation.

This article provides valuable insights into addressing your query. However, for thoroughness, here are the essential steps:

  1. Create a SharePoint hosted app within Visual Studio

  2. In the App Manifest, specify the trust relationship with the external host (e.g., outlook.office365.com) through the AppManifest section

  3. Employ SP.RequestExecutor.executor to handle the request on your behalf

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve relational data through search functionality in Laravel

My Laravel 5.6 project includes the following model code: public function getClassTreaner() { return $this->hasOne('App\User', 'id', 'class_treaner'); } public static function searchScoop($keyword) { $data = ...

javascriptphplaravelvue.jslaravel-5.6

Filtering a section of the HTML using Ajax and jQuery

Dealing with an Ajax call in jQuery that's delivering a lot of unexpected HTML content. I'm attempting to extract the specific part I need, but the console is showing an empty string. Can anyone provide guidance on resolving this issue? $.ajax({ ...

jqueryhtmlajax

The search functionality in an Html table is currently malfunctioning

Currently, I am working on developing a search mechanism in HTML. It seems to be functioning properly when searching for data for the first time. However, subsequent searches do not yield the expected results. Additionally, when trying to search with empty ...

javascriptjqueryhtml

modify header when button is clicked

I am trying to create a JavaScript function that will update the name of an HTML table header when a button is clicked. However, I am having trouble accessing the text content within the th element. document.getElementById("id").text and document.getEl ...

javascripthtmltableheader

Placing PHP Code - Finding the Right Location

As I start building my first website with a database using PHP, I have a simple question. Where is the best place to put your PHP code? In Codecademy, they had me embed the PHP directly into the HTML files (replacing index.html with index.php). However, ...

javascriptphphtml

There was a syntax error encountered: Unexpected token < was found when using renderToString(<RoutingContext {...renderProps} />

I've been experimenting with server-side rendering using React and React-router, piecing together code from different sources. However, I encountered a syntax error (not a run-time error) when attempting to run the app with node. Here's the snipp ...

javascriptnode.jsreactjsreact-router

Saving drag and drop positions in Angular to the database and troubleshooting screen resizing problems

Currently, I'm working on an application that involves dragging and dropping a DIV onto an image. My goal is to save the X and Y coordinates of the dropped DIV to the database so that when the user returns, the position will remain the same. The chal ...

javascripthtmlangularjstwitter-bootstrapdrag-and-drop

Struggling to update state in React despite attempts to modify the state

Even though I have set the defaultAccount state to the metamask account, when trying to print it in the code below, it still shows null. The issue arises with fetching the value of defaultAccount. (Please see the error image below) class App extends Compo ...

javascriptreactjssolidityethers.js

I am looking to insert the indexes of an array into a table data cell (<td>), with the select options being the array's indexes

I'm looking for a way to add the indexes of an array as options in a select field. However, the code provided below is not working as expected. <?php $str4 = "select * from fee_names where status = '1' "; $res4 = mysql_quer ...

javascriptphpjquery

The React Native Expo is throwing an error stating that it is unable to locate the module 'minizlib'

At the instructions available in the read.me of https://github.com/react-community/create-react-native-app Upon selecting my template using the expo init command, I encountered the following error: Cannot find module 'minizlib' Error: Cannot fi ...

javascriptreact-nativenpmexpo

Delete the file containing Mongoose references

I'm facing an issue with deleting questions when a survey is deleted in the Survey model. Even after deleting the survey, the question remains intact in the database. Survey Schema: let surveyModel = mongoose.Schema( { Title: String, T ...

javascriptmongodbexpressmongoose

Is there a way to display the servlet-provided information on the browser rather than the console?

I created a servlet in Eclipse and it is currently running on the Tomcat server. The servlet is fetching data from an API using a username and apitoken. In addition, I have also created a file called index.jsp which includes a navigation bar and some butt ...

javajsonajaxjspservlets

The list of data in the Jquery/Ajax success response is showing as "undefined."

I am facing an issue with my AJAX code. It retrieves a list from the controller, but when I display it, I receive an "undefined" message. AJAX $.ajax( { url: "/Panel/OpenOrderDetail1", type: 'GET&a ...

jqueryajaxasp.net-core

Trouble with clicking buttons in Java and Selenium web scraping

Hey everyone, Currently, I'm working on a Java Selenium script that automates clicking and filling forms for me. I've written a line of code that's causing me some trouble. The intention is to click on a button, but it's not happening ...

javascriptjavaseleniumweb-scrapingxpath

Turn off the selection option in a dropdown menu until a text field is populated

I am working with a textbox and a select box: <div class="form-group col-xs-12 col-sm-3"> <div class="input-group " > <span class="input-group-addon white" >Weight</span> ...

javascriptc#jqueryajax

I seem to be facing an issue in my Reactjs script, but the exact cause of the problem eludes me

I'm currently coding in React and I have an icon that I want to add a hover effect to, similar to CSS. However, I need to achieve this within my React application. Below is the code snippet I've been working on: import React from 'react&apo ...

javascriptreactjs

sending data to a route through a form submission in angular.js

I am working on implementing a search feature based on specific parameters. I have the view /home which contains a form. My goal is to redirect it to the /edit-customer:/customerId view with the customer id. HTML, <form> From: <input typ ...

javascriptjqueryangularjsangularjs-directive

Tidying up JQuery with automatic selection of the next div and navigation item

My primary question revolves around optimizing the code for a functionality where clicking on 5 images reveals a related div while hiding the rest. As a newcomer to jQuery, I feel that my current implementation is somewhat messy and lengthy. Seeking advice ...

javascriptjquery

Having trouble with processing the binding? Use ko.mapping.fromJS to push JSON data into an ObservableArray

Hey everyone, I'm struggling with my code and could really use some help. I'm new to knockout and encountering an issue. Initially, I receive JSON data from the database and it works fine. However, when I click 'Add some', I'm tryi ...

javascriptjsonajaxknockout.js

Encountering a Vue syntax error following the binding of a session variable

Encountering a syntax error while attempting to bind a session variable as a prop of my Vue component. Scrutinizing my code did not reveal any mistakes, but perhaps another set of eyes may catch something. This is where I have registered my components: V ...

javascriptlaravelvue.jsvuejs2