1

I want to write an Office-AddIn (React App) for my research group, that keeps track of chemical compounds in a word document. The software we use to draw molecules at university is called "ChemDoodle", and it comes with a free WebAPI based on HTML5 and JavaScript: ChemDoodleWeb-Components. If you want to use them in plain HTML Websites one would first add two references to the header section of the HTML file:

<link rel="stylesheet" href="[path]/ChemDoodleWeb.css" type="text/css">
<script type="text/javascript" src="[path]/ChemDoodleWeb.js"></script>

and then the libary can be accessed in the body section of the same file simply by

<script>//Do something ChemDoodle related </script>

The "ChemDoodleWeb.js" File presets one variable called "ChemDoodle" to the outside, which is used everywhere do control a canvas.

I am very new to React, OfficeAddIn or JavaScript in general. So my question might be utterly stupid: But is there any chance i can use this libary in my react-office addin? I tried just importing it, and of course it is not a module.

Can anyone that has more clue, have a brief look on the API and tell me, if there is a way?

Thx alot Christoph

Improve this question

2 Answers 2

Reset to default
1

You have a couple of options, either you can download the source and import it locally in the react project using import or require or you can make assumptions that the modules are there and access it through the window, document, or global scopes.

It looks like chemdoodle has a Web Components implementation you may be able to use in react as well. You can use this page as reference: ReactJS web components documentation

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

The source is downloadable, however if I import it with "import" I get an compiler error, that it was unable to resolve it. I am not sure if its really a WebComponent Script
0

The ChemDoodle Web Components is not distributed as a React module, but you can create one from the source provided. If you do not want to do that, I recommend creating the <canvas> elements for the ChemDoodle Web Components while you are setting up the DOM first. You can then use the ChemDoodle Web Components library after everything is set up by React on the <canvas> elements you already created. This tutorial page shows how it works: https://web.chemdoodle.com/tutorial/advanced/initializing-components-after-closing-the-dom

The tutorial shows how to initialize ChemDoodle Web Components on <canvas> elements that already exist in the DOM, and how to create ChemDoodle Web Components in a closed DOM with no pre-existing <canvas> elements.

I also want to address a common misconception about Web Components as Simen stated. The ChemDoodle Web Components are not HTML5 Web Components. The ChemDoodle Web Components library was publicly released on 6/15/2009 https://web.chemdoodle.com/installation/changelog/. W3C Web Components announced by Alex Russell at Fronteers 2011 https://fronteers.nl/congres/2011/sessions/web-components-and-model-driven-views-alex-russell. CWC may support parts of the spec in the future.

Improve this answer

4 Comments

Hi KJTdev! Thanks for your answer :) That helps - at least in a more general understanding. But I think my problem, lies a bit deeper here. I already fail at importing the .js file into my typescript-files. I am writing an office-AddIn in Typescript with React. I included the <script type="text/javascript" src="./ChemDoodleWeb.js"></script> Tag into the taskpane.html file wich is the entry point of the WebApp. But when using the <script> //Do Something </script> tag within my Component render function: nothing happens. Would you be so kind, as to help me out here? Thanks alot
I don't know if this is exactly the issue you are encountering, but the ChemDoodle Web Components is written to ES6 best standards. This means that the ChemDoodle object is accessible in the scope it is imported to, but it is not set to that scope. So if you import it in the global scope, you can access the ChemDoodle variable in the global scope, but it will not be a variable of the global object. If you wish to access ChemDoodle from the global object, you should use the following line of code immediately after you import the CWC library: window.ChemDoodle = ChemDoodle;
Sorry for my stupid questions and thanks for your help! I am very new to this whole, WebApp Development and JavaScript in general. So i have an "App.tsx" File, where I develop the AppComponent of my Office-AddIn. There I want to draw a "ChemDoodle-Canvas". In the top of that .tsx-File I import the ChemDoodle-Libary: `import ChemDoodle from './ChemDoodleWeb.js', however your line fails with parse error: "Property does not exist on type Window & typeof globalThis" Can you maybe specify how and especially where I should import the classes. Also: should I use the unpacked versions or not?
I have no experience with TypeScript, but the error sounds like the window object is capitalized, and you should use "Window.ChemDoodle = ChemDoodle;" instead. What you need to do is make sure the global object has ChemDoodle defined to it so you can access it later from that global object. You can also assign it to any other object you pass around. As for packed vs. unpacked, there should be no difference. In development, use the unpacked version so you can modify and see full error traces. In production, use the packed version for smaller files to download.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.