Edge Browser 7
By Richard Rost
3 years ago
Document Complete, Before Navigation Events
In this Microsoft Access tutorial, I'm going to show you how to use the new Edge Browser Control.
In Part 7 we're going to add a refresh button to our browser form, and then we're going to learn about the different navigation events for the browser control, including On Document Complete and On Before Navigate.
Members
Members are going to learn how to add a little navigation indicator, which will show when the browser is actively browsing, and will have a little timer event that adds dots to it a couple of times a second as it's going.
Silver Members and up get access to view Extended Cut videos, when available. Gold Members can download the files from class plus get access to the Code Vault. If you're not a member, Join Today!
Prerequisites
Links
Recommended Courses
Keywords
TechHelp Access, Edge Browser Control, BeforeNavigate, DocumentComplete, Access Refresh Button, Navigation Events, On Document Complete, On Before Navigate, Enhance Access Forms, Access Web Browser, Customize Access Interface, Access Navigation Control, Access Event Handling, Access Browser Events, Access UI Design, Implementing Browser in Access, Access Edge Integration.
Subscribe to Edge Browser 7
Get notifications when this page is updated
Intro In this video, you will learn how to work with navigation events in the Microsoft Edge Browser Control inside your Microsoft Access forms. I will show you how to add a refresh button to your embedded browser, handle the events that fire before and after navigation, update the URL bar automatically, and manage type conversion issues in your VBA code. This is part 7.Transcript Today we are continuing with my Edge Browser Control series, putting a browser right in your Access databases, right in the form. Today is Part 7. We are going to learn about the navigation events. This stuff can happen either before the browser control starts navigating or when it finishes navigating to a page. We are going to do that and we are going to add a little refresh button. All that is coming up in Part 7, and of course, this is Part 7 of a series. So what does that mean? That means if you have not watched Parts 1 through 6, go do that first, then come on back.
Here we are back in our database. One thing that I want to do is add a refresh button because sometimes when you are on a page, you might want to refresh it. Most browsers have a refresh button. Usually, it is up here. Here it is on Edge. There is the same thing in Chrome. So let's add one to our browser here, Design View. Let's slide this URL over even some more here. I am just going to copy one of these buttons, copy and paste. Put it right there. Let's give it a name, Refresh button. I am just going to put whatever caption you want. I am just going to put an ampersand in it like that. It kind of looks like a little swirly for a refresh. You could put pictures in there. You could do whatever you want. I have got lots of other videos to cover how to put pictures in buttons.
Now, as far as the code goes, we are going to also use our exec Java that we built previously, and it is just a command, again, a JavaScript command we can use to refresh the page: Location.reload. That is it. So if you are going to be doing a lot with the web browser stuff, learn some JavaScript. I do not have a JavaScript tutorial yet. I have been planning one for years but I just have not gotten around to it and I am too busy with Access. Lots of other stuff I want to do lessons on.
All right, save it. Let's close it. Open it. Go somewhere. Navigate somewhere else. Then hit the refresh button and you should watch it. There you go. And, yeah, it worked. That is good for if you have timely information on there like a stock price or something like that. You want to see the page refresh. Yes, if you want to do an automatic refresh, you can do it either with JavaScript or with your VB code for the timer event.
Now, notice when I navigated to this different page, my URL bar did not update, because this only updates when we tell it to. If I click on a button, we update that URL ourselves, or if I use the bookmark bar that we built in the extended cut of the last class, Part 6. If I pick one of these like Microsoft, then it updates, but only when we tell it to.
If we are on a page and we browse somewhere else, it does not update that, so we need to wait to update that. But how do we intercept when the user clicks on these links inside the page here? There are two different events that we can use that are associated with the browser control. There is on before navigation and on document complete.
Let's start with on document complete. This fires whenever the browser is done loading a page, wherever it happened to be. So when it is done loading the page, we can just say hey, why do not you take the current URL, whatever page you are on, and put it up here? How does that sound?
Let's go to document complete... that will bring up our Visual Basic Editor. Remember that bug that I mentioned before? I actually got a response back from one of the guys in the Access team and he said they are going to look at it. He basically said that if you pick an event over here that the browser supports, you should not have that issue. If you pick one of these over here that the browser does not support yet, it might crash Access. But the problem that I experienced was if the browser has no control or no code in it yet at all, and you drop this down in a brand new database, it will crash if you pick the web browser control. Just be careful of that until they get it fixed.
Anyways, down here I am in WB Document Complete. This is going to run when the web browser finishes loading whatever page it is told to go to, and it is going to bring in URL, which is the final URL that you landed on. Now, I am just going to say my URL, which is my text box, equals URL. Just put in the text box wherever you ended up.
Save it. Come back out here. Let's close this, close this, open it up, go to 599c.com, let's browse to this, and there you go. As soon as it is done, that is the final page right there. If I go to my seminars page and it takes a second, there it goes. So there is the whole thing and everything in it is done loading. Some pages have other pages that it loads inside them. There you go. There is the final URL up top there.
Now, just like we have our own Load Page function, because we are going to do more stuff in here, I am going to also make a Page Loaded function. It can actually be a subroutine because it is not going to actually be something we call. So I am going to make a Page Loaded subroutine. So private. So this could be a sub because it is not going to be in the event properties.
Let's say PageLoaded URL as a string. I am going to take this code here and move that up into here, and while we are at it, let's do something extra too. Let's put in here Status Page Loaded so we can start to see in the status box. The status box, let's start to see what the browser is doing.
Let's do it in our Load Page as well. Before we actually navigate, let's go in here and say Status Navigating. You can put the URL in there too if you want to. You can say Navigating to, you know, 599c.com. But these get pretty long and then it fills up the box. I just want to know that it is in the process of navigating or now the page is done. It is loaded.
Now, down here, we are going to say PageLoaded URL or PageLoaded space URL. My bad. URL is the property there or the parameter there. PageLoaded, send it up here. Now give it a quick Debug Compile and you get a compile error. It says ByRef argument, here is the important part, Type Mismatch.
What does that type mismatch mean? That means you are trying to send a type of data that this sub is expecting, and it is wrong. It wants URL as a string, but take a look really close right here. You get a variant down there. Variant just basically means it can accept anything. It does not know what kind; it could be a number, it could be currency, it could be whatever.
But since this is a variant, we cannot pass it as a variant up here. So we have to convert it to a string. It should always be a string, so that is not really a problem. I am going to say convert the string, CSTR, and then that just makes it a string. That is called typecasting. I have a whole separate video on converting between different types of C strings, C long, C bool, C whatever, all kinds of C function.
Now that we have typecast it, we can go over here, Debug Compile, and it should work just fine. Save it. Come back out here. Let's close it. If Change is Yes, reopen it, hit the button, and then you will see - boom. There it goes. It works. You can see the navigating popped up and then page loaded popped up. Go somewhere else, navigating, page loaded.
Now, if I do go somewhere else, notice how the page loaded shows up, but the navigating is not showing up. That is because the browser is not telling us that the user clicked on a link in here. That only fires when we click on a button. So that is what that other event is for. That is what on before navigation is.
This runs when the browser gets the command to start moving, whether the user clicked on a link inside the browser control or not, but before it actually starts to navigate. We can use that as well to update the user interface. So let's go into here.
Now, what I am going to do is move this stuff out of Load Page and put it down here. We are going to run into the same typecasting problem here because, again, actually on this one, the URL is a string, so we are good. We can leave that like that.
What is going to happen is, we are going to call our Load Page, which is going to issue the navigate command. It is going to come down here and it is going to tell the browser to go. Then, before it starts navigating, it is going to update the URL and tell the status box that we are navigating.
Yes, it will be updating the MyURL box a couple of times. It is going to update it every time it navigates and every time it finishes. That is good to have, even though it is going to update twice, because sometimes the URL that you try to navigate to is not the one that you end up on. A lot of websites do redirection, mine included, so if you type in something like a short URL and it takes you somewhere else, that is good to see.
If you watch, let's save this. All right, let's close it, open it back up again. If you go to my website, this URL right here - you watch this up here - you will see it flash, it goes like three places, because I have got a lot of redirects on my website. See, navigate, navigate, navigate, navigate. It redirected three times and it finally ended up on that page there. Click, navigated twice. I have got a tiny URL thing to make my short URLs.
Like I showed you here, that is a short URL. That is actually in a database. If this page does not exist, it looks it up in a database on my site and finds out what actual page it goes to. Then it dumps you on something that looks like this. That is all that is.
So there we go. Now we know how to add a little refresh button, and we know how to use the two events that happen when the browser starts navigating and when it finishes navigating.
In today's extended cut for the members, we are going to make a little navigating indicator right there. So when you navigate someplace, it pops up there. You can see the little dots moving. Look at that. That is going to involve a little bit more programming and a timer event, so it is pretty cool.
Remember, Silver members and up get access to all of my extended cut videos, not just this one - all of them. Lots - hundreds of them. Plenty of stuff to watch. And Gold members get access to my Code Vault, and you can download these cool databases that I build on my TechHelp videos. Plus, everybody gets free classes, so check it out.
If you like this stuff, if you like learning Access with me, I have got tons of developer lessons on my website. I start with the basics and I take you all the way through building advanced invoicing and math stuff and all the functions and trigonometry and all kinds of stuff. But I keep it fun, so check it out. There is a link on my website.
That is going to do it for Part 7. That is your TechHelp video for today. Part 8 is coming up soon. I am going to show you how to actually get the text off the page in the browser. That is going to be pretty fun. But that is your TechHelp video for today. I hope you learned something. Live long and prosper, my friends. I will see you next time.Quiz Q1. What is the main purpose of the on document complete event in the Edge Browser Control?
A. To execute code just before navigation begins
B. To update the URL bar after the page has finished loading
C. To refresh the web page automatically
D. To close the web browser control
Q2. Why is a refresh button useful in a browser-based Access form?
A. It allows users to bookmark their favorite pages
B. It provides a way to reload the current web page content
C. It saves the state of the form automatically
D. It navigates to a previously visited URL
Q3. How is the refresh action performed in the Edge Browser Control discussed in the video?
A. By calling a built-in Refresh method of Access forms
B. By navigating to the home page again
C. By running JavaScript: Location.reload
D. By opening the page in a new form
Q4. What VB data conversion is necessary when passing the URL to the PageLoaded subroutine?
A. Converting the string to an integer
B. No conversion is needed as URL is always a string
C. Converting the variant to a string using CSTR
D. Converting the string to a boolean
Q5. What issue can arise when working with events in the browser control in a brand new Access database, as described in the video?
A. The URL bar does not update automatically
B. Access may crash if unsupported events are selected
C. The refresh button does not function
D. The browser always navigates to a blank page
Q6. Why might the URL textbox update multiple times when navigating to a site?
A. Because the browser supports multiple tabs
B. Because the PageLoaded function is called twice by accident
C. Because of website redirects during navigation
D. Because the browser caches every request
Q7. What is the purpose of the on before navigation event?
A. It checks the authentication of the user
B. It updates the status that the browser is about to navigate away
C. It informs the user when a form is saved
D. It triggers after the page is fully loaded
Q8. What is the recommended way to show timely information like stock prices using the browser control?
A. Use a static HTML page
B. Refresh the browser manually or via a timer event
C. Implement table queries in Access
D. Disable script execution in the browser control
Q9. In the video, what is suggested as a useful addition to the status box when navigating?
A. Adding error messages for failed navigation
B. Displaying "Status Navigating" and "Status Page Loaded"
C. Showing a list of previously visited URLs
D. Printing the browser's memory usage
Q10. What is typecasting in the context of the video tutorial?
A. Changing the type of a control (such as a textbox to a button)
B. Forcing a variable to behave as a different data type, such as using CSTR to convert to string
C. Casting a web page to a desktop application
D. Assigning a value to a variable for the first time
Answers: 1-B; 2-B; 3-C; 4-C; 5-B; 6-C; 7-B; 8-B; 9-B; 10-B
DISCLAIMER: Quiz questions are AI generated. If you find any that are wrong, don't make sense, or aren't related to the video topic at hand, then please post a comment and let me know. Thanks.Summary Today's TechHelp tutorial from Access Learning Zone continues my series on integrating the Edge Browser Control right into your Access forms. This is Part 7 in the series, where we will focus on handling navigation events inside the browser control. These events allow us to detect when the browser is about to start navigating to a page, as well as when it finishes loading the destination. I will also demonstrate how to add a refresh button to your custom browser form, just like you see in all major web browsers.
First, let's discuss why a refresh button is important. When browsing on the internet, sometimes the page content updates and you need a way to reload it. Both Edge and Chrome have a refresh button near the address bar, so it makes sense to add something similar to our Access-based browser. In Design View, you can add a new button to your form. I recommend copying one of your existing buttons, renaming it to "Refresh," and giving it a suitable caption. Some people use an ampersand (&) as it can look like a refresh swirl, but you can use any symbol or even a picture if you prefer. I have tutorials on adding images to buttons if you are interested in exploring that further.
For the refresh functionality itself, I suggest using some simple JavaScript: specifically, the Location.reload command. If you are planning to do much work with embedded browsers, I strongly suggest learning some JavaScript basics. I do not have a JavaScript class yet, but it is on my to-do list in case you want to expand your skills further.
Once your refresh button is set up, be sure to save your form and test it out. You should find that clicking the new button successfully reloads the current page. This is especially useful for pages with timely data, like stock prices. If you want an automatic refresh, you could accomplish that either with a bit of JavaScript or by using a timer event with your VBA code.
Now, I want to address something you might notice when navigating pages: the URL bar in our form may not update automatically when a link inside the web page is clicked. The URL display only changes when we explicitly tell it to do so, such as when we load a new page via a button or select a bookmark from the custom bookmark toolbar we set up in the previous lesson.
To capture navigation that happens from inside the browser page itself, such as clicking links, we need to make use of browser control events. In particular, there are two events of interest: BeforeNavigation and DocumentComplete. The BeforeNavigation event triggers just before the browser starts moving to a new page, while DocumentComplete fires when the browser has completely finished loading a page.
Let's start by looking at the DocumentComplete event. This event is useful because it tells us when the new page is fully loaded, including any content that might come from additional resources inside the page. When this triggers, we can read the current URL and update our address bar to reflect the actual destination, even if the user was redirected.
To integrate this, go into the code editor for your form and work with the relevant DocumentComplete event for your browser control. A small side note: there is a known bug that can crash Access if you use unsupported events or if you add the web browser control in a new database and immediately try to wire up events without code. Microsoft is aware of it, but until it is fixed, proceed carefully.
Inside DocumentComplete, you have access to the page URL. You can assign that value back to your text box that displays the current URL. To keep things organized, I suggest creating a subroutine called PageLoaded that handles what happens when a page finishes loading. Move your code for updating the text box into this subroutine. While you are at it, you might want to add a message to your status box so the user knows the page has loaded. You can also adjust your LoadPage routine to indicate when navigation is in progress and when it is complete.
When updating these events, you might encounter an error about a "Type Mismatch." That usually happens if the data types being passed between procedures do not match up. In this case, you might be passing a variant type where a string is needed. You can resolve this by using the CStr function to explicitly convert the value to a string before passing it along. This process, known as typecasting, is covered in more detail in one of my other tutorials that explains how to convert between data types in VBA.
Once you have made these adjustments, debug and compile your code to ensure it works as expected. Now, when you open your form and use the embedded browser, you should see the status box update as navigation occurs and completes, and your address bar should display the correct final URL, even if the page involves multiple redirects.
Now let's move on to the BeforeNavigation event. This event fires when the browser is about to navigate to a new page, whether that's from a user clicking a link within the page or a command issued from your form. You can take advantage of this event to update your user interface and indicate that navigation is about to happen. If you want, you can show the target URL and make any preparations before the new page loads.
It's worth noting that the URL displayed in the address bar may update twice—once when the navigation starts, and again when it completes—because some web pages use redirects. Seeing both steps can be useful for troubleshooting or tracking user behavior, as the starting and ending addresses might not match.
When you test this out, try navigating to a site that uses redirects, like my own website. Keep an eye on the address bar and status messages. You will probably notice several navigation events as the browser works through each redirect to arrive at the final page.
With these updates, you now have a fully functional refresh button and a user interface that responds to both the start and end of page navigation, giving you more insight and control over what your users are doing inside the embedded browser.
Also, in today's Extended Cut for members, I will show you how to build a visual indicator that displays while navigation is in progress—a little animated effect so users can see that the page is loading. Adding this requires a bit more programming and working with a timer event, but it creates a nice touch for user experience.
If you are a Silver member or above, you can access not only this extended cut but hundreds of others. Gold members can download the databases I use in my TechHelp videos and have full access to the Code Vault. There are also free classes available for everyone, so check those out if you want to accelerate your learning.
If you enjoy these tutorials and want to learn more about Access, my website has developer-level lessons that start with the basics and guide you into advanced projects like invoicing, math calculations, and more. I always try to keep things engaging and practical.
That wraps up Part 7 of this series. In Part 8, I will show you how to extract text from the browser page—another interesting topic. If you would like to see all of these steps demonstrated in action, visit my website for the full video tutorial using the link below.
Live long and prosper, my friends.Topic List Adding a refresh button to the Edge browser control
Assigning a custom icon to the refresh button
Implementing refresh using JavaScript location.reload
Synchronizing the URL textbox with the browser's address
Handling Document Complete event for finished navigation
Writing a PageLoaded subroutine for actions after loading
Updating a status textbox to reflect browser activity
Typecasting between Variant and String in VBA events
Handling BeforeNavigation event to detect navigation start
Differentiating navigation initiated by user or code
Managing browser redirection and updating URL display
Demonstrating browser control event sequencing in Access |
