Dynamic Data
In an application, you often need to use a website's data or basic information on the Frontend side through JavaScript. Examples include settings configured in Options, or data that must be used on a given page, and so on. The framework automatically collects this information from the various packages, converts it into data readable by JavaScript, and places it in the page before the main files are loaded.
To store and manage this category of information, the framework provides the packages\base\frontend\events\ThrowDynamicData class.
To make accessing the ThrowDynamicData class easier, the dynamicData() method has been added to the packages\base\View class. By simply calling this method on a View object, you gain access to the ThrowDynamicData class.
For more information about the view's appearance, refer to the View page.
Options
For more information about settings, refer to the Configuration page.
The site's main settings — including language-related settings such as the primary language and how the language is placed in the URL, as well as basic site information such as whether the site opens with www or without it — are placed in the page in the JavaScript variable var options. These parameters can be used when generating URLs with JavaScript.
The settings automatically added by the framework use the keys packages.base.translator.defaultlang, packages.base.translator.changelang, packages.base.translator.changelang.type, and packages.base.routing.www.
You can also add other settings, or even settings you have newly added, so that they are placed on the page when it loads.
In the ThrowDynamicData class, you can manage the displayed settings using the following methods.
Defining an option
Using the setOption method, you can add options you have created to the page and use them. The input of this method is the option name.
namespace themes\themename\views\packagename\posts;
use packages\base\{Options, views\Form};
class Prioritize extends Form
{
private $hasAccessToDelete = false;
public function __beforeLoad()
{
$this->setTitle(t("posts.prioritize"));
$this->addBodyClass("posts-prioritize");
Options::set("packages.packagename.has_access_to_delete_service", $this->hasAccessToDelete);
$this->dynamicData()->setOption("packages.packagename.has_access_to_delete_service");
}
public function hasAccessToDelete(bool $permission)
{
$this->hasAccessToDelete = $permission;
}
}
The output of the above code in the HTML page is as follows:
<script>
var options = {"packages.base.translator.defaultlang":"fa_IR","packages.base.translator.changelang":"uri","packages.base.translator.changelang.type":"short","packages.base.routing.www":"nowww","packages.packagename.has_access_to_delete_service":false};var translator = {"lang":"fa_IR"};
</script>
Checking an option
By calling the hasOption method, you can check whether a stored option exists. The method returns a boolean.
By calling the getData method with the input options, you can access all of the options stored in this class (as an array).
namespace themes\themename\views\packagename\posts;
use packages\base\{Options, views\Form};
class Prioritize extends Form
{
public function __beforeLoad()
{
$this->setTitle(t("posts.prioritize"));
$this->addBodyClass("posts-prioritize");
Options::load("packages.packagename.has_access_to_delete_service");
$dynamicData = $this->dynamicData();
if (!$dynamicData->hasOption("packages.packagename.has_access_to_delete_service")) {
$dynamicData->setOption("packages.packagename.has_access_to_delete_service");
}
}
}
In the example above, the stored option is retrieved from the database with the load method, and then it is checked with the hasOption method; if this option has not been added in this event, it is added by calling the setOption method.
Deleting an option
By calling the deleteOption method, you can delete an added option. The method's input argument is the option name.
namespace themes\themename\views;
use packages\base\{Options, views\Form};
class Prioritize extends Form
{
public function __beforeLoad()
{
$this->setTitle(t("posts.prioritize"));
$this->addBodyClass("posts-prioritize");
$this->dynamicData()->deleteOption("packages.base.translator.defaultlang");
}
}
Defining data
The setData method is provided for defining data. This method takes two input arguments: the first is a string for the data key, and the second sets the data value.
namespace themes\themename\views;
use packages\base\{Options, views\Form};
class Edit extends Form
{
public function __beforeLoad()
{
$this->setTitle(array(
t("settings"),
t("usertype.edit")
));
$this->addBodyClass("edit-usertype");
$this->dynamicData()->setData("permissions", $this->buildPermissionsArray());
}
protected function buildPermissionsArray(): array
{
$item;
foreach ($this->getData('permissions') as $permission) {
$item[] = ["key" => $permission];
}
return $item;
}
}
In the example above, the buildPermissionsArray method uses the permissions that were set in the controller with the permissions key and are available by calling the getData method. (The getData method is defined in the packages\base\view class.)
By calling the buildPermissionsArray method inside the setData method, an array of permissions is added to the page's data under the permissions key.
The output of the above code in the HTML page is as follows:
<script>
var options = {"packages.base.translator.defaultlang":"fa_IR","packages.base.translator.changelang":"uri","packages.base.translator.changelang.type":"short","packages.base.routing.www":"nowww"};var translator = {"lang":"fa_IR"}; var permissions = [{"key":"userpanel_users_list"},{"key":"userpanel_users_add"},{"key":"userpanel_users_view"},{"key":"userpanel_users_view_invisibles"}]
</script>
Checking whether data exists
The hasData method is defined for checking whether a key exists in the data. The method's input argument is the data key whose existence you want to check.
The method returns a boolean.
Deleting data
The deleteData method is used to delete added data. The method's input is the key defined for the data.
namespace themes\themename\views;
use packages\base\{Options, View};
class Delete extends View
{
public function __beforeLoad()
{
$this->setTitle(array(
t("settings"),
t("usertype.delete")
));
$dynamicData = $this->dynamicData();
if ($dynamicData->hasData("permissions")) {
$dynamicData->deleteData("permissions");
}
}
}
Reading data
The getData method is used to retrieve added data. The method's input argument is the key defined for the data.
If no argument is passed to the method, it returns an array of all defined data.
Using the stored data in JavaScript
The data stored in DynamicData is used in JavaScript.
For example, suppose we want to show the delete and edit buttons only to users who have access permission; we do so as shown in the code below.
namespace themes\themename\views;
use packages\base\views\Form;
class UsersList extends Form
{
public function __beforeLoad()
{
$permissions = $this->getData('permissions');
$this->dynamicData()->setData("permissions", array(
"users_edit" => $permissions['users_edit'],
"users_delete" => $permissions['users_delete']
));
}
}
Data output in the script tag
<script>
var options = {"packages.base.translator.defaultlang":"fa_IR","packages.base.translator.changelang":"uri","packages.base.translator.changelang.type":"short","packages.base.routing.www":"nowww"};var translator = {"lang":"fa_IR"};var permissions = {"users_edit":true,"users_delete":false};
</script>
How to use it in the JavaScript file
$(() => {
if (!permissions["users_edit"]) {
$(".btn_users_edit").css("display", "none");
}
if (!permissions["users_delete"]) {
$(".btn_users_delete").css("display", "none");
}
});