Fields

Json

Basics

The Json field is designed for convenient work with the json data type. In most cases, it is used with arrays of objects via TableBuilder, but it also supports a mode for working with a single object.

In the database, the field must be of type text or json. It is also necessary to specify Eloquent Cast — array, json, or collection.

Field Set

Assume that the structure of your json looks like this:

[{title: 'title', value: 'value', active: 'active'}]

This is a set of objects with fields title, value, and active. To specify such a set of fields, the fields method is used:

fields(FieldsContract|Closure|iterable $fields): static

Example usage:

use MoonShine\UI\Fields\Json;
use MoonShine\UI\Fields\Position;
use MoonShine\UI\Fields\Switcher;
use MoonShine\UI\Fields\Text;
 
//...
 
protected function formFields(): iterable
{
    return [
        Json::make('Product Options', 'options')
            ->fields([
                Position::make(),
                Text::make('Title'),
                Text::make('Value'),
                Switcher::make('Active')
            ])
    ];
}
 
//...

json_fields json_fields_dark

Fields can also be passed through a closure, allowing access to the field's context and its data:

use MoonShine\UI\Fields\Json;
use MoonShine\UI\Fields\Position;
use MoonShine\UI\Fields\Switcher;
use MoonShine\UI\Fields\Text;
 
//...
 
protected function indexFields(): iterable
{
    return [
        Json::make('Product Options', 'options')
            ->fields(static fn(Json $ctx) => $ctx->getData()->getOriginal()->is_active ? [
                Position::make(),
                Text::make('Title'),
                Text::make('Value'),
                Switcher::make('Active')
            ] : [
            Text::make('Title')
            ])
    ];
}
 
//...

Key/Value Mode

When your data has a key/value structure, like in the following example {key: value}, the keyValue method is used.

keyValue(
    string $key = 'Key',
    string $value = 'Value',
    ?FieldContract $keyField = null,
    ?FieldContract $valueField = null,
)
  • $key — the label for the "key" field,
  • $value — the label for the "value" field,
  • $keyField — the option to replace the "key" field with your own (default is Text),
  • $valueField — the option to replace the "value" field with your own (default is Text).

Example usage:

use MoonShine\UI\Fields\Json;
 
//...
 
protected function formFields(): iterable
{
    return [
        Json::make('Data')->keyValue()
    ];
}
 
//...

json_key_value json_key_value_dark

Example with changing field types:

use MoonShine\UI\Fields\Json;
use MoonShine\UI\Fields\Select;
 
//...
 
protected function formFields(): iterable
{
    return [
        Json::make('Label', 'data')->keyValue(
            keyField: Select::make('Key')->options(['vk' => 'VK', 'email' => 'E-mail']),
            valueField: Select::make('Value')->options(['1' => '1', '2' => '2']),
        ),
    ];
}
 
//...

Only Value Mode

If you need to store only values, like in the example ['value_1', 'value_2'], the onlyValue() method is used:

onlyValue(
    string $value = 'Value',
    ?FieldContract $valueField = null,
)
  • $value - the label for the "value" field,
  • $valueField - the option to replace the "value" field with your own (default is Text).

Example usage:

use MoonShine\UI\Fields\Json;
 
//...
 
protected function formFields(): iterable
{
    return [
        Json::make('Data')->onlyValue()
    ];
}
 
//...

json_only_value json_only_value_dark

Object Mode

In most cases, the Json field works with an array of objects via TableBuilder. However, it is also possible to work with an object, for example, {title: 'Title', active: false}. For this, the object() method is used:

object()

Example usage:

use MoonShine\UI\Fields\Json;
 
//...
 
protected function formFields(): iterable
{
    return [
        Json::make('Product Options', 'options')
            ->fields([
                Text::make('Title'),
                Switcher::make('Active')
            ])->object()
    ];
}
 
//...

Default Value

As in other fields, there is an option to specify a default value using the default() method. In this case, an array must be provided.

default(mixed $default)

Example usage:

use MoonShine\UI\Fields\Json;
use MoonShine\UI\Fields\Switcher;
use MoonShine\UI\Fields\Text;
 
//...
 
protected function formFields(): iterable
{
    return [
        Json::make('Data')
            ->keyValue('Key', 'Value')
            ->default([
                [
                    'key' => 'Default key',
                    'value' => 'Default value'
                ]
            ]),
 
        Json::make('Product Options', 'options')
            ->fields([
                Text::make('Title'),
                Text::make('Value'),
                Switcher::make('Active')
            ])
            ->default([
                [
                    'title' => 'Default title',
                    'value' => 'Default value',
                    'active' => true
                ]
            ]),
 
        Json::make('Values')
            ->onlyValue()
            ->default([
                ['value' => 'Default value']
            ])
    ];
}
 
//...

Creatable/Removable

By default, the Json field contains only one element. The creatable() method allows adding new elements, while removable() enables their removal.

Example usage:

creatable(
    Closure|bool|null $condition = null,
    ?int $limit = null,
    ?ActionButtonContract $button = null
)
  • $condition - condition under which the method should be applied,
  • $limit - limit on the number of possible elements,
  • $button - option to replace the add button with your own.
removable(
    Closure|bool|null $condition = null,
    array $attributes = []
)
  • $condition - condition under which the method should be applied,
  • $attributes - HTML attributes for the remove button.

Example usage:

use MoonShine\UI\Fields\Json;
 
//...
 
protected function formFields(): iterable
{
    return [
        Json::make('Data')
            ->keyValue()
            ->creatable(limit: 6)
            ->removable()
    ];
}
 
//...

json_removable json_removable_dark

Customizing the Add Button

use MoonShine\UI\Fields\Json;
 
//...
 
protected function formFields(): iterable
{
    return [
        Json::make('Data')
            ->keyValue()
            ->creatable(
                button: ActionButton::make('New', '#')->primary()
            )
    ];
}
 
//...

HTML Attributes for the Remove Button

use MoonShine\UI\Fields\Json;
 
//...
 
protected function formFields(): iterable
{
    return [
        Json::make('Data', 'data.content')->fields([
            Text::make('Title'),
            Image::make('Image'),
            Text::make('Value'),
        ])
            ->removable(attributes: ['@click.prevent' => 'customAsyncRemove'])
            ->creatable()
    ];
}
 
//...

Vertical Mode

The vertical() method allows changing the display of the table from horizontal mode to vertical.

vertical()

Example usage:

use MoonShine\UI\Fields\Json;
 
//...
 
protected function formFields(): iterable
{
    return [
        Json::make('Data')
            ->keyValue()
            ->vertical()
    ];
}
 
//...

json_vertical json_vertical_dark

Application in Filters

If the field is used in filters, the filtering mode must be enabled using the filterMode() method. This method adapts the field's behavior for filtering and disables the ability to add new elements.

use MoonShine\UI\Fields\Json;
use MoonShine\UI\Fields\Text;
 
//...
 
public function filters(): array
{
    return [
        Json::make('Data')
            ->fields([
                Text::make('Title', 'title'),
                Text::make('Value', 'value')
            ])
            ->filterMode()
    ];
}
 
//...

Buttons

The buttons() method allows overriding the buttons used in the field. By default, only the remove button is available.

buttons(array $buttons)

Example:

use MoonShine\ActionButtons\ActionButton;
use MoonShine\UI\Fields\Json;
 
//...
 
protected function formFields(): iterable
{
    return [
        Json::make('Data', 'data.content')->fields([
            Text::make('Title'),
            Image::make('Image'),
            Text::make('Value'),
        ])->buttons([
            ActionButton::make('', '#')
                ->icon('trash')
                ->onClick(fn() => 'remove()', 'prevent')
                ->secondary()
                ->showInLine()
        ])
    ];
}
 
//...

Modifiers

The Json field provides the ability to modify buttons or the table in preview or default modes, instead of completely replacing them.

Remove Button Modifier

The modifyRemoveButton() method allows changing the remove button.

/**
 * @param  Closure(ActionButton $button, self $field): ActionButton  $callback
 */
modifyRemoveButton(Closure $callback)

Example:

use MoonShine\ActionButtons\ActionButton;
use MoonShine\UI\Fields\Json;
 
//...
 
protected function formFields(): iterable
{
    return [
        Json::make('Data')
            ->modifyRemoveButton(
                fn(ActionButton $button) => $button->customAttributes([
                    'class' => 'btn-secondary'
                ])
            )
    ];
}
 
//...

Table Modifier

The modifyTable() method allows modifying the table (TableBuilder) for all visual modes of the field.

/**
 * @param  Closure(TableBuilder $table, bool $preview): TableBuilder $callback
 */
modifyTable(Closure $callback)

Example:

use MoonShine\Components\TableBuilder;
use MoonShine\UI\Fields\Json;
 
//...
 
protected function formFields(): iterable
{
    return [
        Json::make('Data')
            ->modifyTable(
                fn(TableBuilder $table, bool $preview) => $table->customAttributes([
                    'style' => 'width: 50%;'
                ])
            )
    ];
}
 
//...