20. (Advanced Programming In Access 2013) Using Tab Controls

Using Tab Controls video in the "Advanced Programming in Microsoft Access 2013" series hosted by Steve Bishop. In this free advanced video tutorial series Steve will be going over Microsoft SQL Server installation, Database Migration, creating a better User Interface, using external data sources, complex Visual Basic For Applications (VBA) concepts and distributing your application.

Click here for the full playlist of "Advanced Programming in Access 2013":
http://goo.gl/wunUmw

Click here for the Work Files of this series:
http://goo.gl/m4kgWV

---

Closed Caption:

hello everyone and welcome to
programming and access 2013 the advanced
course my name is Steve bishop and in
today's video we're going to be talking
about using tabs now tab objects are a
wonderful device that you can put on
your forms to kind of section off a part
of the form that can be reused over and
over again to show different things to
your item to your users so tabs are
great and you're probably very
accustomed to using them you probably
use them all the time when you interact
with your computers so let's go ahead
and take a look at an example here on an
access database if you go to the
Northwind database
we've got the purchase order details
form here let's go ahead and open this
up and take a look at it and you'll see
that down here on the bottom section the
bottom half of this form we actually
have some tabs we have these three
buttons that run across here and
underneath the the three buttons we have
this rectangular area here and right now
since the purchase details button here
is highlighted or what we call the
purchase details tab is highlighted
there's this specific information is
being displayed about the purchase
details if i click on inventory
receiving you can see we get a
completely different bit of information
that shows up and what was underneath
the purchase details is now hidden now
if I click on payment information once
again everything from purchase details
and everything from inventory it
receiving is is hidden but payment
information now shows up so it's kind of
a convenient way of hiding some controls
and showing others all within the same
area of your form this is great because
now you don't have to force your users
to click on a button that opens up
another form to show this information
nor do you need to make the screen
really a lot bigger to display all three
of these pieces of information and try
to figure out how to format all that so
it fits on one screen instead you can
just put this tab control here on the
bottom of the form and just reuse this
rectangular area
so let's take a look at the inner
workings of how Tabs go let's go ahead
and go into the design view here for the
purchase order details and you'll see
that there is actually a larger object
here which if I just click to the side
of the tabs here you can see that we get
this highlighted rectangular area here
this is the actual tab control it is one
single tab control that with inside of
it are different tab items so we've got
the purchase details inventory receiving
and payment information
these are all what we call pages inside
of the main tab control so each tab has
an element called a page and you can
even see they're really pretty much
synonymous at abbott pager the same
thing essentially you see when I click
on purchase details we see that the
selection type is a page and the name of
it is purchased details underscore page
same thing with inventory receiving
we've got it's called a page and its
name is inventory receiving underscore
page and then the same thing for payment
information so underneath each one of
these tabs you can see this highlighted
in orange area and this is really what
is the page this is a section or a page
of the tab control that is associated
with that particular tab so purchase
details opens up the purchase details
page inventory receiving pull tab opens
at the inventory receiving page and
payment information tab opens up the
payment information page
ok so you will hear tab and Paige talked
about synonymously when it comes to
access
ok so let's say we want to go ahead and
add a new page to our tab control if you
select this area to the right of the
tabs up here
okay there's this little empty area here
or if you can manage to get the mouse to
have a right on the border of the tab
control object you can now go ahead and
right click on that and it will bring up
this context menu button select the
option for insert page and you'll see
that that automatically
adds a new tab with a new blank page
down underneath it
i'm going to go ahead and give this a
name of google underscore page and
you'll see that it gives that underscore
page the the title of spatially the
caption of the form so by default it's
giving it whatever the name of this new
pages but if i go over here to the
format tab for this object I can go to
the caption here and change to just
google and you can see that that helps
fix the name problem of the tab okay in
now in like google page I want to go
ahead and add a web browser control so
i'm going to go ahead and click on this
and you'll see that when i hover the
mouse over the area of the page it turns
black
it has this black background and I need
to make sure that i am dragging and
dropping my new object inside of this
black area
ok I can't drag and drop it and put it
somewhere else i really need to make
sure it goes inside of this black area
doesn't have to cover it all the way up
but as long as it's dropped inside of
that highlighted area
ok let's go ahead and do google.com and
click OK and now we have a web browser
control that's been added to this google
page so let's go and save our forum and
open it up so there's our purchase
details if i click on the google tab lo
and behold it should load up there is
our google page
ok so we've browsing the google website
when we click on the google tab
ok so let's say that I want to move my
google tab over to be all the way here
to the left we go ahead and close that
down and reopen it in design view now in
order to move the tab or rearrange these
tabs and the order that they appear you
can once again just right-click in this
area next to the tab or right-click on
the border itself of the tab control and
go to page order now when i select page
order you can see it she wants that it
shows me
all of the tab items all of the pages
and I can just click on the page that I
want to move and I'm going to just going
to click on move up until it gets to the
first one and the first one is always
the farthest left tab I'm going to go
and click ok and you can see it moved my
google tab all the way over
okay once again i'm gonna go ahead and
save this i'm going to go ahead and
click on the View button here and that
should open it up now and now the first
page to get loaded or the first tab to
get loaded it's my google tab and you
can see the content the web browser for
my google tab goes ahead and loads up
with the google website
ok so let's go ahead and go back into
the design view here let's move that
back over move it down
click OK just gonna click on a few
things here to make sure that looks
right and click on save
once again click on the view to make
sure everything's right all right so we
look good there i think everything is
right
ok so now I don't have to code anything
between $OPERAND klicks right I don't
have to tell it to hide this sub-forum
object when i click on inventory
receiving we've already established that
but there is one good practice to do and
that is when you do click back and forth
between the different buttons you may
want to to cause the subform that's on
this tabular object or on this page to
wreak weary to go out and really grab
reassess the data that's associated with
that form
well the way you do that is you can
actually find the event that is
triggered when you change back and forth
between the tabs and then issue a recall
now a lot of people will run into this
particular problem and i really wanted
to address this in this video because I
see this happen a lot and a lot of
people get confused
typically what happens when people want
to do this when they want some sort of
event trigger when i click on one of
these buttons as the go to the event tab
for that page
go to the on click and they'll go ahead
and write their code and I'm just going
to go and put in here message box and
i'm going to alert
ok I'm just going to save that so now
theoretically when i click on the
purchase details page i should get that
on click event trigger and I should see
an alert so wanna let me go ahead and
view this now and if i click on one item
and then click back to purchase details
huh
we didn't get the message box well let
me show you something here if you go
back in the design view remember how I
said that these are the tabs
these are our tabs and then everything
inside of this orange is really the page
and they're kind of synonymous right
well what really is going on here is
that this selected item here is the page
and if you look real carefully the pet
selection type is the page so we're
looking at the property of a page and
we're looking at the on click event of
the page so it's really the highlighted
area that is what we would click on and
if you look on purchase details here
there's this little fine edge here
between the subform that's inside of it
and where this border is of the page and
if i click on that that's where I get my
alert so it's not when i click on the
button right so the on click of the page
is not when you click on the button the
on click event for the page is only when
you actually click inside of this square
or inside of this rectangle that is the
page now if I click on something inside
of the page so I've got this sub-forum
here and i'm clicking all over I'm still
not getting the alert well that's
because this is a subform inside here
and the subform is actually what's
getting called when i click so just to
be very just show you that this can be a
little tricky
you just need to make sure that you
understand these buttons themselves are
not they don't have an on-click event
ok
it's only when you actually click on the
page that rectangular area below it that
the on click event is triggered
so how would you then if I wanted some
sort of event to happen when i click on
one of these buttons
how would you program it to do that well
the event that we're looking for is
actually part of the larger tabcontrol
object you can see when I selected that
I go to the events tab there's this on
change event that actually can be
triggered and in fact you could also do
it on click but understand that really
we're talking about the larger object
here called tabcontrol that is what we
would actually be utilizing in order to
pick up the events of when somebody
navigates back and forth between these
buttons so i'm going to go to the
onchange event here and i'm going to go
ahead and take a look at the code that's
already built in here you'll see that
there is a select case statement being
issued against the tab CTL purchasing
object so it's doing a select case on
the value returned from the tab control
purchasing and there's a couple of
different case statements down below
here so let's take a look at what this
value is here i'm just going to copy
that and oops I forgot to put my little
break . there we go so now what happens
when I change back and forth between
different tabs you'll see the triggers
the tab CTL purchasing underscore change
now this is the name of the tab object
right this is the tab control object and
we are getting the value property from
that object after I've clicked on some
on one of the tabs to change which time
we're looking for
let's see what the value currently shows
for tabcontrol purchasing we see that
has a value of two and that's because or
that's the value that we returned when
we selected payment information tab
ok so to happen when I selected that tab
let's try what happens when we click on
purchase details tab
ok we're back to our break . because we
changed the tab what we changed which
tab we were cool clicking on so now
let's try looking at the value now
well looks like it's zero ok so if this
was 0 and this was to what do you
suppose inventory receiving would be and
Google would be well if you remember way
back when we talked about arrays back in
the beginning we talked about zero-based
raised well 0 then 1 2 & 3 would
probably be how it goes
let's go ahead and let that run let's
try going to inventory receiving and see
what the value is
there's one alright and if we're right
about google that should be valued
number three because it's 0123 so if i
click on google get the value
there's three ok so that is starting out
with a zero-based array basically right
it's starting with 0 and then going one
two three so the first one is actually 0
let me go ahead and run on break point
that i couldn't continue now there is
another place where you can find out
what that value is that would be coming
back
ok if you look at the details let's go
ahead and go back into the design view
of this purchase order details screen
and if i select the page pay purchase
details if you go to the format tab
you'll see that there's this property
called page index and you can see the
page index is 0
I can also see under inventory receiving
that the page index is one and payment
information has a page index of 2 and
google has a page index of 3
you cannot change this number is
automatically assigned by access it is a
read-only value ok but just pay
attention here this is the page index
property
for this particular page ok so the value
is being returned back that's being
returned back is that page number right
or the the page index number what you
can do then is what Microsoft has done
your lips I didn't really want to do
that they go back sorry
so what you could do is exactly what
Microsoft is done during this on change
event what they're doing is they're
taking and getting the value from what
you've selected in the tab control and
comparing it in a case statement to the
page index property of that particular
named page so it's looking at this
purchase details page asking what is
your page index and comparing it to the
value that's returned by what you've
changed the tab control too and it
doesn't same thing here for payment
information page earlier when I was
looking through this though I didn't
notice that Microsoft has a little bug
here notice that they see me payment
information page page index and then it
tells you tells the application to wreak
weary this other page that's probably
not right this is probably supposed to
be inventory receiving page is supposed
to wreak weary if the page index is
called so if that trips you up a little
bit i hope it doesn't this first case is
actually quite correct you can see the
purchase details page it's comparing the
value of the tab control against the
page index for this purchase details
page and if it matches then it just
reeked weary as the purchase details
page and then here you can see the cases
got mixed up so somebody goofed the code
up a little bit i think i think this
inventory receiving page is supposed to
actually go here but i'm just going to
leave that alone i'm just going to back
it out here
ok so let's go ahead and save that and
that is essentially how Microsoft or how
the code is able to trigger that there
has been a change and based upon the
value that's returned
it's going to tell you which one of
these
ABS has been selected now let's say okay
by default access opens up this purchase
details page as the first tab
automatically opens up so if i click on
view here and it just opens up you can
see by default purchase details is the
tab that opens up right with all of the
purchase details information but let's
say I wanted it actually open the Google
tab when it first loads up
ok so i'm just going to show you this if
i go to the design view of the purchase
order details and if i go to the onload
event of the main form
ok so i'm looking at the main form here
i'm going to go to the onload event for
for the main forum going to go to the
code builder and now what I'm going to
do is I'm going to go me and I'm going
to access that tabcontrol purchasing
object right and i'm going to go to the
value so this is the same property to
return back the value of what was
selected right when i clicked on one
item it changed the value property of
the tab control
well I can also assign it a value and if
you remember this google tab right this
google page was was three right so if i
click on the Google's page here and go
to the format you can see the page index
is 3 so i'm going to tell this tab
control
hey set your value equal to three it's
going to save that and just like that
now our google tab page is what first
shows up on our forum
ok one last thing I just want to show
you here before we call this video quits
if i go back into the design view and I
wanted to let's say I wanted to delete
this google page let me go ahead and
right-click again in this area to the
right of my tabs or you can again do it
on the border itself of the tab control
and I'm just going to go ahead and
delete the page and remember this is
going to delete
the page that is currently selected and
there you go
and I should probably go ahead and fix
my onload event since I no longer have a
page index 3 let's go ahead and delete
this so that doesn't cause an error and
save that and let's go ahead and view
one more time and our forum is back to
what it was before we started goofing
around with anything
ok now one last thing you know I should
should remember this really want to know
how to actually add a tab control to
your forms so let's go ahead and do that
and then we'll call this video good so
here's our form design just gonna create
a brand new form and it's pretty
straightforward all you have to do is go
up here to the design tab and select tab
control from our list of design tools
and just drag and drop it and this is
going to again be the main tab control
object that's going to contain the
different tabs inside of it
ok and of course you can go to the
format tab change the different
properties change hover colors and
foreground foreground colors tell
whether or not you want to use the theme
what you want your back styles to be
that sort of thing so you can actually
make it transparent that sort of stuff
so there you go if you guys have any
questions about tab controls please feel
free to drop me a line in the comments
section of this video and i'll be happy
to answer any questions you might have
also please don't forget to like
favorite and subscribe