Edge Browser 3
By Richard Rost
3 years ago
Build a Custom Web Browser with Edge Browser Control In this Microsoft Access tutorial, I'm going to show you how to use the new Edge Browser Control.
In Part 3 we will be constructing our own custom Web Browser form using the Edge Browser Control. We'll learn how to browse to a URL with the Navigate command in VBA. MembersThere is no extended cut, but here is the database download: 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
Keywords TechHelp Access 2016, Access 2019, Access 2021, Access 365, Microsoft Access, MS Access, MS Access Tutorial, #msaccess, #microsoftaccess, #help, #howto, #tutorial, #learn, #lesson, #training, #database, Edge Browser Control Access, Custom Web Browser Form Access, Access VBA Navigate, Browse URL VBA, Web Browser Access construction, Edge Control Integration, Microsoft Access Browser Form, Access Edge Integration, VBA Web Control, Navigating Web Pages VBA, Embed Edge Control Access, Utilizing Edge in Access, Access Internet Form, VBA Edge Features, Navigate Method Access, Web Interface Access, Create Browser Access, Design Browser Control Access, Access Edge Form.
Subscribe to Edge Browser 3
Get notifications when this page is updated
Intro In this video, you'll learn how to build a custom web browser form using the Edge browser control in Microsoft Access. We'll walk through adding an address bar, a Go button, and setting up the browser control to open on a blank page, all within an Access form. You'll see how to set up the form, use simple VBA code to navigate to user-specified web addresses, and organize the layout for a polished look. If you want to integrate basic web browsing functionality into your Access applications, this step-by-step tutorial will get you started. This is part 3.Transcript Welcome to another TechHelp video brought to you by AccessLearningZone.com. I'm your instructor, Richard Rost.
Today we're continuing my series on the Edge browser control. We're going to build a custom browser today, folks. Yes, we're going to build what looks like a regular web browser in an Access form. We'll put our own little address bar across the top, a little Go button, and this will be the foundation because in future videos I'm going to show you how to manipulate those web pages.
We're going to get there, but for today we're going to start by building the custom browser form. Of course, this is part three of the series, which means if you haven't watched parts one and two yet, go watch them now. You'll find links down below you can click on to watch those.
Also, this is a developer level video. What does that mean? Well, that means we're going to be doing some VBA programming today, folks. If you've never done any VBA programming, do not panic. Go watch this video first. It's about 20 minutes long and teaches you everything you need to know to get started. VBA is not scary and we're not going to be doing a ton of it. We're not going to be writing dozens and dozens of lines of code. Just a couple here and there to make this web browser thing work.
These are free videos. They're on my website and my YouTube channel. Go watch those and then come on back.
Here I am in my TechHelp free template. This is a free database. You can grab a copy on my website if you want to, but for today's video, I'm just going to play with the main menu here. You can do this in any database you want.
Let's go into design mode now. I'm going to make this thing big like that because we're going to put a nice big browser in here. I'm going to keep some of this stuff, and we're going to get rid of some of the other stuff. So get rid of that. We're going to get rid of these buttons. We're going to get rid of, I'll keep that field, we'll keep one button around.
This is going to be our URL bar where we type in the address we want to go to. So I'm going to put in here "My URL" as the label, and then this guy we're going to call it "myURL." I'm not using "URL" because the functions we're going to be dealing with have "URL" as a parameter, so I don't want anybody getting confused. So we're going to call this one "myURL." Call it "URLText" or whatever you want to call it.
This was formerly a date field, so we're going to get rid of that format and the control source. So just "myURL," it's blank now. In the data portion of it, for the default value, I'm going to put in here inside quotes: "about:blank." Just like that. I'll zoom in so you can see it. It's "about:blank." In a web browser by default, if you type in "about:blank" without the quotes, it will put you on a blank page.
If I load up Bing and type in "about:blank" like that, it goes to a blank page. So we're just going to tell the browser you're starting off on a blank page. I don't really want to go anywhere when the form loads.
And what we're going to do is put this up top like so. We're going to stretch this out. Let me close that, close that, and we're going to make this nice and big.
Make this thing big, about to there. We'll leave room for a Go button over there. That's going to be the Hello World button. We're going to make this Go so when we click on this it goes to that. You could put it as an After Update event for that field if you want to, but I'm just going to stick with a Go button for now. Put you up here.
Let's rename this. We'll call this the Go button, "goBTN."
Now if you look, we've got a bunch of code underneath this form. We've got to clear it out. So I'm going to right click, Build Event, just clear out all the stuff we don't need from in here. We don't need this customer open form stuff, etc.
My form loaded, I'm going to rem that out for now. That's just something that I have that just positions the Access window where I record my videos. You don't even need that. That's just for me. Leave the Status function or subroutine because we're going to use the Status box a lot in future videos, so we're going to do that.
There's our code for our Go button. We'll get to that in just a minute. We can get rid of "HelloWorld." So we're pretty much blank except for the Status and the empty frame for the Go button there.
Save it.
We're going to slide the Access Learning Zone logo to the bottom left corner. Don't delete that. We're going to take the Status box and we're going to slide it up here because normally with a web browser you don't need to see this, but for the purposes of class, for teaching you stuff, I find it's helpful to be able to see what's going on. We're going to put some stuff. We're going to status some of the events as they happen.
Next up, the man of the hour. Right, Form Design, grab the browser control, this guy right there, drop it on a form, cancel this thing, and then we're going to size it so it's nicely right there. Beautiful.
You can make some minor adjustments, move this over, make this a little bit bigger, whatever you want to make it look pretty.
I'm going to open up this guy's properties. I'm going to set the name of it to "wb," just like I did in the last couple classes. If you want, also here in the Control Source, you can also put "about:blank" like that in the Control Source there so the browser opens up on a blank page as well.
Let's save it, close it, close it, open it back up again. I have a button up here on my Quick Launch toolbar to open up MainMenuF. If not, you can just come down here.
One thing I don't like about this, and I mentioned this in the previous video, is the fact that it's transparent. So I'm going to throw a white box behind it just like I did before. In fact, we're going to make it so this thing's a little bit smaller, and then you'll get the white box border around it. Do that, bring that in just a little bit all the way around it like so.
Go to Form Design, find that rectangle control right there. We're going to put you all the way around this thing like so. There we go. Format, Shape Fill is going to be white, and if you want to put a border around it, that's fine.
We're going to also right-click on it and go Position - Send to Back so it's behind the browser. Save it, close it, open it. Looks much better. If you don't want that border there, you can make them exactly the same size. I kind of like that little border.
Next up, let's make that Go button work.
So when the user types something into here, they're going to click the Go button and it's going to navigate to whatever page they put in there.
So let's go back to our code. Here's our Go button. Ready? All it is is:
wb.Navigate myURL
That's it. That's all you need. It's going to tell the web browser control to navigate to whatever is in that myURL field.
Save it. Let's give it a try. Come back over here. Change this. Now, you do need the HTTP or HTTPS in front of it, so:
https://599cd.com
Ready? Click.
Boom, there you go.
That's that easy, and now you can click in here and navigate around the site if you want.
That's the basics of it. It's that easy.
Moving forward, in the next couple of videos we're going to add some stuff. We're going to add a Back button, a Forward button. We'll do some stuff to automatically put that HTTPS on the front if you want to.
Then we're going to get into actually looking at the events as they run. We'll get into pushing values to this, so if you want to, for example, push a value into this search box here, we can. We can read values off of this page. You can scrape data off a page and put it in your database. There are all kinds of things you can do. I cover a lot of that in the next couple of lessons.
If you like this kind of stuff, if you like my videos, check out my developer lessons. I teach lots and lots about VBA. I've got tons of videos and stuff for you to watch on my website.
That is going to do it for your TechHelp video for today. That's part three of the Edge browser control series. I'll see you tomorrow for part four. I hope you learned something. Live long and prosper, my friends. I'll see you next time.Quiz Q1. What is the main objective of the video tutorial?
A. To build a custom web browser in an Access form using the Edge browser control
B. To explain how to design a web page using HTML in Access
C. To set up database relationships in Access
D. To teach SQL programming for Access queries
Q2. What is the purpose of the text box labeled "myURL" on the form?
A. To display the status of the browser
B. To show the name of the website owner
C. To allow users to enter the URL they want to navigate to
D. To log error messages from the browser control
Q3. Why is the default value "about:blank" set in the myURL field?
A. To show a welcome message when the browser opens
B. To direct the browser to a blank page by default
C. To automatically open Bing as the home page
D. To allow for error handling when no URL is entered
Q4. What does the Go button on the Access form do?
A. Closes the current form
B. Copies the URL to the clipboard
C. Navigates the browser control to the URL in the myURL field
D. Reloads all records from the database
Q5. In the provided code, what is the function of wb.Navigate myURL?
A. It saves the current URL to a table
B. It validates the syntax of the entered URL
C. It sends the address in myURL to the browser control to display that page
D. It refreshes the data source for the form
Q6. Why is the name "myURL" used for the address bar field instead of just "URL"?
A. To prevent confusion with other built-in Access controls
B. Because "myURL" is a required keyword in VBA
C. Because Access does not allow "URL" as a field name
D. To make the label look more professional
Q7. What visual adjustment is suggested for the browser control to handle transparency?
A. Change the browser control background color to black
B. Place a white rectangle behind the browser control and send it to back
C. Increase the transparency of the form
D. Set all controls' backgrounds to transparent
Q8. Which of the following future steps is mentioned in the video as part of extending the custom browser?
A. Adding automatic data backups
B. Adding Back and Forward buttons
C. Implementing password protection
D. Setting up multi-user access control
Q9. What happens if you enter a URL into the myURL field without the HTTP or HTTPS prefix?
A. The browser will automatically add it and navigate correctly
B. The browser control will not navigate correctly to the intended page
C. The application will generate an access violation error
D. The form will crash
Q10. What is the main programming language used for this tutorial?
A. JavaScript
B. C#
C. VBA (Visual Basic for Applications)
D. Python
Answers: 1-A; 2-C; 3-B; 4-C; 5-C; 6-A; 7-B; 8-B; 9-B; 10-C
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 working with the Edge browser control in Microsoft Access. In this lesson, I'll walk you through building a custom web browser right inside an Access form. The goal is to create a basic but functional browser layout, with an address bar across the top, a Go button, and the embedded Edge browser control below. What we build today will lay the foundation for even more advanced web page manipulation in future sessions.
First, a reminder: this lesson is part three in the series on the Edge browser control. If you have not gone through parts one and two yet, I highly recommend reviewing those first so that you understand the background and setup.
This is aimed at developer-level users, so we will be using some VBA programming. If you have never programmed in VBA before, do not worry. You should watch my introductory video on VBA first, which is available for free on my website and YouTube channel. It is about twenty minutes long and covers all the basics you will need. Most of what we do here involves just a small amount of code to get the browser operational.
For this tutorial, I am working in my free TechHelp template database, which you can find on my website. However, you can use any database you like to follow along. Today, we will focus on modifying the main menu form.
To begin, switch your form to design view and resize the main area so there is plenty of room for the browser control. Keep the controls you want to retain and remove any unnecessary buttons or fields. I am turning one of the controls into our URL bar, where the user will type the web address. Label the text box appropriately, something like "myURL" or "URLText." I avoid using just "URL" due to possible confusion with parameters in browser-related functions.
Be sure to clear any specific formatting or control source settings that might have been previously applied, leaving the text box blank except for its default value. Set the default value to "about:blank" – this will ensure that the browser starts off on a blank page, which is normal behavior for most web browsers.
Position this URL bar at the top of the form. Adjust its size and layout, and leave space to the right for a Go button. Rename the Go button to "goBTN" to keep things clear.
Next, you will want to clean up any old code attached to this form. Open the form's code window and remove any unnecessary procedures. I typically have a bit of code that repositions the Access window for recording my tutorials, but you will not need that. However, keep the Status subroutine, since we will use the status display frequently, especially when working with browser events in future lessons.
Move the Access Learning Zone logo to the bottom left and place the Status text box somewhere easy to view – I recommend keeping it visible on your form while learning so you can see live updates.
Now it is time to add the Edge browser control. In design view, select the Edge browser control and insert it onto your form. Resize it as needed to fit your design. In its properties, set the name to "wb," just as I did in previous lessons for consistency. If you wish, you can also set its control source to "about:blank" so it loads to a blank page initially.
At this point, you might notice that the browser control uses transparency, which can be distracting depending on your form background. To improve the appearance, add a rectangle shape behind the browser control, fill it with white, and send it to the back. This creates a clean backdrop around the browser. Adjust the sizes so you get the look you prefer; a small border can help the browser control stand out visually.
Now, let's make the Go button functional. When users type a web address into the myURL box and click Go, the browser should navigate to that page. In the Go button's click event, you simply instruct the browser control to navigate to the URL specified in the myURL field. No complicated code is necessary – this is a straightforward one-line command.
Be aware that users need to enter the full web address, including the "http" or "https" prefix, in order for navigation to work properly. For example, entering "https://599cd.com" in the address bar and clicking Go will take you directly to my site. Once loaded, the embedded browser will allow users to navigate and interact with the page just like a normal browser.
That covers the basics of setting up a custom browser form in Access using the Edge browser control. In upcoming videos, we will add more functionality, such as Back and Forward buttons, and even automate additions to the URL, like auto-prepending "https" if needed. We will also start exploring browser events, pushing values into form fields on web pages, scraping data, and much more. I cover all of this in detail in later lessons, so if you are interested in expanding your Access development skills with VBA and web automation, be sure to check those out on my site.
That is all for this session and part three of the Edge browser control series. You can find a complete video tutorial with step-by-step instructions on everything discussed here on my website at the link below. Live long and prosper, my friends.Topic List Building a custom web browser form in Access
Adding and configuring an address bar for URL input
Setting a default value of about:blank for the URL field
Creating and naming the Go button
Clearing unnecessary code from the form module
Adding the Edge browser control to the form
Naming and setting properties for the browser control
Adding a background rectangle for browser visibility
Using the wb.Navigate method to load URLs
Handling user input to navigate web pages |
