Skip to main content

Field Data

Fields may have componentProperties, meta and data. All these attributes are used to pass data to Vue components, however there are differences and all have their own specific use cases.

Different kinds of data​

Component properties​

The componentProperties should be defined once in either the constructor or the prepare method on a field. After they have been set, they cannot be changed based on the state of the form.

For example: a Filepicker field may optionally have multiple files instead of just one.

Field Meta​

Field meta however can change during the lifecycle. For example, a field may be marked invisible depending on the state of the form, but can be set to visible later on.

danger

Meta is passed in every request in the lifecycle of a form, meaning both in the requests (for example when there is a field with ->onUpdate callback) and in each response.

This makes it possible to get the meta state of a field (for example to see if a field is hidden), but you should be careful transferring large pieces of data since everything is passed via GET requests.

Field Data​

Field data, unlike field meta, is only passed as a response in requests. Unlike component properties, field data can be changed in the lifecycle of a form, but cannot be found in the form state in the back-end, since it only lives in the front-end.

For example: a TemplatePreview field needs to be fed and display a large block of html.

Usage​

Component properties​

Setting a component property:

public function prepare(Model $model = null)
{
    $this->componentProperties['multiple'] = $this->hasMultiple;
}

Field meta​

Setting meta:

// On the field itself
$this->meta['main_card'] = array_key_first($cards);

// Or within an addAction or onUpdate closure:
->addAction('togglePasswordInputType', function (ManagesForm $form) {
    $form->getFieldMeta('checked_password', 'type') === 'password' ?
        $form->setFieldMeta('checked_password', 'type', 'text') :
        $form->setFeldMeta('checked_password', 'type', 'password');
})

->onUpdate(function (ManagesForm $form, $value) {
   // Making fields readonly or disabled
   $form->readonlyFields('name', 'other_field');
   $form->disableFields('name', 'other_field');
   $form->enableFields('name', 'other_field');
   
   // Changing the submit button
   $form->disableSubmitButton(__('My reason for disabling'));
   $form->enableSubmitButton();
   $form->hideSubmitButton();
   $form->showSubmitButton();
})

Reading meta:

->onUpdate(function (ManagesForm $form) {
    $data = $form->getFieldMeta('fieldname', 'key')
    
    // Or
    $data = $form->getMeta();
})

Field data​

Setting field data:

// Within an addAction or onUpdate closure:
->onUpdate(function (ManagesForm $form) {
   $form->setFieldData('preview', 'preview', $someContent);
})

Transfers state​

By default, the value for each field will be sent back and forth between back-end and front-end.

If you have a field where the value contains a large object/array, you might want to disable state transferring in order to reduce the URL length:

public bool $transfersState = false;

This means however, that you cannot get the value for this field anymore inside another field (by using ->getState()). The value will still be posted when the form has been submitted though.

State for hidden fields​

When a field is hidden inside a form, e.g. via ->hideByDefault(), it will not transfer its state back and forth, neither will it send its state when the form is submitted.

In some cases you might have a hidden field and still need it to send its state. You can use the following:

Textarea::make('Description', 'description')
    ->hideByDefault()
    ->allowStateWhileHidden()

Available methods​

Any time you have access to the ManagesForm or FormState you can call any of the methods below:

public function setState(string $field, mixed $value): static;

public function triggerOnUpdate(string $field, mixed $value): void;

public function getState(?string $field = null): mixed;

public function setFieldMeta(string $field, string $key, $value): static;

public function setFieldData(string $field, string $key, $value): static;

public function getFieldMeta(string $field, string $key): mixed;

public function getModel(): Model|null;

public function getDuplicateModel(): ?Model;

public function showFields(...$fields): static;

public function hideFields(...$fields): static;

public function disableFields(...$fields): static;

public function enableFields(...$fields): static;

public function readonlyFields(...$fields): static;

public function showSubmitButton(): static;

public function hideSubmitButton(): static;

public function enableSubmitButton(): static;

public function setSubmitButtonLabel(string $label): static;

public function disableSubmitButton(?string $message = null): static;

public function isInitialRequest(): bool;

public function getRequest(): Request;

public function getParentState(?string $field = null): mixed;

public function getParentMeta(): ?FormStateMeta;

public function getParentFieldMeta(string $field, string $key): mixed;