30 minutes with Servoy part 6: Office 365

Today is again another great version of the Tech Webinar series. Really, one of my favorite components, I have to say, this web components update that Sean is going to be presenting today. All of work on this component is be done by Paulo. If you have met Paulo, you should come to the Sero Point world. And why I’m on that topic. This is the last week of the lower pricing, the early build pricing for ServoE will see. If you haven’t subscribed yet, it is the best place to not only learn a lot about ServoE, those great trainings before and after. But it’s also a great place to meet other ServoE developers and to meet the ServoE staff, the engineers, R&D guys. And also listen to the singing of Juan Santana, who’s birthday is today. All right, we thought out of our way, let’s get started. One last note, if you have any questions, then please do post them in the questions channel. I encourage you to post the questions. We know these kind of webinars are a bit less, well, a lot less interactive than real life sessions, such as on the SeroE world. So we’re going to need to ask questions. Raise your hands if you have any questions, doubts or suggestions on other webinars, topics, we’re also still waiting for you guys to send in. I’m actually a little disappointed on that, waiting on feedback and input on future sessions. If you’re not sending in enough topics, we will be handing this to the studio. That’s a good meme. We will be handing this session. And this particular session is based on feedback. So, okay, great. We had a little bit of feedback and this one is in response to that. But we need more. We want more than 300 people have subscribed to this webinar series, which is fantastic. But if you really need your input on what do you want in the next session? Because you are the one who is going to tell us what we’re going to, it’s pretty democratic. Otherwise, I’m just going to make it up. Exactly. You’ll do your good fun projects. All right. So, let’s get started. Your screen is visible if anybody is in the audio problems or others then feel free to post it on the questions. Okay. Yeah, so this one is number six. And we’re trying to alternate a bit between what’s new available for the NG client in terms of web components and more other traditional topics. So, this week, we’re doing another update on web components. And we are happy to announce the availability of a plug-in, really a connector for the Office 365 JavaScript API. This is a component that was built by my colleague, Paolo, who can basically build anything. And he did this a while back at a Servoy camp, which is kind of the little brother to Servoy world, where he demonstrated really one of the powers of the NG client, which is to connect to client-side libraries. So, we had a lot of interest in that initial session, and we had some requests to do an update on it. So, that’s what we’re doing. So, today what we’re going to do is a quick overview of what this API is, and how we connect to it. We’ll look at a short demo about what’s currently possible. We’ll examine some use cases. We’ll take a look at the setup that was required, and we’ll talk about what’s next. Because this is pretty much a beta offering, so we really wanted you guys to give us your feedback and help drive where it goes. So, I should start by saying that this type of connector is interesting because, although it uses the standard way that we connect to client-side libraries, which we call an NG service, which is a way of sending code down to the browser to be evaluated, if you will. This allows you to expose a Servoy solution as an add-in to your Office 365 account. So, you can load a document, and then in your list of add-ins available for Office 365, you can load a running Servoy solution, and it can talk to your document and vice versa. So, you have that bi-directional communication. So, Microsoft Office offers a JavaScript API for their suite of applications for Excel and Word, etc. Right now, we’re just going to look at Microsoft Word. Of course, we can use what we’ve built to communicate with other documents, but right now, we’re focusing on Word, and we want to see your input and where we should be taking it. So, let’s take a quick look, and then we’ll dive into the details. Excuse me. I have running my browser here, a document that I created in my account, and what I want to do is insert an add-in. So, I’m going to select my available add-ins. I don’t have anything saved, so I’m going to upload an add-in. And this is an XML file. I’ll get a bit more into that, but it’s the manifest XML for my add-in. So, once I upload that, take a minute, and what it’s doing is it’s telling my Microsoft Office account to load web application to service that admin. So, you can see that in the right hand, it’s called a task pane in this example. And it’s loading a simple, servo-o-o-o-o solution that I’ve built. It just contains a form. But also, loaded in that solution is this ngService, which allows me to communicate back and forth with the document with that client side API that Microsoft provides. So, on the right-hand side, that’s the servo-o-o-o-o-o-o-o-o-o-o-o solution that I actually built 20 minutes ago. So, yeah, we’re doing a company meeting, and I had a chance to work with Bologna. and he showed me how it works. And so it was easy enough that I build a solution right before the webinar that can work. So I should point out that the use case here is not really like an automation where you might want to have a merge template and you automate an email blast and you replace a bunch of text. This is more for an ad hoc and user integration. So I want to use my document management system, but I also want to show my CRM or some connector solution that helps me to get information back and forth between the document and the application. So what I’ve done is I’ve made a form here with some data on it coming from the example data orders table. I might search for one of the employee sales reps here, from Margaret Peacock and found one of her orders. And I want to start to move some information into the document. So maybe I start typing a letter. And I can insert from the server application into the document. Maybe I want to insert the address. Maybe I want to insert a data set. So I have the order items here, a related found set in a tab panel on that form. And I can move those into my document as a table, as a Microsoft Word table. Maybe I want to modify the look and feel of that through the Word document itself. So now I have a nice little table there. And maybe I want to end my letter here with the employee. So something like that. So from my Servoy application into the document and vice versa, if I want to say select a bit of text here. And I want to copy this the other direction. I don’t know what I’ve done. Ah. This is what happens when you modify your solution right before the demo. I had this hooked up to the wrong event. I want to copy from the document. This is a demo set. How quickly you can fix something in Server Voice, shouldn’t it? Yeah. Well, one of the best parts is that when people who use Server Oi know that as you make changes, it broadcasts it into the running client. That running client is being used inside my document here. So I kept by accident inserting the table. But what I really want to do is copy that text back into a form variable. So now you can see I have the text back in my Server Voice solution that I selected in the document. So that gives you a basic idea of what’s possible. There is, of course, a lot more possible. Some things that are in our current API that we expose currently. And then some things that we have not yet exposed. Because we really want to hear more about possible use cases. So we’re looking for use cases of everybody else looking at doing integrations with office, right? Yeah, exactly. Yeah. So maybe we take a look at a bit of look at the setup and what’s required. Meanwhile, if anybody wants to post their use cases, how do you guys want to integrate with the word? Do you want to do it like this that you use it as a really at our reporting tool to create very custom letters? Or do you guys have other use cases of integrating with them? Perhaps at the end, we can be an interactive discussion. So the setup is, it requires a little bit of setup. But it doesn’t take that much effort. I only just started on this a couple days ago. I then finished it today. It was really not much effort. First of all, you need a Microsoft account so that you can have Microsoft Office 365. Then what you must do is install the NG Service, which is the connector to that client side API. And that’s something you can do directly from the ServoyIDE through the Web Package’s Manager. And that’s hosted on our GitHub site. The next thing you need to do is to place the Office Add-in connector, which is a few files that you need to put on your web server. If you’re running Tomcat, for example, you just put it on the server folder in the Web Apps directory, which helps direct the document to your add-in. And that includes this manifest file that you saw me uploading. Also, it’s worth pointing out that Office wants to talk to a secure web application. So you have to set up your application for HTTPS. I won’t go into the details on that in this webinar, because it’s pretty well documented. You might have seen a little warning in my browser address bar saying it was not secure, because I just set up a self-science certificate in order to demo this in a webinar. But you probably want to do a full secure SSL. So you can have that warning. You need to edit that manifest file, that XML file, which I’ll show you in a second, to point to your web application. Finally, you need to build your solution. And this is a cool part, because it can be whatever you need. So it can be tailored to your use case. We can take a look at what I have set up so far. You can see on my server-point installation inside the Tomcat folder, I go into the server web apps route. And I place the Office CSS and JS files. In addition to that, I have the manifest XML file in the Office HTML file. The manifest XML file is just describing your add-in and where it points to. You can see that the source location here points to localhost in this case. You would have, of course, it could be a real server URL. And then the HTML file has the actual content of that iFrame, which points to the application here. Next, you need to go into developer. And you can add the web package Office 365 through the web packages manager. And you can see that there’s an ngService for the Microsoft Word integration. Is that a published web package issue? I forget. We can check. If it’s not published, you can just download it from the GitHub site. It’s all public. It’s under ngServices. And it’s right there. So yes, it is published. It’s still in beta, because we’re still waiting for some input to finalize the, make sure the APIs are nice and usable. But this is how you get it. All you do is you come in here. And if it’s not already installed, you click the plus, and it’ll install it into your application. Once it’s installed, it’s not the same as a web component, a web component, or something you can drag and drop on a form. An ngService is something that’s exposed as a Servoy plugin that allows you to call client-side logic. So you’ll actually be able to talk to it right in your code editor. So if we look at one of these buttons and the logic that I hooked it up to, I wrote this method, insert customer. And you can see that I call the plugins Office 365 Word. And then I call the methods on that. Set selected data, which will insert this to the current selection on the document. Of course, you can ask for code complete. And you get a list of all of the methods that are available. But look simple. If I can do that. It’s very simple. The gist of it is that you can insert text, and you can retrieve text. You can also deal with the XML object of Word. So you can save versions of the document back into Servoy as XML. You can replace the document with XML objects as well. So you could create a loop that generates word documents. Multiple. Yeah. One of the things we have in a branch for experimentation is creating a binding where you can actually select a piece of text and create a binding, and then reuse that binding for some kind of advanced search and replace. So there’s really quite some options on top of this basic functionality. There’s also, you could see that there was, when I inserted the table, there’s different data types other than just a string. In office, they call it a coercion type. So in order to support constants, we also ship another module called this SVY Office 365. This is on the same project on GitHub, which has a scope called Office 365, which has in it all of the variables. So you could see that I used coercion type matrix when I passed in the items into that, to create that table. That one just took a two-dimensional array. You could see that I made a little function here to convert the related found set of order items into an array of arrays, and then with some titles here. And I just passed that in, and I said the coercion type to be matrix instead of a could have been HTML, image, table, text, et cetera. Also, when I was retrieving from the document, I have a method down here called a copy from document, where I went to get the selected data. So it’s pretty straightforward, it’s pretty simple. As I said, we didn’t expose all of the API. We want to sort of do this in a minimal viable product and do it in agile ways so that we get feedback and we’re building the right features. But if you download this and try it out, you’ll see that really the way that you customize it is by making your own solution. And here I made this simple form to do the connection. You have about 300 pixels in that task pane. It may make more sense to build a responsive form. The current demo that’s on the GitHub site shows a bit more complex setup and has a responsive form on there so that you don’t have to position everything correctly. You can just let it stack underneath each other and fill up the content as needed. So it’s really up to your imagination about what kind of solution you want to customize your word usage experience. Cool. There’s a question on authentication. How do you do the authentication between sort of a end would? You’re already in an authenticated session on your document. In Word. So you’re in Word. Yeah. And the API connects through the client side API. So I don’t think there’s any authentication in that part of it. But your Word document talks to a server solution running somewhere in a cloud. How do you authenticate against that? Ah, right. Yeah, you have to be already authenticated. So you could have a login that’s inside the panel. Yeah, it’s just a server solution. So there could be a solution. Yeah, log in there. Yeah. OK. That answers the question from Chris. OK. I should point out in the use cases here that, again, that this is really not for automation. This is not for automating the merge templates or something for a mass emailing. Although maybe you use this as a design template and you do the merge on the back end. This is really for end user at Hoc interaction where you don’t really know what your user wants to do, but you want to provide some connectivity to your business environment, your CRM, or whatever. So they can pool information easily out of it without having to talk to a programmer or a data manager. At the same time, to delegate things to document management systems that they do best and not to try to build some document management system in Servoy. So I think we talk about what’s next. As I said, this is just the word integration. The same API more or less exists for Outlook and Excel and PowerPoint, et cetera. So really, how to move text and other objects back and forth between the document and the application. So in order to build the best connector, we want to hear some real use cases. So please. There’s a couple sharing up. And one of them is, I think this is an interesting one. Can we catch office events? For example, you’re in Outlook. You’re keying in a customer’s email address. Can you now trigger an event in Servoy to show CRM information from the customer? That’s a good question. We’ll have to answer that offline, I’m not sure. I know that there are some events in the word integration that can be handled, but I don’t know. I have to probably ask my colleague, Bao Lo, that and take a closer look at the Outlook API. OK. What is Bao Lo? It was in the office earlier. Yeah. All right. We will ask Bao Lo and get back to that question. There’s a question. There’s an example from Richard. I have examples of CVs from Job applicants, which are currently scanned by a recruiter and then entered into Servoy forums by copying from a word document. It would be so much better for the recruiter to select the text and then press a button for the appropriate field and so on. I think that’s a good use of it. It is. And there’s a feature that Bao Lo showed me, which is creating bindings where you can actually select some text and then create a binding to that so that you can auto-recognize that and you sort of store up a list of bindings in your Servoy solution so that you could find that text in the document. If the mechanism can be a document, if it’s the same. OK. There’s also a question from Andre. What about Google Drive and Gmail? What about it? I guess it is. There’s also going to be a plugin for doing the same with Google Docs. Yeah. Well, if we see interest in that, then we can explore that if they offer an API that we can work with. And I think they do. Hi. My colleague, Bao Lo just walked in. Do you have an answer to our question about the Outlook events? Yeah. So basically the JavaScript API office has offers several events. Cannot tell now a document I had if the specific one is supported. But there are events which we can listen for. So we can look into the documentation and see if that fit. See, this is great about running the webinars in our headquarters, isn’t it? Mm-hmm. All the people are just walking around from the evening. Do you have any more questions, Yawn? Or use cases. Yeah. There’s a couple more use cases on Google Drive and Google Docs. So I guess we have to look into those APIs. Well, in fact, many things, they also combine with Microsoft Graph API, which are RESTful services, which you can already call. You need a plugin from that. But just you call the RESTful services of Microsoft. Mm-hmm. There’s a question from Matt. Is it possible to open and save word documents with this API? You can open a document like redirect to a link. So you can get the link from the document that you can either download it immediately and go there. In the document, but I think then the world saving is handled by the world. But you can copy the entire document into servoit through the API. Oh, sure. Sure. If you can also copy the full object XML. Yeah. So if you’re using servoit as a document management system, so you’re storing the document in servoit, you can open the word editor. And whatever changes are made, you save back and then the servoit solution. You can get the phone document, yes. So that means the servoit becomes your Office 365 document management repository. You can decide if you want to use like Office the repository or if you want to keep using servoit as a document management system. Or a combination where you say a store things on one drive, maybe some things on servoit. As well as one. Sounds good. Great use cases are coming up. All right. There’s a question from a group. Can the save handler from the Office document trigger any servoit method? Not sure about that. We can check the presentation. Yeah. We’ll have to check if you had save in Office. If they expose the event and the API, then we can hit. All right. Well, it looks like those were the key questions. A couple of topic suggestions for the next sessions have been coming in. One of them on deployment of ng client, SVM and Eclipse and Subclips integration, Jasper soft plug-in integration. So good to good suggestions. Excellent. Keep them coming. Make sure to expose them on the forum so we can create some interactive discussions. And with that, we have one minute left. So if you have any burning questions, then post them soon. We will be posting the recording to our website. I think we’re one behind. The Sean just noted on our website. We’ve still supposed to preview some of them. We’ll make sure to do that very soon. And post this recording as well so that if you want to watch all the things that Sean just did, you can go and get them. And I think Sean, you’re listing here over key URLs for today. Yeah. In particular, the GitHub site where the connector is located, I encourage everyone to create a GitHub account and to log issues and requests and monitor the repositories. That’s the best way to interact with that library. Also, just a quick update on the series, we’re going to continue to do this every two weeks. So our next scheduled date is February 8. And we’re going to take a look at one of the open source utilities modules that we offer on a GitHub site and some updates to that as well. Cool. Sounds good. All right. Oh, thanks all for attending and Sean for presenting and follow-up for jumping in and Patrick. Anybody say anything? Do they? They’re not watching. OK. That’s great. It’s really good to do these sessions in the headquarters. All right. Thanks all. And we’ll see you two weeks from now.

Close