Twill

# Json repeaters

Usually repeaters are used for creating related models. However, in some cases you just want repeated data on the module you are working on without having to create a new model.

That's where repeaters come in.

# Base setup

For this guide we will create a very simple, non translatable module called "Project", in this project we will create simple "tasks".

So let's go ahead and create our Project module:

php artisan twill:make:module Project

For simplicity you can answer no to all the questions. Follow the guidance to add the module to your routes and navigation file, but do not run the migration yet!

# Updating the migration

In our migration we will add a json field tasks that will hold our task data.

database/migrations/2022_04_11_064051_create_projects_tables.php















 









<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateProjectsTables extends Migration
{
    public function up()
    {
        Schema::create('projects', function (Blueprint $table) {
            createDefaultTableFields($table);
            $table->string('title', 200)->nullable();
            $table->text('description')->nullable();
            $table->json('tasks')->nullable();
        });
    }

    public function down()
    {
        Schema::dropIfExists('projects');
    }
}

Now you can run your migrations!

# The repeater

Now we will make the repeater, this is the form that will be used to store data in the json column.

Create a new file: resources/views/admin/repeaters/tasks.blade.php

@twillRepeaterTitle('Task')
@twillRepeaterTrigger('Add task')
@twillRepeaterGroup('app')

@formField('input', [
    'name' => 'name',
    'label' => 'Task name',
    'required' => true,
])

@formField('wysiwyg', [
    'name' => 'description',
    'label' => 'Description',
    'required' => true,
])

@formField('checkbox', [
    'name' => 'done',
    'label' => 'Done'
])

And in your form we will add the repeater field:

resources/views/admin/projects/form.blade.php










 


@extends('twill::layouts.form')

@section('contentFields')
    @formField('input', [
        'name' => 'description',
        'label' => 'Description',
        'maxlength' => 100
    ])

    @formField('repeater', ['type' => 'tasks'])
@stop

At this point when you go into the admin panel you can add a new task, saving however, will not work yet.

Screenshot form

# The model and repository

To make our data save we have to update our model and repository.

In our model we will add a cast (opens new window), and while we are there we can also make the tasks fillable.

app/Models/Project.php













 


 
 
 


<?php

namespace App\Models;

use A17\Twill\Models\Model;

class Project extends Model
{
    protected $fillable = [
        'published',
        'title',
        'description',
        'tasks'
    ];

    protected $casts = [
        'tasks' => 'array'
    ];
}

In our repository we have to set tasks to be a json repeater, this way Twill knows how to handle the data. In addition to that we need to add the HandleJsonRepeaters trait.

app/Repositories/ProjectRepository.php











 

 
 
 







<?php

namespace App\Repositories;

use A17\Twill\Repositories\Behaviors\HandleJsonRepeaters;
use A17\Twill\Repositories\ModuleRepository;
use App\Models\Project;

class ProjectRepository extends ModuleRepository
{
    use HandleJsonRepeaters;

    protected $jsonRepeaters = [
        'tasks',
    ];

    public function __construct(Project $model)
    {
        $this->model = $model;
    }
}

And that should be it. We can now go to our form and add tasks!

← Artisan Commands →