Fields

Text Field

Settings:

Result:

Output:

{$title}

Textarea Field

Settings:

Result:

Output:

{$description}

RichText Field

Component support:

• TinyMCE Rich Text Editor

Settings:

Result:

Output:

{$content}

Ace Field

The field appears if the ACE component is installed.

Settings:

Result:

Output:

{$code}

Select Field

Settings:

Result:

Output:

{$color}

MultiSelect Field

The same as the Select Field, but allows you to select multiple options.

Output:

{foreach $colors as $color}
    {$color}
{/foreach}

Resource List

A list of resources is displayed. You can change the sort order and add conditions.

Settings:

Result:

In the chunk, the resource ID is displayed:

{$resource}

Ready blocks

We get a list of ready blocks, which can be filtered and the sorting direction can be changed.

Settings:

Result:

In the chunk, the ID of the predefined block is displayed:

{$block}

List Yes/No

Settings:

Result:

The chunk outputs 1 or 0:

{$check}

Combo Field (PRO)

Allows you to create a drop-down list of any objects, with the ability to select the fields to display and values

Settings:

Additional settings:

Settings	Description	Default
Model class	Standard MODX models, but you can add your own, for example, add msProduct model to combo_field_models system setting.	modUser, modUserGroup, modResource, modTemplate, modChunk, modSnippet, modCategory, modContext
Display	Available fields of the selected model to display in the drop-down list
Value	Available fields of the selected model for the value in the drop-down list
Sort field	Field for sorting.	id
Sorting direction	ASC or DESC	ASC
Where conditions	Additional conditions for sampling. JSON format

For example, we need a list of resources created by a specific user. This list should include the resource titles, with their aliases as the values.

To do this, select the model modResource, set the displayed field to pagetitle, and use alias as the value. In the conditions, specify:

`[{"createdby": 2}]` // 2 is the ID of the desired user.

Result:

Output:

{$combofield} // alias

TableCombo Field (PRO)

The same as a combo field, but uses PageBlocks tables as models.

Settings:

For example, you created a table with prices that includes a title (title) and a price (price), and you need to create a dropdown list from this table. To do this, create a TableComboField, select the desired table, set the display field to title, and the value field to price.

Number Field

Settings:

Additional settings:

• negative numbers
• minimum number
• maximum number

Result:

Output:

{$number}

Checkbox

Settings:

Result:

The chunk outputs 1 or 0:

{$check}

Checkbox group

Settings:

Additional settings:

• Number of columns

Result:

Output:

{foreach $colors as $color}
    {$color}
{/foreach}

Radio Options

Settings:

Additional settings:

• Number of columns

Result:

Output:

{$color}

File Field

Additional settings:

• Source (file source)
• File path (path to files from the root of the selected source)
  • [[+resource_id]] - is replaced by the resource id
  • [[+id]] - block id

When adding the parameters [[+resource_id]] or [[+id]], the path will be replaced with the corresponding value.

Result:

Output:

{$file}

Image Field

The Image field extends the File Field and accepts the same settings. Unlike the File field, a thumbnail of the main image will be displayed:

Output:

{$image|print}

[image] => Array
(
    [url] => assets/images/1/29/8851807-4002676.jpg
    [width] => 800
    [height] => 533
    [size] => 664412
    [title] => 8851807-4002676.jpg
)

Example:

<img src="{$image.url}" width="{$image.width}" height="{$image.height}" alt="{$image.title}">

Gallery Field (PRO)

Images

It has the same settings as the File Field, with the additional setting for file groups.

Result:

Each image is edited separately:

Output:

{$images|print}

[images] => Array
(
    [0] => Array
        (
            [id] => 29
            [path] => assets/images/1/34/
            [filename] => z2ovxw9d7dk.jpg
            [extension] => jpg
            [provider] => 
            [name] => z2ovxw9d7dk
            [title] => 
            [description] => 
            [width] => 600
            [height] => 405
            [size] => 27414
            [url] => assets/images/1/34/z2ovxw9d7dk.jpg
            [preview] => 
            [type] => image
            [groups] => ["1","2"]
        )

    [1] => Array
        (
            [id] => 30
            [path] => assets/images/1/34/
            [filename] => 8417304-bones-brigade-brigade-by-cuypi-t60cd82c6.jpg
            [extension] => jpg
            [provider] => 
            [name] => 8417304-bones-brigade-brigade-by-cuypi-t60cd82c6
            [title] => 
            [description] => 
            [width] => 600
            [height] => 684
            [size] => 87373
            [url] => assets/images/1/34/8417304-bones-brigade-brigade-by-cuypi-t60cd82c6.jpg
            [preview] => 
            [type] => image
            [groups] => 0
        )
...

Example:

<div class="gallery">
  {foreach $images as $image}
    <img src="{$image.url}" width="{$image.width}" height="{$image.height}" alt="{$image.title?:$image.name}">
  {/foreach}
</div>

Other files

The gallery can hold not only images but also any other files:

For each file, its type will be set (see the type parameter).

[images] => Array
(
    [0] => Array
        (
            [id] => 49
            [path] => assets/images/1/36/
            [filename] => img-0915.mp4
            [extension] => mp4
            [provider] => 
            [name] => img-0915
            [title] => 
            [description] => 
            [width] => 0
            [height] => 0
            [size] => 2322184
            [url] => assets/images/1/36/img-0915.mp4
            [preview] => assets/images/1/33/z2ovxw9d7dk.jpg
            [type] => video
            [groups] => 0
        )

    [1] => Array
        (
            [id] => 50
            [path] => assets/images/1/36/
            [filename] => nqooxxb4li.jpg
            [extension] => jpg
            [provider] => 
            [name] => nqooxxb4li
            [title] => 
            [description] => 
            [width] => 600
            [height] => 727
            [size] => 100893
            [url] => assets/images/1/36/nqooxxb4li.jpg
            [preview] => 
            [type] => image
            [groups] => 0
        )

    [2] => Array
        (
            [id] => 52
            [path] => assets/images/1/36/
            [filename] => phpbook.pdf
            [extension] => pdf
            [provider] => 
            [name] => phpbook
            [title] => 
            [description] => 
            [width] => 0
            [height] => 0
            [size] => 950015
            [url] => assets/images/1/36/phpbook.pdf
            [preview] => 
            [type] => pdf
            [groups] => 0
        )

)

Example:

{foreach $images as $item}

  {if $item.type === 'image'}
    <img src="{$item.url}" width="{$item.width}" height="{$item.height}" alt="{$item.title?:$item.name}">
  {/if}

  {if $item.type === 'video'}
    <video width="{$item.width}" height="{$item.height}" poster="{$item.preview}" controls>
      <source src="{$item.url}" type="video/{$item.extension}">
    </video>
  {/if}

  {if $item.type === 'pdf'}
      <a href="{$item.url}" download="{$item.name}" target="_blank"></a>
  {/if}

{/foreach}

Video

If you've uploaded a video, you can change its preview.

Array
  (
      [id] => 53
      [path] => assets/images/1/36/
      [filename] => img-0915.mp4
      [extension] => mp4
      [provider] => 
      [name] => Video file
      [title] => 
      [description] => 
      [width] => 0
      [height] => 0
      [size] => 2322184
      [url] => assets/images/1/36/img-0915.mp4
      [preview] => assets/images/1/33/z2ovxw9d7dk.jpg
      [type] => video
      [groups] => 0
  )

Video Field

The Video field extends the File Field and accepts the same settings.

Provider Support

• YouTube
• Vimeo

Preview:

Output:

{$video|print}

Array
(
    [provider] => youtube
    [title] => DEAD STRINGS VOL 3 | Epic Dramatic Violin Epic Music Mix | Best Dramatic Strings Orchestral
    [description] => 
    [thumbnail] => Array
        (
            [default] => Array
                (
                    [url] => https://i.ytimg.com/vi/u0_itJO_8Jw/default.jpg
                    [width] => 120
                    [height] => 90
                )

            [medium] => Array
                (
                    [url] => https://i.ytimg.com/vi/u0_itJO_8Jw/mqdefault.jpg
                    [width] => 320
                    [height] => 180
                )

            [high] => Array
                (
                    [url] => https://i.ytimg.com/vi/u0_itJO_8Jw/hqdefault.jpg
                    [width] => 480
                    [height] => 360
                )

            [standard] => Array
                (
                    [url] => https://i.ytimg.com/vi/u0_itJO_8Jw/sddefault.jpg
                    [width] => 640
                    [height] => 480
                )

            [maxres] => Array
                (
                    [url] => https://i.ytimg.com/vi/u0_itJO_8Jw/maxresdefault.jpg
                    [width] => 1280
                    [height] => 720
                )

        )

    [preview] => https://i.ytimg.com/vi/u0_itJO_8Jw/hqdefault.jpg
    [url] => https://www.youtube.com/watch?v=u0_itJO_8Jw
    [embed_video] => https://www.youtube.com/embed/u0_itJO_8Jw
    [video_id] => u0_itJO_8Jw
    [width] => 600
    [height] => 400
)

Examples

Youtube

<iframe src="{$video.embed_video}" frameborder="0" width="{$video.width}" height="{$video.height}"></iframe>

A regular video

<video width="{$video.width}" height="{$video.height}" poster="{$video.preview}" controls>
  <source src="{$video.url}" type="video/{$video.extension}">
</video>

Button Field

Settings:

Result:

Output:

{$button|print}

Array
(
    [caption] => Text
    [type] => button
    [file] => 
    [href] => 
    [name] => name
    [attr] => data-popup-open="form"
    [resource] => 2
    [value] => value
    [classes] => btn-primary
    [published] => 1
    [disabled] => 0
    [target_blank] => 1
)

Example:

{if $button.published}
  <a 
      href="{$button.href?:($button.resource|resource:'uri')}"
      class="btn {$button.classes}"
      {$button.attr} 
      {if $button.target_blank} target="_blank"{/if}
  >
    {$button.text}
  </a>
{/if}

Date Field

Settings:

• Disabled Dates: makes specified dates inactive. The date format depends on the system setting manager_date_format.
• Disabled Days: makes specified days of the week inactive. 0 is Sunday, 6 is Saturday.
• Hide Time Option: shows or hides the time field.
• Min. time: minimum time
• Max. time: maximum time
• Time increment: The number of minutes between each time value in the list.

Result:

Output:

{$date}
// 2024-02-17 01:15:00

Time Field

Settings:

Result:

Output:

{$time}
// 01:30

KeyValue Field

soon

Table Field

In the Tables field, select the required table from the list of all tables.

Result:

Output:

{$items|print}
Array
(
    [0] => Array
        (
            [title] => Slide 1
        )

    [1] => Array
        (
            [title] => Slide 2
        )

    [2] => Array
        (
            [title] => Slide 3
        )

)

Example:

<ul>
  {foreach $items as $item}
    <li>{$item.title}</li>
  {/foreach}
</ul>

Сolor palette

The same as the Select Field, but allows you to select multiple options.

Result:

Output:

{foreach $colors as $color}
    <span style="background-color: #{$color}"></span>
{/foreach}

Only reading

It accepts the same settings as the Text Field, but this field cannot be edited.

Hidden Field

It accepts the same settings as the Text Field, but is not displayed in the form.

Xtype field

It can accept any xtype field. A list of standard fields can be found here.

Example, modx-description

Output: