Practice English Speaking&Listening with: Block Designer Pro (Concrete5 5.7) - Repeatable Fields

This is an introduction to the repeatable items for Block Designer Pro. In this example

we'll be building the Formula 1 2015 race calendar. On gpupdate.net you can see the

complete calendar. I've sort of rebuild that one in HTML. And we'll be doing the same in

this example. So we'll go to Block Designer and we'll enter a handle for the block. That

will be formula_one_calendar. It will start with the title, that's actually a heading

2. So that's title, we're gonna have it required and it's the h2 heading. It's repeatable.

After that, you can see an introduction. It's gonna be a "What you see is what you get".

Intro. Not required. I've already build this here. You can see it's the same actually we'll

be building with the Block Designer. But after that, we'll be building this table. And you

can see this table has a body with multiple rows. Those rows will be repeated. They have

always the same information like a date, a flag of the country and a venue and an optional

image link. So we'll start with the repeatable field. Uh enter it as circuits. And the HTML

open will be the part until each table row. That's this. And the end is after the last

table row. That's this. And you can see there's a child wrapper HTML open as well. So we'll

have a TR for each row. And the table row ending. You can also setup a minimum number

of items that you want to be included. We can do that at 2 for example. A maximum can

be entered as well, but we won't be needing that. An add entry text we'll just say Add

Circuit. So we got that covered. We'll start with the date. So that would be a datetime.

Call it just date. Make it required. You can see it's opening with a TD. But... we'll be

just doing a static HTML just in front of it. And the date format, you can always

click this link to see what you need. And we actually need the 1 and the January so that

would be %e and %b. So we'll just copy/paste those in. As you could already see in the

table here, we don't need any time so, we'll be excluding the time, the seconds and whatever

is not needed. And this is the part we actually assign it to the repeatable group. So we'll

just enter circuits. If you have multiple groups that can be entered, you'll see a complete

list of all the repeatable items you have. But we just have circuits and the hash 3 is

actually the number row you can see right here. So we have a date and that ends with

a TD. So we'll just use static TD as well. And that's repeatable. Uhmmm.. here you can

see the country full written and it's used as a class in the flag, in the span here.

Uhm we'll be just doing this as static, but we'll be changing that afterwards in PHP.

So we'll skip that part for now, but we'll get back to it. So we open the TD for the

country, so that will be a country field. It's required and no fallback value, don't

output the language code and repeat it for the circuits. And end the TD again. We can

go to the venue name, that will be a simple text box. But I forgot the TD. So that will

be venue, venue. It's required. Want it for circuits repeatable and we end with the TD again.

And this is the last part, it's a URL to an external location. You can do it internal

as well, but we'll be doing it as external URL. Don't make it required, because some

races may not have taken place yet. Link opens in a new window, we can add some classes,

view-images, and we don't need a title field so we'll just hide it. This one ends with

TD as well. So do just that. Aaand we already closed this one so that's not needed. If we

scroll to the top we can direct install it and just enter. And you will see block type

installed successfully. If we go to the frontend and click the plus sign we should be able

to drag and drop this right in. Enter the title, we can copy paste the introduction.

And you can see here is the circuits part. So they are divided in tabs. You have all

the normal fields right here and the group fields in a new tab where the tab name is

the one you named in your block designer configuration. You can see here the Add circuits, that's

the add text we entered. So we'll be entering circuits now. That will be Australia first

at 15th of March. So that's gonna be Sunday, the Australian GP, that's Albert Park and

we have some images link. The second one is also in March. That will be the 29th in Malaysia.

Sepang circuit. The third will be China. That will be on April 12th, China. And we don't

enter an images link here, so you can see the difference. So you can see the introduction,

with the title above it and the table. This is exactly how we entered it. You see 15th

of March, 29th of March, but we can also re-order those if you say uhmm.. Malaysia is to be

first, you re-order them. And it's the first now in the list, the table. You can see at

the end there's only 2 images links, because we did not enter one for the last one. That

should be that one. But we'll just change that order back. Uhm we've got it almost complete

like it should be. As you can see there are 3 Belgian flags, but that shouldn't be. I've

decided to do this outside Block Designer, because I don't want to enter 2 times the

same country. So we'll be going to the block type, to the view. And we'll just look for

the flag that should be actually this one: country. So we'll just enter the PHP open

tag, echo and echo the value. But this is actually in uppercase, so we have to do it

to lowercase. So that would be string to lower. And if we'll just refresh the page, you'll

see the actual country flags, right here. And you can do this for the other examples

as well so you can enter Bahrain. If you just edit the block, go to circuits, Add Circuit

enter the date, that's the 19th of April. Bahrain. Venue name. Hit save and it's entered

automatically with the correct flag. As you can see there is no image link here, but we

can copy this link location and just enter it in the images. And you can see it's right

here. And now we've successfully duplicated here what's on GPUpdate.net. And that within

just a couple of minutes and you can do this for anything else you would like to. And I

think that covers most of it. You can see here on each field type there's a R in the

circle. Those fields are repeatable as of now, but not all of them are. But the most

important ones are and I think you need those the most. If you still need one of the others,

I can always develop those. But for now, the basic version of the repeatable fields will

include those. If you do have any questions or comments or anything: just let me know,

send me a message. You know where to find me and I hope you have learned quite a bit

from this. Thanks for watching!