Elements are of utmost importance in Joomla development. Elements allows you to create custom parameter type that you can use in your metadata files. Metadata files are xml files that are used to provide configuration parameters to your component, module, plugin or even views. Metadata files for your views are used configure menu links that that will use that view.

In this short tutorial, I will tell about creating elements and using it differently on different places. Elements are special files that generally adds value to parameters. For this tutorial, I will create a color element that  can be used in different components, modules, plugins where color selection is done through a color picker. I will use moorainbow as web color picker.
Also note, I am creating this element for my adsensebingo module. Hence this code has been tested and used.

Creating Color Element File

Element file are generally single php file that has element class that extends JElement base class. The class overrides fetchElement method of JElement Base class to provide color picker.
Let us create a folder that will hold all files necessary for color element.  Let us call this folder “element”. Download the latest moorainbow library and place it in a subfolder directly below the elements folder. Now create a color.php file . This file is the element file and has a class JElementColor that extends JElement base class.
Now override fetchElement method of JElement base class. The important part of element is the fetchElement method. This method actually returns data that can be used by parameters.

A little explanation about fetchElement is necessary. method fetchElement requires 4 arguments namely
$name – is the unique name of the parameter, from the name argument.
$value – is the current value of the parameter.
$node – is a JSimpleXMLElement object representing the <param> element.
$control_name – is the parameter type from the type argument (eg. ‘category’ or ‘color’).

The fetchElement method for Color element is as below

function fetchElement($name, $value, &$node, $control_name)
{
        ob_start();
        $img=JUri::root()."modules/mod_adsensebingo/elements/moorainbow/images/rainbow.png";
        $imgx=JUri::root()."modules/mod_adsensebingo/elements/moorainbow/images/";
        static $embedded;
                if(!$embedded)
        {
            $css2=JUri::root()."modules/mod_adsensebingo/elements/moorainbow/css/mooRainbow.css";
            $jspath=JUri::root()."modules/mod_adsensebingo/elements/moorainbow/js/mooRainbow.js";
             ?>
<link
    href="<?php echo $css2;?>" type="text/css" rel="stylesheet" />
<script src="<?php echo $jspath;?>"></script>

            <?php
            $embedded=true;

        ?>
<script>

            window.addEvent('domready',function(){
//Get sibling function from http://www.sanjeevshrestha.com.np
                Element.extend({
                    getSiblings: function() {
                        return this.getParent().getChildren().remove(this);
                    }
                });
            $('.rainbowbtn').each(function(item){

         item.color=new MooRainbow(item.id, {
                    startColor: [58, 142, 246],
                    wheel: true,
                    id:item.id+'x',
                    onChange: function(color) {

                    item.getSiblings()[0].value = color.hex;
                    },
                    onComplete: function(color) {

                    item.getSiblings()[0].value = color.hex;
                    },

                    imgPath: '<?php echo $imgx;?>'

                });

                });
            });
            </script>
            <?php
        }
            ?>
            <label>
<input
    name="<?php echo $control_name;?////>[<?php echo $name;?>]" type="text"
    class="inputbox" id="<?php echo  $control_name.$name ?>"
    value="<?php echo $value;?>" size="10" />
<img
    src="<?php echo $img;? />" id="img<?php echo $name; ?>" alt="[r]"
    class="rainbowbtn" width="16" height="16" /></label>
        <?php

        $content=ob_get_contents();

        ob_end_clean();
        return $content;

    }

That is it.

Using it in Module Parameters.

Now let us use this in module parameter. Parameters are generally written in
element block. For these params block to render our color element we need to specify path to our elements folder in this params element node as below

<params addpath="[path]/elements"> </param>
--- list of <param> elements ---
</params>

In our case this is written as

<params addpath="/modules/mod_adsensebingo/elements"> </param>
<param name="foreground" type="color" default="#CC0000" label="Foreground Color" description="Select foreground color for your google ad" > </param>
-- other <param> elements
</params>

Now this block is aware of new elment type and knows where to find the element rendering code. The parameter section of module setting page now correctly shows a color picker.
You can create any kind of elments, from a simple integer list to a complex color element or elements that shows records from your component. The usage is limitless.

That is all for color element. More to come on element tutorials till then happy reading.