Collection Forms configuration

The configureOzuCollectionForm() allows you to configure the form used to manage your collections in the CMS section of Ozu dashboard.

class Project extends Model
{
    use IsOzuModel;

    public static function configureOzuCollectionForm(OzuCollectionFormConfig $config): OzuCollectionFormConfig
    {
        return $config
            ->configureContentField(fn (OzuEditorField $field) => $field
                ->setToolbar([
                    OzuEditorToolbarButton::Bold,
                    OzuEditorToolbarButton::Italic,
                    OzuEditorToolbarButton::Link,
                    OzuEditorToolbarButton::Image,
                ])
                ->setAllowedExtensions(['png', 'jpg', 'jpeg', 'webp', 'mp4'])
                ->setHeight(500, 1100)
            )
            ->addCustomField(
                OzuField::makeText('place')
                    ->setLabel('Place')
                    ->setValidationRules(['required'])
            )
            ->addCustomField(
                OzuField::makeImage('thumb')
                    ->setLabel('Thumbnail')
                    ->setHelpMessage('Optional, cover will be used by default.')
            )
            ->addCustomField(
                OzuField::makeImageList('visuals')
                    ->setLabel('Visuals')
                    ->setMaxItems(5)
            );
    }
    
    // ...
}

Available methods of OzuCollectionFormConfig

The configureOzuCollectionForm method receives an OzuCollectionFormConfig instance which provides several methods to configure the form.

Built-in Fields

Ozu models come with three built-in fields: title, content, and cover. You can configure or hide them using the following methods:

• configureTitleField(Closure $callback): Configure the title field. The callback receives either an OzuTextField (default) or an OzuEditorField if type-hinted.
• hideTitleField(bool $hide = true): Hide the title field from the form.
• configureContentField(Closure $callback): Configure the content field.
• hideContentField(bool $hide = true): Hide the content field from the form.
• configureCoverField(Closure $callback): Configure the cover field (an OzuImageField).
• hideCoverField(bool $hide = true): Hide the cover field from the form.

class Project extends Model
{
    use IsOzuModel;
    
    public static function configureOzuCollectionForm(OzuCollectionFormConfig $config): OzuCollectionFormConfig
    {
        return $config
            ->configureTitleField(fn(OzuTextField $field) => $field->setLabel('Project Name'))
            ->configureContentField(fn(OzuEditorField $field) => $field
                ->setToolbar([
                    OzuEditorToolbarButton::Bold,
                    OzuEditorToolbarButton::Italic,
                ])
                ->setLabel('Full Description')
            ) 
            ->hideCoverField();
    }

    // ...
}

TIP

You can type-hint configureTitleField(Closure $callback) to obtain either an OzuTextField or an OzuEditorField. This can be useful if you want to be able to stylize the title.

Adding custom fields

You can add additional fields to your form using the addCustomField(OzuField $field) method.

use Code16\OzuClient\OzuCms\Form\OzuField;
// ...

class Project extends Model
{
    use IsOzuModel;
    
    public static function configureOzuCollectionForm(OzuCollectionFormConfig $config): OzuCollectionFormConfig
    {
        return $config
            ->addCustomField(
                OzuField::makeText('client_name')
                    ->setLabel('Client Name')
            );
    }
    
    // ...
}

INFO

Learn more about available fields and their methods below.

BelongsTo relationship

If your collection has a BelongsTo relationship (using the parent_id column, see related documentation) that you want users to manage in the form, you can declare it using the declareBelongsToField() method:

• declareBelongsToField(string $ozuModelClass, string $label, bool $required = true)

class Project extends Model
{
    use IsOzuModel;
    
    public static function configureOzuCollectionForm(OzuCollectionFormConfig $config): OzuCollectionFormConfig
    {
        return $config
            ->declareBelongsToField(Category::class, 'Category');
    }

    // ...
}

Available field types

All custom fields are created using static factory methods on the OzuField class.

Common Field Methods

All fields share these methods:

• setLabel(string $label): Set the field label.
• setHelpMessage(string $helpMessage): Add a help message below the field.
• setValidationRules(array $rules): Set Laravel validation rules (e.g., ['required', 'max:255']).
• setIsUpdatable(bool $isUpdatable = true): Set if the field is updatable (default is true).

Text Field (OzuField::makeText)

A simple text input.

OzuField::makeText('city')->setLabel('City')

Date Field (OzuField::makeDate)

A date picker.

• setHasTime(bool $hasTime = true): Include time picker.

OzuField::makeDate('published_at')->setHasTime()

Select Field (OzuField::makeSelect)

A dropdown or list of options.

• setOptions(array $options): Set the options (associative array value => label).
• setMultiple(bool $multiple = true): Allow multiple selection.
• setClearable(bool $clearable = true): Allow clearing the selection.
• setDisplayAsDropdown(): Show as a dropdown (default for single select).
• setDisplayAsList(): Show as a list of radio/checkboxes.

OzuField::makeSelect('type')
    ->setOptions(['web' => 'Web', 'mobile' => 'Mobile'])
    ->setDisplayAsDropdown()

Check Field (OzuField::makeCheck)

A single checkbox.

OzuField::makeCheck('is_featured', 'Display on homepage')

Editor Field (OzuField::makeEditor)

A rich text editor (WYSIWYG)

• setToolbar(array $buttons): Define the toolbar buttons (use OzuEditorToolbarButton enum)
• hideToolbar(): Hide the toolbar
• setHeight(int $height, ?int $maxHeight = null): Set the editor height
• setWithoutParagraphs(): Disable automatic <p> tags (useful for short formatted text)
• setMaxFileSize(int $maxFileSize): Set max file size in MB for uploads (requires Image or File in toolbar)
• setCropRatio(string $ratio): Set crop ratio for images (e.g. '1:1'; requires Image in toolbar)
• setAllowedExtensions(array $extensions): Set allowed extensions for file uploads (requires Image or File in toolbar)

OzuField::makeEditor('bio')
    ->setToolbar([
        OzuEditorToolbarButton::Bold, 
        OzuEditorToolbarButton::Italic, 
        OzuEditorToolbarButton::Link
    ])

Display rich content in your frontend (images, files, ...)

When adding media such as images or files inside a content editor of one of your collections, Ozu Dashboard will render these in your content as Laravel components.

More precisely, Ozu will render these rich content as:

Content type	Component
Images	<x-ozu-content-image />
Files	<x-ozu-content-file />
Videos	<x-ozu-content-video />
Quotes	<x-ozu-content-quote />

These views are publishable and overridable by doing:

php artisan vendor:publish --tag=ozu-views

Important

These will be rendered automatically in your frontend by encapsulating the content in a <x-ozu-content> component.

Even if you don't override the views, you must use <x-ozu-content> to allow Ozu to render the rich content. This is facultative if you don't use any Image, File, Quote, or Video content types in your editor toolbar.

Image Field (OzuField::makeImage)

An image upload field.

• setMaxFileSizeInMB(int $size): Set max file size in MB.
• setCropRatio(string $ratio): Set crop ratio (e.g., '16:9').
• setHasLegend(bool $hasLegend = true): Add a legend field to the image.
• setAllowedExtensions(array $extensions): Default is ['jpg', 'jpeg', 'png', 'gif', 'webp'].

File List Field (OzuField::makeFileList)

A list of downloadable files.

• setMaxItems(int $count): Limit the number of files.
• setMaxFileSize(int $size): Max file size per file in MB.
• setHasLegend(bool $hasLegend = true): Add a legend field to each file.

Image List Field (OzuField::makeImageList)

A list of images (extends File List).

• setCropRatio(string $ratio): Set crop ratio for all images in the list.