Adding a Settings Tab

Anyone got any info on this?

Actually adding a new tab is quite simple:

1.) Open the resources/views/vendor/spark/settings.blade.php file and add a new tab menu item like so:

<!-- New Tab -->
<li role="presentation">
    <a href="#new-tab" aria-controls="new-tab" role="tab" data-toggle="tab">
        <i class="fa fa-fw fa-btn fa-edit"></i>New Tab
    </a>
</li>

these are defined from line 25.

2.) Add a new tab panel like so:

<!-- New Tab -->
<div role="tabpanel" class="tab-pane" id="new-tab">
    @include('spark::settings.new-tab')
</div>

these are defined from line 102, also note you can set the default active pane here.

3.) In the resources/views/vendor/spark/settings/ folder create your new tab, this is the same name as defined in the @include('spark::settings.new-tab') so this for example would be new-tab.blade.php I duplicated one of the other existing tabs and worked from that

4.) Optionally if your new tab will have different section like the profile tab which has a image chooser and the email updating form you can create a folder in the same location to store any partials for the tab

5.) If you new tab requires Vue you should create a new file matching your tab name and a folder if you have created any partials under resources/assets/js/spark-components/settings you should also register these new files in the resources/assets/js/spark-components/bootstrap.js file. from there should should take a look at the code in spark/resources/assets/js/settings and change your code to work like this.

I suggest you also read https://spark.laravel.com/docs/1.0/adding-profile-fields as this will help clarify some of the patterns.

I hope this helps, if you get stuck drop me a message, its possible I have missed something although I think you should be able to work most of it out from there (its very late when i'm writing this) :)

Thanks, @dannydjones1994

That's great stuff. I'd pretty much figured it our before you replied, but thanks. :-)

I am having issues when creating a new panel. I created a new panel called users and below is my error:

 [Error: ./resources/assets/js/spark-components/settings/users.js
Module not found: Error: Can't resolve 'settings/users' in '/Users/mikefrancik/Code/SoberHouseWare/resources/assets/js/spark-components/settings'
resolve 'settings/users' in '/Users/mikefrancik/Code/SoberHouseWare/resources/assets/js/spark-components/settings'

Can you point me in the right direction with this?

@Mfrancik Did you ever figure this out?

The only way I get it to work is by adding the file to the vendor folder (where the spark package lives) but I know this is wrong..

Any ideas?

I've managed to get rid of this error by changing

var base = require('settings/users');

to

var base = require('../settings/integration');

but I'm not sure why it works for the built-in components.

@garethdaine @mfrancik do either of you know how Spark is handling this data. For instance, settings/security/update-password is has @click.prevent="update", but I can't see where the controller is for this.

When you're creating a new tab are you just adding ajax calls to connect with the backend? I wanted to do it the spark way, but I'm pretty sure the handling between the client/server is in the vendor file. Not to mention, what happens when I upgrade Spark?

@snmd73 I created a vue component and made ajax requests from there. I believe this is the preferred method on spark because if you must upgrade, its not effected.