Edge Browser 5
By Richard Rost
3 years ago
Add Back & Forward Buttons to the Browser Form In this Microsoft Access tutorial, I'm going to show you how to use the new Edge Browser Control.
In Part 5 we will be adding Back & Forward to the browser form so the user can, uh, go, like, uh, back and forward, and stuff. :) 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, back forward buttons access, edge in access forms, integrate edge browser access, access edge integration, access form back button, access form forward button, dynamic browser control access, enhance access forms with edge, access edge web control
Subscribe to Edge Browser 5
Get notifications when this page is updated
Intro In this video, we'll continue working with the new Edge Browser control in Microsoft Access by adding back and forward navigation buttons to your custom browser form. I'll show you step by step how to create these buttons, use JavaScript commands to handle page navigation, and make your code more efficient by creating a reusable function for executing JavaScript. We'll also talk about how the browser control handles navigation to external sites and discuss trusted domains. This is part 5.Transcript Welcome to another TechHelp video brought to you by AccessLearningZone.com. I'm your instructor, Richard Rost.
In today's video, we are continuing our series on the new Edge Browser control. In today's video, we are going to add back and forward buttons to our browser. This, of course, is part five of my series. If you haven't watched parts one through four yet, go watch them now. There's the link where you can get started with part one. You can scan that little guy, go watch those, and come on back.
Back to our browser. Another standard feature in most browsers is a back and forward button. If you go to a particular link, let's say this one here, and you want to go back to where you were, you click the back button up here. Some browsers will also take you back if you hit the backspace key. It appears that this doesn't work in the Edge Browser control, so we are going to make our own.
Let's go to design view. I'm going to take this label and make it smaller. I'm actually just going to get rid of the "my URL." I'll just call it "You are here." Usually, when I'm building a form for myself to use, I keep the label the same as the field name so that when I'm coding I can see that's my URL. But if it's something for public consumption for my users, then I'll make these obviously nice and pretty.
Let's just copy one of these buttons here. Copy, paste, and I'm going to put a back left less than sign or whatever in there. I want to make it small, about that big, and we'll stick it over here beside it a bit. You could put a picture in there. You can do whatever you want.
Let's open up the properties and let's call this the back button, BackBTN. Right-click, build event.
This is interesting. Notice how my other buttons had that function in here, that load page function. If you use the build event and it sees that in there, it's going to bring up the expression builder because it sees an expression in there. We are going to come over here with this OnClick event and we're just going to delete this. Then you can click the dot dot dot button here, or you can go again back to the build event.
Here I am in my back button code. We're going to go WB. In order to get the browser object to do something, you want to execute a command inside the browser. You can execute any JavaScript command within reason - there are some you can't - but generally you use the Execute JavaScript command. Then inside quotes, what is the command you want to execute?
If you're familiar with JavaScript, some of you are, some of you are not, don't worry. I wasn't familiar with JavaScript at all until I started building my own website. But here's the command you want to send to the browser: history.back(). That's it. That will send the history.back command to the browser and say, "Hey, I want you to go back where you came from." Save it, throw a debug on there. Let's close the browser and open it back up again.
Let's browse to my site, go somewhere else, and then hit the back button. Ready? There we go. It goes back to the previous link. Pretty straightforward, pretty simple.
How about the forward button? Same thing. Copy this guy, put it right there, maybe just get him right up next to each other. Switch this to that. Open up the properties. This one is the back button, this one will be the forward button, ForwardBTN, and event or right-click build event.
WB.ExecuteJavaScript and it's the same thing, it's history.forward(). Save it, debug, close it down, save it, close it, open it, go somewhere, go somewhere else, back, forward, back, forward. Purely state.
There you go, pretty straightforward.
Just like in these buttons where we made our own function to load a page, we're going to be using that ExecuteJavaScript stuff a lot. So, very similarly, I'm going to make my own function in here so I can just put the JavaScript command in the button itself without having to have a separate event for each button.
So, right in here, private - actually, let's make it public because other forms might call this - public function. Let's call it ExecJava, and we're going to send to it a JavaScript command as a string. In here, all this is going to have to say is: we're just going to copy this, paste it up here. We're going to say, I want you to WB.ExecuteJavaScript, whatever the JavaScript command is.
Now we don't need this. In fact, let's just cut it out here, delete that, and find the other one (here's the forward one), delete that. Now we can put ExecJava in our buttons.
Save that. Back out here. Let's go to the back button first. OnClick, I'm going to zoom in, Shift+F2 equals ExecJava. What's the command? It's going to be history.back, just like that.
Now we're going to copy that one, come over here, paste it in here, and it's going to be history.forward. OK, OK. Save it, close it, close it, open it back up again, and one more time, browse, go somewhere else, back, forward. Same thing. All we're doing now is we made it so that we don't need a custom event for each button. We're going to use that ExecJava a lot to push values to forms, to do all kinds of stuff, to click buttons with code.
Let's take a look at one more thing.
Let's go to my PCResealed.net website. Here we are at PCResealed.net. I have a links page. This is just my training website. I teach web design in some of my classes.
Go to the links page and here are some different links that I have on my links page for training purposes. Let's try to click on this link here to go to my 599cd.com site and - oh, wait, what just happened? It happened off screen. It launched the site in my external Edge browser.
Why didn't it load in the browser itself? When you're using the Edge Browser, you can only browse to other links in the initial site that you opened. You can go to About Us, you can go back to the Home page, you can go to the links page, as long as it's on this domain. If it's not, you have to set up something called a trusted domain list. I want to cover that in the next lesson.
Don't forget, folks: if you like learning this stuff, if you like programming, check out my developer lessons on my website. I have lots of them. I'm getting ready to release Access Developer Level 45, which covers part two of my "Building the Ribbon," where we customize the ribbon and we work on right-click popup menus. I'll check that out and put a link down below.
But that's going to do it for today, folks. That's your TechHelp video. Hope you learned something. Live long and prosper, my friends. I'll see you next time for part six.Quiz Q1. What is the primary purpose of the new functionality added in this tutorial?
A. To allow users to upload files through the browser control
B. To add back and forward navigation buttons to the Edge Browser control
C. To enable spell check in the browser control
D. To embed videos into the form
Q2. What JavaScript command is used to navigate back in the browser history?
A. window.previous()
B. history.back()
C. url.goBack()
D. browser.undo()
Q3. How does the tutorial suggest making button creation for JavaScript commands more efficient?
A. By hard-coding every command in separate events
B. By only using macros for navigation
C. By creating a single function that takes a JavaScript command as a parameter
D. By using only keyboard shortcuts
Q4. What happens if you try to access a link to a different domain using the Edge Browser control?
A. The link opens within the Edge Browser control as expected
B. The control displays an error and stops responding
C. The link opens in an external Edge browser window
D. The link is blocked by the control and nothing happens
Q5. Why is it beneficial to abstract the JavaScript execution into a function like ExecJava?
A. It allows you to run only one specific command
B. It enables code reuse and simplifies adding new buttons with JavaScript functionality
C. It prevents any JavaScript code from running
D. It restricts navigation to a single website
Q6. If you want to enable navigation to other domains within the Edge Browser control, what do you need to configure?
A. JavaScript minification
B. A trusted domain list
C. DNS server settings
D. The back and forward buttons only
Q7. In the video, what is one reason given for renaming form labels for public users?
A. To ensure correct coding structure
B. To make the form look more user-friendly and professional
C. To prevent any interaction with the field
D. To avoid linking the label to the data
Q8. Which of the following is NOT a method described in the tutorial for executing JavaScript via the Edge Browser control in Access?
A. Using the ExecuteJavaScript method on the browser object
B. Typing commands directly into the web page
C. Calling a custom function that wraps the ExecuteJavaScript method
D. Triggering code execution through button OnClick events
Q9. What should you do if the OnClick event already contains a previous function or expression?
A. Leave it as is and add new code at the end
B. Delete the previous function or expression before adding new code
C. Add a new event alongside the old one
D. Ignore the OnClick event and use a macro instead
Q10. According to the tutorial, what is a common use for the ExecJava function in forms?
A. Validating form data automatically
B. Pushing JavaScript commands to the browser control for various actions
C. Importing data from Excel
D. Setting form background colors
Answers: 1-B; 2-B; 3-C; 4-C; 5-B; 6-B; 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 focuses on enhancing the Edge Browser control inside Microsoft Access by adding Back and Forward navigation buttons. This is part five in my ongoing series about the new Edge Browser control, so if you have not seen the first four lessons, I recommend checking those out first to ensure you have all the foundational pieces in place.
A standard feature in nearly every web browser is the ability to move backward and forward through your navigation history. In modern browsers, users do this by clicking the back and forward buttons, or sometimes with keyboard shortcuts like the backspace key. However, the Edge Browser control in Access does not support navigation with the backspace key by default. Because of this, we need to create our own navigation buttons.
To begin, I recommend fine-tuning the appearance of your form. For example, you might want to change the label next to your URL field to something friendlier, like "You are here," especially if you plan to distribute your database to others. For your own use during development, it often makes sense to keep labels that directly match their field names for easier coding.
The next step is to create the Back button. You can duplicate an existing button on your form and then update its label to indicate that it is for navigating backward, perhaps using a left arrow symbol. Adjust the size and position it appropriately. If you prefer, you can even use an image instead of text for your button.
After you create this button, you will need to work with its OnClick event. Open its properties, name it something descriptive like BackBTN, and prepare to add your VBA code. What you want to do is command the browser to go backward in its history, which you accomplish by instructing the browser to execute JavaScript code. Specifically, you can use the browser's ExecuteJavaScript method to run the "history.back()" function. This JavaScript command tells the browser to return to the previous page in its navigation history. Once you have entered this code, save your work, and test the button. If you navigate away from the initial site and click the new Back button, you should return to your previous page, just like in a normal browser.
For the Forward button, the process is identical. Duplicate the Back button, change its label to indicate forward navigation (such as using a right arrow), and rename it to something like ForwardBTN. In the OnClick event, use the ExecuteJavaScript call with "history.forward()". Now you have both buttons working, allowing you to move backward and forward smoothly between pages.
To make your code more reusable and maintainable, I suggest creating a separate function to handle running JavaScript commands in the browser. Define a public function, perhaps named ExecJava, that accepts a JavaScript command as its argument and passes it to the browser using ExecuteJavaScript. With this setup, you can update the event property of each navigation button to simply call ExecJava with the appropriate command, such as "history.back()" or "history.forward()". This way, you do not have to write the full logic in each button's code, and your buttons become easier to update or expand in the future.
Once you have this function in place, update your button events to use it. Test your form again to confirm that the back and forward buttons work as expected. You will now be able to use the ExecJava function anywhere on your form to execute JavaScript commands for the browser, making it a flexible tool for various web interactions, such as pushing values to forms or triggering DOM events.
I also want to point out an important limitation of the Edge Browser control in Access: When you try to follow a link to a completely different domain, the control will instead launch the destination in your system's external Edge browser instead of opening it inside the control itself. By default, you can only navigate within the original domain you opened. If you want to enable browsing to other trusted domains within your embedded browser, you will need to configure a trusted domain list, which I plan to cover in a future lesson.
If you enjoy these kinds of lessons and want to deepen your programming skills, I recommend exploring more of my developer tutorials on my website. I am currently preparing Access Developer Level 45, which will get into customizing the ribbon and working with right-click popup menus in Access.
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 Adding back and forward buttons to Edge Browser control
Designing custom back and forward button icons
Configuring button properties and event handlers
Using ExecuteJavaScript to control browser navigation
Implementing history.back() for back button functionality
Implementing history.forward() for forward button functionality
Creating a reusable ExecJava VBA function for JavaScript commands
Refactoring button code to use the ExecJava function
Testing navigation buttons in the Edge Browser control
Understanding browser navigation limitations across domains |
