發表文章

目前顯示的是有「Office Apps」標籤的文章

[開發Office Add-Ins]常用API - getSelectedDataAsync(6)

圖片
談完setSelectedDataAsync之後,我們來看看getSelectedDataAsync這個API,有填入當然就有取得,getSelectedDataAsync的功能非常簡單,就是取得用戶選取範圍的資料,我們看底下的程式碼: function getTextData() {     //調用API填入文字     Office.context.document.getSelectedDataAsync(Office.CoercionType.Text,     //call back     function (asyncResult) {         var error = asyncResult.error;         //如果失敗         if (asyncResult.status == "failed") {             //顯示失敗訊息             app.showNotification(error.name + ": " + error.message);         }         else {             //顯示成功訊息             app.showNotificat...

[開發Office Add-Ins]常用API - setSelectedDataAsync(5)

圖片
先前我們談到,我們在開發Office Add-Ins(特別是Task Pane與Content Add-in)時,大部分的API都從『Office.context.document…』而來,而這個從Office開頭的API,來源就是我們在html頁面上所引入的Office.js,請注意,Office.js並非一個檔案,而是一整組 office.js ,這是一大組 javaScript files的集合,如果你透過Visual Studio開發的話,可以看到專案目錄下有許多檔案: 其中的細節我們後面有機會再討論,先來看看我們常用的兩個API。getSelectedDataAsync與setSelectedDataAsync這兩個方法。 設定(填入)選取區域 我們先看setSelectedDataAsync這個方法的定義: 範例: Office.context.document.setSelectedDataAsync(data [, options], callback); 其中data參數的可用內容如下: 參數 內容 備註 data string (Office.CoercionType.Text) Excel、 Excel Online、 PowerPoint、 PowerPoint Online、 Word,以及只Word Online   array的陣列 (Office.CoercionType.Matrix) Excel、 Word,以及只Word Online   TableData (Office.CoercionType.Table) Access、 Excel、 Word、 僅限Word Online   html Word,並只Word Online   Office Open XML 僅限Word 基本上setSelectedDataAsync的功能就是將特定的文字或物件,填入當前用戶在文件當中的選取區域。 例如,底下這段很簡單的程式碼,可將特定文字填入文件當中: // 從目前文件選取範圍讀取資料,並且顯示通知 function FillText() {     //調用API填入...

[開發Office Add-Ins] Task Pane Add-Ins專案內容(4)

圖片
不管你是透過NAPA 或是Visual Studio來開發Office Add-Ins,建構出的Task Pane Add-Ins專案,在App Body的部分,結構都是底下這樣: 我們前面曾經提過,進入點Home.html是從manifest檔案那邊設定的,你當然可以改變這個設定。 整個App都是透過HTML與JavaScript撰寫,我們先來看Home.html部分。 Home.html 我們開啟Home.html,你會發現頁面結構如下: 你會發現主畫面<Body>標記裡面被兩個<div>區分,分別是content-header,以及content-main。(上圖) content-header的部分是標題,呈現出來向是底下的『歡迎』部分: 而content-main則是上圖除了藍色的歡迎區塊以外的其他內容。一般來說我們把App主程式放在content-main當中。 前面說過,這個Home.html是app的進入點,是在Manifest當中設置的,當然,你也可以在專案中新增一個或多個HTML Page,我會建議你直接在Visual Studio當中複製Home.html即可: 當然,複製完後你要修改一下檔名(例如Page2.html)。接著,我們來修改一下Home.html的內容: 我們加上了一行程式碼: <button onclick="javascript: location.href = 'Page2.html';">跳到Page2</button> 你會發現,主頁面上多了一個Button,並且,點選之後會跳到另一個Page2.html: 這沒什麼,就是網頁的基本行為,對於常寫JavaScript的開發人員來,就是家常便飯一般。 不過,從這邊你就看的出來,我們的Task Pane Add-Ins,基本上就是一個Html page,而上面可以運行JavaScript,必要時我們可以撰寫多個html,透過JavaScript在多個頁面中切換。 Home.js 緊接著,我們來看看Home.js這個檔案,從Home.html的頁面上我們發現,這是該Page所引入的唯一一個直屬javascript file(另外兩個是office.js與App.js)。 該檔案內...

[開發Office Add-Ins] 關於Office Add-Ins的類型與架構(3)

圖片
要討論Office Add-Ins的架構之前,我們得先知道它目前有哪些類型,如不論你用NAPA或是VS,都可以透過開發工具建立底下三種Office Add-Ins其中之一,分別是: 1. Task Pane Apps 2. Content Apps 3. Mail Apps 分別說明如後。 Task Pane Apps 這種類型的App可在Word, Excel, Porint, Project…等環境中使用,可以說是最廣泛的應用程式類型,主要UI出現在畫面的右方,我們剛才開發的第一個App就是屬於這種類型: Task Pane Add-Ins可以跟Office文件互動,讀取、填入文件當中的文字或表格,也可以更進一步的抓取文件當中用戶選取的區域,甚至進行該區域的綁定,一但選取區域有所變動時,我們的App可以得知該事件,並透過JavaScript配合Restful API進行進一步的一些後續動作。 Content App Content App最大的差異,是UI主體是崁入在Office文件當中的: 當然,Content App也是透過JavaScript撰寫,由於這類型的App主要是崁入在Office文件當中,因此最常用的功能與形式,是擴充Office文件原本無法實現的功能。(利如上圖中的地圖,是依照Excel中的數字即時繪製出來的) Content App跟Task Pane App一樣,可以讀寫Office文件中的內容,我們可以透過Content App,將這些資訊當作參數,調用Content App中的Restful API,計算出我們要的結果,並呈現在Office文件中。(另一個典型的例子,就是股市或匯率即時查詢) Mail App 第三種是Mail App,是配合Outlook的Add-Ins,這種類型的App和前兩種截然不同,它不只有一個主UI,而是兩個,分別叫做Compose Form和Read Form。 底下是Read Form的介面: 顧名思義,Compose Form是出現在用戶撰寫Email和Appointment的時候使用,而Read Form則是在用戶讀取Email和Appointment的時候使用。 沒錯,Mail App不僅可以與email配合,也可以與Appointment配合,這讓Mail Ap...

[開發Office Add-Ins] 回頭談談Office這玩意兒 (2)

前一篇 我們介紹了如何在幾分鐘內建立一個Office Add-Ins,這一篇,我們回過頭來談一談,為何有Office Add-Ins這玩意兒。 首先,在我成長(也是台灣經濟快速成長)的那個年代,我幾乎可以武斷地說,所有使用個人電腦的用戶,都曾經用過Microsoft Office,甚至有許多使用者,打開電腦的目的,根本就只是使用Office軟體。當然,自從網際網路開始盛行之後,這一切變得有些不同。 微軟在很早以前,就曾經把Office定位成一個平台,而非只是一套軟體。平台,與軟體有何不同? 軟體有著特定的功能,為使用者完成特定的工作;但『平台』,則是一個基礎,一個舞台,讓用戶(或開發人員)可以基於這個平台,持續在上面擴展與發揮。微軟這個Idea,可以說成功,也可以說不成功。其中的細節我們先不談,但不論如何,Microsoft Office持續稱霸著企業應用多年,一直到今天。 然而,挑戰一直都在,曾幾何時,大家打開平板和手機的頻率,開始逐漸超過PC,才沒多久的時間,平板上的應用App,已經不僅僅是超過,而是讓PC上的軟體感到強烈的威脅。 一家企業,要能夠成功不容易,要能夠持續成功,更可以說是難上加難,難的部份不僅僅只是持續創新、不單單只靠執行和效率,更多時候,是必須忘記背後,自己把過去的成功親手掐死,然後你才能夠面對一個新的世代,走向一個嶄新的未來。 微軟,就常幹這種事情。 薩提亞·納德拉(SatyaNadella),在2014年2月就任微軟CEO時,說道:『我們這個行業不尊重傳統,只尊重創新』。 不要覺得訝異,持續成功了三十多年的微軟,不只一次打掉重練,讓自己(的產品)破碎,然後重新開始。網際網路大勢所趨時如是、Java改變開發人員時如是,而今面對行動裝置大軍挑戰的現在,也是。 首先,微軟面對Google一系列線上Office(可以在瀏覽器中執行的類Word, Excel軟體)的挑戰,開始也跟著推出可以在瀏覽器裡面執行的Word, Excel, PowerPoint,當然,用戶可以在瀏覽器裡面編輯,並且直接把檔案儲存到Onedrive雲端空間。不僅如此,也跟用戶端的Office軟體充分整合,檔案可以下載編輯,甚至從用戶端桌面版本的Office軟體中直接編輯雲端的檔案。 接著,因應SaaS(軟體暨服務)的雲端應用程式概念,微軟推出了Office 36...

[開發Office Add-Ins] 從NAPA開始 (1)

圖片
Office Add-Ins,是Office 2013開始,嶄新的增益集套件開發方式,用的語言不再是VBA(但VBA依舊可以用,別擔心),而是Web開發人員熟悉的的HTML與JavaScript。 你可以透過開發Office Add-Ins,擴充Office Word, Excel , PowerPoint…的功能,可以將開發好的增益集上架到Office Store(市集),或是佈署到企業內的App Catalog上,供同仁使用。更重要的是,透過這個架構開發的App,是可以在Office Web/Desktop/Mobile各種版本上跨平台使用的,亦即,你在iPad上的Word裡,同樣可以使用這種新的增益集。 在這一篇文章當中,我們將陸續開始為讀者介紹如何開發Office Add-Ins(App for Office),一開始,我們選擇用最簡單的工具,NAPA。 NAPA本身是一個網站,一個Web應用程式,其實也是一個SharePoint App。NAPA提供了一套很簡便的操作介面,讓開發人員可以快速地建構出Office Add-Ins。 在開始之前,您必須申請一個NAPA帳號。可以透過底下這個網址申請: https://www.napacloudapp.com/ 請留意,你要使用NAPA,必須先有一個Microsoft Account,所謂的Microsoft Account也就是過去的Live ID,基本上就是Outlook.com或是hotmail.com的帳號,如果沒有,可以到底下網址申請一個: https://signup.live.com/ 申請完成並登入之後,可進到 https://www.napacloudapp.com/ ,會看到底下畫面: 點選Get Started,會要求你使用Microsoft Account登入,如果你已經登入,會看到底下畫面:   因為NAPA是一個網站,我們可以透過NAPA這個網站來寫程式,而NAPA需要存取您的OneDrive及相關資訊以便於存放與測試您寫的程式,因此您必須選擇Yes。 選擇了Yes之後,會看到底下畫面: 這樣您就可以透過NAPA來建立應用程式了。你可以建立一個最基本的Office Add-Ins,我們可以選擇Task Pane Add-In: 按...

[研討會]Office Apps 開發簡介

圖片
感謝各位參與今天於 MS 7AB的『Office Apps 開發簡介』,相關內容會在整理後放到blog上,謝謝大家的支持囉。