Topics

Creating a Custom Module View

Here's a quick tutorial about creating a custom view.  While you can replace a system view by creating a view with the same name or provide an additional alternate to it.  We are going to create an additional custom view for the text module.

We're going to create an additional view for the showall action of the text module to change the way the text is displayed.  Therefore, in the theme folder, create a folder named 'modules' and inside it create a folder named 'text', and inside it create a folder named 'views', and inside it create a folder named 'text'.  Inside this folder place a copy of the /framework/modules/text/views/text/showall.tpl' file.  If we leave the filename unchanged, this will REPLACE the system view for the text module 'showall' action.  (If we wanted to create an additional action, we'd need to add some programming to the controller, but that is a job for a programmer.) Since we want to create an additional view, we'll rename this copied file to 'showall_hint.tpl'.  We're just going to change the border and background color of the outer DIV (line 17), but here is the entire file:

{*
 * Copyright (c) 2007-2011 OIC Group, Inc.
 * Written and Designed by Adam Kessler
 *
 * This file is part of Exponent
 *
 * Exponent is free software; you can redistribute
 * it and/or modify it under the terms of the GNU
 * General Public License as published by the Free
 * Software Foundation; either version 2 of the
 * License, or (at your option) any later version.
 *
 * GPL: http://www.gnu.org/licenses/gpl.txt
 *
 *}

<div class="module text showall" style="border: solid 3px #333333; background-color: #DDDD66; padding: 10px;">
    {if $moduletitle}<h1>{$moduletitle}</h1>{/if}
    {permissions}
        <div class="module-actions">
            {if $permissions.create == 1}
                {icon class=add action=edit rank=1 text="Add text at the top"|gettext}
            {/if}
            {if $permissions.manage == 1}
                {ddrerank items=$items model="text" label="Text Items"|gettext}
            {/if}
        </div>
    {/permissions}
    {foreach from=$items item=text name=items}
        {if $text->title}<h2>{$text->title}</h2>{/if}
        {permissions}
			<div class="item-actions">
				{if $permissions.edit == 1}
					{icon action=edit record=$text}
				{/if}
				{if $permissions.delete == 1}
					{icon action=delete record=$text}
				{/if}
			</div>
        {/permissions}
        <div class="bodycopy">
            {filedisplayer view="`$config.filedisplay`" files=$text->expFile id=$text->id}
            {$text->body}
        </div>
        {permissions}
			<div class="module-actions">
				{if $permissions.create == 1}
					{icon class=add action=edit rank=$text->rank+1 text="Add more text here"|gettext}
				{/if}
			</div>
        {/permissions}
        {clear}
    {/foreach}
</div>

If everything went as planned, if we create a text module with a 'Show All' action, or select "Configure Action & View' for the module menu, we'll now see an additional view in that drop down list of 'Hint.'  It we select it and then click on the 'OK' button, we'll see our module has changed to a tan background with a black border.

If your custom view requires additional support files such as style sheets (css), graphics (images), or scripts (js), they should be placed in an appropriate subfolder within an 'assets' folder in the module.

Loading Help