Page Layout 101 in a Knack App

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