Fields

Pala provides a variety of field types for managing content within blocks. Each field type serves a specific purpose and is globally available in your templates and JavaScript.

Field Types Overview

Basic Content Fields

• Text: Simple text input

• Markdown: Rich text editing

• Number: Numerical values

• URL: URL input

• Link: URL and label pairs

Media Fields

• Image: Image uploads with alt text

• Icon: Icon selection

Structural Fields

• Group: Nested field collections

• Repeater: Arrays of grouped fields

Dynamic Fields

• Page: Page reference

• Page List: Page list reference

• Page Content: Page-level content

• Site Content: Site-level content

UI Control

• Slider: Numeric input with a draggable handle

• Toggle: Binary on/off switch

• Select: Dropdown with configurable options and icons

• **Info: **Provides guidance and context to content editors

---

Basic Content Fields

Text

Type: string

<!-- In your HTML -->
<h1>{heading}</h1>

// Available globally in your JS
heading: "Hello World"

Markdown

Type:

{
  html: string,
  markdown: string
}

<!-- In your HTML -->
<div>{@html content.html}</div>

// Available globally in your JS
content: {
  html: "<h1>Title</h1><p>Paragraph</p>",
  markdown: "# Title\n\nParagraph"
}

Number

Type: number

<!-- In your HTML -->
<span>${price}</span>
<div>Quantity: {quantity}</div>

// Available globally in your JS
price: 42
quantity: 5

URL Field

Type: string

<!-- In your HTML -->
<a href={link}>Visit Site</a>

// Available globally in your JS
link: "https://example.com"

Link

Type:

{
  url: string,
  label: string
}

<!-- In your HTML -->
<a href={cta.url} class="w--button">{cta.label}</a>

// Available globally in your JS
cta: {
  url: "https://example.com",
  label: "Click me"
}

Media Fields

Image

Type:

{
  url: string,
  alt: string
}

<!-- In your HTML -->
<img src={hero.url} alt={hero.alt}>

// Available globally in your JS
hero: {
  url: "https://example.com/image.jpg",
  alt: "Hero image"
}

Icon

Type: string

<!-- In your HTML -->
<span class="icon">{@html icon}</span>

// Available globally in your JS
icon: "camera"

Structural Fields

Group

Type:

{
  [subfield_key: string]: Entry_Value
}

<!-- In your HTML -->
<div class="author">
  <img src={author.photo.url} alt={author.photo.alt}>
  <h3>{author.name}</h3>
  <div>{@html author.bio.html}</div>
</div>

// Available globally in your JS
author: {
  name: "Jane Doe",
  photo: { url: "...", alt: "..." },
  bio: { html: "...", markdown: "..." }
}

Repeater

Type: Array<Group_Value>

<!-- In your HTML -->
<div class="testimonials">
  {#each testimonials as testimonial}
    <blockquote>
      {@html testimonial.quote.html}
      <footer>
        <img src={testimonial.avatar.url} alt={testimonial.avatar.alt}>
        <cite>{testimonial.name}</cite>
      </footer>
    </blockquote>
  {/each}
</div>

// Available globally in your JS
testimonials: [
  {
    quote: { html: "...", markdown: "..." },
    avatar: { url: "...", alt: "..." },
    name: "John Smith"
  }
]

Dynamic Fields

Page Content

Type:any

<!-- In your HTML -->
<h1>{post_title}</h1>

// Available globally in your JS
post_title: 'How to grow potatoes in your apartment'

Site Content

Type:any

<!-- In your HTML -->
<a href="/">
  <img src={logo.url} alt={logo.alt} />
</a>

// Available globally in your JS
logo: { url: '...', alt: '...' }

Page

Type:

{
  [page_field_key: string]: any,
  _meta: {
    created_at: string,
    name: string,
    url: string,
    slug
  }
}

<!-- In your HTML -->
<a href={related_post._meta.url}>Read Related Post</a>
<h3>{related_post.title}</h3>
<p>{related_post.excerpt}</p>

// Available globally in your JS
related_post: {
  url: "/blog/post",
  title: "Blog Post",
  excerpt: "Preview text..."
}

Page List

Type:

Array<{
  [page_field_key: string]: any,
  _meta: {
    created_at: string,
    name: string,
    url: string,
    slug
  }
}>

<!-- In your HTML -->
{#each blog_posts as post}
  <a href={post._meta.url}>Read Post</a>
  <h3>{post.title}</h3>
  <p>{post.excerpt}</p>
{/each}

// Available globally in your JS
blog_posts: [
  {
    url: "/blog/post",
    title: "Blog Post",
    excerpt: "Preview text..."
  },
  ...
]

---

On-Page Editing

To enable on-page editing in the visual editor, a field must be the only content within its containing element. Fields are always editable in the fields panel, but need exclusive elements for direct visual editing.

<!-- ❌ Not on-page editable - field rendered directly -->
{title}

<!-- ✅ On-page editable - field wrapped in element -->
<h1>{title}</h1>
<div>{title}</div>
<span>{title}</span>

<!-- ❌ Not on-page editable - markdown rendered directly -->
{@html content.html}

<!-- ✅ On-page editable - markdown wrapped in element -->
<div>{@html content.html}</div>

Manual Control with data-key

If on-page editing isn't working (which can happen with complex markdown content), you can explicitly mark elements as editable using the data-key attribute:

<!-- Explicitly mark an element as editable -->
<div data-key="heading">{heading}</div>

<!-- Complex markdown content that needs explicit binding -->
<div data-key="content">{@html content.html}</div>

You can also prevent on-page editing for specific elements by setting an empty data-key attribute:

<!-- Disable on-page editing for this element -->
<div data-key>{@html complexContent.html}</div>

---

Conditional Fields

Pala's Conditional Fields feature lets you control when fields are displayed based on the values of other fields. This creates dynamic forms that adapt to user input, resulting in cleaner and more focused content editing experiences.

How It Works

Conditional fields in Pala follow these key principles:

1. Cascading Order: Fields can only be controlled by values from fields that come before them in the form structure. This ensures predictable behavior and prevents circular dependencies.

2. Group Support: Conditions work both at the root level and within groups, giving you flexibility in organizing your form structure.

3. Pattern Matching: You can use exact value matching or regex patterns for fine-grained control over field visibility.

Setting Up Conditions

To make a field conditional:

1. Create your field as normal

2. Click "Add Condition" in the field settings

3. Select the reference field (must be a field that comes before the current one)

4. Choose the comparison operator ("Equals" or “Doesn’t Equal”)

5. Enter the value to match against

Best Practices

1. Field Order: Plan your field order carefully since conditions can only reference fields that come before them.

2. Group Organization: Use groups to keep related conditional fields together and maintain a clear structure.

3. Default Values: Consider setting appropriate default values for fields that control conditions to ensure a good initial state.

4. Documentation: When using complex conditions (especially regex patterns), consider document the intended behavior in a “Info” field.

Compatible Field Types

You can base conditions on these field types:

• Select fields

• Toggle fields

• Text fields

• Number fields

Limitations

1. Conditions can only reference fields that come before the field in the form structure.

2. Circular dependencies are not supported (Field A depending on Field B while Field B depends on Field A).

3. Multiple conditions on a single field are not currently supported (e.g., show field when Field A = "x" AND Field B = "y").

---

Common Patterns

Conditional Rendering

{#if featured_image}
  <img src={featured_image.url} alt={featured_image.alt}>
{/if}

{#if price > 100}
  <span class="premium">Premium Product</span>
{/if}

Computed Values

<!-- In your HTML -->
<div>
  <p>Total: ${total}</p>
  <p>Active Members: {activeMembers.length}</p>
</div>

// In your JS
const total = items.reduce((sum, item) => sum + item.price, 0)
const activeMembers = team.filter(member => member.status === 'active')

Nested Fields in Repeaters

{#each team as member}
  <div class="team-member">
    <img src={member.photo.url} alt={member.photo.alt}>
    <h3>{member.name}</h3>
    <div class="social">
      {#each member.social_links as link}
        <a href={link.url}>{link.platform}</a>
      {/each}
    </div>
  </div>
{/each}

Remember:

• All fields are available globally in your template

• Use {@html field.html} for markdown fields

• Groups and repeaters can be nested

• Fields can be used directly in JavaScript expressions

• Use #if for conditional rendering

• Use #each for repeater fields

• Wrap fields in elements for on-page editing

• Use data-key for manual control of field editability