สร้าง Excel Add-ins อันทรงพลัง: คู่มือ JavaScript ขั้นตอนละเอียด

Custom Add-ins เป็นเครื่องมืออันทรงพลังขยายความสามารถของ Excel สร้าง Add-ins เองเพื่อทำ Automation งานซ้ำ สร้าง Custom Functions หรือให้เครื่องมือเฉพาะเจาะจง บทความนี้จะสร้าง Custom Add-in เพื่อเพิ่มฟังก์ชันการทำงาน

บทช่วยสอนนี้จะนำทางสร้าง Excel Add-in แบบ Custom ด้วย JavaScript และ Office Add-ins Framework โดยใช้ ExchangeRates API สร้าง Add-in แปลงสกุลเงิน

ขั้นตอนที่ 1: ตั้งค่าสภาพแวดล้อม Development

ติดตั้ง Prerequisites:

• Install Node.js:
  • ดาวน์โหลดและติดตั้ง Node.js
• Install VS Code:
  • ดาวน์โหลดและติดตั้ง Visual Studio Code
• Install Office Add-in CLI:
  • เปิด PowerShell หรือ Terminal รัน:

npm install -g yo generator-office

• Install Excel:
  • ต้องมี Excel 2016 ขึ้นไป (แนะนำ Office 365)
  • เราใช้ MS Office 365

ขั้นตอนที่ 2: สร้าง Add-in Project ใหม่

• เปิด PowerShell หรือ Command Prompt Run as Administrator
• รันคำสั่งสร้าง Office Add-in Project:

• จะถาม Continue หรือ Exit
• เลือก Continue ดำเนินต่อ
  • ใช้ Arrow Keys เลือก Continue กด Enter

• ต่อมา จะถามรายละเอียด Add-in ที่ต้องการสร้าง:
  • Choose a project type:
    • เลือก Task pane add-in (Arrow Keys + Enter)
  • Choose a script type:
    • เลือก JavaScript หรือ TypeScript ตามชอบ
  • What do you want to name your add-in?
    • พิมพ์ชื่อโปรเจกต์ (เช่น CustomAddin)
  • Which Office client application would you like to support?
    • เลือก Excel

• รอ Generator เสร็จ จะสร้างโฟลเดอร์โปรเจกต์พร้อมไฟล์จำเป็น:
  • taskpane.html: UI ของ Task Pane
  • taskpane.js: JavaScript สำหรับ Task Pane
  • manifest.xml: อธิบาย Add-in ให้ Office

ขั้นตอนที่ 3: เปิด Project ใน Visual Studio Code

หลัง Setup เสร็จ เปิดโฟลเดอร์โปรเจกต์ใน VS Code ผ่าน Terminal หรือเปิดตรงใน VS Code โฟลเดอร์จะอยู่ที่ Directory ที่รัน yo office ชื่อตาม Add-in (เช่น CustomAddin)

Navigate ไปโฟลเดอร์ Project ใน Terminal:

• ใน PowerShell/Command Prompt ใช้ cd เข้าโฟลเดอร์โปรเจกต์
• รันคำสั่งเข้าโฟลเดอร์

เปิดโฟลเดอร์ใน VS Code:

• อยู่ในโฟลเดอร์โปรเจกต์แล้ว เปิดใน VS Code จาก Terminal
• รันคำสั่งเปิดโฟลเดอร์ใน VS Code:

• จะเปิดโปรเจกต์ทั้งหมดใน VS Code

เปิด Project Folder โดยตรงใน VS Code:

• เปิด File Explorer (Windows) หรือ Finder (Mac) ไปโฟลเดอร์ที่ Yeoman สร้าง
• Right-click โฟลเดอร์โปรเจกต์ (เช่น CustomAddin) >> Open with Code ถ้าติดตั้ง VS Code
• หรือเปิด VS Code >> File >> Open Folder เลือกโฟลเดอร์โปรเจกต์

ขั้นตอนที่ 3: สร้าง Real-Time Currency Converter

เปิดโปรเจกต์ใน VS Code เริ่มแก้ไขและสร้าง Add-in:

Install Dependencies:

ถ้ายังไม่ติดตั้ง Dependencies (เช่น Office.js) เปิด Terminal ใน VS Code รันคำสั่ง

Update taskpane.html และ taskpane.js ใน VS Code

แก้ไข HTML, JavaScript, CSS ในโฟลเดอร์ src/ กำหนดฟังก์ชันและหน้าตา Add-in

Modify taskpane.html:

เปิด taskpane.html แทนที่เนื้อหาด้วย:

<!DOCTYPE html> <html> <head> <title>Currency Converter</title> <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script> <script src="./taskpane.js"></script> </head> <body> <h2>Currency Converter</h2> <label for="fromCurrency">From:</label> <input id="fromCurrency" type="text" placeholder="e.g., USD" /> <br> <label for="toCurrency">To:</label> <input id="toCurrency" type="text" placeholder="e.g., EUR" /> <br> <button id="convertButton">Convert</button> <p id="status"></p> </body> </html>

คำอธิบาย:

• <head> Section:
  • <title>: ตั้ง Title เป็น “Currency Converter”
  • <script>:
    • Include office.js สำหรับ Office Add-in Integration
    • Link taskpane.js สำหรับ Custom JS

• <body> Section:
  • <h2>: แสดง Heading “Currency Converter”
  • <label> และ <input>: Input Fields สำหรับ User (fromCurrency, toCurrency)
  • <button>: กดเพื่อแปลงสกุลเงิน
  • <p>: แสดง Status/Error Messages

Layout นี้เป็น UI สำหรับ Excel Add-in

Adding Logic in taskpane.js:

เปิด taskpane.js แทนที่เนื้อหาด้วยโค้ดนี้:

Office.onReady(() => { document.getElementById('convertButton').addEventListener('click', convertCurrency); }); async function convertCurrency() { const fromCurrency = document.getElementById('fromCurrency').value.toUpperCase(); const toCurrency = document.getElementById('toCurrency').value.toUpperCase(); if (!fromCurrency || !toCurrency) { document.getElementById('status').innerText = "Please enter valid currencies."; return; } try { const apiKey = "Your_Api_Key"; // Replace with your ExchangeRates API key const url = `https://api.exchangerate-api.com/v4/latest/${fromCurrency}`; const response = await fetch(url); const data = await response.json(); const rate = data.rates[toCurrency]; if (!rate) { document.getElementById('status').innerText = `Invalid conversion rate for ${toCurrency}.`; return; } await Excel.run(async (context) => { const range = context.workbook.getSelectedRange(); range.load("values"); await context.sync(); const convertedValues = range.values.map(row => row.map(cell => cell * rate) ); range.values = convertedValues; document.getElementById('status').innerText = `Converted to ${toCurrency} successfully.`; await context.sync(); }); } catch (error) { console.error(error); document.getElementById('status').innerText = "Error fetching conversion rate."; } }

คำอธิบาย:

• Office.onReady: Initialize Add-in เมื่อ Office พร้อม
• convertCurrency Function:
  • อ่านค่า Input Currencies (fromCurrency, toCurrency)
  • Validate Inputs ดึง Exchange Rate ผ่าน API
  • ใช้ Excel.run ใช้การแปลงกับเซลล์ที่เลือกใน Excel
  • แสดงข้อความสำเร็จ/Error ใน Task Pane
• Error Handling: Catch และ Log Errors จาก API หรือ Excel Runtime ให้ Feedback ผู้ใช้

ขั้นตอนที่ 4: ทดสอบ Add-in

ทดสอบ Add-in ว่าทำงานใน Excel ยังไง

• ถ้าไม่อยู่ในโฟลเดอร์โปรเจกต์ Navigate ไปใน Terminal
• รันคำสั่งใน VS Code Terminal

• เริ่ม Development Server รันคำสั่ง:

• จะถาม: “? Allow localhost loopback for Microsoft Edge WebView?”
• พิมพ์: Yes

คำสั่งนี้จะเปิดไฟล์ Excel

• Excel จะเปิด และ Add-in โหลดอัตโนมัติใน Task Pane
  • เลือกช่วงเซลล์ที่มีค่าในสกุลเงินต้นทาง
  • เราเลือก A2:A10
  • ในกล่อง From: ใส่ USD กล่อง To: ใส่ EUR
  • คลิก Convert

ขั้นตอนที่ 5: Deploy Add-in

Deploy ไป Office 365 หรือแชร์ในองค์กร โดย Package Add-in และ Upload ไป Office Store

วิธี Package Add-in:

• ใน Terminal รัน:

• จะสร้าง Production Build ของ Add-in สำหรับ Host บน Web Server หรือ Cloud เช่น Azure

ปัญหา Setup Environment ที่พบบ่อยและวิธีแก้

• Script Execution Policy Error (npm.ps1 cannot be loaded)
  • Solution: ตั้ง Execution Policy รัน:

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

• yo Command Not Recognized
  • Solution: ตรวจสอบ Yeoman ติดตั้งถูกต้อง รัน:

• • Verify Installation รัน:

• Permission Issues When Installing Packages
  • Solution: Run PowerShell/Command Prompt as Administrator หรือใช้ flag –force ตอน Install

สรุป

ทำตามขั้นตอนข้างต้นจะสร้าง Currency Converter Add-in ใน Excel ได้ เราครอบคลุมรายละเอียด: Setup Development Environment, Build Add-in, Implement Functionality ด้วย JavaScript สามารถขยายฟังก์ชันเพิ่มเติมได้อีกมาก

Get FREE Advanced Excel Exercises with Solutions!