Enhancing Your Business Central Applications with the New User Control Host Page

In this video, you’ll learn about an exciting new developer feature in D365 BC: the user control host page.

This new page type allows developers to embed user controls created with JavaScript and CSS directly into Business Central, providing a seamless way to display custom content.

In the video, you’ll learn how to create and set up a user control host page in Business Central. The tutorial covers the following steps:

1. Creating a New Page: Create a new AL project in Visual Studio Code and set up a new user control host page. This is a crucial step in AL Development, laying the foundation for embedding custom content.
2. Setting Up the User Control: See how to configure the page type, application area, and usage category, and add a caption for easy identification. This setup is essential for Business Central Development, ensuring the user control host page functions correctly within the application.
3. Embedding a YouTube Video: Yann shows how to create a control add-in, add necessary scripts and styles, and embed a YouTube video to demonstrate the functionality. This step highlights the versatility of AL Development in enhancing Business Central applications.
4. Adjusting the Layout: He adjusts the layout to ensure the video is displayed full screen, making the most of the available real estate. This adjustment is part of Business Central Development, optimizing the user experience.

This tutorial is perfect for developers looking to enhance their Business Central applications with custom content. By following along, you’ll learn how to leverage the new user control host page to create a more dynamic and engaging user experience.

Are you interested in Dynamics NAV and Business Central development? Check out our collection of NAV/BC Development Blogs.

Video transcript:

Hi, welcome. My name is Yann Saint-Laurent. I will be walking you through a demo on how to use the new user control host page in Business Central. This is a new page type that allows you to embed a user control inside Business Central and basically display, uh, any sort of content that’s created through JavaScript and CSS inside Business Central.

The page type is new, but it’s not like you couldn’t do this with a card page in the past. Uh, let me start here in my development environment. We’re in Visual Studio Code. I have a brand new AL project. As you can see, I have the “Hello World” page extension on the customer list.

I’m going to start by deleting this—delete—and then we’re going to create a new page. It’s a new file. We’re going to call it the “User Control Host Page.” And this is just a page, um, in Business Central. We’ll get a new page number. Give me a page number… well, it doesn’t want to give me one, so I’ll just create my own. This is our user control host, and I’ll just refer to my note here so that I can make this happen a little bit quicker. And here—so, boilerplate stuff. Basically, the page type is a user control host, and ApplicationArea = All, and UsageCategory = Document.

And then I’ve added a caption so we can find our page easily. And then if we go to layout here—why don’t we just do this, it’ll make your life a little bit easier. And we don’t need this. We can add a tooltip—I don’t think it’s necessary here.

Okay, so group—we don’t need a group. See, that’s the problem with using Copilot to help us out—sometimes it adds things that you really don’t need.

So right now our, uh, YouTube viewer is basically not created, so that’s why it’s underlined. And this one here—it says the user control host must specify exactly one control of type “user control” in the content area. Well, we’re in the content area. There’s our—it’s not a field, that’s the problem. This is a user control. And I think now everything up here is going to be happy. That’s right.

Okay, so I guess the next thing we need to do is create our user control. New file: “User Control”—or should we do—here, let’s do this. Let’s do a new folder. This is where we’re going to store our control add-in. And inside this one, we’ll just add our file called “The YouTube Viewer.” And this is AL, and this one, um, is going to be the control add-in that we’re going to add to the other page.

So, this is the YouTube Viewer, and here the only thing we really need to add is a few tags for our scripts. And the only script we’re going to use is a main.js script. And then we’re going to add stylesheets—style.css. And then we’re going to do a startup script, and it’s going to be startup.js.

Okay, this should do it. We just need to create these three files now. Uh, because I didn’t put any, uh, folder next to them, we could go here and say “scripts.” And now I need to go inside my control add-in, add a new folder for my scripts, and then I’ll add another folder for my, um, styles.

Okay, and if I’m adding a folder for my styles, then I need to go here: styles. And you see I’ve got some capitalization. Um, AL is not case-sensitive, but let’s be consistent here. And this one’s going to be also in my scripts folder.

Okay, and then inside my scripts I need two files. I need my main.js, and I’m going to add another file—this is going to be my startup.js. And then the last one we need is inside the style folder—we said we need the style.css.

Okay, so if we go back here—they’re still underlined, but it’s just the compiler that’s not very quick at catching that we’ve created these files. I just put a space, go back—and then it fixed. And save. So now we’re up to the races. And as you can see, this one is now green, so there’s no more error.

Maybe we’ll just add a little bit of CSS so that we can see the effect on the page. So I’ve picked this nice little color. It’s a little Business Central style—one of their colors that they use. So right now, I’m pretty much ready to view my new control add-in inside my user control host page.

Let’s see what that looks like. Wait for it—and here it is. Let’s log in. I don’t think I set my startup page, so maybe I should have done that. But I think I can just look for it here: “YouTube Viewer User Control Host Page.” And there it is.

Okay, so this is my viewer here. It’s pretty small. We’re going to adjust that really quickly here—let’s move on to that next step.

So when I was building my user control—uh, not this one, that’s the host—so when I was building my user control, I only added script styles. If we want it to go full page, we can say VerticalStretch = true—not shrink, I said stretch. Stretch = true, and HorizontalStretch = true.

Save. Shift + F5 to stop debugging, and F5 to start debugging again. And let’s look at the result now.

Here—before I, uh, forget to do it again—I’m just going to go to my, um, my launch.json, and in my launch.json I’m going to update my page to my user control host page, which is 50100. So if we update this here, save—I’m going to relaunch it just so we can see the effect right away. And F5. Let’s go back to our website. We can close this one, we can close that one.

And there it is. There you go. So, it is full screen, with the title of the page here. And not sure where this little add-in comes from, but now we’re full screen.

So, what I’d like to add to this page—obviously, it’s a YouTube viewer, so I would like to see a YouTube video embedded full screen. Um, so why don’t we go and do that?

So, the next step would be in our startup—oh yeah, there it is. Okay, so I need to follow my own notes. Uh, inside our user control add-in, we’re just going to add a trigger. And basically, when the page loads, it’s going to send a message to this trigger. And what I would do is inside the startup.js, which is our startup script, we add this: Microsoft.Dynamics.NAV.InvokeExtensibilityMethod(“ControlReady”).

And so basically, when this control add-in starts, it’s going to call this. This needs to exist in our YouTube viewer. And this is called an event. So, if I go back to my control, I need to add my event right here—whoops, event—I just need to go back and grab it. Where’d it go? Startup—I said “ControlReady.” So, this needs to be exactly the same. And then you add “ControlReady.” And then, when this gets called, it calls in here.

And now, inside our user control, we have a trigger. And the trigger is ControlReady. And inside of our trigger, we’re just going to add a CurrentPage.YouTubeViewer.LoadEmbeddedContent. And in here, we want to load our content.

I’m going to use a new feature in BC26U that allows us to do multi-line, and we’re going to add our iframe right here. And I’m not sure where this is, but I’m not going to put it in because I’m sure it’s going to be a Rick Roll or something like that.

Uh, so let’s go back here—oh, I don’t have my YouTube page. Uh, let me see—I had it in my history here. This one there. So, this is the one I’d like to embed right now. So I’m going to go to my—oh, nice ad—Share, and here’s the link to embed.

So I’m going to copy this—copy—and then we can minimize. And then we can place this in here. So the beauty with this multi-line, um, is you can go like this, and then it just makes things a little bit more legible. And we can go like this—I mean, we don’t need to do all this. We—we can leave it like that. That’s fine.

So right now, when the ControlReady is called, we’re going to add this LoadEmbeddedContent to our control add-in. So now this one is a procedure.

Load—it was helping me for a second—EmbeddedContent, and then this is the HTML. And that should do it.

So now all we need to do—this guy—LoadEmbed—oh, “Embedded”—okay, that’s why. There you go, that’s better.

Okay, so inside my main.js now, I need to create this function. So the function here is called LoadEmbeddedContent. In main.js we’re going to go:

javascript
Copy
Edit
function LoadEmbeddedContent(html) {
var div = document.getElementById(“controlAddIn”);
div.innerHTML = html;
}
And how you know this is—if you right-click here and you go “Inspect,” I can see right here that this is called controlAddIn. That’s the ID of this div. And in my code, I’m saying, hey, I want to get that div that’s called controlAddIn. And then if I go div.innerHTML = html, we should get our control add-in populated. Not our control add-in—we should get our YouTube video populated in here.

Uh, there’s one thing I’d like to change—is on the control host here. There is a width and a height that YouTube puts by default. Instead of making a small one—or actually, let’s leave it. Let’s leave it. I’ll show you what it looks like and then we’ll tweak it after.

So right now, I can just stop debugging, start debugging, and then I’ll show the result of what’s going on here. Close this one—we don’t need our YouTube anymore—and here’s the new page. And here’s your page. And here’s your video.

Whoa, that’s cool. Okay.

So, what I was talking about is I’d like this video to go full screen. So the only thing we need to do is if I change the width and the height to 100% and 100%—save—and we’re going to relaunch. Let’s go back here—and that’s it.

We have a user control embedded inside of a user control host page and going full screen. Takes advantage of the real estate. And if you minimize this, obviously it’s going to try to take full width again. And I think when you play the video, it’ll just change the ratio, so it fits. And then just—YouTube just works with it.

But if we go like this, it’ll play full screen. And YouTube controls still work. I mean, you can put anything here. Like I said earlier, Microsoft advertises on their page here that it’s for Power BI. But, uh, possibly in a future video we can show you other things that we can embed inside the user control.

I hope that was useful, and please come back soon for the next video. Thank you.

Trending Posts