SlideShare ist ein Scribd-Unternehmen logo
1 von 14
Downloaden Sie, um offline zu lesen
Business Apps with
Drupal's webform module
  DrupalCamp Atlanta - Oct 27, 2012


  Jitesh Doshi - jitesh@spinspire.com
      SpinSpire: Enterprise Drupal!
          http://spinspire.com/
What is webform module?
Webform module lets you ...
● Design custom forms and save submissions.
● Use most of the standard components such
  as textfield, select, textarea,
  checkbox/radios, even file uploads.
● Send emails driven by submitted data.
● Let Anonymous users create submissions.
● Download submission reports.
● Lightweight: Each submission is just a
  record in a table, not a whole new node.
● Very flexible data model.
Use Cases
Increasing order of complexity
● Contact form
● Survey / Poll
● Content submission
● Event registration
● Case tracking system
● Order entry system
● E-commerce: ordering, payment, delivery ...
● Or whatever you can dream up!
Helper Modules
● webform_conditional - show a component
  based on value of another (built in with v4)
● webform_rules - react to submissions
● webform_tokens - use webform submitted
  data as token values (built in with v4)
● fillpdf - populate PDF form templates with
  webform submitted data
● Attach webform forms to non-webform
  content types
Beyond Configuration
● Add BCC field to any email component.
● Single-use options: options used by a
  submission become unavailable.
● Dynamic option lists: options generated by
  code (e.g. fetch from DB or webservice)
● Replace listboxes with multiselect widget.
● Store/load webform data to/from your own
  custom tables.
● Suppress submission email until payment
  arrives.
Webform Data Structures
$node = $form['#node'];
$webform = $node->webform;
$components = $webform['components'];
$component['cid'], $component['name'],
$component['type'], etc.;
// The one place to store all extension data.
$component['extra']; // serialized metadata
Webform API Hooks
● hook_form_webform_client_form_alter
● hook_form_webform_component_edit_form_
  alter
● hook_webform_submission_*: load, presave,
  insert, update, delete
● hook_webform_select_options_info & _alter
● hook_webform_submission_actions
● hook_webform_component_info & _alter
Silver Bullet: $component['extra']
● Hierarchical tree of metadata(array of
  arrays)
● $component['extra'], form alter hooks and
  '#parents' attribute make a killer
  combination!
● Alter component edit forms to bind to
  $component['extra'] at design time.
● Alter client forms to use $component['extra']
  at runtime and drive your custom code.
Generalized approach to
Customizing Webforms
1. Create custom module: mymod.info &
   mymod.module.
2. List 'webform' as dependency in mymod.info.
3. Implement two hooks as below.
 function mymod_form_webform_component_edit_form_alter
      (&$form, &$form_state) {
   $form['mydata'] = array(
      '#type' => 'textfield',
      '#parents' => array('extra', 'mydata'),
   );
 }
 function mymod_form_webform_client_form_alter
      (&$form, &$form_state) {
   // use $component['extra']['mydata'] ...
 }
JavaScript behaviors
// In mymod.module
function mymod_form_webform_client_form_alter
    (&$form, &$form_state) {
  drupal_add_js('mymod.js');
  $data['mymod']['mydata'] = $component['extra']
['mydata'];
  drupal_add_js($data, 'setting');
}
// In mymod.js
(function($){
  Drupal.behaviors.mymod {
    attach: function(context, settings) {
       // use settings.mymod.mydata ...
       context.find('comp..').val(settings.mymod.mydata
[..]);
    }
  }
})(jQuery);
Example: Email component BCC
function wfdemo_form_webform_component_edit_form_alter(..)
{
  $component_type = $form['type']['#value'];
  $component = @$form_state['build_info']['args'][1];
  if($component_type == 'email') {
    $form['extra']['bcc'] = array(
       '#type' => 'textfield',
       '#title' => t('Additional BCC'),
       '#default_value' => @$component['extra']['bcc'],
    );
  }
}
function wfdemo_mail_alter(&$message) {
  $node = $message['params']['node'];
  $cid = (int)$message['params']['email']['email'];
  $component = $node->webform['components'][$cid];
  $bcc = $component['extra']['bcc'];
  if($bcc) {
    $message['headers']['Bcc'] = $bcc;
  }
Screenshot: Component Edit Form




If you want to place the input textbox
elsewhere, then change $form['extra']['bcc'] to
some other path. But then you'll also have to
set '#parents' attribute to array('extra', 'bcc') ...
What else is possible?
● save webform submission data to custom
  tables while using webform UI.
● webform_remote_post - post the webform
  submission data to a remote webservice.
  See http://drupal.org/sandbox/enrique.
  delgado/1786762
● Also checkout webform UI builder - http:
  //drupal.org/project/form_builder
● Tell me what you might do with
  webforms?!?!
Q&A
               Ask any questions.
         Or email jitesh@spinspire.com.
          Download source code from
http://drupal.org/sandbox/jitesh_doshi/1811566


Download this presentation from http://spinspire.
                    com/

Weitere ähnliche Inhalte

Mehr von DrupalcampAtlanta2012

Getting Started with Drupal Services with Randall Kent @ DrupalCamp Atlanta 2012
Getting Started with Drupal Services with Randall Kent @ DrupalCamp Atlanta 2012Getting Started with Drupal Services with Randall Kent @ DrupalCamp Atlanta 2012
Getting Started with Drupal Services with Randall Kent @ DrupalCamp Atlanta 2012DrupalcampAtlanta2012
 
Drupalcamp armedia phonegap_oct2012_print
Drupalcamp armedia phonegap_oct2012_printDrupalcamp armedia phonegap_oct2012_print
Drupalcamp armedia phonegap_oct2012_printDrupalcampAtlanta2012
 
What to do when things go wrong with Drupal
What to do when things go wrong with DrupalWhat to do when things go wrong with Drupal
What to do when things go wrong with DrupalDrupalcampAtlanta2012
 
Drupal + HTML5 + CSS3 + JS = Rich Internet Application
Drupal + HTML5 + CSS3 + JS = Rich Internet ApplicationDrupal + HTML5 + CSS3 + JS = Rich Internet Application
Drupal + HTML5 + CSS3 + JS = Rich Internet ApplicationDrupalcampAtlanta2012
 

Mehr von DrupalcampAtlanta2012 (6)

Getting Started with Drupal Services with Randall Kent @ DrupalCamp Atlanta 2012
Getting Started with Drupal Services with Randall Kent @ DrupalCamp Atlanta 2012Getting Started with Drupal Services with Randall Kent @ DrupalCamp Atlanta 2012
Getting Started with Drupal Services with Randall Kent @ DrupalCamp Atlanta 2012
 
Advanced theming
Advanced themingAdvanced theming
Advanced theming
 
Drupalcamp armedia phonegap_oct2012_print
Drupalcamp armedia phonegap_oct2012_printDrupalcamp armedia phonegap_oct2012_print
Drupalcamp armedia phonegap_oct2012_print
 
What to do when things go wrong with Drupal
What to do when things go wrong with DrupalWhat to do when things go wrong with Drupal
What to do when things go wrong with Drupal
 
Getting started with Drush
Getting started with DrushGetting started with Drush
Getting started with Drush
 
Drupal + HTML5 + CSS3 + JS = Rich Internet Application
Drupal + HTML5 + CSS3 + JS = Rich Internet ApplicationDrupal + HTML5 + CSS3 + JS = Rich Internet Application
Drupal + HTML5 + CSS3 + JS = Rich Internet Application
 

Kürzlich hochgeladen

GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?Igalia
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessPixlogix Infotech
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 

Kürzlich hochgeladen (20)

GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 

Business Apps with Drupal's webform module

  • 1. Business Apps with Drupal's webform module DrupalCamp Atlanta - Oct 27, 2012 Jitesh Doshi - jitesh@spinspire.com SpinSpire: Enterprise Drupal! http://spinspire.com/
  • 2. What is webform module? Webform module lets you ... ● Design custom forms and save submissions. ● Use most of the standard components such as textfield, select, textarea, checkbox/radios, even file uploads. ● Send emails driven by submitted data. ● Let Anonymous users create submissions. ● Download submission reports. ● Lightweight: Each submission is just a record in a table, not a whole new node. ● Very flexible data model.
  • 3. Use Cases Increasing order of complexity ● Contact form ● Survey / Poll ● Content submission ● Event registration ● Case tracking system ● Order entry system ● E-commerce: ordering, payment, delivery ... ● Or whatever you can dream up!
  • 4. Helper Modules ● webform_conditional - show a component based on value of another (built in with v4) ● webform_rules - react to submissions ● webform_tokens - use webform submitted data as token values (built in with v4) ● fillpdf - populate PDF form templates with webform submitted data ● Attach webform forms to non-webform content types
  • 5. Beyond Configuration ● Add BCC field to any email component. ● Single-use options: options used by a submission become unavailable. ● Dynamic option lists: options generated by code (e.g. fetch from DB or webservice) ● Replace listboxes with multiselect widget. ● Store/load webform data to/from your own custom tables. ● Suppress submission email until payment arrives.
  • 6. Webform Data Structures $node = $form['#node']; $webform = $node->webform; $components = $webform['components']; $component['cid'], $component['name'], $component['type'], etc.; // The one place to store all extension data. $component['extra']; // serialized metadata
  • 7. Webform API Hooks ● hook_form_webform_client_form_alter ● hook_form_webform_component_edit_form_ alter ● hook_webform_submission_*: load, presave, insert, update, delete ● hook_webform_select_options_info & _alter ● hook_webform_submission_actions ● hook_webform_component_info & _alter
  • 8. Silver Bullet: $component['extra'] ● Hierarchical tree of metadata(array of arrays) ● $component['extra'], form alter hooks and '#parents' attribute make a killer combination! ● Alter component edit forms to bind to $component['extra'] at design time. ● Alter client forms to use $component['extra'] at runtime and drive your custom code.
  • 9. Generalized approach to Customizing Webforms 1. Create custom module: mymod.info & mymod.module. 2. List 'webform' as dependency in mymod.info. 3. Implement two hooks as below. function mymod_form_webform_component_edit_form_alter (&$form, &$form_state) { $form['mydata'] = array( '#type' => 'textfield', '#parents' => array('extra', 'mydata'), ); } function mymod_form_webform_client_form_alter (&$form, &$form_state) { // use $component['extra']['mydata'] ... }
  • 10. JavaScript behaviors // In mymod.module function mymod_form_webform_client_form_alter (&$form, &$form_state) { drupal_add_js('mymod.js'); $data['mymod']['mydata'] = $component['extra'] ['mydata']; drupal_add_js($data, 'setting'); } // In mymod.js (function($){ Drupal.behaviors.mymod { attach: function(context, settings) { // use settings.mymod.mydata ... context.find('comp..').val(settings.mymod.mydata [..]); } } })(jQuery);
  • 11. Example: Email component BCC function wfdemo_form_webform_component_edit_form_alter(..) { $component_type = $form['type']['#value']; $component = @$form_state['build_info']['args'][1]; if($component_type == 'email') { $form['extra']['bcc'] = array( '#type' => 'textfield', '#title' => t('Additional BCC'), '#default_value' => @$component['extra']['bcc'], ); } } function wfdemo_mail_alter(&$message) { $node = $message['params']['node']; $cid = (int)$message['params']['email']['email']; $component = $node->webform['components'][$cid]; $bcc = $component['extra']['bcc']; if($bcc) { $message['headers']['Bcc'] = $bcc; }
  • 12. Screenshot: Component Edit Form If you want to place the input textbox elsewhere, then change $form['extra']['bcc'] to some other path. But then you'll also have to set '#parents' attribute to array('extra', 'bcc') ...
  • 13. What else is possible? ● save webform submission data to custom tables while using webform UI. ● webform_remote_post - post the webform submission data to a remote webservice. See http://drupal.org/sandbox/enrique. delgado/1786762 ● Also checkout webform UI builder - http: //drupal.org/project/form_builder ● Tell me what you might do with webforms?!?!
  • 14. Q&A Ask any questions. Or email jitesh@spinspire.com. Download source code from http://drupal.org/sandbox/jitesh_doshi/1811566 Download this presentation from http://spinspire. com/