Categories

(111)
(62)
(152)
(21)

Examples of theme_table() and theme_fieldset() functions in Drupal 7

09.05.2011
Examples of theme_table() and theme_fieldset() functions in Drupal 7
Author:

In Drupal 7 API there is a chapter dedicated to site theming. All elements of a site, without exclusion, should go through the theming process. But first of all theming itself should be set up. From a Drupal developer's point of view, almost everything is done with the help of functions and there are many of them that facilitate theming in Drupal 7, too. The most important one is the theme() function. We'll look at 2 of them. They are:

  • theme_table() – function for table formatting.
  • theme_fieldset() – function for drop-down list.

Our tasks are as follows:

  1. To make a table with static data sized 3/3 with the help of theme_table().
  2. To organize output of all site articles that have the following fields: article name (in an active link) and link for editting the article. To draw up a similar table to sit within reach with a link to perform the article deletion.
  3. To outlet 2 drop-down lists using theme_fieldset() where in list 1 a description to the table is given which relates to node editting, and list 2 outlets information about table of node deleting.
  4. To make 2 drop-down lists that will contain our tables.

Task 1

Let's start with the theme_table().

Let's create a file of our module, which in our case will be table_page.module file. First of all we need to create a page where our table will be situated. In order to create a page we use hook_menu, in our case it will look the following way:

php
/** 
 * Implements hook_menu(). 
 */ 
// function declaration 
function table_page_menu() {  
   // we create variable that indicates that page path will be «our_site/ table», 
   // our page has the following parameters 
  $items['table'] = array( 
     // page name 
    'title' => t('Page with table'),  
     // function that forms data for a table 
    'page callback' => 'main_table',  
     // access is true of course 
    'access arguments' => array('TRUE'),  
  );  
  // let's not forget to return our variable 
  return $items; 
} 

/** 
 * Function main_table(). 
 */  
// create function for data outlet for the created page 
function main_table() {  
  // we'll leave the page empty for now 
  return '';  
} 

Now it's time to remember that a table in html is initiated with table tags, then the table lines are formed with the help of tr tag and later the cells are created, again with td tag. But it's not us who will have to form something, because function theme_table() will work with tags, and we'll set the function itself.

Every table must have a header. $header will consist of 1 row and 3 columns in the row.

That's how it should be done:

php
//we create a variable that contains an array  
$header = array( 
// now we create another array where data of first cell is situated
  array('data' => t('Header cell1')),  
// second cell 
  array('data' => t('Header cell2')), 
// and third cell 
  array('data' => t('Header cell3')) 
); 

Table header is created, now let's work with table body. We'll create 2 rows that will have 3 columns each.

php
// creating first row 
$row [] = array( 
  // output 1 cell in 1 row 
  array('data' => t('Row 1 – Cell 1')),  
  // second cell 
  array('data' => t('Row 1 – Cell 2')),  
  // third cell   
  array('data' => t('Row 1 – Cell 3'))  
); 
//output of second row 
$row [] = array(  
  // cell 1 
  array('data' => t('Row 2 – Cell 1')),  
  // cell 2 
  array('data' => t('Row 2 – Cell 2')),  
  // cell 3 
  array('data' => t('Row 2 – Cell 3'))  
); 

Now that we've completed the data input, we need to indicate the functons correctly. In our case the function has to contain the following type:

 php
// we use theme function and  assign table parameter to it
theme('table',  
           //creating array for data 
           array( 
             // value header will be in $header 
             'header' => $header,  
             // value rows will be taken out of $rows 
             'rows'=> $rows  
           ) 
); 

Now we have the general view of our code as follows:

php
/** 
 * Implements hook_menu(). 
 */   
function table_page_menu() { 
  $items['table'] = array( 
    'title' => t('Page with table'), 
    'page callback' => 'main_table', 
    'access arguments' => array('TRUE'), 
  ); 
  return $items; 
} 

/** 
 * Function main_table(). 
 */  
function main_table() {  
  // creating value that contains array  
  $header = array( 
    // creating array that contains data from first cell
    array('data' => t('Header cell1')),   
    // second cell 
    array('data' => t('Header cell2')),   
    // and third cell 
    array('data' => t('Header cell3'))   
  ); 
  // creating first row 
  $rows[] = array( 
    // output of first cell in 1 row 
    array('data' => t('Row 1 – Cell 1')),  
    // second cell 
    array('data' => t('Row 1 – Cell 2')),  
    // third cell  
    array('data' => t('Row 1 – Cell 3'))   
  ); 
  //second row output 
  $rows[] = array(  
    array('data' => t('Row 2 – Cell 1')),  
    array('data' => t('Row 2 – Cell 2')), 
    array('data' => t('Row 2 – Cell 3')) 
  ); 

  return theme('table', array('header' => $header, 'rows'=> $rows));
   
} 

The general view will be the following:

The general view will be the following

Task 2

Now let's output all nodes from the site in which the edit link will be placed. Our function will look the following way:

php
/** 
 * Function main_table(). 
 */  
//declare the function 
function main_table() {  
  // create $header, where an array indicating row is  
  // cells have the following content 
  $header_table_edit = array(  
    // first cell has the following text 'Title'  
    array('data' => t('Title')),  
    // second cell has the following text 'Link to edit'
    array('data' => t('Link to edit')) 
  ); 
  // make query to database where we choose numbers of nodes and the name from the table node
  $query = db_select('node', 'n') 
    ->fields('n', array('nid', 'title')) 
    ->execute() 
    ->fetchAll();  
  //output all our data from construction foreach  
  foreach ($query as $record_edit_table) { 
    //output a row that comtains 
    $rows_table_edit[] =  
      // celles      array(  
        // in first cell there is an entry  
        array(   
          // there is link record of node name  in our cell 
          // with the help of $record_table_edit -> title, link itself will look the following way 
          // «'node/' . $record_table_edit -> nid» - i.e. we'll be redirected on the address like:  
          // «our_site/node/'node number'» 
          'data' => l($record_edit_table -> title, 'node/' . $record_edit_table -> nid)  
        ), 
        // second cell has link entry  
        array(  
           //link will have value 'edit node',  
           //clicking on it we will be redirected on address like
           // «our_site / node / node_number/ edit» 
          'data' => l(t('edit node'), 'node/' . $record_edit_table -> nid . '/edit') 
        ) 
    );  
  } 
  // create $caption with row value 'Table for edit nodes'
  $caption_table_edit = t('Table for edit nodes'); 
  // create function theme, that has value 'table' and outputs
  return theme('table',   
      array( 
               // table header is situated in $header_edit_table
              'header' => $header_table_edit,   
              // table body is in $rows_edit_table 
              'rows'     => $rows_table_edit,   
              // table caption will be in $caption_edit_table
              'caption' => $caption_table_edit 
            ) 
  ); 
} 

After we launch script, we'll see the following:

After we launch script, we'll see the following

The site has only 3 articles with titles being output and in the right column we see an active link for certain content editiing.

Then we'll create a similar table with the only ajustment made for the link (right side column) to help activate the node deletion. That's how the code will eventually look like:

php
// all variables will have number 2 added into title 
$header_table_delete = array(  
    array('data' => t('Title')),  
    array('data' => t('Link delete'))  
  ); 
  foreach ($query as $record_table_delete) { 
    $rows_table_delete[] = 
      array( 
        array( 
          'data' => l($record_table_delete -> title,'node/' .$record_table_delete -> nid) 
        ), 
        array( 
          // path to node deletion 
          'data' => l(t('delete node'),'node/' .$record_table_delete -> nid . '/delete')  
        ) 
    );  
  } 
  // table caption 
  $caption_table_delete = t('Table for delete nodes');  
  // we put node edi table in here 
  $table_edit = theme('table',   
    array('header'  => $header_table_edit,  
          'rows'    => $rows_table_edit, 
          'caption' => $caption_table_edit 
          ) 
  );  
  // in this variable we'll see a function that will 
  // form a table with a link to delete node
  $table_delete = theme('table',
    array('header'  => $header_table_delete,  
          'rows'    => $rows_table_delete, 
          'caption' => $caption_table_delete 
          ) 
  ); 
  // return table with edit links first($table_edit),  
  // then output table with delete links ($table_delete).

return "$table_edit" . "$table_delete";

The whole table will look the following way:

The whole table will look the following way

Task 3

In this assignment we will have to make 2 drop-down lists. A drop-down list is made with the help of such tags as fieldset, legend and special classes of CSS that form drop-down list. Let's look at script.

drupal_add_library('system', 'drupal.collapse');

this function is necessary because we upload library here that will turn on the class we are looking for.

 php
// create variable for drop-down list   
// to output information about node editting table 
$edit_element = array( 
                      // list title 
                      '#title'          => t('Table for edit node'), 
                      // content fieldset-а 
                      '#children'    => t('This is main text in fieldset! Table contains link for edit node'), 
                      // list of variable 
                      '#collapsible' => true,   
                      // and collapsed 
                      '#collapsed'  => true, 
                      // we indicate in attributes that specified classes must be used
                      '#attributes'  => array(  
                                              'class' => array('collapsible', 'collapsed')
                                              ), 
                      ); 
// input a function $fieldset_edit that will output field into 
$fieldset_edit = theme('fieldset', array('element' => $edit_element)); 

// analogic to previous script 
$delete_element = array( 
                      '#title'       => t('Table for delete node'),
                      '#children'    => t('This is main text in fieldset! Table contains link for delete node'),
                      '#collapsible' => true, 
                      '#collapsed'   => true, 
                      '#attributes'  => array( 
                                              'class' => array('collapsible', 'collapsed')
                                              ), 
                      ); 
 $fieldset_delete = theme('fieldset', array('element' => $delete_element));
  // returning our data 
  return "$fieldset_edit" . "$fieldset_delete "; 

We'll see the following picture in the browser:

We'll see the following picture in the browser

If we open lists, we'll see the following:

If we open lists, we'll see the following

As you see, once it's finished and done the liststhe processdoesn't seem to be complicated. Now we get down to the last task.

Task 4

We need to put our newly created tables into the fieldset-lists. If you have handled all previous tasks, task 4 will nto be a problem. Let's look at the code that has to be changed.

php
$edit_element = array( 
                      '#title'         => t('Table for edit node'),
                      // we add node edit table in here 
                      '#children'    => t('This is main text in fieldset! Table contains link for edit node') . $edit_table, 
                      '#collapsible' => true, 
                      '#collapsed'   => true, 
                      '#attributes'  => array( 
                                              'class' => array('collapsible', 'collapsed')
                                              ), 
                      ); 
$fieldset_edit = theme('fieldset', array('element' => $edit_element));

$delete_element = array( 
                      '#title'           => t('Table for delete node'),
                       // here we add our node delete table
                      '#children'    => t('This is main text in fieldset! Table contains link for delete node') . $delete_table,  
                      '#collapsible' => true, 
                      '#collapsed'   => true, 
                      '#attributes'  => array( 
                                              'class' => array('collapsible', 'collapsed')
                                              ), 
                      ); 
 $fieldset_delete = theme('fieldset', array('element' => $delete_element));
  // and we output only 2 fieldset-s 
  return "$fieldset_edit" . "$fieldset_delete";   

You can see the result on the next screen:

You can see the result on the next screen

All the tasks are done now!

9 votes, Rating: 4.6

Read also

1

In this post the bases of creating environment for Drupal projects development on the basis of Debian 6 "Squeeze" will be described. Having this, everyone will be able to practice setting OS...

2

Being involved in development process one has got to realize actions/commands for which he has not been granted enough rights or the user whose server has launched and executed Drupal, is lacking...

3

One of Drupal 7's major advantages over its precursors is its flexibility with settings and systems. Drupal...

4

Late in April of the current year Google Analytics representatives have announced in their official blog about launching of beta-testing of new interface.

In this article I want to share...

5

If someone's likely to be challanged with the necessity to have the attached PDF document displayed on the content view ...

Need a quote? Let's discuss the project

Are you looking for someone to help you with your Drupal Web Development needs? Let’s get in touch and discuss the requirements of your project. We would love to hear from you.

Join the people who have already subscribed!

Want to be aware of important and interesting things happening? We will inform you about new blog posts on Drupal development, design, QA testing and more, as well news about Drupal events.

No charge. Unsubscribe anytime