TUGAS DENGAN PAKET OFFICE (TERPADU ) DAN MEMBUAT BLOG
Membangun add-in Outlook dengan manifes terpadu untuk Microsoft 365 (pratinjau)Ada dua alat yang bisa Anda gunakan untuk membuat proyek Add-in Outlook yang menggunakan manifes terpadu untuk Microsoft 365. Artikel ini menjelaskan cara melakukannya dengan generator Yeoman untuk Office (juga disebut "Yo Office"). Alternatifnya, Anda bisa membuat proyek add-in Outlook dengan Teams Toolkit seperti yang dijelaskan di Membuat proyek Add-in Office dengan Teams Toolkit (pratinjau) .
Dalam artikel ini, Anda akan memandu proses pembuatan add-in panel tugas Outlook yang menampilkan properti pesan yang dipilih, memicu pemberitahuan di panel baca, dan menyisipkan teks ke dalam pesan di panel tulis. Add-in ini akan menggunakan versi pratinjau manifes terpadu berformat JSON yang digunakan oleh ekstensi Teams, seperti tab kustom dan ekstensi pesan. Untuk informasi selengkapnya tentang manifes ini, lihat Manifes terpadu untuk Microsoft 365 (pratinjau) .Pratinjau hanya didukung di Office yang diunduh dari langganan Microsoft 365 dan diinstal di Windows.
Tip
Jika Anda ingin membuat add-in Outlook menggunakan manifes XML, lihat Membuat add-in Outlook pertama Anda .
Buat tambahan
Anda dapat membuat Add-in Office dengan manifes terpadu menggunakan generator Yeoman untuk Add-in Office . Generator Yeoman membuat proyek Node.js yang dapat dikelola dengan Visual Studio Code atau editor lainnya.Prasyarat
Catatan
Jika Anda belum terbiasa dengan Node.js atau npm, Anda harus mulai dengan menyiapkan lingkungan pengembangan Anda .
Waktu proses .NET untuk Windows. Salah satu alat yang digunakan dalam pratinjau berjalan di .NET.
Node.js (versi LTS terbaru ).
Versi terbaru Yeoman dan generator Yeoman untuk Add-in Office . Untuk menginstal alat ini secara global, jalankan perintah berikut melalui command prompt.
garis komando
Menyalin
npm install -g yo generator-office
Catatan
Meskipun Anda sebelumnya telah menginstal generator Yeoman, kami menyarankan Anda memperbarui paket Anda ke versi terbaru dari npm.
Visual Studio Code (VS Code) atau editor kode pilihan Anda
Outlook di Windows (tersambung ke akun Microsoft 365)Buat proyek tambahan
Jalankan perintah berikut untuk membuat proyek tambahan menggunakan generator Yeoman.
garis komando
Menyalin
yo office
Catatan
Saat Anda menjalankan yo officeperintah, Anda mungkin menerima konfirmasi tentang kebijakan pengumpulan data Yeoman dan alat CLI Add-in Office. Gunakan informasi yang disediakan untuk merespons perintah sesuai keinginan Anda.
Saat diminta, berikan informasi berikut untuk membuat proyek tambahan Anda.
Pilih jenis proyek -Outlook Add-in with unified Microsoft 365 Manifest (preview)
Anda ingin memberi nama apa pada add-in Anda? -Add-in with Unified Manifest
Cuplikan layar memperlihatkan petunjuk dan jawaban untuk generator Yeoman di antarmuka baris perintah dengan opsi manifes terpadu yang dipilih.
Catatan
Untuk pratinjau ini, nama add-in tidak boleh lebih dari 30 karakter.
Setelah Anda menyelesaikan wizard, generator akan membuat proyek dan menginstal komponen Node pendukung.Arahkan ke folder root proyek aplikasi web.
garis komando
Menyalin
cd "Add-in with Unified Manifest"
Jelajahi proyeknya
Proyek add-in yang Anda buat dengan generator Yeoman berisi kode contoh untuk add-in panel tugas yang sangat mendasar.
File ./manifest/manifest.json di direktori akar proyek menentukan pengaturan dan kemampuan add-in.
File ./src/taskpane/taskpane.html berisi markup HTML untuk panel tugas.
File ./src/taskpane/taskpane.css berisi CSS yang diterapkan ke konten di panel tugas.
File ./src/taskpane/taskpane.ts berisi kode yang memanggil pustaka JavaScript Office untuk memfasilitasi interaksi antara panel tugas dan Outlook.
File ./src/command/command.html akan diedit oleh WebPack pada waktu pembuatan untuk memasukkan <script>tag HTML yang memuat file JavaScript yang ditranspilasi dari file command.ts.
File ./src/command/command.ts pada awalnya memiliki sedikit kode. Nanti di artikel ini, Anda akan menambahkan kode ke dalamnya yang memanggil pustaka JavaScript Office dan dijalankan ketika tombol pita kustom dipilih.tepat di atas isi pesan.
Saat diminta dengan kotak dialog WebView Stop On Load , pilih OK .
Catatan
Jika Anda memilih Batal , dialog tidak akan ditampilkan lagi saat add-in ini berjalan. Namun, jika Anda memulai ulang add-in, Anda akan melihat dialog lagi.
Untuk membuka panel tugas tambahan, pilih Tampilkan Panel Tugas .
Catatan
Jika Anda menerima pesan kesalahan "Kami tidak dapat membuka add-in ini dari localhost" di panel tugas, ikuti langkah-langkah yang dijelaskan dalam artikel pemecahan masalah .
Saat diminta dengan kotak dialog WebView Stop On Load , pilih OK .
Catatan
Jika Anda memilih Batal , dialog tidak akan ditampilkan lagi saat add-in ini berjalan. Namun, jika Anda memulai ulang add-in, Anda akan melihat dialog lagi.
Gulir ke bagian bawah panel tugas dan pilih tautan Jalankan untuk menyalin subjek pesan ke panel tugas.
Akhiri sesi debugging dengan perintah berikut:
garis komando
Menyalin
npm stop
Penting
Menutup jendela server web tidak mematikan server web secara andal. Jika tidak dimatikan dengan benar, Anda akan mengalami masalah saat mengubah dan menjalankan kembali proyek.
Tutup semua contoh Outlook.Tambahkan tombol kustom ke pita
Tambahkan tombol kustom ke pita yang menyisipkan teks ke dalam isi pesan.
Buka proyek Anda di VS Code atau editor kode pilihan Anda.
Tip
Di Windows, Anda dapat menavigasi ke direktori root proyek melalui baris perintah dan kemudian masuk code .untuk membuka folder tersebut di VS Code.
Di editor kode Anda, buka file ./src/command/command.ts dan tambahkan kode berikut di akhir file. Fungsi ini akan disisipkan Hello Worldpada titik kursor di badan pesan.
skrip ketikan
Menyalin
function insertHelloWorld(event: Office.AddinCommands.Event) {
Office.context.mailbox.item.body.setSelectedDataAsync("Hello World", {coercionType: Office.CoercionType.Text});
// Be sure to indicate when the add-in command function is complete
event.completed();
}
// Register the function with Office
Office.actions.associate("insertHelloWorld", insertHelloWorld);
Buka file ./manifest/manifest.json .
Catatan
Saat mengacu pada properti JSON bertingkat, artikel ini menggunakan notasi titik. Ketika sebuah item dalam array direferensikan, nomor item berbasis nol dalam tanda kurung digunakan.
Untuk menulis pesan, izin add-in perlu ditingkatkan. Gulir ke properti authorization.permissions.resourceSpecific[0].namedan ubah nilainya menjadi MailboxItem.ReadWrite.User.
Ketika perintah add-in menjalankan kode alih-alih membuka panel tugas, perintah tersebut harus menjalankan kode dalam runtime yang terpisah dari tampilan web tertanam tempat kode panel tugas dijalankan. Jadi manifes harus menentukan waktu proses tambahan. Gulir ke properti extension.runtimesdan tambahkan objek berikut ke runtimesarray. Pastikan untuk memberi tanda koma setelah objek yang sudah ada dalam array. Perhatikan hal berikut tentang markup ini.
Nilai properti actions[0].idharus sama persis dengan nama fungsi yang Anda tambahkan ke file perintah.ts , dalam hal ini insertHelloWorld. Pada langkah selanjutnya, Anda akan merujuk ke item dengan ID ini.
JSON
Menyalin
{
"id": "ComposeCommandsRuntime",
"type": "general",
"code": {
"page": "https://localhost:3000/commands.html",
"script": "https://localhost:3000/commands.js"
},
"lifetime": "short",
"actions": [
{
"id": "insertHelloWorld",
"type": "executeFunction",
"displayName": "insertHelloWorld"
}
]{
"id": "insertHelloWorld",
"type": "executeFunction",
"displayName": "insertHelloWorld"
}
]
}
Tombol Tampilkan Panel Tugas muncul saat pengguna membaca email, namun tombol untuk menambahkan teks hanya akan muncul saat pengguna membuat email baru (atau membalasnya). Jadi manifes harus menentukan objek pita baru. Gulir ke properti extension.ribbonsdan tambahkan objek berikut ke ribbonsarray. Pastikan untuk memberi tanda koma setelah objek yang sudah ada dalam array. Perhatikan hal berikut tentang JSON ini:
Satu-satunya nilai dalam contextsarray adalah "mailCompose", jadi tombol tersebut akan muncul saat berada di jendela tulis (atau balas) namun tidak di jendela baca pesan tempat tombol Tampilkan Panel Tugas dan Lakukan tindakan muncul. Bandingkan nilai ini dengan contextsarray pada objek pita yang ada, yang nilainya adalah ["mailRead"].
Nilai tabs[0].groups[0].controls[0].actionIdharus sama persis dengan nilai actions[0].idproperti pada objek runtime yang Anda buat pada langkah sebelumnya.
JSON
Menyalin
{
"contexts": ["mailCompose"],
"tabs": [
{
"builtInTabId": "TabDefault",
"groups": [
{
"id": "msgWriteGroup",
"label": "Contoso Add-in",
"icons": [
{ "size": 16, "file": "https://localhost:3000/assets/icon-16.png" },
{ "size": 32, "file": "https://localhost:3000/assets/icon-32.png" },
{ "size": 80, "file": "https://localhost:3000/assets/icon-80.png" }
],
"controls": [
{
"id": "HelloWorldButton",
"type": "button",
"label": "Insert text",
"icons": [
{ "size": 16, "file": "https://localhost:3000/assets/icon-16.png" },
{ "size": 32, "file": "https://localhost:3000/assets/icon-32.png" },
{ "size": 80, "file": "https://localhost:3000/assets/icon-80.png" }
],
"supertip": {
"title": "Insert text",
"description": "Inserts some text."
},
"actionId": "insertHelloWorld"
}
]
}
]
}
]
}
Cobalah add-in yang diperbarui
Buka prompt perintah sebagai administrator dan jalankan perintah berikut di direktori root proyek Anda.
garis komando
Menyalin
npm start
Di Outlook, buka jendela pesan baru (atau balas pesan yang sudah ada). Grup kontrol baru bernama Contoso Add-in akan muncul di tab Pesan Outlook . Grup memiliki tombol bernama Sisipkan teks .
Letakkan kursor di mana saja di badan pesan dan pilih tombol Sisipkan teks .
Saat diminta dengan kotak dialog WebView Stop On Load , pilih OK .
Catatan
Jika Anda memilih Batal , dialog tidak akan ditampilkan lagi saat add-in ini berjalan. Namun, jika Anda memulai ulang add-in, Anda akan melihat dialog lagi.
Ungkapan "Halo Dunia" akan disisipkan di kursor.
Akhiri sesi debugging dengan perintah berikut:
garis komando
Menyalin
npm stop
Komentar
Posting Komentar