Comment avoir du style (dans la représentation d’un smartElement) ?
Prérequis
Afin de pouvoir suivre ce guide, il faut préalablement savoir Comment associer une classe de rendu à une smart structure.
Comment avoir du style (dans la représentation d’un smartElement) ?
Surchargeons la méthode getCssReferences
de la classe de rendu d’édition des menus MenuEditRender
pour injecter des
feuilles de style personnalisées dans le formulaire d’un Smart Element Menu.
Recommandations
Si vous n’êtes pas familier avec la fonction getCssReferences
, il est recommandé de lire la documentation associée
disponible ici
<?php
namespace Cogip\Restauratec\SmartStructures\Menu\Render;
use Anakeen\Core\Internal\SmartElement as InternalSmartElement;
use Anakeen\Ui\CommonRenderOptions;
use Anakeen\Ui\RenderAttributeNeeded;
use Anakeen\Ui\RenderOptions;
use Mediapost\Csm\Utils\FindAssets;
use SmartStructure\Fields\Menu as MenuFields;
use \Anakeen\Core\Internal\SmartElement;
use SmartStructure\Mask;
class MenuEditRender extends \Anakeen\Ui\DefaultConfigEditRender
{
public function getOptions(\Anakeen\Core\Internal\SmartElement $document): RenderOptions
{
$options = parent::getOptions($document);
//Mis en place des descriptions par la function setDescription
$options->frame(MenuFields::menu_frame)
->setDescription("<p>Une proposiion de repas pour client</p>",
CommonRenderOptions::topPosition);
$options->arrayAttribute(MenuFields::menu_composition)
->setDescription("<p>La liste des divers mets qui composent le repas</p>",
CommonRenderOptions::bottomPosition);
$options->arrayAttribute(MenuFields::menu_composition)
->setTemplate('
<table class="dcpArray__table"" rules="all" >
<thead>
<tr>
<th/>
<th class="dcpArray__head__cell" style="display: block; text-align: center">
{{attributes.menu_plat.label}} / {{attributes.menu_boisson.label}}
</th>
</tr>
</thead>
<tbody>
{{#attribute.rows}}
<tr>
{{#attribute.isWriteMode}}
<td>
{{{rowTools}}}
</td>
{{/attribute.isWriteMode}}
<td style="display: block; height: 100px">
<div style="margin: 5px">
{{{content.menu_plat.htmlContent}}}
</div>
<div style="margin: 5px">
{{{content.menu_boisson.htmlContent}}}
</div>
</td>
</tr>
{{/attribute.rows}}
</tbody>
</table>
<div>
{{#attribute.isWriteMode}}
{{{attribute.tableTools}}}
{{/attribute.isWriteMode}}
</div>
');
$options->text(MenuFields::menu_title)
->setDescription("<p>Le nom d’un menu</p>",
CommonRenderOptions::clickPosition);
//Mis en place des descriptions par le Smart Element Menu_discount_description_1
/** @var SmartElement $menuDescriptions */
$menuDescriptions = \Anakeen\Core\SEManager::getDocument("Menu_discount_description_3");
if ($menuDescriptions) {
$this->applyRenderDescription($menuDescriptions, $options);
}
return $options;
}
/**
* @param InternalSmartElement $document
* @param Mask|null $mask
* @return RenderAttributeNeeded
* @throws \Anakeen\Exception
* @throws \Anakeen\Ui\Exception
*/
public function getNeeded(InternalSmartElement $document, Mask $mask = null): RenderAttributeNeeded
{
$neededAttributes = parent::getNeeded($document);
$neededAttributes->setNeeded(MenuFields::menu_discount,true);
$neededAttributes->setNeeded(MenuFields::menu_plat,true);
return $neededAttributes;
}
/**
* @param SmartElement|null $document
* @return array
*/
public function getCssReferences(\Anakeen\Core\Internal\SmartElement $document = null): array
{
$css = parent::getCssReferences($document);
$css["menu"] = "\menuEdit.css";
return $css;
}
}
La feuille CSS menuEdit.css
est placé sous src/public
.dcpFrame {
border: 1px solid #0f6674;
}
.dcpArray__label {
font-style: italic;
}
Vous pouvez maintenant déployer vos modifications :
npx @anakeen/anakeen-cli deploy -c http://localhost:8080/control -s . -u admin -p anakeen --reinstall
Et voir le résultat sur un MENU en création ou modification :
http://localhost:8080/api/v2/smart-elements/MENU/views/!defaultCreation.html
Et ensuite ?
Comment ajouter des messages en provenance du serveur après une sauvegarde ?