1 – Office Add-in là gì?
Chắc hẳn ở đây các bạn đều đã ít nhất một lần từng nghe nói tới Microsoft Office. Các phần mềm như Word, Excel, Powerpoint, … đã trở thành một công cụ không thể thiếu trong giới văn phòng chúng ta. Nó cung cấp hàng loạt những công cụ về format dữ liệu, tính toán để phục vụ mục đích của người dùng cuối.
Tuy nhiên, liệu với những công cụ mà Microsoft tích hợp sẵn đó đã đủ để phục vụ tất cả các mục đích của người dùng chưa? Câu trả lời tất nhiên là CHƯA – Vì nhu cầu của người dùng quá đa dạng và không thể đoán trước được.
Biết được điều này, trước đây trong các ứng dụng Office ví dụ như Excel, Microsoft đã cung cấp một công cụ gọi là Microsoft Visual Basic for Applications (VBA) có thể giúp người dùng tự khai báo một tập hợp những câu lệnh (Macros) để xử lý một tác vụ nào đó.
Tuy nhiên cho tới thời điểm hiện nay, ngôn ngữ Visual Basic đã không còn phù hợp với giới trẻ vì nó không có quá nhiều đất dụng võ. Và khi viết Add-in với VBA thì chỉ được sử dụng cho ứng dụng Excel hiện tại. Muốn sử dụng Add-in ở một máy khác, bạn phải làm nhiều bước để export/import nó ra mất thời gian và công sức.
Đó là các lý do để Microsoft cho ra đời Office Add-in. Giúp cho người dùng có thể tự phát triển Add-in (extension) cho ứng dụng office của mình với những ngôn ngữ phổ biến hiện tại như Plain HTML, CSS, JavaScript hay ReactJS. Sau đó có thể upload Add-in của mình lên Store và dễ dàng import sử dụng ở các máy tính khác.
2 – Điều kiện tiên quyết
Để có thể chạy được môi trường phát triển Add-in. Bạn phải đảm bảo máy tính của bạn đã có NodeJS Runtime version 8.0.0 trở lên và đã cài đặt sẵn bộ Office
Môi trường hiện tại của máy tính demo là:
- Windows 10 Pro 64 bit (Build 18363)
- NodeJS version 18.16.1
- Microsoft Office 365
- Visual Studio Code (Tool text editor để có thể edit code của Add-in. Bạn có thể sử dụng bất kỳ chương trình text editor nào khác để thay thế)
3 – Yeoman
3.1 – Yeoman là gì?
Yeoman Generator hay còn gọi là Yeoman là một công cụ giúp tạo project Office Add-in chạy trên môi trường NodeJS. Add-in này có thể sử dụng trong các ứng dụng office như Excel, Word, Outlook, Powerpoint, …
Người dùng có thể chọn khởi tạo Add-in project với ngôn ngữ HTML, CSS, JavaScript hoặc sử dụng ReactJS. Yeoman cũng hỗ trợ người dùng code theo cú pháp JavaScript hoặc TypeScript.
Link tham khảo thêm về Yeoman: Tại đây
3.2 – Câu lệnh để tạo project Office Add-in
Trong bài viết này, mình sẽ sử dụng Excel làm ví dụ để minh họa cho dễ hiểu. Sử dụng câu lệnh dưới đây để tạo project Excel Office Add-in:
yo office --projectType <Input_projectType> --name "Input your Add-in name" --host <Input_Office_Software> --ts <boolean>Trong đó:
- –projectType: Chọn kiểu project để code Add-in trong 5 options bên dưới
taskpane: Task Pane add-in sử dụng plain HTML, CSS, JavaScript
react: Task Pane add-in sử dụng React
excel-functions: Task Pane add-in với Excel Custom Functions
single-sign-on: Taskpane add-in hỗ trợ single-sign-on
manifest: Tạo ra các file cấu hình Office Add-in - –name: Tên của project Add-in
- –host: Ứng dụng muốn install Add-in. Ví dụ excel, word, …
- –ts: Nhập true nếu sử dụng Typescript
3.3 – Tạo project Excel Office Add-in với ReactJS
Lần lượt làm theo các bước như ảnh dưới đây:
3.4 – Thử chỉnh sửa ví dụ mặc định của project
Đối với những bạn dev Frontend đã quen với việc sử dụng HTML, JavaScript, ReactJS thì source code của project sẽ không có gì khó hiểu. Hãy thử làm quen và chỉnh sửa cùng mình nhé
4 – Kết luận
Ưu điểm
- Yeoman Office Add-in là một công cụ hỗ trợ khởi tạo Office Add-in rất tiện lợi, setup đơn giản với chỉ vài câu lệnh đơn giản.
- Hỗ trợ đa dạng từ Plain HTML tới ReactJS phổ biến, đủ để lập trình viên có thể dễ dàng làm quen và phát triển.
- Hỗ trợ cả JavaScript và TypeScript phù hợp với đa dạng đối tượng sử dụng.
Nhược điểm
- Office Add-in chưa phổ biến nên tài liệu về Office Add-in khá khó khăn để có thể tìm kiếm trên Internet
Vì bài viết trên blog là có giới hạn, nên mình sẽ không đi quá nhiều vào các ví dụ phức tạp. Nếu cần tìm hiểu thêm, các bạn vui lòng tham khảo thêm ở một số đường link sau:
- GitHub – OfficeDev/office-js: A repo and NPM package for Office.js, corresponding to a copy of what gets published to the official “evergreen” Office.js CDN, at https://appsforoffice.microsoft.com/lib/1/hosted/office.js.
- Develop Office Add-ins – Office Add-ins | Microsoft Learn
- GitHub – OfficeDev/generator-office: Yeoman generator for building Microsoft Office related projects.
