Module interface

The user interface is described based on the "Volt: Template Engine".

Add editable table

The first step is to add a description of the table to *Controller.php class:
├── agi-bin
└── App
    └── Controllers
        └── ModuleTemplateController.php
In function "getTablesDescription" add a description of the table:
private function getTablesDescription():array
{
$description = [];
$description['QuestionsQuality'] = [
'cols' => [
'rowIcon' => ['header' => '', 'class' => 'collapsing', 'icon' => 'question circle'],
'priority' => ['header' => '', 'class' => 'collapsing'],
'question' => ['header' => 'Text question', 'class' => 'ten wide'],
'delButton' => ['header' => '', 'class' => 'collapsing']
],
'ajaxUrl' => '/getNewRecords',
'icon' => 'user',
'needDelButton' => true
];
return $description;
}
  • "QuestionsQuality" - name of the model class
  • "question" - name of the property described in the model
  • "priority" - the name of the property described in the model opens the possibility to change the order of lines in the module interface
  • "delButton" - service field, adds the"delete" button
  • "icon" - service field, adds an icon to the beginning of the row
Edit the index.volt file:
├── agi-bin
└─── App
   ├── Controllers
   ├── Forms
   └── Views
   └── index.volt
Need add:
<div class="ui grid">
<div class="ui row">
<div class="ui five wide column">
{{ link_to("#", '<i class="add user icon"></i> '~t._('module_phnbk_AddNewRecord'), "class": "ui blue button", "id":"add-new-row", "id-table":"QuestionsQuality-table") }}
</div>
</div>
</div>
<br>
<table id="QuestionsQuality-table" class="ui small very compact single line table"></table>
  • Need replace "Questions Quality" with the name of the model class.
Go to the web interface of the module. The table will be displayed
Table view in the web interface