📺 Develpreneur YouTube Episode

Video + transcript

Spring Boot - Thymeleaf logic and select-options

2024-01-04 •Youtube

Detailed Notes

We are continuing a series of tutorials focused on Spring Boot. The crux of the project is to convert/migrate an old JSP/Tomcat application to a modern Spring Boot application and Java 7/8 to a current version. We are working on a complex form for entering data and this episode focuses on a little of the Thymeleaf logic and using values from the database to populate a select dropdown.

You can learn more through our online classes at https://school.develpreneur.com and register for free. Registration will add you to our email list, and you will periodically receive coupons for courses and notifications of the latest releases.

Transcript Text
[Music]
well hello and welcome back we are
continuing just chugging along putting
together an application and spring boot
uh using time leaf and bootstrap and uh
this time around we're going to we're
just going to continue in this uh form
that we're working on we have uh got our
projects listing going pretty
straightforward not a whole lot there we
got that all working out we got some
filtering and now we're clicking on a
project and going to look at some stuff
like for example none of these things
have value so let's go into our our
project and we're going to see why
that's not happening so if we look here
we can see that we've got this form
input
path and we don't have any value because
what it was doing before is it was
trying to do a path equals name which is
essentially a value so if we instead do
let's try this if we do th value
equals and then it's probably be dollar
name we're just going to give that a
shot and let's see what that looks like
so if we save that we restart
it and we spin around here to here oh
it's going to make us log in
again and we got nothing so it's not
coming up here
so if we look here so what we want is oh
oh it's because this is doing so this is
all using the form from uh an old style
which I don't think I even have forms
here yep I don't even have form set up
in here anymore um this is and it's not
form as in a form uh that you would
normally see but it was actually if you
see here it is a form input so it's
actually trying to take a tag and doing
something so
let's leave the class uh form control
and we're going to do input so actually
what we're going to have it's it is a uh
an input in time Leaf however like most
things and it looks about the same the
difference is going to be here it is
going to be a th
field and then that looks good so we're
going to do that so it's going to be a
th field
instead and we can do that here let's do
a couple of
these
uh our class form control has already
been defined so that's not we're looking
back path is actually th
field and so now let's take oh I need to
do
this let's get that guy fixed and then
let's take a look at this and see if
these now start giving us some
values and we do that again sort of
going with this Tim Leaf stuff you can I
mean you can Google it or you can also
sort of guess your way into things
because it
it's fairly sort of standard in how it
does
stuff and so now it doesn't like that
because probably have a typo or I
skipped
something oh here we go uh neither
binding forward being name
so let's go
look at anything let's try
this if we do that
not super intuitive but let's just go do
that and see what it says
then log
in Pick It N doesn't like that either so
what we're running into here is that we
have
oh we might have been fine okay so let's
try this first uh let's go back to we do
our
form
uh
oh I wonder if we set it up as let's go
look at our hello
controller if we come
into uh let's see that is the filter
load project
[Music]
form which is probably the one we've got
let's
see there we go edit project does
project form
form so then he brings in here so he's
got his model is going to be
there test BL blah where did it go so
there
is oh it's going to be project it's
probably what we
need so if we go back up to
here so actually what we want to do is
we come up
here and let me fix this first uh
because that was where I was throwing
getting thrown off so here we had before
it was model attribute was uh project
which is our value that we're sending
across this is actually going to be
guess what
a and it's going to be an
object and then that should work and
then if we take that now to show that
we're going to deal with that object now
we do our little asterisk and let's just
do these two first and I bet we're going
to see this because now that's been
passed across it's going to say hey grab
it off of the uh form
project oops which excuse me that is not
a form form that is just a
form and we want it to be oh because
it's a Tim Lea one though we need it to
be th
action
and that should do it let's
see oh no won't because that has to be
dollar project sorry
again so now if we run
this and we log in and we select a
project oh we still got a problem so
what did we miss this time oh I don't
want to Pop That that class file up I
want to
do I wonder if I got project right uh
let's see oh could not parse as
expression save project oh because I
don't need that as a th
action I just need that as an actual
action otherwise I could do uh we
haven't really let's see the other thing
I could do is set it as let's do it like
this first we'll come back to that at
another
point
uh where did I go name there we go so uh
restart
it we'll do with the th action at
another
point so now if we come in don't need
that do need
that and there so now we see our values
coming in so let's code to get the rest
of these turned in and turned on and
it's again it's pretty much everywhere
I've got a form input before then all I
need to do is that path is going to be
th
field and I need to do my
asterisk and my bra squirly
brackets and that should do it so if I
look everywhere that I
find see like this is going to be a form
select he's instead going to be just a
select
that path is going to be th
field that's going to be a
star items we're sending the sight list
in so let's see how oh that actually may
already look um no it doesn't oh so
right now we don't have that drop down
so let's see so this is actually going
to be I wonder if that's going to be th
items is probably what we want so let's
try that
uh form input no he's just an input with
a
path that is th
field we're going to asterisk
K input select see we get a lot of stuff
in here so that's
class let's just do it like
that that's the path close it
and then here we had a
select path and close
it now here I believe we have a th
if I have to go back and check this
because I may have forgotten
that
and now these are not going to be an
option so those are so this is all being
based off of this value so we should be
good did we have an F up here I think we
did oh yeah we did so we had a thf right
there so if we go back and look here
um
so thf
equals uh let's see let's
do let's just try
this and that's going to be a div and
that's going to be a th if
equals this will be a neat little one to
look
up if it doesn't work this
way and we don't need the end of a form
select because it's a regular
select uh let's go ahead and go
here uh let's see we don't really need
our format uh we'll come back to that
come back to that because we're going to
clean those up at some
point uh let's do
this and that is
the uh what do we call th field
yep and then we got that oh except for
it's not a dollar it's a star
asterisk and items let's try th
items and let's see what that does let's
just go with oh let's do this one
here
uh path
equals
that and that gets us let's see if we
got
description prior descriptions okay
and we can go ahead and do
that oh we have both there that's a
problem
uh there we go we don't want
both all right let's try that for now
that's a lot of changes it's probably
not going to
work and then we will run through
it oh actually I want we've got a broken
tag in there somewhere too probably yep
like right there we've got that thing
thing that's right after prior
descriptions which is right
here
uh that's
it I think we want just
that there's descriptions there's a
row
there we go this THS should be a
div yeah we got some stuff to fix in
there okay so let's do a look at this so
now we have site which has no values we
have status which has no values stick
fixed bid is coming through bid amount
agent
cost um earnings and agent C oh those
are the ones that we did not put the
values
in so two things let's go look at this
so first we
have oh so we've got select and then we
have this th items is equal to site list
so that most likely is
incorrect so what we want here is so
that
select is
okay but what we want to do
instead is we need to create within that
uh options
and with the
option let's close uh let's see we going
do it like this and what it does is we
can do a th
each and this is going to
be this one gets a little bit different
because the way we do this one is we're
going to have
AP uh what did we call call this uh site
list and
then that is the
each so each P or we'll just say item
we'll just do H we'll keep it now let's
do item so for each
item we're going to come in and the th
value I get it right yep is equal to
uh dollar
I and then the th
text is equal to we'll do dollar
I but what we really want is within this
I think the label
is think that's going be i. name
let's go look at that so if we go look
at our site list here let me go back
here so site list is site list and that
site list comes from da project Doo get
site
list and we're going to pull
him
Dao project
Dao
let's go with that uh site
list the right one
uh get status L okay select star from
look up job sites so we need to go look
up job
sites and see what that looks like and
that's going to be uh we go that from
our R
mapper which is
here uh that's going to be our site
rer and so it's going to be so we've got
a site ID I assume that's what we want
is it'll probably a site ID and name so
let's go back over here to our project
form uh that's going to be probably do
site
ID and let's see what that gives us now
that also means that we're going to have
to come to what was the other one we had
another one in here see that was uh
status site oh status is the other one
so let's go look at
that where did we have status that is
down here so let's just take basically
the same
structure and here he's going to be uh
th field
status the items is actually status
list so we're going to take
that that's going to be status list
and if we look at status list real quick
it's probably going to be oh we don't
have it here so if we go look to project
Dao does it have the status list it does
so it's just going to be uh a letter and
a value so let's see if we just
do
uh here that's status so let's do let's
just do I
and I and see how that works so if we
run
that and we load this
up then we come here oh we got a problem
because it probably doesn't like
that uh let's see property cannot be
found okay so it doesn't have a site
ID
well let's just try an i and see what it
does uh cannot be found oh on compound
object
of
site so oh so if we go look at our
model for
site oh it is
I
ID so it is
just ID and I'm going to asse this
lowercase and let's see what it
does and now when we come
across got that and now we do have there
we have sites and see we have these so
we can can see what our status is
probably want to have uh because this is
a combo name we would probably want to
clean this up but we will tackle that at
another point because we've gone a tad
long on this one so we're just going to
continue on next episode we're going to
continue uh chugging our way through
these things get a couple of them
cleaned up notice that we're now getting
like a lot of our values are coming in
and it's going to be a matter of doing
some things like make sure that this
thing gets loaded and we're going to get
down here and clean up some of these
others so we're just going to continue
chugging along this time we looked at
like building a a couple of things we
looked at building our options for our
select and we've also got a couple
values that we're showing uh for example
this one that's uh based on some ifs so
that being said well let's get back to
it have a great day a great week we will
talk to you next
[Music]
time
Transcript Segments
1.35

[Music]

27.32

well hello and welcome back we are

29.16

continuing just chugging along putting

31.4

together an application and spring boot

34.32

uh using time leaf and bootstrap and uh

37.84

this time around we're going to we're

39.32

just going to continue in this uh form

41.52

that we're working on we have uh got our

44.399

projects listing going pretty

46.28

straightforward not a whole lot there we

48

got that all working out we got some

49.84

filtering and now we're clicking on a

53.079

project and going to look at some stuff

55.52

like for example none of these things

57.12

have value so let's go into our our

61.879

project and we're going to see why

64.28

that's not happening so if we look here

67.799

we can see that we've got this form

70.64

input

73.119

path and we don't have any value because

76.2

what it was doing before is it was

77.92

trying to do a path equals name which is

80.6

essentially a value so if we instead do

84.32

let's try this if we do th value

87.52

equals and then it's probably be dollar

93.479

name we're just going to give that a

95.28

shot and let's see what that looks like

98.72

so if we save that we restart

102.399

it and we spin around here to here oh

106.799

it's going to make us log in

111.68

again and we got nothing so it's not

114.2

coming up here

117.039

so if we look here so what we want is oh

119.92

oh it's because this is doing so this is

122.32

all using the form from uh an old style

126.399

which I don't think I even have forms

127.479

here yep I don't even have form set up

128.72

in here anymore um this is and it's not

131.8

form as in a form uh that you would

134.4

normally see but it was actually if you

136.599

see here it is a form input so it's

139.56

actually trying to take a tag and doing

141.64

something so

144.84

let's leave the class uh form control

149.2

and we're going to do input so actually

151.64

what we're going to have it's it is a uh

153.72

an input in time Leaf however like most

156.84

things and it looks about the same the

159.2

difference is going to be here it is

161.08

going to be a th

165.8

field and then that looks good so we're

169.599

going to do that so it's going to be a

170.72

th field

173.2

instead and we can do that here let's do

176.239

a couple of

178.76

these

180.28

uh our class form control has already

181.959

been defined so that's not we're looking

183.2

back path is actually th

187.879

field and so now let's take oh I need to

191.12

do

192.84

this let's get that guy fixed and then

196.28

let's take a look at this and see if

198.12

these now start giving us some

201.04

values and we do that again sort of

204.28

going with this Tim Leaf stuff you can I

206.2

mean you can Google it or you can also

207.68

sort of guess your way into things

209.2

because it

210.439

it's fairly sort of standard in how it

212.64

does

213.519

stuff and so now it doesn't like that

216.879

because probably have a typo or I

219.04

skipped

222.239

something oh here we go uh neither

224.36

binding forward being name

227.159

so let's go

229.799

look at anything let's try

237.56

this if we do that

241.72

not super intuitive but let's just go do

245.879

that and see what it says

248.159

then log

250.079

in Pick It N doesn't like that either so

254.959

what we're running into here is that we

257.84

have

260

oh we might have been fine okay so let's

262.8

try this first uh let's go back to we do

265.36

our

266.4

form

268.6

uh

271.199

oh I wonder if we set it up as let's go

273.639

look at our hello

275.32

controller if we come

280.84

into uh let's see that is the filter

284.36

load project

285.54

[Music]

288.639

form which is probably the one we've got

292.12

let's

296.4

see there we go edit project does

299

project form

300.12

form so then he brings in here so he's

303.639

got his model is going to be

305.72

there test BL blah where did it go so

309

there

312.199

is oh it's going to be project it's

315.16

probably what we

318.24

need so if we go back up to

321.12

here so actually what we want to do is

323.24

we come up

324.96

here and let me fix this first uh

328.4

because that was where I was throwing

329.56

getting thrown off so here we had before

333.68

it was model attribute was uh project

337.199

which is our value that we're sending

338.84

across this is actually going to be

340.84

guess what

344.44

a and it's going to be an

350.16

object and then that should work and

353.44

then if we take that now to show that

355.24

we're going to deal with that object now

358

we do our little asterisk and let's just

360.36

do these two first and I bet we're going

363.12

to see this because now that's been

365.12

passed across it's going to say hey grab

367.479

it off of the uh form

371.639

project oops which excuse me that is not

375.44

a form form that is just a

381.599

form and we want it to be oh because

385.36

it's a Tim Lea one though we need it to

386.919

be th

388.4

action

392

and that should do it let's

397.12

see oh no won't because that has to be

399.88

dollar project sorry

406.199

again so now if we run

410.88

this and we log in and we select a

414.44

project oh we still got a problem so

416.56

what did we miss this time oh I don't

418.28

want to Pop That that class file up I

420.599

want to

422.56

do I wonder if I got project right uh

425.28

let's see oh could not parse as

426.879

expression save project oh because I

429.919

don't need that as a th

431.72

action I just need that as an actual

436.199

action otherwise I could do uh we

440.08

haven't really let's see the other thing

442.4

I could do is set it as let's do it like

445.4

this first we'll come back to that at

446.68

another

448.319

point

449.879

uh where did I go name there we go so uh

453.919

restart

458.199

it we'll do with the th action at

460.84

another

462.039

point so now if we come in don't need

464.879

that do need

469

that and there so now we see our values

472.8

coming in so let's code to get the rest

475

of these turned in and turned on and

476.72

it's again it's pretty much everywhere

479

I've got a form input before then all I

482.159

need to do is that path is going to be

484.56

th

489.12

field and I need to do my

492.199

asterisk and my bra squirly

495.52

brackets and that should do it so if I

497.639

look everywhere that I

503.159

find see like this is going to be a form

506.68

select he's instead going to be just a

508.84

select

512.12

that path is going to be th

516.599

field that's going to be a

522.44

star items we're sending the sight list

524.839

in so let's see how oh that actually may

526.36

already look um no it doesn't oh so

529.519

right now we don't have that drop down

530.8

so let's see so this is actually going

534.08

to be I wonder if that's going to be th

535.519

items is probably what we want so let's

537.519

try that

539.88

uh form input no he's just an input with

543.76

a

544.6

path that is th

548.68

field we're going to asterisk

555.48

K input select see we get a lot of stuff

560.079

in here so that's

562.16

class let's just do it like

565.16

that that's the path close it

570.519

and then here we had a

574.6

select path and close

578.8

it now here I believe we have a th

592.16

if I have to go back and check this

594.36

because I may have forgotten

598.12

that

599.839

and now these are not going to be an

608.92

option so those are so this is all being

611.56

based off of this value so we should be

615.12

good did we have an F up here I think we

620.44

did oh yeah we did so we had a thf right

623.32

there so if we go back and look here

628.04

um

630.079

so thf

632.88

equals uh let's see let's

644.48

do let's just try

652.079

this and that's going to be a div and

654.92

that's going to be a th if

658.04

equals this will be a neat little one to

660.279

look

661.399

up if it doesn't work this

669.76

way and we don't need the end of a form

671.959

select because it's a regular

674.56

select uh let's go ahead and go

677.92

here uh let's see we don't really need

681.399

our format uh we'll come back to that

684.839

come back to that because we're going to

685.92

clean those up at some

687.6

point uh let's do

692.68

this and that is

695.519

the uh what do we call th field

700.72

yep and then we got that oh except for

704.92

it's not a dollar it's a star

708.36

asterisk and items let's try th

712

items and let's see what that does let's

714.56

just go with oh let's do this one

717.959

here

720.079

uh path

723.32

equals

726.92

that and that gets us let's see if we

729.399

got

730.24

description prior descriptions okay

739.959

and we can go ahead and do

743.199

that oh we have both there that's a

747.88

problem

751.92

uh there we go we don't want

763.72

both all right let's try that for now

766.079

that's a lot of changes it's probably

767.6

not going to

769.48

work and then we will run through

772.12

it oh actually I want we've got a broken

774.88

tag in there somewhere too probably yep

777.24

like right there we've got that thing

778.88

thing that's right after prior

781.199

descriptions which is right

787.12

here

790.279

uh that's

792.88

it I think we want just

800.48

that there's descriptions there's a

807.76

row

809.44

there we go this THS should be a

813.68

div yeah we got some stuff to fix in

816

there okay so let's do a look at this so

817.36

now we have site which has no values we

819.72

have status which has no values stick

821.519

fixed bid is coming through bid amount

823.199

agent

824.399

cost um earnings and agent C oh those

827.519

are the ones that we did not put the

829

values

830.48

in so two things let's go look at this

832.92

so first we

835.839

have oh so we've got select and then we

839.12

have this th items is equal to site list

841.72

so that most likely is

848.399

incorrect so what we want here is so

852.519

that

854.759

select is

858.24

okay but what we want to do

863.68

instead is we need to create within that

867.839

uh options

873.639

and with the

875.12

option let's close uh let's see we going

878.92

do it like this and what it does is we

881.959

can do a th

887.48

each and this is going to

890.839

be this one gets a little bit different

893.079

because the way we do this one is we're

894.56

going to have

897.079

AP uh what did we call call this uh site

906.959

list and

909.759

then that is the

912.48

each so each P or we'll just say item

916.24

we'll just do H we'll keep it now let's

918.079

do item so for each

920.519

item we're going to come in and the th

925.44

value I get it right yep is equal to

931.319

uh dollar

934.48

I and then the th

939.199

text is equal to we'll do dollar

947.12

I but what we really want is within this

951.319

I think the label

955.279

is think that's going be i. name

963.199

let's go look at that so if we go look

964.8

at our site list here let me go back

969.24

here so site list is site list and that

973.44

site list comes from da project Doo get

976.959

site

981.199

list and we're going to pull

983.759

him

985.48

Dao project

987.519

Dao

989.079

let's go with that uh site

994.639

list the right one

997.88

uh get status L okay select star from

1002.319

look up job sites so we need to go look

1004.68

up job

1006.88

sites and see what that looks like and

1010.319

that's going to be uh we go that from

1012.279

our R

1013.44

mapper which is

1016.92

here uh that's going to be our site

1020.68

rer and so it's going to be so we've got

1022.959

a site ID I assume that's what we want

1025.919

is it'll probably a site ID and name so

1029.24

let's go back over here to our project

1032.6

form uh that's going to be probably do

1035.6

site

1038.079

ID and let's see what that gives us now

1040.439

that also means that we're going to have

1041.439

to come to what was the other one we had

1043.52

another one in here see that was uh

1045.88

status site oh status is the other one

1048.48

so let's go look at

1052.08

that where did we have status that is

1055.76

down here so let's just take basically

1058.12

the same

1061.36

structure and here he's going to be uh

1065.679

th field

1067.08

status the items is actually status

1070.64

list so we're going to take

1075.76

that that's going to be status list

1081.72

and if we look at status list real quick

1084.72

it's probably going to be oh we don't

1087.08

have it here so if we go look to project

1089.32

Dao does it have the status list it does

1091.84

so it's just going to be uh a letter and

1094.84

a value so let's see if we just

1099.44

do

1102.2

uh here that's status so let's do let's

1106.44

just do I

1109.24

and I and see how that works so if we

1113.28

run

1117.44

that and we load this

1121.6

up then we come here oh we got a problem

1125.08

because it probably doesn't like

1131.44

that uh let's see property cannot be

1133.919

found okay so it doesn't have a site

1137.32

ID

1142.96

well let's just try an i and see what it

1147.32

does uh cannot be found oh on compound

1151.159

object

1152.559

of

1154.24

site so oh so if we go look at our

1158.12

model for

1163.919

site oh it is

1167.24

I

1169.6

ID so it is

1173.36

just ID and I'm going to asse this

1178.64

lowercase and let's see what it

1184

does and now when we come

1191.32

across got that and now we do have there

1194.4

we have sites and see we have these so

1197.919

we can can see what our status is

1199.679

probably want to have uh because this is

1201.72

a combo name we would probably want to

1203.52

clean this up but we will tackle that at

1206.36

another point because we've gone a tad

1208.039

long on this one so we're just going to

1209.84

continue on next episode we're going to

1211.28

continue uh chugging our way through

1213.32

these things get a couple of them

1214.48

cleaned up notice that we're now getting

1216.6

like a lot of our values are coming in

1219.52

and it's going to be a matter of doing

1221.039

some things like make sure that this

1222.4

thing gets loaded and we're going to get

1224.4

down here and clean up some of these

1225.84

others so we're just going to continue

1227.44

chugging along this time we looked at

1229.24

like building a a couple of things we

1231.12

looked at building our options for our

1233

select and we've also got a couple

1235.24

values that we're showing uh for example

1237.799

this one that's uh based on some ifs so

1241.72

that being said well let's get back to

1243.559

it have a great day a great week we will

1246.08

talk to you next

1250.29

[Music]

1257.12

time