Unable to transfer data to the dialog box; "Failed to execute 'addHandlerAync' on 'Office.context.ui'"

I am attempting to transmit data to a dialog box within an Outlook web add-in.

var url = window.location.origin+'/dialog.html'
var dialog
Office.context.ui.displayDialogAsync(url2,
       function (asyncResult) {
           dialog = asyncResult.value;
           dialog.messageChild('message')     
           });

This code opens a dialog box and tries to pass information to the dialog using the following Javascript:

Office.onReady().then(()=> {
        Office.context.ui.addHandlerAsync(
            Office.EventType.DialogParentMessageReceived,
            onMessageFromParent);         
    });

function onMessageFromParent(arg){
    console.log(arg.message)
    document.getElementById('ID').style.display = 'none';
}

However, upon running this code, I encounter the error message:

TypeError: Office.context.ui.addHandlerAsync is not a function

Upon logging console.log(Office.context.ui), the output indicates:

OSF.DDA.UI.ParentUI
[[Prototype]]:Object
closeContainer:function(){ … }
displayDialogAsync:function(){ … }
openBrowserWindow:function(){ … }
__proto__:Object

It is evident that there is no addHandlerAync function found in Office.context.ui, despite it being recommended by Microsoft's documentation.

What could be causing this issue? Any help would be appreciated. Thanks

Answer №1

After reviewing your add-in, I noticed that taskpane.html is not finished and the JavaScript is missing. Even though, I took the initiative to manually open the dialog page in the debugger and verified that the code in dialogbox.html is functioning properly. I observed that Office.context.ui.addHandlerAsync is accessible within the Office.onReady handler. Would you be interested in enhancing your add-in and ensuring everything is functioning correctly?

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

Tips for aligning multiple identical images horizontally using Javascript

I am attempting to use the following code to display the same image 19 times and then center all of those images horizontally on the page as a whole. However, I have been unsuccessful in getting it to work. var totImg = "large.png"; function prettyHea ...

Ensure that the letters of the Alphabet are capitalized when there is a space before them while typing in the text box

Is there a way to automatically capitalize the letter that comes after a space in a user's input in a textbox? For example, if a user types "test new," could we make it so that the "n" is automatically capitalized as if the shift key had been pressed ...

Can you explain the process of obtaining getServerSideProps results for my IndexPage?

Having trouble with the getServerSideProps function. I'm a beginner and struggling to figure out why it's not running properly. Spent hours trying to fix it, but still getting undefined in the IndexPage console.log(props.data) export default fun ...

Issue: Please avoid using HTML tag <img>. Instead, utilize the Image component from 'next/image' - Next.js when working with styled components

While working with Next.js, I encountered an issue with the Image component. Unlike a regular HTML tag, the Image component requires a layout and doesn't offer the same level of control. Additionally, I found that it couldn't be used with framer ...

Selenide is failing to remove elements with the displayed property set to false

On my automation tests, I am struggling to click a radio button. Even though the radio buttons are visible on the page, the unselected ones have the property displayed:false. Selenide seems unable to click if an html object has the displayed:false property ...

Removal of splash screen upon initial visit to the index screen

As the title suggests, I am facing an issue with my Splash screen on index.php. I want it to disappear after loading and not show up each time index is loaded. Any hints or suggestions on how to achieve this would be greatly appreciated. Thank you in adva ...

Regular expressions can be used to extract specific attributes and inner content from a div element within a contentEditable container

Context I am currently developing a tagging system called @Name for my website. Successfully, I have managed to detect names upon keystroke and replace the content with the corresponding div class='tag' data-id='User-id'>Name</di ...

Error occurred in ajax syntax

I found this code online and modified it to suit my needs, but I keep getting a syntax error $(document).ready(function(){ $address = localStorage.getItem('email_address'); $email_field = $('#email_field') if ($address !== null) ...

The Laravel Ajax Request is Returning Null

I am faced with a perplexing issue involving a toggle button that should change the status (Show/Hide). Despite sending valid data via ajax and seeing correct data in the console, the request appears empty in the controller. I've made sure to include ...

Creating a dynamic feature to add a row at the bottom of a table

I am currently working with JavaScript in the context of an AngularJS application, attempting to insert a row at the bottom of a table that shows the total sum of a specific column. Here is the code snippet I am using: var table = document.querySelecto ...

Troubleshooting $digest problems with AngularJS and the selectize directive

I am encountering difficulties when utilizing the watch function within a directive in conjunction with a third-party plugin named selectize. Despite researching extensively about $digest and $watch, I am still facing issues. Although my example below is ...

Guide to uploading a JavaScript File object to Cloudinary via the node.js API

After researching various options, I decided to use cloudinary for uploading a file to an image server from my node js api. I successfully installed the npm package for cloudinary and implemented the code based on their api documentation Below is the fun ...

I'm having trouble with my pagination controls not correctly displaying the next and previous indices. What adjustments should I make to fix this issue?

When a record is clicked in my code, the details are displayed. Within this details section, there are 2 links (previous, next) that allow navigation to the previous and next records. The issue arises when navigating to the next page from pagination – up ...

jquery dialog content vanishing upon second opening

My jQuery code is set up to display a dialog when a button is clicked. The issue I'm experiencing is that after closing the dialog and reopening it, the text area within the dialog appears empty with only three buttons visible. However, upon subsequen ...

Singling out a particular navigation tab

When attempting to link specific table IDs so that the corresponding tab is active when opened (i.e. www.gohome.com/html#profile), I am facing an issue where the active tab remains unchanged. Even after specifically calling out tab IDs, there seems to be n ...

Reverse the text alteration when the user leaves the field without confirming

Upon exiting a text box, I aim to display a confirmation dialogue inquiring whether the user is certain about making a change. If they select no, I would prefer for the text box to revert back to its original state. Is there an uncomplicated method to ach ...

Is there a way to conceal form fields for city and state until the zip code is provided?

Is there a way to only display the city and state form fields after the zip field has been filled out? I have a geo-based program that automatically fills in the city and state based on the zip code entered, but I want to hide these fields until the data ...

Performance issues with Three.js geometry merging

I am currently in the process of learning Three.js and have found the documentation to be a bit challenging to navigate due to the abundance of "todos" scattered throughout. My goal is to showcase anywhere from 50,000 to 500,000 red spheres on the screen. ...

Steps for checking if the specified row has been accurately filled out in a loop

Here is an example of how my JSON data is structured: { "main_object": { "id": "5", "getExerciseTitle": "TestFor", "language": "nl_NL", "application": "lettergrepen", "main_object": { "title": "TestFor", "language": "nl_NL", "exercises": [ { ...

Issue with back button functionality when loading page with history.pushState in JavaScript

My current issue involves loading a page via ajax using history.pushState. The page loads successfully, but the back button does not work as expected. I have included my code below for reference: function processAjaxData(response, urlPath){ document.wr ...