Fields

Json

Basics

Contains all Basic methods.

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 cast — "array", "json" or "collection".

Field Set

Assume that the structure of your json looks like this:

[{"title": "title", "value": "value", "active": true}]
[{"title": "title", "value": "value", "active": true}]

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)
fields(FieldsContract|Closure|iterable $fields)

Example:

 namespaces
use MoonShine\UI\Fields\Json;
use MoonShine\UI\Fields\Position;
use MoonShine\UI\Fields\Switcher;
use MoonShine\UI\Fields\Text;
 
Json::make('Product Options', 'options')
    ->fields([
        Position::make(),
        Text::make('Title'),
        Text::make('Value'),
        Switcher::make('Active'),
    ])
 namespaces
use MoonShine\UI\Fields\Json;
use MoonShine\UI\Fields\Position;
use MoonShine\UI\Fields\Switcher;
use MoonShine\UI\Fields\Text;
 
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.

 namespaces
use MoonShine\UI\Fields\Json;
use MoonShine\UI\Fields\Position;
use MoonShine\UI\Fields\Switcher;
use MoonShine\UI\Fields\Text;
 
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')
        ]
    )
 namespaces
use MoonShine\UI\Fields\Json;
use MoonShine\UI\Fields\Position;
use MoonShine\UI\Fields\Switcher;
use MoonShine\UI\Fields\Text;
 
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,
)
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:

Json::make('Data')
    ->keyValue()
Json::make('Data')
    ->keyValue()

json_key_value json_key_value_dark

Example with changing field types:

 namespaces
use MoonShine\UI\Fields\Json;
use MoonShine\UI\Fields\Select;
use MoonShine\UI\Fields\Text;
 
Json::make('Label', 'data')
    ->keyValue(
        keyField: Select::make('Key')
            ->options(['vk' => 'VK', 'email' => 'E-mail']),
        valueField: Text::make('Value'),
    )
 namespaces
use MoonShine\UI\Fields\Json;
use MoonShine\UI\Fields\Select;
use MoonShine\UI\Fields\Text;
 
Json::make('Label', 'data')
    ->keyValue(
        keyField: Select::make('Key')
            ->options(['vk' => 'VK', 'email' => 'E-mail']),
        valueField: Text::make('Value'),
    )

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,
)
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:

Json::make('Data')
    ->onlyValue()
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.

Example:

Json::make('Product Options', 'options')
    ->fields([
        Text::make('Title'),
        Switcher::make('Active'),
    ])
    ->object()
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)
default(mixed $default)

Example:

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']
    ])
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.

creatable(
    Closure|bool|null $condition = null,
    ?int $limit = null,
    ?ActionButtonContract $button = null,
)
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 = [],
)
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:

Json::make('Data')
    ->keyValue()
    ->creatable(limit: 6)
    ->removable()
Json::make('Data')
    ->keyValue()
    ->creatable(limit: 6)
    ->removable()

json_removable json_removable_dark

Customizing the Add Button

 namespaces
use MoonShine\UI\Components\ActionButton;
use MoonShine\UI\Fields\Json;
 
Json::make('Data')
    ->keyValue()
    ->creatable(
        button: ActionButton::make('New')->primary()
    )
 namespaces
use MoonShine\UI\Components\ActionButton;
use MoonShine\UI\Fields\Json;
 
Json::make('Data')
    ->keyValue()
    ->creatable(
        button: ActionButton::make('New')->primary()
    )

HTML Attributes for the Remove Button

Json::make('Data', 'data.content')
    ->fields([
        Text::make('Title'),
        Image::make('Image'),
        Text::make('Value'),
    ])
    ->removable(attributes: ['@click.prevent' => 'customAsyncRemove'])
    ->creatable()
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.

Example:

Json::make('Data')
    ->vertical()
Json::make('Data')
    ->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.

Json::make('Data')
    ->fields([
        Text::make('Title', 'title'),
        Text::make('Value', 'value')
    ])
    ->filterMode()
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)
buttons(array $buttons)

Example:

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()
    ])
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)
/**
 * @param  Closure(ActionButton $button, self $field): ActionButton  $callback
 */
modifyRemoveButton(Closure $callback)

Example:

 namespaces
use MoonShine\UI\Components\ActionButton;
use MoonShine\UI\Fields\Json;
 
Json::make('Data')
    ->modifyRemoveButton(
        fn(ActionButton $button) => $button->customAttributes([
            'class' => 'btn-secondary'
        ])
    )
 namespaces
use MoonShine\UI\Components\ActionButton;
use MoonShine\UI\Fields\Json;
 
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)
/**
 * @param  Closure(TableBuilder $table, bool $preview): TableBuilder $callback
 */
modifyTable(Closure $callback)

Example:

 namespaces
use MoonShine\UI\Components\Table\TableBuilder;
use MoonShine\UI\Fields\Json;
 
Json::make('Data')
    ->modifyTable(
        fn(TableBuilder $table, bool $preview) => $table->customAttributes([
            'style' => 'width: 50%;'
        ])
    )
 namespaces
use MoonShine\UI\Components\Table\TableBuilder;
use MoonShine\UI\Fields\Json;
 
Json::make('Data')
    ->modifyTable(
        fn(TableBuilder $table, bool $preview) => $table->customAttributes([
            'style' => 'width: 50%;'
        ])
    )