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

Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clashcharlottematthew16
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
The Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfThe Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfSeasiaInfotech2
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfRankYa
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsMemoori
 

Kürzlich hochgeladen (20)

Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
The Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfThe Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdf
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
 

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/