Field Display

Fields

You can control whether fields should be visible. For example, to hide a field when creating a resource:

Text::make(__('Name'), 'name')
    ->hideOnCreate(true),

You can also pass a closure if needed:

->hideOnEdit(function(\App\Models\Tenant\Example $example) {
    return $example->id === 1;
}),

If you want to hide a field by default:

->hideByDefault(),

Or only show it on detail:

->onlyOnDetail(),

You can mark fields as disabled or readonly:

->readonly()
->disabled()

You can pass a closure here too:

->readonly(function(\App\Models\Tenant\Example $example) {
    return $example->id === 1;
}),

Tables

You can also set a column width for tables:

->setColumnWidth(150)

Or alignment:

->setColumnAlignment('center')

You can also make columns not visible by default (e.g. when the table gets too wide), but still selectable via the table settings:

->deselectOnIndexByDefault()

Forms

info

If you want to change the layout of a form, see: Layout

You can set a max width for displaying the fields in a form:

->setMaxWidth(200)

OR using 'xs', 'sm', 'md', 'lg', 'xl'

->setMaxWidth('md')

You can add a (helper) hint:

->hint(__('My hint'))

You can also add html attributes:

->withAttributes([
    'style' => 'border-top: 5px solid red;',
    'type' => 'email'
]),

Leading text

You can add a leading text to each field, e.g. when you want to show more information about the field and the label is not enough.

Text::make()
    ->setLeadingText('This is my field leading text')

// With a class
Text::make()
    ->setLeadingText('This is my field leading text', 'text-negative')

Display

Fields display their data via their respective Vue component. You can however mutate this data for display:

Text::make(__('Name'), 'name')
    ->displayUsing(function($value, \App\Models\Tenant\Example $example) {
        return "My custom prefix: {$value}";
    })

If you want to pass on different data for the index page than the detail page, you can do it like this:

Text::make(__('Name'), 'name')
    ->displayUsing(function($value, \App\Models\Tenant\Example $example, bool $forDetail) {
        if ($forDetail) {
            return "My custom prefix: {$value}";
        }
        
        return $value;
    })

You can also hide the label for the detail page:

Text::make(__('Name'), 'name')
    ->withoutLabel()

A field can take up full width even if the content is not enough, you can do that by calling fullWidthOnDetail() on a field:

Text::make('Title', 'title')
    ->fullWidthOnDetail(),

Tooltips

Fields can display a tooltip while hovering the display value.

Text::make(__('Name'), 'name')
    ->displayTooltipUsing(function($value, \App\Models\Tenant\Example $example) {
        return "My tooltip: {$value}";
    })

If you want to show a different tooltip on the index page:

Text::make(__('Name'), 'name')
    ->displayTooltipUsing(function($value, \App\Models\Tenant\Example $example, bool $forDetail) {
        if ($forDetail) {
            return [$example->id, $example->name, $example->description];
        }
        
        return "My tooltip: {$value}";
    })

Notice how arrays can be returned. Each value in the array will be displayed on a new line.

Custom Tooltip Component

If you want to create a fancy tooltip for your custom field, you can set the custom component by using setTooltipComponent(string $component).
This component should expect tooltip as a prop. Don't forget to register the component to your Vue app.

Inline

By default, fields will be inline editable from the detail page.

Fields that are either hidden on the edit page, fill prevented, or hidden on forms will not be editable inline.

You can disable editing inline:

Text::make(__('Name'), 'name')
    ->inlineEditable(false);

Or by passing a Closure:

Text::make(__('Name'), 'name')
    ->inlineEditable(function(Model $model) {
        return $model->tag === 'document';
    })

Inline fields dependency

In some cases, a field could be required in combination with another field, or a field could show/hide another field. If your field has other fields as a dependency, you can supply them:

Text::make(__('Name'), 'name')
    ->inlineEditable(true, ['is_active', 'type'])

In the above example, the order of fields (from top to bottom) would be:

• name
• is_active
• type

If you want to have name not at the top, you can add it in the array:

Text::make(__('Name'), 'name')
    ->inlineEditable(true, ['is_active', 'name', 'type'])

Inline custom fill

By default, the fillUsing and fillLazyUsing closures will be called when editing the field inline.

You can override this:

Text::make(__('Name'), 'name')
    ->fillInlineUsing(function(array $data, Model $model) {
        dd($data, $model);
    })

Inline full page refresh

In some cases you might have a field that demands an element (e.g. a table) on the page to be reloaded. You can force a full page refresh:

Text::make(__('Name'), 'name')
    ->inlineFullRefresh()