XAF XAF Blazor, 2 Mar 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: XAF Blazor ListView Custom Templates

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

In my case, I'm using the the newest version of south blazer, uh but it's almost the newest one. I think, like I'm one version behind, so the code will not change in any case, so let's create a top blazer web application. Of course we will use xpo and no authentication.

A

And for modules, for this example, I don't need anything, so I will just finish.

A

If anyone has a any questions, you can like also use the chat, and I will check it as soon as as possible and answer you here in um within the stream. So let's rebuild this for first time.

A

And we're ready to go, this is almost done so, let's add a new domain object.

A

So this will be it person.

A

So the functionality that I want to show is how to add custom columns to the listview columns that, with the special functionality based on an html template. So for this we're going to create a really simple business object.

A

A

Name and email.

A

So let's run this at least one time.

A

So, let's see how this goes, live coding always tricky. I practice all of this this morning, but you know how it is right and I get this reception, but this is section I guess everyone is getting like. I guess it's related to to chrome. Somehow I moved to different browsers like opera and vivaldi, and they don't do it at the beginning, but after a while this start happening. So I guess something related to the cookies or something like that because it doesn't happen like the first time.

A

It happens like the third time and then continue to happen. So if it happens for you, let's report it to the express I'm tired of seeing that every time I run the application.

B

Have you had an issue recently where you click into a field in your application or even any web page for that matter, and it doesn't seem to register until you resize the window or move the window.

A

Yeah, actually, it's happening for me in chrome and yeah, and I think it's something that these problems related to chrome actually not to to the frame or itself. Because.

B

A

In any random page uh lately.

B

A random page even applications that leverage uh the chromium engine seem to be having the same issue.

A

I think it's a common ending because it's shared between vivaldi and h and all of them have the same problem at the moment. So I guess the trick will be disabled. Try to find an old version, disable automatic objects and just say that just pay like with an old version, because I mean chrome by default. It updates uh automatically.

A

So you need to turn that off, I guess in general, because all of them are having that problem. So well going back to the example, uh this will be me and my email.

A

When I pick this name, I never realized that the name was really long to tell it as an image. So uh this is what we have so far. um This is a really simple application. Just one domain object and two columns domain objects, so they all will be uh try to add a functionality that, when I click on over this record, but exactly in this column, I want to um handle the link.

A

So you know that uh for for emails or for any type of links, there is a tag in html and then it will open the right application on your computer. So that's what we're going to do right now so doing that is kind of really simple. So, let's stop here and just in case. I have something that I used this morning um and it will be so it will be easier just in case you know how it is like.

A

So the idea is, uh we need to create a render uh with the html necessary to render that column. So I'm going to create a laser component here is the laser component that I want to create. So let's go and do that.

A

So let's go to the blazer module.

A

And add a new basil component.

A

And this will be email, column, template.

B

And it doesn't matter if you invest this into a folder or anything in your solution right uh well,.

A

It depends because this generates code behind somehow so um it's the problem where you put it, but um once it's there, it's better to not move it, because when you move it then you will generate a different code behind and for some moments you will have those like tricky errors that are showing us an error in the studio, but they are not truly errors when you clean the solution they disappear.

A

So if you are not like uh it doesn't vary you that much to having those arrows temporarily for a minute or so then it's not a problem, but sometimes, if you're just learning how to handle this, uh you might spend long time trying to figure it out there or without seeing the solution, and you spend one hour there. So it happened to me the first time. That's how I'm telling you so um is there to place it in the in the location where you're going to leave it in the end.

B

That's good advice.

A

So here what we need to do is basically create.

A

Well, we have the component right and if you see this component is super simple, we only have uh we only need to return an html tag in general so and the thing is that we need to invoke the render of this component from code.

A

So we have this static method that will return the right, html tag that we need to render. So basically, I'm going to copy this part. Okay, that's what we need and if you just join, uh can anyone please mute their mic. If not I'm going to need them. Sorry for that, so, okay, let's go back to the solution.

A

So it's this one. So the part that I'm going to replace is this and we don't need any html here. Basically, so we just need to um delete this html tag that was in the top, and here I'm going to comment this out for a little bit. So I wanted to explain what is happening here.

A

Okay, so we do have um here uh a razor component. That's going to render just an html tag that html tag will be the column in the grid. Control basically, so there are a few tricks that we need to do here. So, first, okay, we will make a link tag, which is an a ref, that's what we have in here and then we need to avoid this event to propagate over the other components, because if we don't do that, basically, when you click, you will end up opening the detail view.

A

So, instead of doing that, we have some special javascript instructions like um see, stop immediate propagation, so other components that are listening to this event will not be clear because of that instruction. Basically- and the other thing that you need to know here- is that this render will receive the current object, so that would mean the current row of that um uh in the grid. So we know that in each row we will have a person because that's the person that we just created the person object.

A

So basically, what I'm going to do here is like to remove this part, and I need to import this name space, because even though it's showing here that it's green like it's working, it's not because it's missing the name space on top. So it's this one, okay, so I have the component that will create the render.

A

Now we just need to replace it at some moment, like basically customize the the property editor or the list editor in this case. So for that I will need a view controller.

A

So that's the controller already have it here, so I'm just going to copy it from here and then explain you the code. So let me get this from here to here. uh Let's go back to our solution.

A

Unless I control this controller, you need to add it in the blazer module, because otherwise you will not have access to some name spaces or some references. Remember that uh self-application there are based on like a cascade in the error like a waterfall.

A

So if you do it in here, you will not see the reference to the component that we just created so anyway. Let's add a new view controller here. Lately, I'm not creating view controllers with the templates, I'm just doing it with the control shortcut. So in this case, I'm going to create a class because I'm going to paste the code in general, so uh I don't, as I told you, I don't use the item template anymore. I just do something like uh sub controller view and that will create a big controller class from it.

A

So I'm using that uh lately. So, but here, let's space the code, um let me delete this code, because that was a test that I was doing before so here we're going to make this uh um an object, view controller, that's a more specialized version of the view controller. Basically you tell them on which view you want to which type of view you want to use and which type of object will this view represent. So the name for the namespaces.

A

Okay, so right now we have the name spaces for the staff parts, which are the view controller in this case, which is the view controller in this case, and now basically, I need to import the name spaces for the devexpress component. So let's import this also.

A

And for the columns, so basically here what we're doing is like when the view create the controls like basically in this case, the grid control um we want to uh iterate through the columns and when we find the column that we want, we will create our own render instead of the default render.

A

So the render that we will create is this component and we have this method to create. So we just need to get the name of the class which, in the component, you don't see the class, but the name of the class is the name of the filename. Basically, so I will copy the filename.

A

Put this here and we know that there is a static method create and that we will pass a person object, which already has the email property so so far so good. This is like kind of really simple. It took me a while to figure it out, and I need to ask the express for support because, like in general, there are like hundreds of ways to handle laser components, and you can do basically all type of magic thing normal magic until really black magic. Like that range. You can go really crazy with this. So.

B

So your uh your object, space declaration for person was incorrect. You got the persistent base implementation rather than yours,.

A

Okay, so let's delete the persistent base, this one things yeah these things: they that's thinking when you when you, when you have those uh classes that they have they exist in a different name. It's like personal, email and stuff like that. So this one is the right one great so so far so good, and I will upload this um this source to github, so everyone can take a look to it and here are the the the links that I use to figure out these this example.

A

So let me compile this and hold it.

A

Okay, so let's see if it works, you know like live coding is always tricky, even if you practice that before or if you do this, like eight hours per day every day, this thing you can say so, let's see someone else is in the chat.

A

Okay, let's either try to do something.

A

Okay, so see now it shows same email. uh The word sends email is in the html tag. Actually, uh if you see it's highlighted as an email, it's not text. So when I click over here, it will ask me like if I want to open the like the right application to handle the email protocol. This. This is the most simple example, but remember that you can put any type of html tags or components that you want to use.

A

For example, in some other cases uh we have a delivery application that we show the address as link and when they click on the address they use it on mobile devices, uh the it pop-up ways I don't know if waste is popular in many other countries, but you know cyborg, that's what we use as navigator.

A

We don't use google maps or apple maps, which is the one the one that we use. I think it actually belongs to google anyway.

A

So um basically, this is the most basic example, but you can go crazy with in an integration there, because you have the space to put your own html component or javascript component and do whatever you want in that column. So any questions feel free to contact us in the chat or open your microphone.