Tabs trick will help you further customize backend experience - see screenshot -.

2018-08-29-1.png
tabs in backend
2018-08-29-1.png (68.21 KiB) Viewed 1652 times


You'll find attached snippet html file - tabs.html - which is to be included into template's configuration as follows -
Code: Select all
<cms:config_list_view>

    <cms:html>
        <cms:embed 'tabs.html' />
    </cms:html>

</cms:config_list_view>


You recognize cms:html tag which helps developers inject arbitrary html into backend. The content of our html snippet therefore must have 2 key components - tab content and tab navigation. While content is easy to paste, navigation must be retro-fitted in existing CouchCMS markup. You'll see how I am using simple javascript to add new tab caption navs.

For enthusiasts trying to understand every bit of every code - please refer to the default "_system" theme of CouchCMS and following files will shed light on how things are organized - subtitle.html, content_list.html, content_form.html.

Let's continue with this tutorial. Anything you want to appear in a tab goes into the div -
Code: Select all
<!-- Tab content -->   
<div class="tab-pane fade in" id="tab-pane-mytabname">
    ... content ...
</div>
<!-- Tab content End -->   


Tab's caption-navigation consists of proper ids+href, icon and title as follows -
Code: Select all
<!-- Tab navigation -->   
<li class="tab" id="tab-mytabname">
   <a data-toggle="tab" href="#tab-pane-mytabname">
        <cms:show_icon "file" />
        Mytabname
    </a>
</li>
<!-- Tab navigation End -->   


I have coded 2 sample tabs which I am actually using every now and then - Preview tab - it loads front-end page in a tab for a quick peek, and Variables tab - it holds the output of debugging tag <cms:dump_all /> for quick system variables reference.

My 2 tabs in the tutorial are added to index.php clonable template. I only show its list-view. No doubt the described technique will work for the customizing form-view as well (page edit view). Can't wait to see what you will add there - maybe extra instructions for clients, or related data from other templates, or a help request form, or a video iframe. Please post your successful experiments.

Wrapping up, I have placed several checks to fit my own purpose - tabs are visible only to superadmins, only if used locally (localhost) and not on production server and several other checks that you'll find in the snippet. Feel free to tweak anything you want and post requests below.

Yours truly.

P.S. A tutorial to set up a datatable from screenshot can be found here viewtopic.php?f=8&t=11739

Attachments