If you are like me, you get a lot of receipts via e-mail for things like Internet, electricity, phone, flights, and more. These things are usually business related, but they don't always get sent to the business account. Before Flow, I used to go through my e-mail, save each one off as a PDF and drag it to a document library. It was very time consuming. Now I have automated all of this with Flow.
In my example, I am setting up a Flow to capture receipts from my Internet provider. First, you'll need to set up connections to wherever your e-mail is coming from. This could be Outlook (consumer), Gmail, or Office 365 Outlook. In this example, I set up a connection to Outlook. Then I used the trigger "When a new e-mail arrives". After you have added the trigger, click on Show advanced options to create a filter. You can filter by To address, From address, or the subject. In this case, I am looking for the Subject Filter of "Your AT&T online bill is ready to be viewed". This will trigger the flow whenever an e-mail is received with the matching conditions.
My goal is to save the contents of the E-mail as a PDF into a document library. There is an action that lets you convert HTML files to PDF but it only works on files stored in OneDrive for Business. As a result, I create the HTML file first in OneDrive for Business with the Create File action. Use the Body field from the E-mail step as the File content.
Now use the Convert file using path (preview) action to convert the file to a PDF. Use the Name from the Create File action as the File Path. Make sure Target type is set to PDF (currently the only valid value).
Finally, we want to save the file into a document library where I keep receipts. Use the SharePoint Create File action. Specify the URL to your site first. Then you can specify a Folder Path. In this case I am telling Flow to save my file in the Company Documents document library and in the Receipts subfolder. For the File Content parameter pass the File Content output from the Convert file using path activity.
You want the name of the file to be unique when it gets written to the document library. Therefore, I use concat to create a filename with the vendor in the receipt along with the date for the File Name parameter. Here's what mine looks like.
That's it. At this point, your Flow is ready to go. When the flow runs, you'll see the file in your target document library if everything is correct. Here is what the information looks like on the file.
Viewing the file, you will see the PDF it created. While the conversion process picks up the HTML formatting, tables, and CSS, it doesn't pick up the images unfortunately. However, this is good enough for me for now.
I thought I would share this Flow today because I found it useful. If you found some actions that you think might work better, leave a comment.
If you want to build an Office AddIn for Word, Excel, or PowerPoint, all you really need to know is a little HTML and JavaScript. Since Ionic Framework is built with HTML and JavaScript, it actually makes a great fit for hosting an Office AddIn. In fact, task pane apps have a very similar shape to your mobile phone (long and narrow) so the UX elements that Ionic provides work pretty well there. Here's an example of my Word AddIn, BrewZap menus. It creates paper menus for subscribing breweries using the menus they manage directly from their mobile app on the BrewZap platform.
Getting started with the manfiest
An Office AddIn is essentially just a manifest XML file that tells Office the location of your web application. You'll want to start with one of the existing manifest examples otherwise you may be missing components required to get your AddIn published in the Office Store. You will need to provide a link to your web application as well as icons in the size of 12x12, 32x32, and 80x80. Look through the example manifests and you should have what you need to get started. I recommend creating two manifests: one for debugging locally and one for production use. When you debug locally, you can simply run ionic serve and load the AddIn from the AddIns menu in Word (or whatever app you are targeting).
Creating your Ionic app
Create an Ionic app using ionic start and selecting the appropriate options. I used the tab template and it works pretty well. Once you project is created, you can start adding your code. First, we add the reference to the office.js library to your index.html. The Office Store requires you serve it from the CDN.
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
Depending on what you are doing, you may actually have to load jQuery as well. I know that seems odd in an Ionic app. Once you have your scripts registered, you are ready to start writing some content into your Word document. The Word AddIn example has some easy snippets you can leverage
function insertHtml() {
Word.run(function (context) {
// Create a proxy object for the document.
var thisDocument = context.document;
// Queue a command to get the current selection.
// Create a proxy range object for the selection.
var range = thisDocument.getSelection();
// Queue a command to replace the selected text.
range.insertText('"<b>Hello World!</b>."\n', Word.InsertLocation.replace);
// Synchronize the document state by executing the queued commands,
// and return a promise to indicate task completion.
return context.sync().then(function () {
console.log('Added html.');
});
})
.catch(function (error) {
console.log('Error: ' + JSON.stringify(error));
if (error instanceof OfficeExtension.Error) {
console.log('Debug info: ' + JSON.stringify(error.debugInfo));
}
});
}
I find the easiest way to apply formatting in your word document is to use HTML. Word will interpret it appropriately and format your content.
Testing your app
You can develop Office AddIns in Windows, OS X, an iPad, or in the browser with Word Online. The same API works for all hosts of your application. However, you need to pay attention to which API you use because some are supported in different versions of the Office client (2013 vs. 2016). You need to test them your AddIn on all platforms to verify that it works correctly. Windows of all platforms gave me the most trouble because Internet Explorer gets used as the backend for Office AddIns. I also had some issue with the formatting on some inputs and they didn't render correctly in Word 2016.
Deploying your app
You'll need to deploy the code for your app somewhere so that you can publish your app to the store. This entails adding the browser platform to cordova and then doing a production build. You can read my steps on how to run an Ionic PWA using Azure Web Sites for more details. If you aren't hosting in Azure, the steps are pretty familiar still. To do your final build for production, you will run the following command.
ionic cordova build browser --prod --release
You'll then copy the contents of your platform/browser/www/build folder to your production server. Now update your manifest to point to that new server location and you're ready to go. Once you validate it works, you can begin the Office Store submission process to get your app in the store.
Here is what my app looks like after it has inserted a table listing the beer menu at a restaurant.
Sorry for the lack of code formatting today. I don't have a working solution to post code effectively currently. Once I scrub some of the code, I'll post a repo with the complete solution as well.