Updated: Sep 24, 2022
Here is how to construct pages for most apps. I go through some fundamentals on organizing pages and making the user experience optimal. I see a lot of clients that approach page construction completely wrong, and this really limits the ability of the app to function well. This one is worth checking out.
Get a free Knack trial account here: https://www.knack.com/r/you-tube
You can check out my Knack database services here: Knack!
Full Transcript
hey folks uh dave parish here at knack
builders uh if you like these videos
please like them on youtube and i'd ask
also that you subscribe to the site
but today's topic
i'm calling a page layout 101
how not to screw up your app
um
i do a lot of training
and or
helping people they've already started
an app and they're
they need to get over some hump
and i see way too often constructing the
pages wrong
uh and i'm gonna go through
a few fundamental principles here
that if you follow these you're gonna
have a nice clean app and this applies
to all kinds of apps
now there's some specialty use cases
where
this may not apply
but for inventory apps accounting
membership
tracking
crms these are really common use cases
this is how you should set it up follow
this
and you will thank me later thank you
[Music]
okay i'm back here's the lowdown
on setting up your pages in good manner
i'm gonna call up an app that i'm
working on right now it's a crm
now this is some sort of entertainment
production company that has they develop
entertainment like for tv or
film
um
they either develop their own projects
or they're asked to by the production
houses to do something and they want to
keep track
of all the studio house all the
different types of organizations all the
executives
that work for their
producers directors writers all this
stuff
and they
um
all the contact that they have with them
all the stuff that's pending you know
all the type is just a sales process
basically but for the entertainment user
but here's what i'm going to start off
with
um
when you're building the first thing
go to pages site a lot of times i don't
spend much time on here in my videos
but i'm telling you the first thing you
do
is when you're building your pages
build it around
the user role now in this case this use
case we're only going to have one user
wallet
but notice what i did here
it's admin and all the functionality for
admins underneath here now if we had
another role like if you had a
uh
customer portal so that'd be another
role this one doesn't and i
intentionally put these two
executive search project shirts in here
um
because i wanted it to look like this
the action for the admin i just wanted
to click here and here instead of here
but the first thing i'm going to tell
you and i see this a lot if you start
having lots of pages
to do like very specific things
uh not based around user role you're
going down the wrong path first thing
you'll see is a jumped up thing full of
these tabs
that just doesn't work and another
example i've seen a lot people will put
a page that's just for add a record
don't do that it's not the way to do it
i'm going to show you how you should do
it
think of when you log in in this case
we're logging into admin home
well almost always when you're doing
that or it could be the client's home
what you're going to have are some
button up buttons up top that take you
to certain places you're always going to
have some sort of manage user button you
might have one that's reports
in this case the tables we're dealing
with are the companies
the projects
the talent which is directors producers
writers maybe something else
um
and you're going to have the same thing
customers or locations or this or that
and then
on these type of pages you're going to
have one main table the front and center
table which is most likely the thing
that is most important to you
in this case it's executives because
they want to track all the action with
executives
and then above that you're going to have
ad executive
and i'm going to tell you you should do
this
make almost all the time you want this
to be a modal pop
um
it's much better user experience if
there's a bunch of complex things going
on when you're adding something or it's
really really big
maybe you'll want to advance to a new
page it would look like this
but often you don't need it's not a good
user experience advancing to a new page
when you're adding something
um
and when you do do a button i'm not
going to go into all details make this a
modal pop-up that you can look up how to
make it it's it's easy and make a submit
rule that when you submit it
it returns to the parent page it doesn't
just give you a message and this thing's
just hanging out here
and you have to click off to the side or
click here and sometimes i don't know if
that changes
when you create that record this page
doesn't refresh refresh itself and it's
not there you gotta refresh the page if
you tell it to go back to the parent
page and take care of everything
there's some other things you can do but
i'm not going to get into those
that's the main thing on how you
construct like the home page these items
add whatever whatever the most important
thing to use have front and center of
the tape
and then you're always going to drive
down you're going to put a details thing
on this
now it takes you to
the detail of that executive it could be
a detail of an invoice uh could be a
detailed remember it doesn't matter
whatever your use case is it
here you're going to have
boilerplate information about this
this person that you can see
and only if there's a ton of information
you collect about this type of record
you may not put it all here because it's
going to junk up the page
but in this case
i put all the main stuff contact last
time we reached this type of stuff
which is important and efficient to look
at when you're making decisions but
actually if you go to edit
edit to
almost always is best with this modal
pop-up so we have his name blah blah all
this stuff
but then we have all these things stuff
that he's currently looking for
a one-hour series whatever it is okay
and
and we have also he's open to things and
he's not looking for things
in this case i don't want all this
information in his boilerplate stuff
because it's going to completely junk up
the page
rather i just made a button here where
we can go see it a lot more efficient to
see it in a detailed thing
and uh
and go from there
and then when you get to these records
this is an executive we're going to have
child records so that if it was an
invoice we would have child records to
that which would be the invoice line
items different items you're buying on
that thing this is the same thing here
so any every time we have a contact with
this person we could be pitching
something follow-up call whatever it is
we're gonna track it here typical crm
stuff again modal pop-up for the ad is
usually best
um and then there might be other other
child records to this thing in this case
engagements are front and center just
like that previous page
uh it's what most important to us but we
have other
different things like for example
project history these would be projects
that we've done that this person has
some connection to
and so you can click on this i haven't
built this out yet this may be a modal
pop-up depending on how much information
but you get the idea here
um
i don't know that i have a lot more
a lot of these cases where i've helped
people and they come to me with what
they built i just have to scrap that
whole thing
because there's too many tabs like again
there might be a tab add i've seen it
where it's like add executive you click
on a
tab here it takes you to a full page
and it's add executive
and then
okay when you add an executive you
should have a table right underneath so
you wouldn't call if even if you had a
tab up here you just call it executive
then you'd have your button first thing
you'd have is a button add a new one
and you're gonna have table of whatever
you're adding underneath it that you can
engage in a number of ways
okay the last thing here folks is i just
talked about our main table well we have
these other tables too they're pretty
much the same thing you're just looking
at stuff
in a different direction and these
aren't front and center so we can go to
company
this would be the same for invoice and
stuff you'd have your customers
vendors whatever you're doing you go
here said add same deal
we have a list of companies
we can go to one of these companies
and uh
and go see activity with them
right here
boilerplate stuff about the company edit
the company this is now looking at
engagements which is most important to
us right here we'll see all the
companies engagements regardless of the
executive but to show all of them we can
there's other related records we can
click here and see a list of all the
executives
we can
do relational database stuff oh i want
to there's a whole list of them i want
to see what's going on with john smith
you can then click it it's taking you
over to john smith's detail page
um
that sort of stuff so all those other
buttons
up here will be
structured very similarly that's what i
got for you today thanks