04 - Create Basic fields like room, price state for Estate

In this part we will create all basic field for Estate

• State : Select list
• Price : Texte field with input mask
• Room | Bedroom | Garages: Select list
• Build in : Date
• Floors : Texte
• Bedroom : Select list
• Square feet : Texte multi value
• Parking : Radio
  
  

1 State

In joomla 3 can't override state, but we can create it easier

Go to fields part and use new button

1. Set the name
2. Choose the type of field
3. Assign to type content (you can use same field in many type)
4. Save at first 

 

Now we can configure it

• In editing tab you can set value and display in form
• In viewing tab you can set display of value in template
• In filtering you can set filtering method

now we add value

1. Go to tab editing
2. Set is require or not, and Not use multivalue for this
3. Use Edit to add value

In modal

1. Set Value
2. Set Label (You can use Jstring for transaltion
3. Add other value if needed
4. Close this modal to save

Result in form

 

Now we check the display

Go to Viewing tab

Here we can configure the output rendering of th field

You can set if label is display and if you display field regarding views and devices

Nothing to do for this field

Result in front

2 Price field

The price fiel is realy simple, is a text field but we will discover some tricks

1. Create a text field
2. Adding Price Label
3. Select text type
4. Assign to Estate type

Now we set how value is formated in editing mode to avoid any submission problem

1. We allow multi value field
2. Choose rules for multivalue
3. Choose an input mask to be sure user can only add currency

the result in form

 

And for viewing we will add some option for output only by adding devise at end

1. Go viewing tab
2. Enter to Value list
3. Add prefix value
4. Set seperator

Result in front

 3 Room | Bedroom | Garages

 For this field type we will create a select field

like this

1. Set label
2. Set select type
3. Assign to Estate

And set value

1. Editing
2. Required
3. Set list of number

Easier

But for this we didn't want a label we want a custom design, no problem we will use viewing option

1. Viewing
2. Basic
3. Disable label

To display a custom label you can use "Openning text field" and add any html inside, that render an html output before and after values inside any field

1. Set <span class="icon-menu" style="font-size:24px;"> </span> &nbsp;&nbsp;Bathroom :

 

Here i use icon-menu, that the icon-moon font icon include in Joomla!

i redo it for all field

Output exemple