Extending JD Builder

Creating elements for JD Builder is just like creating Modules for Joomla but on Steroids. We use the standard Joomla xml for creating all the forms and PHP for rendering. Just additional Javascript to make the live preview work.

JD Builder has over 30+ field types to offer you the type of options you need and process in itself is quiet straightforward.

You can view all the form fields here

You can download the JD Builder Hello World element here

Element Structure:

element.xml

tmpl/default.php

tmpl/default.js

 

element.xml

<?xml version="1.0" encoding="utf-8"?>
<element type="test-element">
<title>Hello Test</title> <!-- Element Name -->
<icon>fa fa-star</icon> <!-- Icon: classname or image path -->
<creationDate>June 2020</creationDate> <!-- Creation Date -->
<author>JoomDev</author> <!-- Author Name -->
<authorEmail>[email protected]</authorEmail> <!-- Author Email -->
<authorUrl>https://www.joomdev.com</authorUrl> <!-- Author URL -->
<copyright>Copyright (C) 2020 Joomdev, Inc. All rights reserved.</copyright> <!-- Copyright Info -->
<license>GNU General Public License version 2 or later; see LICENSE.txt</license> <!-- License -->
<version>1.0</version> <!-- Version -->
<description>Element Description Here</description> <!-- Description -->
<documentation>https://docs.joomdev.com/article/hello-world/</documentation> <!-- Documentation -->
<form> <!-- Params -->
<fields>
<fieldset name="general" label="JDB_GENERAL_TITLE"> <!-- Tab -->
<field type="group" name="basic" ordering="1" label="Basic Fields" />
<field name="text" type="text" label="Text Input" description="" default="" group="basic"></field>
</fieldset>
</fields>
</form>
</element>

default.php

<?php

/**
* @package JD Builder
* @author Team Joomdev <[email protected]>
* @copyright 2020 www.joomdev.com
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
extract($displayData);

$params = $element->params;

?>

<div>
<div class="myclasshere"><?php echo $params->get('text', ''); ?></div>
</div>

default.js

(function () {
var JDBuilderElementTestElement = function (element) {
var params = element.params;
var html = 
' <div>' +
' <div class="myclasshere">' + params.get('text', 'default value') + '</div>' +
' </div>';
return html;
}
// Everytime On after display html in preview
JDBuilderElementTestElement.onAfterDisplay = function (element, oldParams, newParams, newItem) {}
window.JDBuilderElementTestElement = JDBuilderElementTestElement;
})();