SlideShare uma empresa Scribd logo
1 de 14
Baixar para ler offline
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/

Mais conteúdo relacionado

Mais de 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
 

Mais de 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
 

Último

Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
🐬 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
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
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
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024The Digital Insurer
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
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
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilV3cube
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
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
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
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
 

Último (20)

Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
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...
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
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
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
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
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
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/