Custom Fields in the Joomla 6 core

<section data-background="images/25-joomla-custom-fields/custom-fields.jpg" data-state="frontpage">
<br><br><br>
<div class="atitle2 db8orange" style="font-size:200%;padding:10px;background-color: rgba(0, 0, 0, 0.0);">Custom Fields</div>
<br><br>
<div style="font-size:80%;margin:-100px 0 0 -200px">
<span class="apage1">by Peter Martin / <a href="https://db8.nl" target="_blank">db8.nl</a></span><br>
<span class="apage1">slides: <a href="https://petermartin.nl" target="_blank">https://petermartin.nl</a></span>
</div>
<style>
.atitle2{text-shadow: 2px 2px 2px #000;;background:#111111;}
</style>
<div style="margin: 0 -550px 0 0;">
<a href="https://db8.nl" title="Joomla Specialist db8 Nijmegen" target="_blank">
    <img height="50" style="border:0;background:transparent;margin-right:20px;
    box-shadow: 0 0 0px rgba(0, 0, 0, 0.15);" data-src="images/db8-logo-white.svg">
</a>
</div>
<br>

---

.card {
    border: 1px solid #ccc;
    border-radius: 12px;
    padding: 1rem;
    background: #f9f9f9;
    color:#0a2515;
}
a.cardlink{
color:#0a2515;
}
.card p, li {
    margin: 0;
    line-height: 1.4;
    font-size: 1.3rem;
}

@media (max-width: 600px) {
    .card-wrapper {
        grid-template-columns: 1fr;
    }
}
</style>
<div class="card-wrapper">
    
    <div class="card fragment">
        <div>
            <p><img height="50" style="border:0;background:transparent;margin-right:20px;box-shadow: 0 0 0px rgba(0, 0, 0, 0.15);" data-src="images/25-joomla-custom-fields/db8.svg"><br>
                db8 Website Support<br>
                <a class="cardlink" href="https://db8.nl" target="_blank">https://db8.nl</a>
            </p>
        </div>
    </div>
    
    <div class="card fragment">
        <div>
            <p><img height="50" style="border:0;background:transparent;margin-right:20px;box-shadow: 0 0 0px rgba(0, 0, 0, 0.15);" data-src="images/25-joomla-custom-fields/8db.svg"><br>
                8db Linux Support<br>
                <a class="cardlink" href="https://8db.nl" target="_blank">https://8db.nl</a>
                </p>
        </div>
    </div>
    
    <div class="card fragment">
        <div>
            <p><strong>Co-organizing</strong></p>
            <ul>
                <li><a class="cardlink" href="https://linuxnijmegen.nl" target="_blank">Linux User Group Nijmegen</a></li>
                <li><a class="cardlink" href="https://jug-arnhem-nijmegen.nl/" target="_blank">Joomla User Group<br>Arnhem-Nijmegen</a></li>
                <li><a class="cardlink" href="https://opencoffeenijmegen.nl/" target="_blank">Open Coffee Nijmegen</a></li>
            </ul>
        </div>
    </div>
    
    <div class="card fragment">
        <div>
            <p><strong>Joomla Volunteer</strong></p>
            <ul>
                <li>International Joomla community</li>
                <li>Treasurer Joomla Nederland</li>
            </ul>
        </div>
    </div>
</div>

---

<div class="sheet db8orange" style="font-size:200%;">Custom Fields<br>in Joomla 6</div>

----

🧩 Custom Fields in Joomla 6

- Custom Fields = structured data to
  - articles, 
  - categories, 
  - contacts, 
  - users, 
  - other content types.
- 18 core fields (2 new in Joomla 6)

----

🧩 Custom Field:

- <span class="db8orange">Type</span>: Custom Field type
- <span class="db8orange">Field Group</span>: Organize Fields under Tab 
- <span class="db8orange">Category</span>: Where to display
- <span class="db8orange">Access</span>: Display for which User Group

----

### Examples 1/3

- <span class="db8orange">Users</span> (com_users):
    - Field Group: Author
        - Photo (Media)
        - Bio (Editor)
        - LinkedIn (Text)

----

### Examples 2/3

- <span class="db8orange">Article</span>:
    - Field Groep: Article
        - Location (Text)
        - Extra images (Subform + Media)
        - Links to other articles (SQL)

----

### Examples 3/3

- <span class="db8orange">Category</span> (com_categories):
    - Field Group: Category Fields
        - Header (Text)
        - Subtitle (Text)

---

<div class="sheet db8orange" style="font-size:200%;">The 18 Joomla Core<br>Custom Fields</div>

---

----

### ✏️ Text (text)

- <span class="db8orange">Purpose</span>: Basic single-line text input.
- <span class="db8orange">Example</span>: “Subtitle”, “SKU”, or “Short Code”.
- <span class="db8orange">Key parameters</span>:
    - Default Value
    - Max Length
    - Placeholder Text

---

----

### 🧾 Text Area (textarea)

- <span class="db8orange">Purpose</span>: Multi-line text box for longer content.
- <span class="db8orange">Example</span>: “Product Description” or “Summary”.
- <span class="db8orange">Key parameters</span>:
    - Rows / Columns: Control input size.
    - Filter: Allow raw, safe HTML, or plain text.
    - Default Value

---

<div class="sheet">Editor</div>

----

### 📝 Editor (editor)

- <span class="db8orange">Purpose</span>: Provides a WYSIWYG text editor.
- <span class="db8orange">Example</span>: “Additional Description” + formatting.
- <span class="db8orange">Key parameters</span>:
    - Editor Type: Choose default editor (TinyMCE).
    - Default Value: Start with pre-filled text.

---

<div class="sheet">Checkboxes</div>

----

### ☑️ Checkboxes (checkboxes)

- <span class="db8orange">Purpose</span>: Allows multiple options from a list.
- <span class="db8orange">Example</span>: “Available Features” for a product.
- <span class="db8orange">Key parameters</span>:
    - Options: Define choices (value and label).
    - Default Value: Preselect certain boxes.

---

<div class="sheet">Radio</div>

----

### 🎚️ Radio (radio)

- <span class="db8orange">Purpose</span>: Choose 1 option from list of radio buttons.
- <span class="db8orange">Example</span>: “Display Sidebar?” — Yes / No.
- <span class="db8orange">Key parameters</span>:
    - Options: Define value-label pairs.
    - Default Value

---

----

### 📋 List (list)

- <span class="db8orange">Purpose</span>: Displays a dropdown for single selection.
- <span class="db8orange">Example</span>: “Difficulty Level”: Easy, Medium, Hard.
- <span class="db8orange">Key parameters</span>:
    - Options: Define value/label pairs.
    - Default Value
    - Multiple: Allow more than one selection (optional).

---

<div class="sheet">List of Images</div>

----

### 🖼️ List of Images (imagelist)

- <span class="db8orange">Purpose</span>: Shows list of images from a specific folder.
- <span class="db8orange">Example</span>: “Select Icon” or “Choose Banner Image”.
- <span class="db8orange">Key parameters</span>:
    - Directory: Image folder path.
    - Default Image

---

<div class="sheet">Media</div>

----

### 🎬 Media (media)

- <span class="db8orange">Purpose</span>: Select media.
- <span class="db8orange">Example</span>: “Product Image” or “Promo Video”.
- <span class="db8orange">Key parameters</span>:
    - Directory: File storage path.
    - Preview: Show thumbnail in the admin.
    - File Types: Limit to certain extensions.

---

----

### 👤 User (user)

- <span class="db8orange">Purpose</span>: Links to a Joomla user account.
- <span class="db8orange">Example</span>: “Assigned Author” or “Account Manager”.
- <span class="db8orange">Key parameters</span>:
    - Default Value: Preselect current user.

---

<div class="sheet">User Groups</div>

----

### 👥 User Groups (usergrouplist)

- <span class="db8orange">Purpose</span>: Displays Joomla user groups for selection.
- <span class="db8orange">Example</span>: “Access Level” or “Allowed Roles”.
- <span class="db8orange">Key parameters</span>:
    - Multiple: Select more than one group.
    - Default Group

---

<div class="sheet">Integer</div>

----

### 🔢 Integer (integer)

- <span class="db8orange">Purpose</span>: Stores whole numbers only.
- <span class="db8orange">Example</span>: “Stock Quantity” or “Number of Seats”.
- <span class="db8orange">Key parameters</span>:
    - Minimum / Maximum Value
    - Default Value
    - Step: Increment between allowed values.

---

<div class="sheet">Number</div>

----

### 🔟 Number (number) <span class="db8orange"> >= Joomla 6</span>

- <span class="db8orange">Purpose</span>: Numeric field with support for decimals.
- <span class="db8orange">Example</span>: “Price”, “Weight”, or “Percentage”.
- <span class="db8orange">Key parameters</span>:
    - Min / Max / Step ???
    - Default Value
    - Currency Symbol

---

<div class="sheet">Calendar</div>

----

### 📅 Calendar (calendar)

- <span class="db8orange">Purpose</span>: Lets users pick a date and/or time.
- <span class="db8orange">Example</span>: Add “Event Date” field for event article.
- <span class="db8orange">Key parameters</span>:
  - Show Time: Include hours/minutes. 
  - Format: Control how date appears (d-m-Y). 
  - Default Value: "today" or fixed date, (YYYY-MM-DD HH:MM:SS) or NOW

---

<div class="sheet">Colour</div>

----

### 🎨 Colour (color)

- <span class="db8orange">Purpose</span>: Adds a color picker for selecting hex colors.
- <span class="db8orange">Example</span>: “Brand Color” for articles or categories.
- <span class="db8orange">Key parameters</span>:
  - Default Value: Set a pre-selected color.

---

----

### 🌐 URL (url)

- <span class="db8orange">Purpose</span>: Store link with optional target.
- <span class="db8orange">Example</span>: “Official Website” or “YouTube Channel”.
- <span class="db8orange">Key parameters</span>:
    - Default Value
    - Validate URL: Scheme enforces proper format.

---

----

### 🗒️ Note (note) <span class="db8orange"> >= Joomla 6</span>

- <span class="db8orange">Purpose</span>: Non-editable note in admin form.
- <span class="db8orange">Example</span>: Explain how to fill out related fields.
- <span class="db8orange">Key parameters</span>:
  - Label & Description: The note text.
  - Show Label: Optionally hide the title.
  - Class: Add CSS styling for emphasis.

---

<div class="sheet">Subform</div>

----

### 🧩 Subform (subform)

- <span class="db8orange">Purpose</span>: Embed a mini form within a field.
- <span class="db8orange">Example</span>: “Team Members”: name, role, and photo.
- <span class="db8orange">Key parameters</span>:
  - Repeatable: Allow multiple sets.
  - Layout: Table or stacked display.
  - Maximum Rows.
  - Fields.

---

----

### 🧮 SQL (sql)

- <span class="db8orange">Purpose</span>: Dynamic options from db query.
- <span class="db8orange">Example</span>: “Select Category” from custom db table.
- <span class="db8orange">Key parameters</span>:
    - Query: SQL statement returning value and text.
    - Multiple: Allow selecting more than one record.
    - <span class="db8orange">Form Layout: Enhanced Select</span>.
- Connect other articles!

```sql
SELECT id as value, title as text FROM `#__content` 
WHERE catid IN(8) AND state = 1 ORDER BY `title` ASC
```

---

<div class="sheet db8orange" style="font-size:200%;">The Custom Fields<br>in Joomla's database</div>

----

🧩 Custom Fields in database

- jos_fields
- jos_fields_categories
- jos_fields_groups
- jos_fields_values

----

## fields

Assign Custom Field <span class="db8orange">Type</span> to <span class="db8orange">Component.View</span>

| id | context        | group_id | title   | name     | label    | type  |
|----|----------------|----------|---------|----------|----------|-------|
| 1  | com_users.user | 1         | Photo  | photo    | Photo    | media |
| 2  | com_users.user| 1        | Bio        | bio        | Bio        | editor     |
| 3  | com_users.user         | 1        | LinkedIn   | linkedin   | LinkedIn   | text       |
| 4  | com_content.categories | 2        | Header     | header     | Header     | text       |
| 5  | com_content.categories | 2        | Subtitle   | subtitle   | Subtitle   | text       |
| 6  | com_content.article    | 3        | Calendar   | calendar   | Calendar   | calendar   |
| 7  | com_content.article    | 3        | Checkboxes | checkboxes | Checkboxes | checkboxes |
| 8  | com_content.article    | 3        | Colour     | colour     | Colour     | color      |

</span>

----

## fields_categories

Assign <span class="db8orange">Custom Field</span> to <span class="db8orange">Categories</span>

| field_id | category_id |
|----------|-------------|
| 6        | 8           |
| 7        | 8           |
| 8        | 8           |

No reference = All categories

----

### fields_groups

Assign <span class="db8orange">Custom Field</span> to <span class="db8orange">Group</span> (Tab in editor)

<table class="fields-groups">
  <colgroup>
    <col style="width:6%">
    <col style="width:28%">
    <col style="width:18%">
    <col style="width:42%">
    <col style="width:6%">
  </colgroup>
  <thead>
    <tr><th>id</th><th>context</th><th>title</th><th>description</th><th>state</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>com_users.user</td><td>Author</td><td></td><td>1</td></tr>
    <tr><td>2</td><td>com_content.categories</td><td>Category Fields</td>
        <td>Some extra fields to display at Category Blog page…</td><td>1</td></tr>
    <tr><td>3</td><td>com_content.article</td><td>Custom Field</td>
        <td>Joomla’s core Custom Field</td><td>1</td></tr>
  </tbody>
</table>

----

### fields_values

Store <span class="db8orange">Value</span> to <span class="db8orange">Custom Field</span>/<span class="db8orange">Item</span> combo

<table>
  <thead>
    <tr>
      <th>field_id</th>
      <th>item_id</th>
      <th>value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>963</td>
      <td>{"imagefile":"images\/authors\/peter-martin...</td>
    </tr>
    <tr>
      <td>2</td>
      <td>963</td>
      <td><p>Peter Martin is a Joomla expert and Linux...</p></td>
    </tr>
    <tr>
      <td>3</td>
      <td>963</td>
      <td>https://www.linkedin.com/in/pe7er/</td>
    </tr>
    <tr>
      <td>6</td>
      <td>1</td>
      <td>2025-11-15 13:06:46</td>
    </tr>
    <tr>
      <td>7</td>
      <td>2</td>
      <td>joomla</td>
    </tr>
    <tr>
      <td>7</td>
      <td>2</td>
      <td>wordpress</td>
    </tr>
    <tr>
      <td>7</td>
      <td>2</td>
      <td>drupal</td>
    </tr>
    <tr>
      <td>7</td>
      <td>2</td>
      <td>frontpage98</td>
    </tr>
    <tr>
      <td>7</td>
      <td>2</td>
      <td>html</td>
    </tr>
  </tbody>
</table>

---

----

### 🧠 Pro Tips

- <span class="db8orange">Combine fields</span> with overrides for powerful layouts
- <span class="db8orange">Access</span>: config who can <span class="db8orange">view</span> Custom Field
- <span class="db8orange">Permission</span>: config who can <span class="db8orange">edit etc</span> Custom Field
- <a href="https://yootheme.com/" target="_blank">YOOtheme Pro</a>:
  - Supports Custom Fields
  - Location Custom Field: Lat/Lng - Location on Map
- <a href="https://www.tassos.gr/joomla-extensions/advanced-custom-fields" target="_blank">Tassos</a>: Advanced Custom Fields

---

<div class="sheet db8orange">Questions?</div>

----

### Photo Credits

<ul style="font-size:50%">
  <li>All images have been AI generated using ChatGPT using my own custom prompts</li>
</ul>

</section>