officedev / office-addin-taskpane-react-js Goto Github PK
View Code? Open in Web Editor NEWTemplate to get start started writing a TaskPane Office Add-in for the React framework using JavaScript
License: Other
Template to get start started writing a TaskPane Office Add-in for the React framework using JavaScript
License: Other
HI, I found that TaskPane Add in cache is inside
C:\Users\USERNAME\AppData\Local\Microsoft\Office\16.0\Wef\AppCommands, I can only update it by clicking at my addin tab(take excel for example) and select the addin then click 'add'.
Is there an api/programmatic way to update the cache? I tried with Marco but seems it can only deal with the automation add-ins instead of the web add-in
I was trying to implement react-router-dom the same as I do in normal react js web page in Office-Addin-TaskPane-React-JS but it does not work, is it possible to implement routes?
Hi,
I have been trying to dockerize the app without much success. Since I don't have much experience on ReactJS webpack apps I was hoping you would have some instructions on how to do it for this project in particular.
Thanks in advance.
according to here. The "Get Add-In"-Button is only displayed when outlook is connected to a outlook-emailadress. Is this correct? If yes, there should be a big disclaimer on the documentation page & the github-readme page that it only works with an MS emailadress to save others the time.
I'm getting a very ambiguous error when trying to connect to my websocket server
Error: SecurityError
I've searched multiple places - stackoverflow has tons of office-js questions and 0 answers. Can anyone point me in the right direction to sovle this issue? Can i just disable security and bypass this?
Setting below value in the terminal as per the documentation
defaults write com.microsoft.Excel OfficeWebAddinDeveloperExtras -bool true
However, I don't see inspect option upon right-clicking in the task pane
i want to open automatically this Add-in when open word document how i can ?
Okay so I used yeo generator for react to make outlook add in.
local development works awesome.
I have a developer 365 account desktop Mac version of Outlook, can login in also to web version.
To test the add in with other team mates who are not developers or have a dev setup I added accounts in my office 365 so they can have access.
I did an npm run build and put the dist folder on my https://mydomain.com/dist and my manifest.prod.xml reflects that
the domain is on shared hosting but figure that doesn't matter as its a bundled up app with everything included
I went into admin center of office 365 -> integrated apps upload custom app ... filled out input with
"https://mydomain.com/dist/manifest.prod.xml" .. it validated and said can take upto 6 hours to show in app.
It eventually showed up ... now when I open it from desktop Outlook the sidebar opens has name at top and the Loading spinner goes for a second then disappears but sidebar stays blank , Inspecting ..safari opens I see
also Network tab shows it get all the files in from https://mydomain.com/dist without error, react and any libraries are bundled in taskpane.js as they should be
It just seems that when office ready the app isn't loading in?
Not sure what next steps to take to diagnose.. sprinkle console.logs here and there change manifest version re build re upload wait for it to refresh in outlook try check logs try again?
EDIT console.logs are omitted in prod build it seems
Although the React version is 17~, the current template uses class-components.
I think it may help to update the template to use functional class components and hooks, especially for new-comers to office add-ins and react post-class components.
I would be willing to open a PR for this update.
Hi,
Was wondering if we could eventually get some samples for react hooks? Particularly, react hooks with event listeners if at all possible.
Thanks!
I am expecting to have text inserted using my dialog. I have spent literally hours and it drives me mad.
The current behaviour works ONLY from the developer window - WHICH USES THE same code than the DIALOG WINDOW
let count = 0
export async function writeToWordImpl (text) {
return Word.run(async context => {
count = count +1
let text_ = text + count.toString()
console.log("Writing Word:", text_)
var body = context.document.body;
console.log("Writing Word - BODY:", text_)
// Queue a command to insert the paragraph at the end of the document body.
try{
console.log("Writing Word - B4 TRY:", text_)
body.insertParagraph(text_, Word.InsertLocation.end)
console.log("Writing Word - SHOULD HAVE INSERTED OK:", text_ )
}
catch(error) {
//never printed
console.log("Writing Word - CATCH:", error)
}
console.log("Writing Word - SHOULD HAVE INSERTED OK 2:", text_)
// body.insertParagraph('Content of a new paragraph', Word.InsertLocation.end)
// Synchronize the document state by executing the queued commands,
// and return a promise to indicate task completion.
await context.sync().then(function () {
console.log('Paragraph added at the end of the document body.');
})
.catch(function (error) {
//never printed
console.log('Error sync paragragh: ', error);
})
console.log("Writing to Word 8 - SYNC:", text)
})
.catch(function (error) {
//never printed
console.log('Error insert paragragh: ', error);
})
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.