First Fieldtype Module

[Brian Scramlin]

Hello,

I am newer to web development, but have fallen in love with Processwire over the past few years. I love the simplicity and flexibility of the entire platform. One area, however, continues to elude me: Modules. 

Desiring to respect the community, I have done my due diligence in reading other posts, the documentation, and learning more about PHP OOP so I better understand the syntax and patterns of Modules.

But, I am still confused and was hoping some interaction would help me. 

For my first module, I am desiring to create a new Fieldtype which allows a user to

1. Visually select an icon from the Font Awesome library (something like this https://codepen.io/scramlo/full/XGaOgv)
2. Render markup.

I have written the necessary parts of the module:

<?php namespace ProcessWire;

class FieldtypeIconPicker extends FieldType implements Module {

  public static function getModuleInfo() {
    return [
      "title" => "Icon Picker",
      "summary" => "The Icon Picker module allows you to preview and render icons from the Font Awesome icon library.",
      "version" => 1,
      "autoload" => true
    ];
  }

  public function ready() {
    if ($this->page->template == "admin") {
      
    }
  }


}

I have been looking at the FieltypeSelect and  FieldtypeColorPicker modules as I thought I could learn from them. 

I see they both start by creating this function and returning the value.

public function getInputfield(Page $page, Field $field) {
	$inputField = $this->modules->get('InputfieldColorPicker');
	
	//lots of magic here

	return $inputField;
}

 

Where does this function get called? 

Please forgive me for my lack of understanding. Here are my confusions:

• I need to create a button that links to my module's JavaScript file. In my JavaScript file I can create a popup with all of the icons. 
• When a user clicks on an icon, I need to set a value somehow in the database. I can use a hidden field if needed, I would suppose. 
• I need to be able to render the output. I am guessing that in my module, something like the following is what I need:

$iconMarkup = "<i class="fa " . $this->icon_class . "></i>";

• Perhaps that is the return value of the getInputField function? 

 

Thank you for your patience and help. Please feel free to let me know if there is documentation I should have read, but missed. I want to work hard to fully grasp module development in ProcessWire.

[bernhard]

Hi Brian,

I wrote a tutorial about this some time ago:

 

It's not complete and building Fieldtypes is not that easy...

One important note:

• "Fieldtype" = the field, including all logic to save the value to the database, store it, etc
• "Inputfield" = the inputfield that is shown to the user (the UI)

Often it is easier to modify an existing Inputfield or extend/modify one via hooks. You can see my first module for an example: 

 

Don't have more time right now, but maybe this already helps a little ? 

[bernhard]

PS: Maybe you want to look at this example: 

? 

[Brian Scramlin]

I am reading up on these links now. Thank you @bernhard! 

[Robin S]

2 hours ago, Brian Scramlin said:

Where does this function get called?

To see all the places where a particular method is called by the core you would need to search the core code. In the case of Fieldtype::getInputfield the most significant places are in Field::getInputfield, which returns the inputfield according to the fieldtype of that field, which in turn is called by Fieldgroup::getPageInputfields, which loops through all the fields that belong to a fieldgroup (you can think of a fieldgroup as being sort of the same as the template) to get and populate their inputfields so they can be displayed in Page Edit (for instance).

But you probably don't need to spend time working through all of that in order to successfully create a Fieldtype module.

An important thing to understand if you don't already is that your Fieldtype module extends the Fieldtype class. This is called Object Inheritance: http://php.net/manual/en/language.oop5.inheritance.php

So all the methods in the Fieldtype class also belong to your module, and the code for those methods is what you see in Fieldtype.php unless you override the method by including it in your module.

To illustrate with an example, we can see that Fieldtype::getBlankValue returns an empty string: https://github.com/processwire/processwire/blob/cbfe97de207e3166451f16865429c02c081791e8/wire/core/Fieldtype.php#L494
If we look at FieldtypeText we see that it doesn't include a getBlankValue() method - it doesn't need to because the getBlankValue() method of Fieldtype already returns the right value for a blank text field. But if we look at FieldtypeCheckbox we see it does include a getBlankValue() method - that's because an empty string isn't the right type of value for a blank (unchecked) checkbox, so it implements its own method to return 0.

[kongondo]

In addition..just in case you missed it:

https://processwire.com/api/ref/fieldtype/get-inputfield/