form layout in drupal from a module

Question

I created my own module called "cssswitch". I'm trying to create my own html layout to display the admin form portion of the module. I understand how to use the hook_form_alter() to modify form elements, but I need to create the entire form layout to make some fields appear next to each other. It seems I need something like the way I have the frontend view of the node displayed with theme_cssswitch_display(), but for the admin part of the node.

function cssswitch_form_alter(&$form, $form_state, $form_id) {

    switch($form_id) {  

        case 'cssswitch_node_form':
            $form['hour_start']['#prefix'] = '<div class="start-box">';
            $form['ampm_start']['#suffix'] = '</div>';
            $form['ampm_start']['#attributes'] = array("style" => "border-width:2px;");
            break;
    }

}

function cssswitch_theme() {

    return array(
      'cssswitch_display' => array(
        'arguments' => array('node'),
      ),

    );

}

// to display the view of the node
function theme_cssswitch_display($node) {

  $output = '<div class="cssswitch-cssfilename">Filename: '.
    check_plain($node->cssfilename). '</div>';
  $output .= '<div class="cssswitch-time_start">Start: '.
    check_plain($node->hour_start). ':'.check_plain($node->minute_start).' '.check_plain($node->ampm_start).'</div>';

  $output .= '<div class="cssswitch-time_end">End: '.
    check_plain($node->hour_end). ':'.check_plain($node->minute_end).' '.check_plain($node->ampm_end).'</div>';    

  return $output;
}

thanks for any help

Answer 1

hook_form_alter is only needed, if you want to change a form that another module has defined. Since you are defining the form, you don't need to alter it, instead you can just define it like you want.

What you need to use, to change the markup of the form, is the #theme attribute of the form itself and/or it's elements. With it you can use your own theme functions to render the form and it's elements.

Look for help in Drupal's FAPI reference.

Answer 2

I found most of what I need now. I had to use the "suggested" form id that Themer Info" gave me which was "cssswitch_node_form". I used that in my form builing function called "cssswitch_form() like this: $form['#theme'] = 'cssswitch_node_form';

I also need to use that name in this function:

function cssswitch_theme() {

    return array(
      'cssswitch_display' => array(
        'arguments' => array('node'),
      ),

      'cssswitch_node_form' => array(
        'arguments' => array('form' => NULL),
      ),      


    );

And here is the function of the same name but with "theme_" prepended to it:

function theme_cssswitch_node_form($form) {

    $output='';
    $output.='<span>testing 123</span>';
    $output.=drupal_render($form['hour_start']['name']);
    $output.=drupal_render($form['minute_start']);
        $output .= drupal_render($form);

  return $output;

}

I still have the problem of html code surrounding the form elements with divs automatically which is not what I wanted. In this instance, I want to place some form elements side by side. I guess that's what the function drupal_render() does. Is there a function call that will just give me the form element without all the html markup?

thanks

Answer 3

I got it all sorted out now. My hook_theme is this:

function cssswitch_theme() {

    return array(
      'cssswitch_display' => array(
        'arguments' => array('node'),
      ),

      'cssswitch_node_form' => array(
        'arguments' => array('form' => NULL),
        'template' => 'cssswitch-node-form.tpl.php',
      ),

      );

}

I created the file themes/garland/cssswitch-node-form.tpl.php Then I can have control over where to put any form elements like this:

<style>
#edit-hour-start-wrapper, #edit-minute-start-wrapper, #edit-ampm-start-wrapper, #edit-hour-end-wrapper, #edit-minute-end-wrapper, #edit-ampm-end-wrapper {
    float:left;
    margin-right:25px;
}
</style>
<div id="regform1">

<?php print drupal_render($form['title']); ?>
<?php print drupal_render($form['cssfilename']); ?>

    <fieldset class="group-account-basics collapsible">
        <legend>Time Start</legend>
        <?php print drupal_render($form['hour_start']); ?>
        <?php print drupal_render($form['minute_start']); ?>
        <?php print drupal_render($form['ampm_start']); ?>
    </fieldset>

    <fieldset class="group-account-basics collapsible"><legend>Time end</legend>
        <?php print drupal_render($form['hour_end']); ?>
        <?php print drupal_render($form['minute_end']); ?>
        <?php print drupal_render($form['ampm_end']); ?>    
    </fieldset>
</div>

<?php print drupal_render($form['options']); ?>
<?php print drupal_render($form['author']); ?>
<?php print drupal_render($form['revision_information']); ?>
<?php print drupal_render($form['path']); ?>
<?php print drupal_render($form['attachments']); ?>
<?php print drupal_render($form['comment_settings']); ?>
<?php print drupal_render($form); ?>