XAF XAF Blazor, 4 Jul 2023

Previous Meeting

Next Meeting

⏯

youtube image

►

From YouTube: XAF Blazor - Form and PDF Generator

Description

Click Here to Subscribe: http://xaf.life/35

Websites:
https://xafmarin.com/
https://xari.io
https://www.xafers.training/
http://xafersweekly.com/

Facebook Group
http://xaf.life/4g

Free XAF Support Hour
https://calendly.com/xari/free-xaf-support-hour

A

This is a simple prototype about doing forms and creating PDF for those from forms. So basically we have this integration with form IO that we can create a dynamic forms at runtime. So we can. We have all these fields that are purifying. Also. We have fields for almost every data type, so we can do a string, a unlimited stream phone number number date, time and so on.

A

So we can basically start just create a wrong form and just add a name, and we can change the position of the label or anything, and you can see a preview that we have right. Besides, we can add a placeholder and their name. We can add a description. Please.

A

This field is for entering the name and it will put it privy behind it. We can add a tooltip another way. I will add here and you can add a prefix, something that it will be in front or something that would be after. So there is a lot of configurations that we can do here. We can add Mass custom, CSS classes. We can all the file values, we can add validation. This will be a required failure. This is going to be a new field. We can add conditional.

A

This will be a shown only when other component is uh has this value and so on. So let's we're gonna have post on logic and advanced things. We can even add some validation with a little bit of JavaScript, with the data submission object of Json and so on. So we can add a lot of things here, maybe salary we can make a fake a form. We can add the date time and uh salary. They is important to know we're gonna, remove the time part or at the time part- and you will see.

A

Let me move this here- how your either will look? You have a Time bar here. You can disable it, and then you don't have anything else. So you you are building your complete form. You can have a preview of the form and you see how it's going to be looking and when you made your applications formation to do anything you want with it. Of course we can put something to identify the form demo form NATO, and this is where things started.

A

Getting even more interesting, you can get a template of a PDF and if you guys know PDF, we are able to do some, uh we can generate and we can modify the PDF everyone. So we have another PDF here, for example, and then you have this acrophone that you can feel it. So if we go and say, okay, let's edit the form you see that they we have some identifiers, some key, the values that we can use to navigate in this form. We want to add the name or we want to add anything.

A

So you can see here those identifiers. So let's go back here and now, let's say that you, let's save, create a reform. This simple one of the contacts off that we have at first and if you see we did a simple. So if we click new, we go directly to the designer.

A

If we double click, the form we'll go directly to the form and if we click the form and edit it's not a new one, we can go and modify anything that we have to to do here. So another nice thing is that you can do the form and maybe send a link to your client. So let me see if I have the you might be sending a link to the client and it right away is create the form for you completely there.

A

Now, let's talk about the PDF template bar, so we have a PDF that we're sending okay the phone contact us. The template that we're gonna be using is this test. That is the one that we just show here and then we basically take a and come here and we do- and this will is going to improve by yourself right now. We use basically have okay, let's map, all the form fields to the PDF.

A

So basically, if you saw the PDF in the right here and we go back to edit- we have given them textbooks family name text box. So basically, this is what we have here, given name text box, family name textbook, and if we go to our form.

A

We have, for example, this field. First name is text field one. We can change that one and make it first thing or put any key that we want this second field.

A

uh Let's go to the edit Json, this text field too, and so on. So with that one we're gonna, do some really neat mappings.

A

Now we do text field, 2 will be here and we can actually separate the command that tell hey put more than one field in the PDF like this, and you can even do some a map entry. This is a component that later you can start filling things and you can do other things and and say: okay, these two phone key with this one over here and so on, and that way you don't have to type that or no we hide the right through a PDF.

A

We iterate to the to the form, get those values put it for you, so you can decide and then we can do something like I want everything, uppercase or I, don't want everything, uppercase or so on so on. Let's leave it up, okay, so we make a case.

A

And now, if you want the form- and we go to the contact course and remember, this- is the one- let's say that we put here: Jose second property made up, email is required, so we're not going to be able to submit until we got an email and there is validation for the email and so on foreign.

A

We are able to jump to the PDF and the fields that we wanted like we just fill on. The form are going to be there and let's say that I want to go back and say: okay, this is perfect, I can submit it or I can go back to the phone and say okay. This is not what I want I need to modify this and I will then replace that one.

A

So it's a really Dynamic way to create any type of form, take a PDF that it has acrophone features and mix them together to take the PDF a generation from the form. That would be so that's, basically the proof of concept here and the the code. They say again, it's pretty simple: it's the it's just control! It's using!

A

Let's go to the prepare PDF that is in the most important, the PDF document processor from The Reflex, PDF, Library I'm, basically getting all the fields from the agroforms and from there when we want to insert that. We just say I right here, a pen line put whatever you want in all those fields and load the new PDF with those changes.