BUILD YOUR OWN custom field - COOLCAT creations · Joomla · 2018-04-14 · 1. create an override...
Transcript of BUILD YOUR OWN custom field - COOLCAT creations · Joomla · 2018-04-14 · 1. create an override...
![Page 1: BUILD YOUR OWN custom field - COOLCAT creations · Joomla · 2018-04-14 · 1. create an override of a view or layout 2. create an override of a fields plugin 3. media overrides 4.](https://reader033.fdocuments.net/reader033/viewer/2022042420/5f374104a172672c6c61fd90/html5/thumbnails/1.jpg)
BUILD YOUR OWN custom field
Joomladay NL 2018 #jd18nl
![Page 2: BUILD YOUR OWN custom field - COOLCAT creations · Joomla · 2018-04-14 · 1. create an override of a view or layout 2. create an override of a fields plugin 3. media overrides 4.](https://reader033.fdocuments.net/reader033/viewer/2022042420/5f374104a172672c6c61fd90/html5/thumbnails/2.jpg)
I AM EliSa
Twitter: @elisasophia
![Page 3: BUILD YOUR OWN custom field - COOLCAT creations · Joomla · 2018-04-14 · 1. create an override of a view or layout 2. create an override of a fields plugin 3. media overrides 4.](https://reader033.fdocuments.net/reader033/viewer/2022042420/5f374104a172672c6c61fd90/html5/thumbnails/3.jpg)
1. CREATE AN OVERRIDE OF A VIEW OR LAYOUT
2. CREATE AN OVERRIDE OF A FIELDS PLUGIN
3. MEDIA OVERRIDES4. CREATE AN OWN
CUSTOM FIELD PLUGIN
HOW CAN I CONTROL THE
OUTPUT?
![Page 4: BUILD YOUR OWN custom field - COOLCAT creations · Joomla · 2018-04-14 · 1. create an override of a view or layout 2. create an override of a fields plugin 3. media overrides 4.](https://reader033.fdocuments.net/reader033/viewer/2022042420/5f374104a172672c6c61fd90/html5/thumbnails/4.jpg)
EXAMPLE: VIEW OVERRIDE / ALTERNATE LAYOUT
USE THE FIELD VALUE IN YOUR OVERRIDE TO CHANGE THE OUTPUT ON YOUR PAGE! protostar
! html
! com_content
! article
" default.php
<?php echo $this->data->jcfields[21]->value; ?>
<?php echo $customFields[‘myfield']->value; ?>
If you map the fields to the field-alias you can use something like that:
![Page 5: BUILD YOUR OWN custom field - COOLCAT creations · Joomla · 2018-04-14 · 1. create an override of a view or layout 2. create an override of a fields plugin 3. media overrides 4.](https://reader033.fdocuments.net/reader033/viewer/2022042420/5f374104a172672c6c61fd90/html5/thumbnails/5.jpg)
// call the user object$user = JFactory::getUser($this->item->created_by);JEventDispatcher::getInstance()->trigger('onContentPrepare', array(‘com_users.user',&$user,&$user->params, 0 ));
// map the fields$userFields = $user->jcfields;foreach ($userFields as $userField) { $userFields[$userField->name] = $userField;}
// transform value to rgb$color = $userFields['companycolor']->value;list($r, $g, $b) = sscanf($color, "#%02x%02x%02x");$rgbcolor = $r.','.$g.','.$b;
// define css$css = "body.site { background:".$color ."; }\n";$css .= ".companybox { background-color:rgba(". $rgbcolor .",0.5) }\n";
// call document object$doc = JFactory::getDocument();
// add local style declaration $doc->addStyleDeclaration($css, $type= 'text/css');
![Page 6: BUILD YOUR OWN custom field - COOLCAT creations · Joomla · 2018-04-14 · 1. create an override of a view or layout 2. create an override of a fields plugin 3. media overrides 4.](https://reader033.fdocuments.net/reader033/viewer/2022042420/5f374104a172672c6c61fd90/html5/thumbnails/6.jpg)
! protostar
! html
! layouts
! com_fields
! field
" render.php
! fields
" render.php
EXAMPLE: LAYOUT OVERRIDE
CREATE A Global LAYOUT OVERRIDE OF THE FIELD Or FIelds ContAINER
![Page 7: BUILD YOUR OWN custom field - COOLCAT creations · Joomla · 2018-04-14 · 1. create an override of a view or layout 2. create an override of a fields plugin 3. media overrides 4.](https://reader033.fdocuments.net/reader033/viewer/2022042420/5f374104a172672c6c61fd90/html5/thumbnails/7.jpg)
! protostar
! html
! layouts
! com_content
! field
" render.php
! fields
" render.php
EXAMPLE: LAYOUT OVERRIDE
CREATE A COMPONENT-WISE LAYOUT OVERRIDE OF THE FIELD Or FIelds ContAINER
![Page 8: BUILD YOUR OWN custom field - COOLCAT creations · Joomla · 2018-04-14 · 1. create an override of a view or layout 2. create an override of a fields plugin 3. media overrides 4.](https://reader033.fdocuments.net/reader033/viewer/2022042420/5f374104a172672c6c61fd90/html5/thumbnails/8.jpg)
! protostar
! html
! layouts
! com_content
! field
" netherlands.php
{field 1, netherlands}
EXAMPLE: ALTERNATE LAYOUT
CREATE AN ALTERNATE LAYOUT OF THE FIELD (GLOBALLY OR COMPONENT-WISE)
![Page 9: BUILD YOUR OWN custom field - COOLCAT creations · Joomla · 2018-04-14 · 1. create an override of a view or layout 2. create an override of a fields plugin 3. media overrides 4.](https://reader033.fdocuments.net/reader033/viewer/2022042420/5f374104a172672c6c61fd90/html5/thumbnails/9.jpg)
EXAMPLE: PLUGIN OVERRIDE
CREATE aN OVERRIDE OF THE FIELDS PLUGIN ITSELF AND PLACE IT IN YOUR TEMPLATE.
! plugins
! fields
! imagelist
! tmpl
" imagelist.php
! protostar
! html
! plg_fields_imagelist
" imagelist.php
![Page 10: BUILD YOUR OWN custom field - COOLCAT creations · Joomla · 2018-04-14 · 1. create an override of a view or layout 2. create an override of a fields plugin 3. media overrides 4.](https://reader033.fdocuments.net/reader033/viewer/2022042420/5f374104a172672c6c61fd90/html5/thumbnails/10.jpg)
! media
! system
! css
! fields
" calendar.css
! protostar
! css
! system
! fields
" calendar.css
EXAMPLE: MEDIA OVERRIDE
CREATE A MEDIA OVERRIDE TO CONTROL THE CSS OF EXISTING FIELDS
![Page 11: BUILD YOUR OWN custom field - COOLCAT creations · Joomla · 2018-04-14 · 1. create an override of a view or layout 2. create an override of a fields plugin 3. media overrides 4.](https://reader033.fdocuments.net/reader033/viewer/2022042420/5f374104a172672c6c61fd90/html5/thumbnails/11.jpg)
CREATE YOUR OWN FIELD PLUGIN
1. EASIER INSTALLATION 2. Easier to KEEP IT UP To DATE
THROUGH YOUR PROJECTS3. EASIER SHARING wiTH OTHERS 4. MAKE CHANGES EASIER AND FASTER
![Page 12: BUILD YOUR OWN custom field - COOLCAT creations · Joomla · 2018-04-14 · 1. create an override of a view or layout 2. create an override of a fields plugin 3. media overrides 4.](https://reader033.fdocuments.net/reader033/viewer/2022042420/5f374104a172672c6c61fd90/html5/thumbnails/12.jpg)
GalleriesSliders
Lightboxes
VIdeo embed
DaTEPICKER
Calendars
AUTOCOMPLETE
weather WidgetAudio Embed
PDF Display
slideshare
Maps
WHAT CAN I CREATE?
![Page 13: BUILD YOUR OWN custom field - COOLCAT creations · Joomla · 2018-04-14 · 1. create an override of a view or layout 2. create an override of a fields plugin 3. media overrides 4.](https://reader033.fdocuments.net/reader033/viewer/2022042420/5f374104a172672c6c61fd90/html5/thumbnails/13.jpg)
DOWNLOAD BASIC EXAMPLE
PROJECThttps://github.com /coolcat-creations/plg_fields_addresscomplete
![Page 14: BUILD YOUR OWN custom field - COOLCAT creations · Joomla · 2018-04-14 · 1. create an override of a view or layout 2. create an override of a fields plugin 3. media overrides 4.](https://reader033.fdocuments.net/reader033/viewer/2022042420/5f374104a172672c6c61fd90/html5/thumbnails/14.jpg)
BASICSTRUCTURE" addresscomplete.xml
" addresscomplete.php
! params
" addresscomplete.xml
! fields
" addresscomplete.php
! tmpl
" addresscompletephp
! language
! en-GB
" en-GB.plg_fields_addresscomplete.ini
" en-GB.plg_fields_addresscomplete.sys.ini
![Page 15: BUILD YOUR OWN custom field - COOLCAT creations · Joomla · 2018-04-14 · 1. create an override of a view or layout 2. create an override of a fields plugin 3. media overrides 4.](https://reader033.fdocuments.net/reader033/viewer/2022042420/5f374104a172672c6c61fd90/html5/thumbnails/15.jpg)
The file is the manifest file for your fields plugin.
-All important informations for the installation-Global field parameters-List Update Server-List Post Install Scripts
ADDRESSCOMPLETE.xml
![Page 16: BUILD YOUR OWN custom field - COOLCAT creations · Joomla · 2018-04-14 · 1. create an override of a view or layout 2. create an override of a fields plugin 3. media overrides 4.](https://reader033.fdocuments.net/reader033/viewer/2022042420/5f374104a172672c6c61fd90/html5/thumbnails/16.jpg)
PARAMS/ADDRESSCOMPLETE.xml - Possible to add
field specific parameters here
![Page 17: BUILD YOUR OWN custom field - COOLCAT creations · Joomla · 2018-04-14 · 1. create an override of a view or layout 2. create an override of a fields plugin 3. media overrides 4.](https://reader033.fdocuments.net/reader033/viewer/2022042420/5f374104a172672c6c61fd90/html5/thumbnails/17.jpg)
<?xml version="1.0" encoding="utf-8"?><form> <fields name="fieldparams"> <fieldset name=“fieldparams">
// Here you can add fields
</fieldset> </fields></form>
![Page 18: BUILD YOUR OWN custom field - COOLCAT creations · Joomla · 2018-04-14 · 1. create an override of a view or layout 2. create an override of a fields plugin 3. media overrides 4.](https://reader033.fdocuments.net/reader033/viewer/2022042420/5f374104a172672c6c61fd90/html5/thumbnails/18.jpg)
- Create the input field- Extending a Field or Custom Form Field
https://docs.joomla.org/Creating_a_custom_form_field_type
or short-url: https://bit.ly/2GTbOCq
FIELDS/ADDRESSCOMPLETE.PHP
![Page 19: BUILD YOUR OWN custom field - COOLCAT creations · Joomla · 2018-04-14 · 1. create an override of a view or layout 2. create an override of a fields plugin 3. media overrides 4.](https://reader033.fdocuments.net/reader033/viewer/2022042420/5f374104a172672c6c61fd90/html5/thumbnails/19.jpg)
Documentation Algolia: https://community.algolia.com/places/
Example field is a simple text field- extending JFormText Field- adding a special class- adding a script
class JFormFieldAdresscomplete extends JFormFieldText
Namespaced Example will follow soon!
FIELDS/ADDRESSCOMPLETE.PHP
![Page 20: BUILD YOUR OWN custom field - COOLCAT creations · Joomla · 2018-04-14 · 1. create an override of a view or layout 2. create an override of a fields plugin 3. media overrides 4.](https://reader033.fdocuments.net/reader033/viewer/2022042420/5f374104a172672c6c61fd90/html5/thumbnails/20.jpg)
INITIALISE THE FIELD PLUGIN ADDRESSCOMPLETE.phpTo show the field at all we have to initialise it in the main plugin file
defined('_JEXEC') or die;JLoader::import('components.com_fields.libraries.fieldsplugin', JPATH_ADMINISTRATOR);
class PlgFieldsAddresscomplete extends FieldsPlugin {}
![Page 21: BUILD YOUR OWN custom field - COOLCAT creations · Joomla · 2018-04-14 · 1. create an override of a view or layout 2. create an override of a fields plugin 3. media overrides 4.](https://reader033.fdocuments.net/reader033/viewer/2022042420/5f374104a172672c6c61fd90/html5/thumbnails/21.jpg)
TMPL /ADDRESSCOMPLETE.PHP In the example the user entry is saved as value and will be returned in the frontend like that:
defined('_JEXEC') or die;
if (!$field->value){ return;}
echo $field->value;
![Page 22: BUILD YOUR OWN custom field - COOLCAT creations · Joomla · 2018-04-14 · 1. create an override of a view or layout 2. create an override of a fields plugin 3. media overrides 4.](https://reader033.fdocuments.net/reader033/viewer/2022042420/5f374104a172672c6c61fd90/html5/thumbnails/22.jpg)
READY! INPUT
![Page 23: BUILD YOUR OWN custom field - COOLCAT creations · Joomla · 2018-04-14 · 1. create an override of a view or layout 2. create an override of a fields plugin 3. media overrides 4.](https://reader033.fdocuments.net/reader033/viewer/2022042420/5f374104a172672c6c61fd90/html5/thumbnails/23.jpg)
READY! OUTPUT
![Page 24: BUILD YOUR OWN custom field - COOLCAT creations · Joomla · 2018-04-14 · 1. create an override of a view or layout 2. create an override of a fields plugin 3. media overrides 4.](https://reader033.fdocuments.net/reader033/viewer/2022042420/5f374104a172672c6c61fd90/html5/thumbnails/24.jpg)
BORING!
![Page 25: BUILD YOUR OWN custom field - COOLCAT creations · Joomla · 2018-04-14 · 1. create an override of a view or layout 2. create an override of a fields plugin 3. media overrides 4.](https://reader033.fdocuments.net/reader033/viewer/2022042420/5f374104a172672c6c61fd90/html5/thumbnails/25.jpg)
GET CREATIVEDo MORE!
travel.Custom-FielDs.NETDifferent uses of the user input value “Address”
![Page 26: BUILD YOUR OWN custom field - COOLCAT creations · Joomla · 2018-04-14 · 1. create an override of a view or layout 2. create an override of a fields plugin 3. media overrides 4.](https://reader033.fdocuments.net/reader033/viewer/2022042420/5f374104a172672c6c61fd90/html5/thumbnails/26.jpg)
TMPL/SUBTEMPLATES/FLICKR.PHP
ADDING A FLICKR GALLERY
![Page 27: BUILD YOUR OWN custom field - COOLCAT creations · Joomla · 2018-04-14 · 1. create an override of a view or layout 2. create an override of a fields plugin 3. media overrides 4.](https://reader033.fdocuments.net/reader033/viewer/2022042420/5f374104a172672c6c61fd90/html5/thumbnails/27.jpg)
TMPL/SUBTEMPLAteS /WEATHER.PHP
ADDING A FORECAST
![Page 28: BUILD YOUR OWN custom field - COOLCAT creations · Joomla · 2018-04-14 · 1. create an override of a view or layout 2. create an override of a fields plugin 3. media overrides 4.](https://reader033.fdocuments.net/reader033/viewer/2022042420/5f374104a172672c6c61fd90/html5/thumbnails/28.jpg)
TMPL/SUBTEMPLATES /MAP.PHP
ADDING A MAP
![Page 29: BUILD YOUR OWN custom field - COOLCAT creations · Joomla · 2018-04-14 · 1. create an override of a view or layout 2. create an override of a fields plugin 3. media overrides 4.](https://reader033.fdocuments.net/reader033/viewer/2022042420/5f374104a172672c6c61fd90/html5/thumbnails/29.jpg)
ANOTHER TUTORIAL OWL CAROUSEL GALLERY coolcat-creations.com/blog