Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Working Experience in Table field Contrib Module Drupal 8

Hi Friends, I am Saranya and I am glad to share my experience of my first & recent work in drupal 8 contrib modules with you all.

Features of Tablefield Contrib module:

  1. This module allows to attach tabular data to a node in drupal 8
  2. Tablefield is a field type, supported widget types are text field, i.e In table field, each table cell is a textfield
  3. The input form allow the user to specify the number of rows and columns
  4. Enter data using keyboard or by csv upload
  5. Table data can be downloaded as csv file by your user if you so choose

On the node create page, the Table field will look like:

The Use Case for which we picked this module:

This module was used in IIT International Applicants Portal (IITIAP). IITIAP facilitates foreign students to register for Postgraduate courses across IITs. Indian Institute of Technology, the IITs, provide best of breed technology and research related programs in the field of Engineering and Sciences. Through this Portal foreign students can search and identify relevant courses and complete the entire registration through an easy online process.

We used the Table field module as part of User profile, Application form to capture Users education details. This needed us to extend the module beyond the default test field widget capabilities. Wrote code to extend the support Date & Select list types. The UI was also extended to provide an explicit button for “Add Row”. Fixed issue faced when a table field was left empty or unset.

Used this module to get the user details like completed course or examination details.

Enhancements to Table field module

Select field in table cell:

Introduced as part of Storage Setting form option to define Select fields.

Provided option to:

  1. Get the number of rows that needed select list
  2. The column number (which column select option should append)
  3. Finally the values for each Column

The interface used Ajax to capture the information.

Date field in table cell:

Introduced as part of Storage Setting form option to define Date fields.

Provided option to:

  1. Get the number of rows that needed select list
  2. The column number (which column select option should append)

Added one button as “add row”:

The default module has features to add row and column for an admin user with appropriate permissions. In our case we need the users to be able to only have Add Row permissions alone and not alter the column. Hence created s button as “Add Row”. If the user click that button one row will get added by ajax call. User can add row dynamically whenever they wanted.

Issue when table field was left empty

If user didn’t fill any rows in table and was left empty, they still showed up on the view page. This issue was fixed by not displaying empty rows.

Issue:

After Fix:

 

 

Issue Queue

Select In Table Field
Date in cells of the TableField
Adding Row Dynamically in table field
Disable Empty Cells

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web