Softhem Blog
Render API
his article describes and implements ( as examples ) the Render API.
You can render using three methods
1. Directly from render array
2. Using your own theme
3. Using a mix of the above
Here is the source code files structure:
1. Directly from render array
/**
* Render index
* Using render array - element table
*/
public function index()
{
$build['table'] = [
'#type' => 'table',
'#caption' => $this->t('Our favorite colors in index.'),
'#header' => [$this->t('Name'), $this->t('Favorite color')],
'#rows' => [
[$this->t('Amber'), $this->t('teal')],
[$this->t('Addi'), $this->t('green')],
[$this->t('Blake'), $this->t('#063')],
[$this->t('Enid'), $this->t('indigo')],
[$this->t('Joe'), $this->t('green')],
],
];
return $build;
}
The array which contains a render element for example a table, div in which case you specify the #type attribute of render array.
2. Using your own theme
It means you want to pass data to twig template and write coding logic to render (raw data). In this case you need to specify #theme attribute of render array, and you pass your data to twig in variables instead.
/**
* Render table
* Using a twig template
* You need to implement hook_theme to specify template files
*/
public function template()
{
$header = [$this->t('Name'), $this->t('Favorite color')];
$rows = [
[$this->t('Amber'), $this->t('teal')],
[$this->t('Addi'), $this->t('green')],
[$this->t('Blake'), $this->t('#063')],
[$this->t('Enid'), $this->t('indigo')],
[$this->t('Joe'), $this->t('green')],
];
return [
'#theme' => 'table1',
'#title' => 'My colors table',
'#header' => $header,
'#rows' => $rows,
];
}
3. Using a mix of the above
Simply pass the render element as a variable just like you passed array in section number 2 above. A variable (render) array which has #type defined is rendered by twig auto by just using its name like {{ table }}.
/**
* Render table
* Using a twig template
* You need to implement hook_theme to specify template files
*/
public function element_template()
{
$header = [$this->t('Name'), $this->t('Favorite color')];
$rows = [
[$this->t('Amber'), $this->t('teal')],
[$this->t('Addi'), $this->t('green')],
[$this->t('Blake'), $this->t('#063')],
[$this->t('Enid'), $this->t('indigo')],
[$this->t('Joe'), $this->t('green')],
];
return [
'#theme' => 'table2',
'#title' => 'My colors table 2',
'#table' => [ # put all rendering element in a variable
'#title' => 'My colors table 2',
'#type' => 'table',
'#header' => $header,
'#rows' => $rows,
]
];
}
And here is the corresponding twig file:
/**
* Implements render_theme().
*/
function render_theme($existing, $type, $theme, $path)
{
return [
'table1' => [
'variables' => ['title' => '', 'header' => '', 'rows' => []],
'path' => '@render/tables' # the key of this array will be used as : table1.html.twig and full path templates/render/tables/table1.html.twig
],
'table2' => [
'variables' => ['title' => '', 'table' => null],
// 'render element' => 'table', # no need for this, whats this ?
'path' => '@render/tables' # the key of this array will be used as : table2.html.twig and full path templates/render/tables/table2.html.twig
],
];
}
Download source code
To download the source code of this module from local server:
git clone ssh://ali@g10:2222/home/ali/repos/modules/render/