SlideShare a Scribd company logo
1 of 10
Extend FieldWidgets in Drupal 8
Pravinkumar MR
https://www.drupal.org/u/mrpravin
Agenda
❖Intro
❖About Annotations
❖Why Annotations
❖How to extend FieldWidgets by using Annotations-
based Plugins
● Widgets are basically handling how fields are displayed in
forms.
● In Drupal 8, FieldWidgets have moved from hook
implementations to plugins.
● To extend FieldWidgets in Drupal 8, we need a class with
the FieldWidgets annotation (@Fieldwidget)
INTRO
Annotations are one of the
new concept in Drupal 8
that is written in php code
comments.
In sidebar, you can see a
class or function and it
contains metadata about
the function or class.
Annotations
/**
* Plugin implementation of the
'text_textfield' widget.
*
* @FieldWidget(
* id = "text_textfield",
* module = "text",
* label = @Translation("Text
field"),
* field_types = {
* "text"
* }
* )
*
class TextfieldWidget extends
WidgetBase {
● The annotation meta-data lives in the same file and is an integral
part of the class that implements the plugin.
● This makes it easier to find and easier to create a new custom
plugin by simply copying an existing one.
● In addition, Implementation used by Drupal to parse the annotation
simply tokenizes the text of the file without including it as a PHP
file, so memory use is minimized.
● The annotations syntax comes from the Doctrine project. Which is
nothing but the docblock annotations.
Why Annotations?
Use Case
Sample use case from Inline Entity Form
Original node removed from backend when remove contacts.
Contacts field is a Entity reference field with unlimited
cardinality.
By showing this contact with Inline Entity Form - complex
FieldWidgets on node edit page.
To avoid this we can extend this FieldWidget...
Extend FieldWidgets by using Annotations
/**
* Extended complex inline widget.
*
* @FieldWidget(
* id = "extended_inline_entity_form_complex",
* label = @Translation("Extended Inline entity form -
Complex"),
* field_types = {
* "entity_reference",
* "entity_reference_revisions"
* },
* multiple_values = true
* )
*/
class ExtendedInlineEntityForm extends
InlineEntityFormComplex {
/**
* Complex inline widget.
*
* @FieldWidget(
* id = "inline_entity_form_complex",
* label = @Translation("Inline entity form -
Complex"),
* field_types = {
* "entity_reference"
* },
* multiple_values = true
* )
*/
class InlineEntityFormComplex extends
InlineEntityFormBase implements
ContainerFactoryPluginInterface {
Demo
CONCLUSION
At the end, we know about Annotations Plugin system how it
works in Drupal 8 & How to extend fieldwidgets based on our
requirements.
THANKS!
QUESTIONS?

More Related Content

More from valuebound

Scaling Drupal for High Traffic Websites
Scaling Drupal for High Traffic WebsitesScaling Drupal for High Traffic Websites
Scaling Drupal for High Traffic Websitesvaluebound
 
Drupal 7 to Drupal 10 Migration A Fintech Strategic Blueprint (1).pdf
Drupal 7 to Drupal 10 Migration A Fintech Strategic Blueprint (1).pdfDrupal 7 to Drupal 10 Migration A Fintech Strategic Blueprint (1).pdf
Drupal 7 to Drupal 10 Migration A Fintech Strategic Blueprint (1).pdfvaluebound
 
How to Use DDEV to Streamline Your Drupal Development Process.
How to Use DDEV to Streamline Your Drupal Development Process.How to Use DDEV to Streamline Your Drupal Development Process.
How to Use DDEV to Streamline Your Drupal Development Process.valuebound
 
How to Use AWS to Automate Your IT Operation| Valuebound
How to Use AWS to Automate Your IT Operation| Valuebound How to Use AWS to Automate Your IT Operation| Valuebound
How to Use AWS to Automate Your IT Operation| Valuebound valuebound
 
How to Use Firebase to Send Push Notifications to React Native and Node.js Apps
How to Use Firebase to Send Push Notifications to React Native and Node.js AppsHow to Use Firebase to Send Push Notifications to React Native and Node.js Apps
How to Use Firebase to Send Push Notifications to React Native and Node.js Appsvaluebound
 
Mastering Drupal Theming
Mastering Drupal ThemingMastering Drupal Theming
Mastering Drupal Themingvaluebound
 
The Benefits of Cloud Engineering
The Benefits of Cloud EngineeringThe Benefits of Cloud Engineering
The Benefits of Cloud Engineeringvaluebound
 
Cloud Computing
Cloud ComputingCloud Computing
Cloud Computingvaluebound
 
The Future of Cloud Engineering: Emerging Trends and Technologies to Watch in...
The Future of Cloud Engineering: Emerging Trends and Technologies to Watch in...The Future of Cloud Engineering: Emerging Trends and Technologies to Watch in...
The Future of Cloud Engineering: Emerging Trends and Technologies to Watch in...valuebound
 
Deep dive into ChatGPT
Deep dive into ChatGPTDeep dive into ChatGPT
Deep dive into ChatGPTvaluebound
 
Content Creation Solution | Valuebound
Content Creation Solution | ValueboundContent Creation Solution | Valuebound
Content Creation Solution | Valueboundvaluebound
 
Road ahead for Drupal 8 contributed projects
Road ahead for Drupal 8 contributed projectsRoad ahead for Drupal 8 contributed projects
Road ahead for Drupal 8 contributed projectsvaluebound
 
Chatbot with RASA | Valuebound
Chatbot with RASA | ValueboundChatbot with RASA | Valuebound
Chatbot with RASA | Valueboundvaluebound
 
Drupal and Artificial Intelligence for Personalization
Drupal and Artificial Intelligence for Personalization Drupal and Artificial Intelligence for Personalization
Drupal and Artificial Intelligence for Personalization valuebound
 
Drupal growth in last year | Valuebound
Drupal growth in last year | ValueboundDrupal growth in last year | Valuebound
Drupal growth in last year | Valueboundvaluebound
 
BE NEW TO THE WORLD "BRAVE FROM CHROME"
BE NEW TO THE WORLD "BRAVE FROM CHROME"BE NEW TO THE WORLD "BRAVE FROM CHROME"
BE NEW TO THE WORLD "BRAVE FROM CHROME"valuebound
 
Event loop in browser
Event loop in browserEvent loop in browser
Event loop in browservaluebound
 
The Basics of MongoDB
The Basics of MongoDBThe Basics of MongoDB
The Basics of MongoDBvaluebound
 
React JS: A Secret Preview
React JS: A Secret PreviewReact JS: A Secret Preview
React JS: A Secret Previewvaluebound
 
Dependency Injection in Drupal 8
Dependency Injection in Drupal 8Dependency Injection in Drupal 8
Dependency Injection in Drupal 8valuebound
 

More from valuebound (20)

Scaling Drupal for High Traffic Websites
Scaling Drupal for High Traffic WebsitesScaling Drupal for High Traffic Websites
Scaling Drupal for High Traffic Websites
 
Drupal 7 to Drupal 10 Migration A Fintech Strategic Blueprint (1).pdf
Drupal 7 to Drupal 10 Migration A Fintech Strategic Blueprint (1).pdfDrupal 7 to Drupal 10 Migration A Fintech Strategic Blueprint (1).pdf
Drupal 7 to Drupal 10 Migration A Fintech Strategic Blueprint (1).pdf
 
How to Use DDEV to Streamline Your Drupal Development Process.
How to Use DDEV to Streamline Your Drupal Development Process.How to Use DDEV to Streamline Your Drupal Development Process.
How to Use DDEV to Streamline Your Drupal Development Process.
 
How to Use AWS to Automate Your IT Operation| Valuebound
How to Use AWS to Automate Your IT Operation| Valuebound How to Use AWS to Automate Your IT Operation| Valuebound
How to Use AWS to Automate Your IT Operation| Valuebound
 
How to Use Firebase to Send Push Notifications to React Native and Node.js Apps
How to Use Firebase to Send Push Notifications to React Native and Node.js AppsHow to Use Firebase to Send Push Notifications to React Native and Node.js Apps
How to Use Firebase to Send Push Notifications to React Native and Node.js Apps
 
Mastering Drupal Theming
Mastering Drupal ThemingMastering Drupal Theming
Mastering Drupal Theming
 
The Benefits of Cloud Engineering
The Benefits of Cloud EngineeringThe Benefits of Cloud Engineering
The Benefits of Cloud Engineering
 
Cloud Computing
Cloud ComputingCloud Computing
Cloud Computing
 
The Future of Cloud Engineering: Emerging Trends and Technologies to Watch in...
The Future of Cloud Engineering: Emerging Trends and Technologies to Watch in...The Future of Cloud Engineering: Emerging Trends and Technologies to Watch in...
The Future of Cloud Engineering: Emerging Trends and Technologies to Watch in...
 
Deep dive into ChatGPT
Deep dive into ChatGPTDeep dive into ChatGPT
Deep dive into ChatGPT
 
Content Creation Solution | Valuebound
Content Creation Solution | ValueboundContent Creation Solution | Valuebound
Content Creation Solution | Valuebound
 
Road ahead for Drupal 8 contributed projects
Road ahead for Drupal 8 contributed projectsRoad ahead for Drupal 8 contributed projects
Road ahead for Drupal 8 contributed projects
 
Chatbot with RASA | Valuebound
Chatbot with RASA | ValueboundChatbot with RASA | Valuebound
Chatbot with RASA | Valuebound
 
Drupal and Artificial Intelligence for Personalization
Drupal and Artificial Intelligence for Personalization Drupal and Artificial Intelligence for Personalization
Drupal and Artificial Intelligence for Personalization
 
Drupal growth in last year | Valuebound
Drupal growth in last year | ValueboundDrupal growth in last year | Valuebound
Drupal growth in last year | Valuebound
 
BE NEW TO THE WORLD "BRAVE FROM CHROME"
BE NEW TO THE WORLD "BRAVE FROM CHROME"BE NEW TO THE WORLD "BRAVE FROM CHROME"
BE NEW TO THE WORLD "BRAVE FROM CHROME"
 
Event loop in browser
Event loop in browserEvent loop in browser
Event loop in browser
 
The Basics of MongoDB
The Basics of MongoDBThe Basics of MongoDB
The Basics of MongoDB
 
React JS: A Secret Preview
React JS: A Secret PreviewReact JS: A Secret Preview
React JS: A Secret Preview
 
Dependency Injection in Drupal 8
Dependency Injection in Drupal 8Dependency Injection in Drupal 8
Dependency Injection in Drupal 8
 

Recently uploaded

Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 3652toLead Limited
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Paola De la Torre
 
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
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK
 
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
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren
 
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
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersThousandEyes
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
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
 
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
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
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
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik
 
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
 

Recently uploaded (20)

Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
 
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
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
 
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
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
 
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...
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
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
 
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
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
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
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
 
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
 

Extend FieldWidgets in Drupal 8

  • 1. Extend FieldWidgets in Drupal 8 Pravinkumar MR https://www.drupal.org/u/mrpravin
  • 2. Agenda ❖Intro ❖About Annotations ❖Why Annotations ❖How to extend FieldWidgets by using Annotations- based Plugins
  • 3. ● Widgets are basically handling how fields are displayed in forms. ● In Drupal 8, FieldWidgets have moved from hook implementations to plugins. ● To extend FieldWidgets in Drupal 8, we need a class with the FieldWidgets annotation (@Fieldwidget) INTRO
  • 4. Annotations are one of the new concept in Drupal 8 that is written in php code comments. In sidebar, you can see a class or function and it contains metadata about the function or class. Annotations /** * Plugin implementation of the 'text_textfield' widget. * * @FieldWidget( * id = "text_textfield", * module = "text", * label = @Translation("Text field"), * field_types = { * "text" * } * ) * class TextfieldWidget extends WidgetBase {
  • 5. ● The annotation meta-data lives in the same file and is an integral part of the class that implements the plugin. ● This makes it easier to find and easier to create a new custom plugin by simply copying an existing one. ● In addition, Implementation used by Drupal to parse the annotation simply tokenizes the text of the file without including it as a PHP file, so memory use is minimized. ● The annotations syntax comes from the Doctrine project. Which is nothing but the docblock annotations. Why Annotations?
  • 6. Use Case Sample use case from Inline Entity Form Original node removed from backend when remove contacts. Contacts field is a Entity reference field with unlimited cardinality. By showing this contact with Inline Entity Form - complex FieldWidgets on node edit page. To avoid this we can extend this FieldWidget...
  • 7. Extend FieldWidgets by using Annotations /** * Extended complex inline widget. * * @FieldWidget( * id = "extended_inline_entity_form_complex", * label = @Translation("Extended Inline entity form - Complex"), * field_types = { * "entity_reference", * "entity_reference_revisions" * }, * multiple_values = true * ) */ class ExtendedInlineEntityForm extends InlineEntityFormComplex { /** * Complex inline widget. * * @FieldWidget( * id = "inline_entity_form_complex", * label = @Translation("Inline entity form - Complex"), * field_types = { * "entity_reference" * }, * multiple_values = true * ) */ class InlineEntityFormComplex extends InlineEntityFormBase implements ContainerFactoryPluginInterface {
  • 9. CONCLUSION At the end, we know about Annotations Plugin system how it works in Drupal 8 & How to extend fieldwidgets based on our requirements.