PDA

View Full Version : [How-To] Collapsible Tables within AdminCP (vb3.5)


Antivirus
15 Jun 2006, 21:37
So you already know how to Create Custom Pages in the AdminCP for that awesome hack you're working on, but your pages are either very long and you're too lazy to hit that scroll wheel to get to the bottom, or (like myself) you love clicking on collapsible tables and making things disappear and reappear upon your command. The following tuitorial (hopefully) should help you achieve this.

First off, if you're not already familiar with Dream's tuitorial on how to Create Custom Pages in the AdminCP (http://www.vbulletin.org/forum/showthread.php?t=83122), please get familiar with it, as this tuitorial assumes you already know how to do everything he explains therein.

Basically what we need to do is create three new functions to handle collapsible tables on custom pages within the AdminCP:

print_claps_table_header
print_claps_submit_row
print_claps_table_footer


The above functions are almost identical to the original functions written by Jelsoft, except for the fact that the code needed to handle collapsible tables has been added.

These functions need to be written into a file which we will call "antivirus_adminfunctions.php" so we can call them from our custom AdminCP page. The first function "print_claps_table_header" is the most important, containing the bulk of the code for collapsing the table as well as the all-important $collapseid parameter which we will need to assign giving each collapsible table it's own unique tag.

function print_claps_table_header($title, $collapseid = '', $colspan = 2, $htmlise = false, $align = 'center')
{
global $bgcounter, $stylevar, $vbulletin;

if ($htmlise)
{
$title = htmlspecialchars_uni($title);
}
$title = "<b>$title</b>";
if ($collapseid != '')
{
$title = "\n\t\t<a style=\"float:$stylevar[right]\" href=\"#top\" onclick=\"return toggle_collapse('$collapseid')\"><img id=\"collapseimg_$collapseid\" src=\"../cpstyles/" . $vbulletin->options['cpstylefolder'] . "/cp_collapse{$vbcollapse['collapseimg_'.$collapseid]}.gif\" alt=\"\" border=\"0\" /></a>\n\t\t$title\n\t";

}

echo "<thead>\n";
echo "<tr>\n\t<td class=\"tcat\" align=\"$align\"" . iif($colspan != 1, " colspan=\"$colspan\"") . ">$title</td>\n</tr>\n";
echo "</thead>\n";
echo "<tbody id=\"collapseobj_$collapseid\" style=\"{$vbcollapse['collapseobj_'.$collapseid]}\">\n";

$bgcounter = 0;
}


The second function "print_claps_submit_row" is only used if you require a submit button for your form. Almost nothing has changed other than the call to the function "print_claps_table_footer" way at the bottom...

function print_claps_submit_row($submitname = '', $resetname = '_default_', $colspan = 2, $goback = '', $extra = '', $alt = false)
{
global $vbphrase, $vbulletin;

// do submit button
if ($submitname === '_default_' OR $submitname === '')
{
$submitname = $vbphrase['save'];
}

$button1 = "\t<input type=\"submit\" class=\"button\" tabindex=\"1\" value=\"" . str_pad($submitname, 8, ' ', STR_PAD_BOTH) . "\" accesskey=\"s\" />\n";

// do extra stuff
if ($extra)
{
$extrabutton = "\t$extra\n";
}

// do reset button
if ($resetname)
{
if ($resetname === '_default_')
{
$resetname = $vbphrase['reset'];
}

$resetbutton .= "\t<input type=\"reset\" class=\"button\" tabindex=\"1\" value=\"" . str_pad($resetname, 8, ' ', STR_PAD_BOTH) . "\" accesskey=\"r\" />\n";
}

// do goback button
if ($goback)
{
$button2 .= "\t<input type=\"button\" class=\"button\" value=\"" . str_pad($goback, 8, ' ', STR_PAD_BOTH) . "\" tabindex=\"1\" onclick=\"history.back(1);\" />\n";
}

if ($alt)
{
$tfoot = $button2 . $extrabutton . $resetbutton . $button1;
}
else
{
$tfoot = $button1 . $extrabutton . $resetbutton . $button2;
}

// do debug tooltip
if ($vbulletin->debug AND is_array($GLOBALS['_HIDDENFIELDS']))
{
$tooltip = "HIDDEN FIELDS:";
foreach($GLOBALS['_HIDDENFIELDS'] AS $key => $val)
{
$tooltip .= "\n\$$key = &quot;$val&quot;";
}
}
else
{
$tooltip = '';
}

print_claps_table_footer($colspan, $tfoot, $tooltip);
}


Third, we'll need the new "print_claps_table_footer" function which closes the <tbody> tag which was opened within the "print_claps_table_header" function above...

function print_claps_table_footer($colspan = 2, $rowhtml = '', $tooltip = '', $echoform = true)
{
global $tableadded, $vbulletin;

if ($rowhtml)
{
$tooltip = iif($tooltip != '', " title=\"$tooltip\"", '');
if ($tableadded)
{
echo "<tr>\n\t<td class=\"tfoot\"" . iif($colspan != 1 ," colspan=\"$colspan\"") . " align=\"center\"$tooltip>$rowhtml</td>\n</tr>\n";
}
else
{
echo "<p align=\"center\"$tooltip>$extra</p>\n";
}
}

if ($tableadded)
{
echo "</tbody>\n";
echo "</table>\n";
}

if ($echoform)
{
print_hidden_fields();

echo "</form>\n<!-- form ended: " . $vbulletin->db->querycount ." queries executed -->\n\n";
}
}


Last thing, make sure you have both "cp_collapse.gif" and "cp_collapse_collapsed.gif" residing within your CP Style directory (i.e: forumroot/cpstyles/xxx) where cpstylename is the name of the folder for your cpstyle. You probably already have the first in there by default, however you may need to make the latter image.

Now that we have our functions within the new "antivirus_adminfunctions.php" script, place this file within your forum/includes/ directory and we'll call it later in our custom AdminCP script.

Now, when creating your new page in the AdminCP, aside from all the usual bluff, you have to require our new functions for the back-end, like this:
// ############# REQUIRE BACK-END #############
require_once('./global.php');
require_once(DIR . '/includes/antivirus_adminfunctions.php');


Now, everything else you would normally do is the same, except for the tables you're printing to the browser which you want to collapse, and in this case, you would use the following:

instead of function "print_table_header", use the new "print_claps_table_header" but DON'T FORGET to assign the new parameter $collapseid to a unique value (such as 'foo' for this table, like so:

print_claps_table_header($vbphrase['whatever'], 'foo');


instead of function "print_submit_row", use the new "print_claps_submit_row" function (it's got no new parameters).

and instead of function "print_table_footer", use the new "print_claps_table_footer" function (it's got no new parameters).

Now, your tables which have used the new functions should be able to collapse as long as you use a unique $collapseid for each table group. You can also make more than one table collapse individually on the same page so long as each table you define in your script has a unique $collapseid :)

Thanks to SirAdrian, alan@cit and Paul M for helping me figure this out \m/

Kirk Y
03 Jul 2006, 18:47
Nice very useful. Makes me wanna go make an admincp mod just so I can put collapsable tables in it, he he. :p