Good morning, good afternoon and good evening and welcome to the Servoy webinar of June 2nd, 2021. My name is Victor, I will moderate this webinar. Also, I want to remind you that this webinar will be recorded and we invite you to always ask your questions and put your comments in the Q&A of this call. Today we will look at the Smart Doc Editor, which will be released soon. And Sean will take us through that, Sean, are you here? Hi, Victor, I'm here. All right, are you ready? I'm ready, but it's not going to be released soon, it's released now. Well, here we go. I did it last night. Last night, that's fresh of the press. It's fresh, yeah. So, now that we did a preview of this, well, I think in our Q1 release, but it wasn't fully production-ready yet and we wanted to get it in the hands of everyone as soon as possible. And so I'm happy and excited that we're finally here. So, just a reminder for everyone, this, we're calling it the Smart Docman Editor. It is a component that you can put into your business applications to bring rich functionality with regards to document editing, merge and mail type features. There's a lot of use cases and I'll cover them after we do some demos, but the tradition we have with the tech webinar series is that we like to do demos first and then do slides and Q&A afterwards so that you at least get the jump right in and get started. So, today we'll be doing some demos of basically how to work with the editor and edit documents. We'll look at how to customize the toolbar. Something which is added since we gave the preview was the custom tag library so you can actually generate the tags programmatically. And then, of course, you want to merge those and generate an export like a PDF. And I think it's worth, we'll show a nice demo, but I think it's also worth to break it down and show really how to get started since this is a brand new component. So I will also kind of do an ad hoc unscripted start from scratch type thing and we can use that to get interactive and ask some questions. So let me bring up a running sample here. Victor, can you see my screen okay? Do you see my browser with that? Okay, so this is the sample solution kind of tutorial that we shipped. And we keep up to date and versioned. And we've added to it a section here for a document editor. And this is an instance of the editor component on the form. And you can see it's just kind of a document layout with a table here and some tags throughout a header image up top, that kind of thing. And what I wanted to show was, yeah, of course, and we showed this once before, you have a toolbar here, which gives you all the capabilities you would expect out of a rich editor with regards to formatting and inserting tables and images and things like that. But I wanted to point out the first feature here, which is custom tag library. So I'm going to start with the pound sign here. And now I get a list of tags that I can inject into my document. Now these are tags which are generated by a developer to expose to an end user the tag library. So the end user doesn't need to know about your database or your schema or try to guess some kind of convention. Cheer, he can just get the placeholder key here and then inject into the document the tags, which later could be replaced with real data. So that's how the tags look. You might notice another kind of tag down here, the start repeater and the end repeater. These are system tags that I would call them that get generated as well, automatically when you generate the custom tags. So if you start with the dollar sign, you can see any sort of repeater, which is available, you'll have a start repeater. And then you also have a corresponding end repeater to close it out. And so ideally what we want here is we have a nice table and we're going to kind of repeat the rows of that table over a related set of order details. And all the order information is up here. And you'll notice that there's also information about customers, which is in a foreign table, information about the details linking over to the product in another foreign table a couple of hops away. So nice reuse of the data model. Exactly the kind of thing you want to expose to your end users so they could do kind of ad hoc reporting or other kinds of data-driven document management. I also customized the toolbar up here adding an insert tag dropdown. So suppose that they're not getting the tag through the kind of type-ahead function where they hit the pound key and get a choice. They can click here and it has a list of all of the tags in the custom tag library available here to insert. And I'll show you how we generated that sort of dropdown in the customized toolbar. Of course, the user might want to preview what it looks like. So they can click here, another custom action. And you can see that now the document, we took one sample record and merged it. And you can see that it's merging the related customer data information about the order total here is a calculated value, not a real database column. And then down here, of course, the table is repeated except for the header, like it's skipped with the actual values from the related order details and even the foreign table for the product name all gets generated. So let's go into the Sharevoy Developer IDE. Sean, before that, we got a question already. OK. We got John Rubio asks, can you use repeaters to make your repeating layout section horizontal instead of vertical? To make your repeating section horizontal? The repeater now is just vertical. Horizontal would be like to add extra columns or something. The good news is that the repeaters are kind of generated and then parsed again in a separate module, like an extension module. And we'd be able to enhance that going forward. So this is kind of just the beginning. I would say that the overall templating engine here is fairly basic. So we just have like replace tags right now and vertical repeater tags. But there could be options in the future. We're looking at other ways to do conditional formatting and that sort of thing. OK. I hope that answered a question. I got another question. Can you use tags for inputs or are they used only to display data? Tags for input. Ah, yeah. There is, and maybe I can push some of that to the end, but there is a feature that we haven't exposed yet called placeholders, which allows you to have like custom blocks within the document to do exactly just that. Like you might have sections of the document, which are read only, and then sections which are meant to be done for input. And so there's lots of use cases for that as well. OK. A third question. If you want to keep going with the questions. Sure. Can you use conditional fields within the repeater? So that shows certain records. To not show certain records. No, the way the repeater works right now is it will iterate over a found set. So like if you have a related data as we have here, order details, child records of the order by default, it will iterate over those. So you can't skip something. But you could do that in the data so that you could do that before you, before you merge it. All right. Nice questions, everyone. Keeps and the name in. I think you can carry on, Sean. OK. So I just want to jump into the code here and take a look at first a bit about, well, here's the here's the component itself that I put on the form and you can see all of the design time properties on on the right. And one thing that I could point out is how we how we inject those that custom tag library into the editor so that it's aware that when the user types of pound sign that they should get those tags to complete. So I'm going to look at the code behind this. The, excuse me, the on load event of the form. So this happens right as the form is being initialized is when we want to inject that. And I'll just jump to this init editor here. This is a function which which gets called. And you can see that the first thing we want to do is get an instance of doc editor, which is a class we made in the companion module, the document editor, utils module. So it's called a scopes, scy doc editor, get instance, and we pass in the component itself. So we take the component off the form. We kind of wrap it in a smart class to expose additional functionality on top of just the component. And then we grab a tag builder and we start pushing tags into the tag builder. And you'll notice that I can pass in these are names of columns in the in the primary table. The second argument being a display value for the tag. Now if you don't you'll notice the first one order ID is doesn't specify a display value. If you don't specify one, it's fairly smart. It'll, it'll look at the metadata you have on, on a column if it's a database column, the title property. So if you have some already some pre formatted text or maybe some language translation that already comes with that column, it'll, it'll actually respect that when it, when it generates that even if you don't specify it. But of course you can pass anything you want as the second argument to say what the display tag will look like. Therefore your users don't have to know that your, I don't know, your order ID or your ship date doesn't have a space in it and you know that sort of thing. You'll notice a little bit farther down. You can pass in a related value. So this is going to the customers table and getting the company name there and can be displayed customers.company. You'll notice a third argument here of Boolean and that's whether or not the tag should generate a repeater. So orders to customer if you think about it, it's, it's a one to one relationship. You don't have many customers, you know, that own the same order. So we don't want to automatically generate a repeater. The default is that you do generate a repeater. So you don't have to specify that. But if you do put a related data provider there, it will assume that, that that is a, you know, a parent child or one to many type of relationship and it will make the repeater tag. So you can see that I didn't specify true for orders to order details, but when I specify the quantity unit price and stuff subtotal there, it's, it's taking a look at that and saying, okay, well that, that one will generate a repeater for and that's how I was able to make that start and end around the table. At the end you just call build and you kind of want to do that one time and that will inject everything into, into the document editor component making that available. So you, you really want to do this like kind of write it start up and that's how you get those custom tag libraries in there. What's nice is that the sort of metadata about those tags is maintained so that later when we go to merge it, you don't have to really tell it, you know, how to replace it, it'll infer that and do it automatically and I'll get to that in a minute. The other thing worth pointing out was, and I'll just flip back to the client here, I had customized the toolbar a bit, made this drop down where I could also insert a tag manually. There are many different ways you can customize toolbar, but I was just going along with this same example. So I'll show you how we did that. If you look at the design view of the document editor, you can see there's a property here called toolbar items, that is an array of this complex item called toolbar. And if I, there's a couple dozen there, if I scroll down and look at the one for the insert tag, you can see here are the properties for an individual toolbar item image style class, you know, the label you want to have on it, etc. Importantly, here is what happens when the user clicks it. And then another property that's kind of needed for that drop down is the value list. So you can see that I'm binding it to this value list, which will then generate the items in the drop down. And so if we look at the setup back here, this is populate the value list used in the toolbar item online 60 here. I was just getting the fields back out of the tag builder and sending it into value list so also available if you want to put it into a drop down. If you want to see what happens when the user clicks it, it's this on click event, you know, on click custom toolbar. And here we go ahead and get the display value out of the, out of that value list and then calling the component itself we add input right where the cursor is. So you got the cursor sitting somewhere blinking on the document, you hit that action on the custom toolbar item and inject in there. So that's kind of an example how you could do custom toolbar items, but really you can write any code there, you can have, you know, buttons and drop downs and different, different types of toolbar items. So I won't get into too much detail about customizing the toolbar, but I did want to show one example of that. The other thing that you'll notice is when I clicked the print button here is when I got the document preview here. So I want to show you how I was able to merge the tags and preview it in another window. So in the custom toolbar action, that's another, another one if you look at the editor and you look at the toolbar items that would be the very last one. You can see on click here goes to the on action preview handler. And so here what I'm doing is first getting some sample data, some getting a, you know, there was no data behind this form. So I just kind of pull it with a factory found set. And then I have this other form called document preview that I put a method on there to show content. And if I jump into that, I pass in the selected record. So let me step back and also point out that dot content here is a form variable. And I didn't really say earlier that there's some automatic data binding going on. So if I jump to where this is declared up here at the top of the form script file. So that's a, that's a just holding in the form variable. Probably in a real life scenario, your, your document would be stored in a database record. You'd have some, you know, some table that has your document templates or whatever it might be. But here we just put it in a form variable for a simple demo. So I'm passing all of that. And by the way, that, that variable will be up to date any, any modifications in the editor will automatically be bound to that variable. And there's really just one line of code here with the, the helper utility scope, this scope.spidedoc editor, one line of code to merge the tags, you pass in the content, which is the, you know, the, the content that's in the editor that's bound to that variable. And then you can merge it with a record as well or a found set and it will then replace all of those tags because the data source of the record matches the data source when we define the tag builder if you, I might have plowed through that a bit too quickly. But if you look at the doc editor, tag builder call here, I'm passing in the orders data source. So that's how it's kind of aware of that, that data source. So that returns back the, some new content markup. And that's also, this is another form. And that's also another form variable if I jump up here to the definition of that. So it's kind of like another editor in another form bound to another form variable. And it's just kind of putting that back with all the merge stuff in it. And that's what's showing in the, in the form when we, when we push this button. So if you follow that far, probably the last thing you want to do is I've previewed my, I previewed my document now I'm ready to print it. I have a little print button down here, I'm going to push that. And I'm going to get a message here that there's an API key required for export. So in order to do the document export, we're actually running that through a cloud service. So you don't have to put the, the exporter on your, in your code base. Because there's, there's a lot going on there to generate a PDF from, from the document markup. So you need a Servoy cloud API key for the exporting. Fortunately, you can go to, if you go to Servoy cloud and log in, you can generate a key. So I'm going to log in here or I have logged in here to my, you know, my Servoy cloud control center. It has all of the pipeline stuff, but we have add ons down here. Right now we all have only one add on, which is the document printing. So I'm going to go ahead and generate my free key. There it is. I'm going to copy that and come back to my running sample. I'm pasted in. And now I get a fully merged printed PDF of the example of my document right here as a download from there. And if I want to take a look at the code for that, you can see there was one function that was tied to that print button. And I think it's down here. This on action generate PDF gets called when you push that print button. Now there's, there's a lot of code here just checking to see if there's an API key and showing the dialogue because it's a demo and we want to kind of show you how it works. But the API key is not something you would have a user put in. That gets loaded from there's just a config property. So you just have to put that in your configuration and it will load it automatically. It'll find it automatically. So that can always be hidden and kept secret. So you can see that again, we do the scopes S3YDoc editor API. We get an exporter object. In this case, we just call set content. There are some other print options. But if you call set content, you want to pass in the document markup. And here we're just calling directly to the component to get the HTML data. There is an argument here on that which is do you want to inline the CSS. If you think about converting what we have in a browser with a document editor, there's a lot of CSS going on there to make it render correctly the way you want it. And if you imagine if you're going to generate a PDF, you're going to go and have, if you have all this external references, that's not a good thing you want to embed everything. So if you are printing, it's always good to get the markup with the CSS inline. But the data binding that's going on with those form variables I showed is not inline. That's just the kind of raw document content because you don't need all that extra stuff because it's just rendering in the editor. It's rendering in the editor. You don't need to inline any CSS. It's always dynamically there. But if you're going to print, you probably want to get that with inline CSS. That's what that Boolean argument is for. Anyway, we just set the content. After we get the exporter, and then we call one more line of code here, which is export to PDF, and that returns an array of bytes. So you don't have to download the file. This could be running on a headless client that every night goes and generates some reports and then mail them off to customers or something like that. I get the document bytes and then you can see farther down here is where I just download it to the user in this case. So it's really two lines of code, though, that you need to pay attention to. You get that get exporter plus the set content and then the actual export to PDF. The API key stuff you can just handle by putting the configuration. Okay, so that's how we handle printing. There was, I think, one other example that I would show is just showing it with data. So if you want to... Is this shown? First, we have some questions in. We've got four questions so far. Okay. First off, this one is from a few minutes ago. What about formatting data, like decimals, date format, and different languages? Oh, yeah, good question. Well, the good news is the... If you look at when I was generating those custom tags, it can be any data provider. So ideally, what we're not doing here is building a complete reporting engine. This is a document editor, not a report, not a BI engine. But fortunately, you have access to everything in your Servoy application. So at the places where I was injecting those tags into my custom tag library, yeah, I was getting database columns in some of the cases. But in others, like, for example, that's order total that you see here, that's a calculated value. The price, I think, had some formatting that was also a calculated value. So you can use calculations to dynamically format any data before you send it into the document. So that's the best handle that the application there. Okay. Then the next one, I do not fully understand this question, but maybe you do. This is from Steve Haas, you asked, can you have multiple tag builders be able to merge and relate records? Multiple tag builders to merge unrelated records. So yeah, you can inject as many, you have to do it all in the tag builders bound to one data source. There are ways to add more tags to the document. So the short answer is yes, that can be done. Okay. Yeah. Yeah, yeah. Yeah, yeah. Yeah, in the example I show here, it's a bit tricky to do that, but that's definitely possible. Okay. The next one came into three times about sending the document directly to a printer, like a physical printer. Yeah, okay. So a browser does not have access to C and know about printers. So when you do a print in your browser, then it will take what's on the screen and then show you your available printers, but a web application never has access to see those printers. That's why we do the PDF download here, because if you give the user a PDF, then here, you've got print, right? And then the browser knows about that. So best to always go through PDF when printing from a browser. All right. We've got a few more that came in the meantime. Of course, is it possible to do the printing on an on-premise server, for example, for medical data? Okay. Yeah. So the question is about the user, sorry, the S&D picks up here on the fact that the PDF export itself is through a service API through Servoy Cloud. And therefore the concern would be, hey, am I sending patient data up to Servoy Cloud? Therefore maybe breaking my compliancy with HIPAA or other regulations. And can I use that export service on premise? The answer to that is yes, you can. So the default is that for free, you get access to the Servoy Cloud export service with some rate limitations applied. There's an unlimited version of that. So you can print as much as you want with high performance through Servoy Cloud. And with that option, you also get the on-premise version of that, which is delivered as a Docker container or Docker image. So we have customers using that, that particular one too on-premise right now already. So we developed it with that capability in mind. So short answers, yes. And then another one that fits into this, there is a fee for generating a PDF. We'll get to that at the end. Because when I generated my key, that was the free version. So I generated that for free. I didn't pay for that. But I'll get to the end when we talk about getting started and all of the options. Okay. Then we caught up on the questions. Okay. Good. Actually, not too much more to show. I just wanted to show that, and maybe I did this a bit out of order. But if I grab a record here of one of the orders, just to show that, you know, obviously, you're not going to have someone, you know, they want to preview the document, maybe look at it. But in reality, it's linked to some of their functions. So here I'm looking at a real order and suppose, yeah, I want to generate a, you know, a copy of this order or something. So I put a print function up here, you know, and then I get, I get the print preview for, for this data, right? So you can see that that all the data is matching. So basically everything that I showed you, but I just wanted to show it in a, a more real world example where it's in the application. Maybe your end users don't ever even see the document editor, right? You could just have the documents that you do yourself pre-made or maybe only power users can edit templates, but, you know, you can, you can use that for some quick printing functionality. Okay. A lot of good questions so far. I think what I'll do is, I want to talk about just how to get started because we did say that, you know, this is released and I want to show you kind of where everything's at because there's, there's really two projects at play here and it could be a little confusing at first. So first of all, I want to jump to one of the project home pages. This is the project home for the smart document editor. This is the actual web component that is available that you can put on your form. There is a sort of companion project because that's just a component for how to edit documents in, you know, in a browser basically in your application. The merging and PDAF export and the custom tag library and all that stuff is really, you know, like the code module. It's not really the editor itself. It kind of wraps the editor and does some extra stuff. That is, you know, our SUI U-TILs standard utility project. We added another sub project there called the smart document editor U-TILs and that has, all of the API that I was kind of showing for merging and custom tag libraries and export and all that stuff. This is a pretty well documented module. As you can see, we got lots of code samples and step-by-step instructions on how to get going with that as well. So once you get started, you can find what you need there as well. These components, the component and the companion module are both released and available. However, it's best that you use it with version 2020.0.6. So our Q2 release that will be coming out in June, so in a few weeks. The component itself, when it renders and developer, there are some issues if you go earlier than 2020.0.0.6. The good news is, if you ever want to use the very latest pleading edge version of Servoy to try something or test, you can always go to build.servoy.com slash latest and there you will find the branches. Servoy master is always the latest stuff and we build that nightly. So if you come down to the bottom here and pick out your flavor, either the Windows EXC or the Linux or Windows ZIP or the Mac GZ, you can get those going. The update.zip is for installing over top of an existing installation. So if you're just getting going, I picked one of the full zips or the EXC. And that can get you access at any time you can come and try out the latest version of Servoy. And then, so you've got to get that first if you want to try this or wait for a few weeks when we make the first release candidate of the next version of Servoy. So you'll need that to get going. The other thing is, if you go to Servoy cloud, anyone that's registered with Servoy should be able to come in here, you might not have access to all the pipeline stuff, but you can get your add-on and get your key. That's how you get going with the printing. What I thought, Victor, is I'll just come in here and maybe show it from scratch and just show people how they can get started from scratch. So this is the sample solution, which is a bit more complicated, but I'm just going to create a new one. We'll do this in like one or two minutes. So I'm going to just call it demo for scratch and make that. So if you're starting blank, this is what it would be like. I'm going to create a form. I'm going to call it the editor and my zoom stuff is in the way. How do I? Can't get to my OK button. There's a dang toolbar. Let me see. Huh? This is funny. Can't resize it. Yeah, there we go. Sorry for that. There we go. And I'll just click Finish. And so when I start, I don't have, I only have the standard components. You can click here, get more components, or you can do help, download install with Servoy package manager. Both of those will launch the Servoy package manager. And if you are on 2020.6 or later, you will see the smart dock editor component here. You click that and click the plus button that will get you the component. The other thing you want to get is probably the companion module. So if you click over to modules and grab this one, you can install it. And in fact, the Servoy package manager manages dependencies. If you install the module first, it will install the component for you automatically because it sees it as a dependency. So that's nice. So now you can see on the palette here, I got the smart dock editor available down here at the bottom. I'm going to drop this on the form. And this was happening. That was weird. Sorry about that. There we go. So when I do this on Zoom, it slows way down. OK. I'll just change the CSS position real quick. I think it takes up everything. So this is the component. You can see that on the right hand side are all of the component properties. Probably what you want to do is maybe come into the, I'm going to script editor for this form and making a variable called content. Make it text and set up some data binding here. So if you see the data provider property here, you can set it to your form variable. And at that point, you're pretty much ready to go, save everything and launch it in the ng client. And you can start typing away. So that's sort of the getting started. I'll just leave this open. We'll take some, I'll go through the kind of the overview and we'll take some Q&A. And if I need to jump back to it, we can jump back to it. So again, the use cases for this, there's quite a lot. I think the most common two are really, you know, merge data driven documents and reports. And also you could do things in the with the document editor for like comment threads and threaded conversations anywhere you want to do rich text as well. I didn't cover image support in this webinar, but there's good image support for just pasting directly into the editor. There's copy paste from Word and Google Docs works nicely. So if you're looking to move away from Microsoft Word templates, this is a nice option because you can kind of paste in from there and go. So there's a lot of use cases. The tag library, there's probably in the future will have a lot more around that as well. The other thing is this is a vendor supported component that we've partnered with the vendor to bring to you, which means that there's a lot of functionality that's not even exposed yet that could be coming for us. Things like tracking changes so you get into version managing versions on a document. People editing a document at the same time collaboratively support for different formats. Somebody asked about specifying input. There's these placeholder controls that we were starting to expose and we took it out because it's not quite ready yet, but you know you could mark different parts of the document as read only and other parts is where with like a custom kind of editor in it. So if you want to make your own document signing or sort of a proof or workflow or something, all of that is actually supported in the component itself. And then so there's possible enhancements coming in the in the future we could do with that. And certainly around the tag management will be working on that right away. So this is available now, as I said, you got to get 2021.06 to do that, but you can get that now at build.survoy.com. Okay, there were questions about the export service. So the exporting is done via Servoy cloud through an API. There are rate limits that apply to that. I think it's 25 documents daily can be generated for free. But the good news is is that from there we just jumped to unlimited. We high performance as well. So like a dedicated print server kind of container. And that is only 75 euro a month to do that. And that also gives you the option to take that. Docker image out of Servoy cloud and run it on premise for secure. Or in places where you have outbound internet is restricted. We see that from time to time as well. So there's the option for that. So I'm going to just leave up some useful links. And I see that we still have a lot of Q and a. Yes, they keep coming in. Well, we'll spend another few minutes and I'll leave that. The editor up as well too if I want to jump in and show anything else. So first off, don't Ruby with the flurry of questions. Can it render images? Yes, yeah, so you can take an image and copy directly and paste it right into the document. You can also insert an image. If I come. Let's see. I got a. One thing that's just there by default is to. Is to insert image. This will just go from the file system. So I could pop an image in there like that. But also I could if I had that like, you know, copy and paste and that also works as well. So I can just add a little bit of a. By default that in lines it right into the document. So like basically for encodes it, which is pretty much what you usually want for if you're going to like PDF it and email it to someone. You don't want some external URL. However, there is the option to also. There's an on file upload hook. You can also do a lot of options. You can also do a image by URL reference as well. For the images as a repeater section. Yep. Also supported. All right. Great. Congratulations and expressions in the document editor. Yep. Calculations are supported. Expressions. So that as I said before, it's not really like a B. I tool. There are no currently no expressions that we support through the utility module. What I was thinking is something like conditional formatting would be what we look at next. So if I have a negative balance. I want it to show and read if I have a positive balance. I wanted to show and in black or something like that. Currently. We don't expose anything in the tag management to do that. And I think we probably could look into doing that next. But you can use any calculation you want from your app. So you saw the order total I did was, you know, summing up order lines and formatting it to with the low-calcurrency. That's all done in the application and then rendered in the document. Okay. The next one you said about multi user support and tracking changes to the document editor. So I want to ask question if that's possible and I guess the answer is yes. Can you elaborate on that? It's not currently. So that's that I put that as in the maybe in the future. That is imported in the underlying component as an add on. So. Yeah, we'd be looking to entertain use cases. So contact me. Or post on the forum. If you have potential use case for that, we can look into it. So there's what the point being there's a lot of sort of untapped potential that works cited about in this component. Talking about the underlying component. Who is the vendor? The vendor is the vendor. Okay. Okay. Okay. That was easy. Yeah. Do you still need to get it? Yeah, come back. No, go ahead. What's the next one? You spoke about words that I work similar. Can you copy paste things to words and from words and how would that work? You can copy paste from words. Pacing two words. I don't think that that'll work because then you're going well, I will work. You'll just. It's just mark markup. You know, issue my markup when you copy out of the editor. In a format the editor understands. But pasting in from word or from a Google doc. Is I actually tried it. I opened up a Google doc. I wrote that template that we actually show at the in the sample. I first made that in a Google doc and pasted it in just to try it once and left it there. So. Yeah. So that's important. The next one is this supported in ng1 or ng2 or both. I knew that was coming. It's ng1. We had customers that needed this right away. So we. Although we said I think sometime back we won't do any new stuff in ng1 with regards to components. We did. Because there wasn't a media need. But we'll be reporting this to ng2 as quickly as possible. Options for fonts in the text. Oh yeah. So there is. There are the default fonts which kind of come. This one. Yeah. Are going to come here. You can configure which. fonts you want to make available. So again this is just a toolbar item here. And those are all completely customizable. But then there's the challenge of well is your font loaded or not. And there are ways to. To inject a head tag directly into the editor. To give you the fonts. You just have to call add. head tag in it. And it will. It will do that when you're generating your document your export as well. Okay. Then the. And our and footer page numbers. The usual stuff. Will that be added. Yeah. I think we can do page breaks. And I didn't have it. An example of. The real guru of this component is out this week. And he had a nice example of page breaks. But page breaks are supported and there are some header and footer. And I think page number stuff available for that. I didn't have a great example for that for this webinar. I will try to get that in the documentation because that's an important one. Okay. Yeah. Yeah. I fully. I followed the phone sizes. Can you elaborate. We only can use relative users want to go for pixel. Okay. Big size. Yeah, yeah. The default here is. Is just that relative one. I think point and maybe pixel as well. I'd have to double check, but you can definitely get the point sizes here instead of the relative ones. All right, then the last one is about the toolbar items because there seems to be some documentation missing. The documentation doesn't seem to cover that yet. Yeah, the doc editor itself, the component. I'm fixing up the documentation at the moment. I wanted to have it all ready for this release. So there is some stuff there about the API reference about the mentioned feeds and the toolbar items. So these two custom items, I'm going to add those. However, the component is pretty easy. The utility module is fully documented with all the examples you need. That's really where I would go, for examples. But everything on the component itself is kind of can be inferred from the IDE. So the toolbar items, these are the properties. And the toolbar can also be set up programmatically. And that's what I'm going to put in the component is some examples of alternate configurations of the toolbar that you can also do programmatically. Because it could be like your saving preferences for users and all that. You can do all of that. This is Skye's the limit. So I got to get some good examples in there of different ways to configure the component. But everything that I showed today is, if you look at that utility's module, the one that I installed second with the package manager. There's a lot of code examples here in step by step instructions on setting up the editor and merge and print. And I'll get some other examples on the tool, customizing the toolbar in the... So documentation is not completed. The double component. Exactly. Yeah, on the utility module is on the dark editor, I'm going to put in some examples. Okay. And then the last question for me, because I know everyone is willing to try this out right away. But what if they run through issues? Right? And they submit their tickets and their issues. Oh, yeah, great question. So you can always submit your feature request, bug things like that to support.servoi.com and we'll pick it up there. If you have a question getting started, also we do accept issues on the GitHub repositories. A lot of people like that. I actually like those two. We mirror it. So if you put an issue in GitHub, we put it to our central resupport and vice versa. So you can put all issues there. If you have a support question, you can post it on the forum. And if you want, you can even email me the... You can email me the case ID of your forum post and I'll make sure it gets attended too quickly. All right. So now everyone knows where to ask their questions. Oh, last one. Do you export the word wrong with PDF? Currently, no, we don't have a word export. There is an add on for that, I believe. But if you're interested in that, then let's talk. Okay, then we made it through all the questions. Yeah, I'll put my email in. Usually I have it on the... But if you want to even go directly to me, usually put it in the slide and it's about... I put it in the chat there. You guys want to copy it. I'll take direct email about that as well. Okay. Well, thanks everyone. Lots of great questions. So we ran over time, but I think that's a good sign. That's a... We had a lot of questions going in and I like to encourage everyone to do that again. The next webinar, because it brings a lot of extra information on the table. Yep. Then I want to wish everyone a very nice day and hopefully see you in our next webinar. Yeah, it will be the release webinar for 2021.0 shakes. Oh, here we go. Yep, and we'll be getting that ready in a few weeks. We'll be announcing that on. Yep. Perfect, okay. Goodbye, everyone. Thank you.