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

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
 
The Benefits of Cloud Engineering
The Benefits of Cloud EngineeringThe Benefits of Cloud Engineering
The Benefits of Cloud Engineering
valuebound
 
Cloud Computing
Cloud ComputingCloud Computing
Cloud Computing
valuebound
 
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
 

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

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Recently uploaded (20)

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
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
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
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
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 

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.