Bitrix Framework

As an example, we will create a component which displays current date and time. In this case, the date and time format is set in the component settings. In real life, creating such a component makes no sense, but we do it here in order to understand how a component is developed. The procedure is similar for more complex cases.

Preliminary Actions

Preparing php Code of the Component

The first thing we have to do is write a php code that performs what we need.

<?
echo date('Y-m-d');
?>

However, this code just displays the date and there is no option to choose another format. We’d better put the data display format into the variable:

<?
$format = 'Y-m-d';
echo date($format);
?>

And, as a final touch, we have to separate logics and representation:

<?
// parameters
$format = 'Y-m-d';
// logics
$d = date($format);
// representation
echo $d;
?>

Creating a Structure of Component Folders and Files

Now we have to create an own namespace, for example: dv. To do this, we have to create a folder /bitrix/components/dv. Inside, we create a component folder — date.current. And inside this folder, in its turn, we create two mandatory files and a folder to store templates titled templates. The folder templates must contain the folder .default with the file template.php inside.

We obtain the following structure in the folder /bitrix/components/dv/date.current:

• component.php
• .description.php
• templates/.default/template.php

Implementing the Component without Input Parameters

For now, we create the component without the option to set up the input parameter – data format.

File contents:

• component.php

  <? if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
  $arResult['DATE'] = date('Y-m-d');
  $this->IncludeComponentTemplate();
  ?>

• .description.php

  <? if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die(); $arComponentDescription = array(
  "NAME" => GetMessage(“Current date”),
  “DESCRIPTION” => GetMessage(“Display current date”),
  );
  ?>

• templates/.default/template.php

  <?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>

As you might have noted, each component file contains the string if (!defined(“B_PROLOG_INCLUDED”) || B_PROLOG_INCLUDED!==true) die(); in the beginning. This is required so that these files cannot be invoked directly from the browser window.

The component in its simplest form is ready. It can be invoked in page codes using the structure:

<? $APPLICATION->IncludeComponent(
“dv:date.current”,
“.default”,
Array(
),
false
);?>

Implementing the Component with Input Parameters

Now, let us make it possible to add the component to a page from the visual editor and set up the date format through component parameters.

In order to make our component appear in the visual editor we have to expand the component description file.

<? if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die(); 
$arComponentDescription = array(
"NAME" => GetMessage("Current date"),
"DESCRIPTION" => GetMessage(“Display current date"),
"PATH" => array(
"ID" => "dv_components",
"CHILD" => array(
"ID" => "curdate",
"NAME" => "Current date"
)
),
"ICON" => "/images/icon.gif",
);
?>

We have added the PATH array description element in order to place the component in the component tree. Thus, our component will be shown in a separate folder. Alternatively, a component icon may be set, and it will be shown in the tree and in the visual editor.

Let us take a closer look at the component settings. Assuming that the date template option will be set by a string, we create the file .parameters.php as follows:

<? if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();
 $arComponentParameters = array(
"GROUPS" => array(),
“PARAMETERS” => array(
“TEMPLATE_FOR_DATE” => array(
“PARENT” => “BASE”,
“NAME” => “Template for date”,
“TYPE” => “STRING”,
“MULTIPLE” => “N”,
“DEFAULT” => “Y-m-d”,
“REFRESH” => “Y”,
),
),
);
?>

And change the file containing the component logics so that it could use the parameter we set in component.php:

<? if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
$arResult['DATE'] = date($arParams["TEMPLATE_FOR_DATE"]);
$this->IncludeComponentTemplate();
?>

So, What Have We Done?

We have created a component in its simplest. We have not taken into account multiple languages, the option to create help for the component, and the option of component caching.

The majority of custom components for Bitrix Framework are created by changing the components supplied with the products. That is why it is very important to review standard components before starting programming new ones. The task you are to work on most likely has already been resolved by the developers of Bitrix, Inc.