Best way / preferred way to display created by and updated by in Nova?

I've been going back and forth on this for a while. In Nova, I want to be able to see who created a resource and then the last person who updated the resource, but since horizontal space on the resource index table is limited if we don't want to scroll, I have defaulted to using a Stack field with each BelongsTo field like this:

Stack::make(
                name: 'Created By | Updated By',
                attribute: 'created_by',
                lines: [
                    BelongsTo::make(
                        name: 'Created By',
                        attribute: 'createdBy',
                        resource: User::class,
                    ),
                    BelongsTo::make(
                        name: 'Updated By',
                        attribute: 'updatedBy',
                        resource: User::class,
                    ),
                ])->sortable(),

In this format, the created_by field is still sortable, but the updated_by field displays underneath it as well, and the table header is "Created By | Updated By". This approach is... fine? I think? But I'm curious if anyone else has an alternative approach that saves space while also making both fields visible and clear to understand.

LaryAI

1 year ago

Level 58

In Laravel Nova, displaying both "Created By" and "Updated By" fields efficiently while conserving horizontal space can indeed be a challenge. Your current approach using the Stack field is a good solution, but if you're looking for alternatives, here are a couple of suggestions:

Custom Field with Tooltip: You can create a custom field that combines both "Created By" and "Updated By" into a single line, and use a tooltip to display additional details. This way, you save space but still provide full information on hover.
```
Text::make('Created/Updated By', function () {
    return $this->createdBy->name . ' / ' . $this->updatedBy->name;
})->asHtml()->tooltip(function () {
    return 'Created by: ' . $this->createdBy->name . '<br>Updated by: ' . $this->updatedBy->name;
}),
```
Note: You might need to implement a custom tooltip method or use a package that supports tooltips in Nova.

Custom Display Using HTML: If you want to keep it simple and still use a single column, you can format the display using HTML. This won't be sortable, but it will save space.

Text::make('Created/Updated By', function () {
    return '<strong>Created:</strong> ' . $this->createdBy->name . '<br><strong>Updated:</strong> ' . $this->updatedBy->name;
})->asHtml(),

Use a Custom Nova Field: If you need more control, consider creating a custom Nova field that handles the display logic. This way, you can encapsulate the logic and styling in a reusable component.

// In your custom field class
public function resolve($resource, $attribute = null)
{
    $this->value = [
        'created_by' => $resource->createdBy->name,
        'updated_by' => $resource->updatedBy->name,
    ];
}

// In your Nova resource
CustomCreatedUpdatedField::make('Created/Updated By'),

Each of these approaches has its trade-offs between simplicity, space-saving, and functionality. Choose the one that best fits your needs and the user experience you want to provide.