4

I'm trying to create a PowerPoint content add-in with Office JS and the PowerPoint JavaScript API that is capable of embedding HTML and React components into slides. This is my first time trying to create a PowerPoint add-in, so any suggestions or advice are greatly appreciated.

So far, I am encountering very basic issues even creating a PowerPoint content add-in since I haven't been able to find any example of PowerPoint content add-in code online: all of the examples in the Microsoft docs are of task panel add-ins and the one content add-in linked is for Excel and composed in C#. Yeoman also has no generator for content add-ins.

Essentially, I need the ability to create and render UI with JavaScript, CSS, HTML, and React inside Power Point slides. Creating a task panel app that renders React components inside the task panel is straightforward, but I have not found a similar method of rendering React components in slide content areas. Changing the AppType to ContentApp in the manifest.xml as recommended in the Microsoft docs renders a content area in a slide with a loading spinner that never resolves that I don't know how to manipulate.

I'm also considering solutions leveraging existing add-ins like LiveWeb for displaying a React app inside PowerPoint slides, but haven't gotten this to work so far due to ActiveX issues.

How can I render HTML or React components inside PowerPoint slides with a PowerPoint content add-in?

Here is the manifest.xml. It's pretty minimal since I'm not quite sure how it should be configured for a content add-in: essentially, I've used the Yeoman React project generator for task panel add-ins (since a content add-in generator isn't available) and removed the task panel specific configuration.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0" xsi:type="ContentApp">
  <Id>08da2054-d887-45bc-b1d7-4667a52407c3</Id>
  <Version>1.0.0.0</Version>
  <ProviderName>ContentApp</ProviderName>
  <DefaultLocale>en-US</DefaultLocale>
  <DisplayName DefaultValue="ContentAddin"/>
  <Description DefaultValue="A template to get started."/>
  <IconUrl DefaultValue="https://localhost:3000/assets/icon-32.png"/>
  <HighResolutionIconUrl DefaultValue="https://localhost:3000/assets/icon-64.png"/>
  <Hosts>
    <Host Name="Presentation"/>
  </Hosts>
  <DefaultSettings>
    <SourceLocation DefaultValue="https://localhost:3000/home.html"/>
    <RequestedHeight>700</RequestedHeight>
    <RequestedWidth>500</RequestedWidth>
  </DefaultSettings>
  <Permissions>ReadWriteDocument</Permissions>
</OfficeApp>
Eugene Astafiev
  • 47,483
  • 3
  • 24
  • 45
ionosphere
  • 373
  • 2
  • 13
  • This should be possible. Please share your manifest and the JavaScript (or TypeScript) code so we can see where the spinner is called and under that circumstances. – Rick Kirkham May 23 '23 at 21:19
  • @RickKirkham Thanks! I've added the manifest. It's pretty minimal and I'm not sure it's correct. As for the spinner, it's not rendered anywhere in the TypeScript. It's a box containing a spinner that renders in the slide that appears to be some sort of PowerPoint content addin placeholder (and doesn't render if I change the app type to Task Panel app). – ionosphere May 23 '23 at 22:37
  • So is there actually a file home.html? Does it have a with content? – Rick Kirkham May 24 '23 at 01:18
  • Yes, there is a home.html file with a with content. The content itself is a placeholder for the moment (just a div with text). – ionosphere May 24 '23 at 01:36
  • 1
    I haven't had a chance to work on this. But I've found some sample content add-ins, at least one PowerPoint. They might give something to compare with. They are all old. https://github.com/OfficeDev/Office-Apps/tree/master/PeopleGraph, https://github.com/OfficeDev/Office-Apps/tree/master/ModernTrend, https://github.com/OfficeDev/Office-Apps/tree/master/FunnelChart, https://github.com/OfficeDev/hands-on-labs/tree/35d6661dc7fb803ff8414d3f3cde2f97fa57d7df/O3652/O3652-3%20Deep%20Dive%20in%20Office%20PowerPoint%20Add-ins, https://github.com/OfficeDev/Excel-Content-Add-in-Humongous-Insurance – Rick Kirkham May 26 '23 at 23:16
  • 1
    There's also this one which was an attempt to convert a taskpane to a content add-in. It's only about 2 years old. https://github.com/OfficeDev/Office-Addin-Content – Rick Kirkham May 26 '23 at 23:18
  • Before I invest any more time in this, can you tell me the use case for the content add-in? It should be oriented to CONTENT, like the one here which embeds videos in slides: [PowerPointTV](https://github.com/OfficeDev/hands-on-labs/blob/35d6661dc7fb803ff8414d3f3cde2f97fa57d7df/O3652/O3652-3%20Deep%20Dive%20in%20Office%20PowerPoint%20Add-ins/previous%20hol/Lab.md). It should NOT be a dashboard. For example, this sample should have been a task pane, not a content add-in: [Excel Content Add-in Humongous Insurance](https://github.com/OfficeDev/Excel-Content-Add-in-Humongous-Insurance). – Rick Kirkham May 27 '23 at 18:22
  • @Rick Thanks! Finally got it working and was able to render a React app iframed into a slide. Our use case was embeding a data visualization app in PowerPoint slides. The setup was basically right: all it needed was a slight adjustment to the pathing in the manifest.xml and the webpack path resolution. – ionosphere May 27 '23 at 20:14

1 Answers1

0

I finally got it working and was able to render a React app in a PowerPoint slide. The setup for the manifest.xml above was basically right: all it needed was a slight adjustment to the SourceLocation pathing to http rather than https and the webpack path resolution to pick up the home.html to embed the React app in a slide. Here is the code I needed to add to my webpack.config for HTMLWebpackPlugin:

new HtmlWebpackPlugin({
        filename: "home.html",
        template: "./src/home.html",
        chunks: ["player", "vendor", "polyfills"],
      })
ionosphere
  • 373
  • 2
  • 13
  • Your answer doesn't help other people who encounter your symptoms. Please specify what the correct SourceLocation should be and the correct webpack. – Rick Kirkham May 28 '23 at 02:54
  • @Rick Kirkham: Good point, thanks. I’ve added more specific details regarding the correct webpack and SourceLocation to help others who encounter the same issue. Sorry, I wanted to post something quickly earlier so you wouldn’t have to spend any more time on this. It turned out to be simpler than expected to resolve. Thanks again for all your help! – ionosphere May 28 '23 at 03:04