1

I am developing an Office/Excel Web addin using React in which I have some Ribbon/ContextMenu button which needs to update data in Taskpane UI. Previously I was using Storage event and it was working fine. However recently I moved to Shared JS Runtime which stopped Storage event as now Commands and Taskpane both work under same Page so definitely Storage event will not fire as per definition. I am struggling to find out any possible solution/event in Shared Js Runtime to fire an event from commands.js to Taskpane/Component/App.js file. Please suggest

user1455675
  • 81
  • 7
  • Please explain why you need an event. If you are using a shared runtime, then the ribbon button and the task pane share the same global namespace, don't they? So, the button can just update a global data object. – Rick Kirkham May 15 '21 at 23:20
  • Thank you for response @RickKirkham. Let's assume I have three Radio buttons in Taskpane page and three buttons in Ribbon. When user click on Ribbon button, I need to check respective Radio button in Taskpane. – user1455675 May 16 '21 at 03:14
  • Might be I am over-looking something as newbie in this domain. My "command.js" where Ribbon button event handler is a simple Javascript file whereas App.js is React Component class where I have Radio buttons. – user1455675 May 16 '21 at 03:23
  • Try this: Have the ribbon button set handler set a global variable. Set up an observer pattern in the task pane that checks that variable every 10th of a second to see if it's value has changed since the last time it was checked. If it has changed, use the new value of the global variable to change the state of the React component. – Rick Kirkham May 16 '21 at 08:33
  • Dear @RickKirkham , What I understand from your comments. I exported "getGlobal" function in Commands.js file like this: `export function getGlobal() { return typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : undefined; }` and then imported it into App.js file `import { getGlobal } from '../../commands/commands'` But it is not compiling and giving error at build time _ERROR in ./src/commands/commands.html 1:0 Module parse failed: Unexpected token_ – user1455675 May 16 '21 at 16:41
  • ERROR in ./src/commands/commands.html 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders > | | @ ./src/taskpane/components/App.js 198:0-52 631:31-40 636:26-35 @ ./src/taskpane/index.js @ multi react-hot-loader/patch ./src/taskpane/index.js ERROR in chunk taskpane [entry] taskpane.js – user1455675 May 16 '21 at 16:47
  • @RickKirkham can you please share some code what you are suggesting? – user1455675 May 16 '21 at 16:48
  • Anyone please???? – user1455675 May 17 '21 at 16:07
  • See this sample: [Share global data with a shared runtime](https://github.com/OfficeDev/PnP-OfficeAddins/tree/master/Samples/excel-shared-runtime-global-state). – Rick Kirkham May 17 '21 at 20:33
  • I have following loader defined in Webpack.config.js which seems different than your solution repository: `rules: [ { test: /\.jsx?$/, use: [ 'react-hot-loader/webpack', 'babel-loader', { loader: "babel-loader", options: { presets: ["@babel/preset-env"] } } ], exclude: /node_modules/ },` This might causing loader error I mentioned above??? – user1455675 May 18 '21 at 02:59
  • Since your add-in has a command.HTML file, I think **MAYBE** you will need to call the html-loader inside the `rules` section of the webpack config. This is what it looks like in our sample: ```{ test: /\.html$/, exclude: /node_modules/, use: "html-loader" },``` But the webpack issue is different from your original problem and it should be a new question on Stack, tagged with webpack. – Rick Kirkham May 18 '21 at 18:29

1 Answers1

1

The following github repo illustrates one way of updating the task pane when you press a ribbon button.
https://github.com/OfficeAddins/sharedruntime

enter image description here

Dharman
  • 30,962
  • 25
  • 85
  • 135
BetterSolutions.com
  • 677
  • 1
  • 6
  • 10
  • Its not clear yet. In this add-in we have single JS file but eventually professional application will have separate files for Functions/Commands/Taskpane so would be better if we access it using separate files in real world scenario. – user1455675 May 28 '21 at 07:40
  • This does not seem to work for Word at all....the add-in does not load – Franek Kuciapa Mar 04 '22 at 17:34
  • Hi, I have this same scenario, did you find any solution? I have stuck here and it is becoming frustrating for me. @user1455675 – Muhammad Haroon Iqbal Apr 12 '23 at 04:41
  • This particular example will only work in Excel. This is controlled by the manifest file: If you need the sample to work in Word, you will need to change the host to "Document" – BetterSolutions.com Apr 13 '23 at 10:06