Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

kulahmet's avatar

Adding custom Team Profile fields

Hi there, I've been trying to add URL field to Teams Profile Page that will allow team members to manually create their team URL in order to let public visitors see the team's portfolio. (e.g. http://www.webapp.com/{URL}) I've followed the instructions "Adding Profile Fields" given on the Spark documentation. Since the documentation is about the User Profile, I'm stuck when I apply it for Team Profile.

I've done the migration, update the views and controllers so far. The validations on the controller are working and the data -I manually entered URL to the database- appears in the form field. However when I click on the update button on the profile page, it gives "500 Internal Server Error" on the developer console. Do you have any idea why it denies to record on MySQL database?

Include update-team-url Blade in to /resources/views/vendor/spark/settings/teams/team-profile.blade.php

<spark-team-profile :user="user" :team="team" inline-template>
    <div>
        <div v-if="user && team">
            <!-- Update Team Photo -->
            @include('spark::settings.teams.update-team-photo')

            <!-- Update Team Name -->
            @include('spark::settings.teams.update-team-name')
            
            <!-- Update Team URL-->
            @include('spark::settings.teams.update-team-url')
        </div>
    </div>
</spark-team-profile>

Then create the update-team-url.blade.php

<spark-update-team-url :user="user" :team="team" inline-template>
    <div class="panel panel-default">
        <div class="panel-heading">Update Event URL</div>

        <div class="panel-body">
            <!-- Success Message -->
            <div class="alert alert-success" v-if="form.successful">
                Your event URL has been updated!
            </div>

            <form class="form-horizontal" role="form">
                <!-- URL -->
                <div class="form-group" :class="{'has-error': form.errors.has('url')}">
                    <label class="col-md-4 control-label">URL</label>

                    <div class="col-md-6">
                        <input type="text" class="form-control" name="url" v-model="form.url">

                        <span class="help-block" v-show="form.errors.has('url')">
                            @{{ form.errors.get('url') }}
                        </span>
                    </div>
                </div>

                <!-- Update Button -->
                <div class="form-group">
                    <div class="col-md-offset-4 col-md-6">
                        <button type="submit" class="btn btn-primary"
                                @click.prevent="update"
                                :disabled="form.busy">

                            Update
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</spark-update-team-url>

Define the Vue component:

Vue.component('spark-update-team-url', {
    props: ['user', 'team'],
    
    /**
     * The component's data.
     */
    data() {
        return {
            form: new SparkForm({
                url: ''
            })
        };
    },

    /**
     * Prepare the component.
     */
    ready() {
        this.form.url = this.team.url;
    },
    
     methods: {
        /**
         * Update the team url.
         */
        update() {
            Spark.put(`/settings/teams/${this.team.id}/url`, this.form)
                .then(() => {
                    this.$dispatch('updateTeam');
                    this.$dispatch('updateTeams');
                });
        }
    }
});

Route file:

Route::put('/settings/teams/{team}/url', 'Settings\Teams\TeamUrlController@update');

Controller:

<?php

namespace App\Http\Controllers\Settings\Teams;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;

class TeamUrlController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('auth');
    }

    /**
     * Update the given team's URL.
     *
     * @param  Request  $request
     * @param  \Laravel\Spark\Team  $team
     * @return Response
     */
    public function update(Request $request, $team)
    {
        abort_unless($request->user()->ownsTeam($team), 404);

        $this->validate($request, [
            'url' => 'required|min:3|alpha_dash|unique',
        ]);

        $team->forceFill([
            'url' => $request->url,
        ])->save();
        
    }
}

And the migration:

public function up()
    {
        Schema::table('teams', function (Blueprint $table) {
            $table->string('url');
        });
    }

Screenshots:

Thanks.

0 likes
7 replies
jordankz's avatar

I'm wondering the same thing too, we're you able to figure this out?

hubrik's avatar

Did you update the fillable property on the Team model? By default you can only update "name".

vincentvankekerix's avatar

Sorry for the bump: just encounter this same problem, and not able to find a solution yet. Would anyone know how to go about this? Thanks.

thirdwunder's avatar

has anyone found a solution or detailed instructions on how to properly add fields to teams in laravel spark?

Cronix's avatar

I did it by

  1. Copy Laravel\Spark\Repositories\TeamRepository to /app/SparkExtensions
  2. Made it like so (extending the original TeamRepository and overriding the create() method)
<?php

namespace App\SparkExtensions;

use Carbon\Carbon;
use Laravel\Spark\Spark;
use Laravel\Spark\Repositories\TeamRepository as SparkTeamRepository;

class TeamRepository extends SparkTeamRepository
{

    /**
     * {@inheritdoc}
     */
    public function create($user, array $data)
    {
        $attributes = [
            'owner_id' => $user->id,
            'name' => $data['name'],
            // other custom fields
            'trial_ends_at' => Carbon::now()->addDays(Spark::teamTrialDays()),
        ];

        if (Spark::teamsIdentifiedByPath()) {
            $attributes['slug'] = $data['slug'];
        }

        return Spark::team()->forceCreate($attributes);
    }

}
  1. in SparkServiceProvider, added a register() method and used
$this->app->singleton(
    'Laravel\Spark\Repositories\TeamRepository',
    'App\SparkExtensions\TeamRepository'
);

So it calls my method instead of Sparks.

1 like
thirdwunder's avatar

anyone know how to add relationships to the team vue object? i have added another object ID to the team table, and managed to get it to save and all that. i've also managed to add the object id to the team object in vue, but how would i have the relationship reflected in the vue object.

Cronix's avatar

@thirdwunder Did my explanation on additional team profile fields work for you?

It would be best to start your own thread.

Please or to participate in this conversation.