How to make an element for ZOO/JBZoo - basics

0.0/10 rating (0 votes)


Many ZOO/JBZoo users are unaware that creating their own elements is easy. If you have some basic PHP/JS knowledge, you can easily write a simple but functional element.

In this article we will examine and learn to:

  • Create ordinary, repeatable and submittable elements.
  • Use ajax within them.
  • Create a class responsible for import/export.
  • Create new element templates for a filter.
  • Learn about system events.

File structure of an element

The structure of files and folders should look like this:

jbint - root folder of an element.

  • tmpl - folder for templates
    • default.php - a template for simple output.
    • thousand.php - a template with a delimiter for thousandth.
    • edit.php - a template for the edit form in the control panel.
    • index.html - a stub.
  • jbint.php - main file of our element.
  • jbint.xml - xml file. It can contain information about an author or needed settings. It should have a minimum structure which we will examine below.
  • index.html - a stub.

Naming classes

Class name of any element should start with a prefix Element and end with its name.

For example, classes of standard elements:

  • Text - ElementText.
  • Checkbox - ElementCheckbox.
  • Image - ElementImage.

Let’s examine several typical elements and their class declarations.

Simplest one

Element<ELEMENT_ALIAS> extends Element {}


Element<ELEMENT_ALIAS> extends ElementRepetable {}


Element<ELEMENT_ALIAS> extends ElementRepetable implements iSubmittable {}


Element<ELEMENT_ALIAS> extends ElementRepetable implements iRepeatSubmittable {}

Key methods

Simplest one

Abstract class Element requires us to define one method.

  • edit - outputs information in the control panel.


Inheritance from the abstract class ElementRepetable requires us to reload one method.

  • _edit - outputs information for a repeatable element in the control panel.


iSubmittable interface requires us to define two methods:

  • renderSubmission - this method is used to output data during item submission.
  • validateSubmission - validation of input data after item submission.

Submittable-repeatable element

Implementation of iRepeatSubmittable interface requires us to implement two methods:

  • _renderSubmission - output of data for a repeatable element during item submission.
  • _validateSubmission - validation of input data.

If an element is repeatable, then mostly methods with an underscore are used, while the instance itself will be iterated.

In case of overriding one of the methods (render, edit, getSearchData, hasValue), an output of a repeatable element should be done by you in the overridden method.

What is the task of each method?

hasValue - this method is called before rendering an element. There is a check if it is empty. If the result is null | false, an element is not rendered.

edit - outputs an editing form in the control panel.

render - output of the contents to the website.

getSearchData - the results of this method are inserted into mysql tables which data is used for the search and filters.

renderSubmission - this method is used to output data during item submission.

validateSubmission - validation of input data after item submission.

Same methods but with an underscore are called for repeatable elements.

How to install an element?

An installation consists in creating the root folder and files.

In our case there are two places where an element can be created:

  • media/zoo/elements/ - standard ZOO folder. All basic and core elements are located here.
  • media/zoo/applications/<Application>/elements/ - a folder for an Application.

Still gotta questions, who can help me?

Visit our special JBZoo tech support forum which is specifically meant for JBZoo so the priority of the response and its promptness are much better there than in any other place. With inactive account with a “Plus” sign in a tariff plan you can ask for support in one of these sections or use any of our contacts.