# Options de rendu
Ces options permettent de modifier l'affichage d'un ou plusieurs Smart Fields.
# Options de représentation type Smart Element
# setStickyTabs
Cette option laisse la barre d'onglet visible lors d'un défilement vertical.
Anakeen\Ui\DocumentRenderOptions setStickyTabs(string $height = "auto")
# Restrictions
Aucune
# Paramètres
- L'argument
$heightindique la hauteur à partir de laquelle l'onglet est collé.
Ce paramètre doit indiquer une valeur absolue avec son unité : "100px", "10rem" La valeur "auto" utilisé par défaut indique la hauteur sera celle de la barre de menu.
# Exemples
$options->document()->setStickyTabs('100px');
# setOpenFirstTab
Cette option permet d'indiquer que l'onglet concerné est le premier affiché lors de la consultation du Smart Element.
Anakeen\Ui\DocumentRenderOptions setOpenFirstTab(string $tabId)
# Restrictions
Aucune
# Paramètres
L'argument tabId indique l'identifiant de l'onglet à ouvrir lors de l'affichage du Smart Element.
# Cas particuliers
Si l'onglet à ouvrir n'est pas visible, c'est le premier onglet visible qui est affiché.
Si cette option n'est pas utilisée alors :
Lors de la création ou lors de la première consultation, l'onglet affiché est le premier des onglets visibles.
À chaque sélection d'onglet, la sélection est mémorisée sur le serveur (pour chacun des utilisateurs) pour être ensuite utilisée lors de la prochaine ouverture du document.
# Exemples
Ouverture de l'onglet my_informations.
$options->document()->setOpenFirstTab(My_structure::my_informations);
# setTabPlacement
Cette option indique le positionnement des onglets.
Anakeen\Ui\DocumentRenderOptions setTabPlacement(string $tabPlacement)
Le widget de gestion des onglets est basé sur un widget
Kendo tab Strip.
Si le label est trop long, le texte est tronqué avec un ellipsis. L'option setTooltipLabel permet d'ajouter un tooltip
pour voir le texte dans son intégralité lors du survol de l'onglet.
# Restrictions
Aucune
# Paramètres
L'argument tabPlacement peut valoir :
Anakeen\Ui\DocumentRenderOptions::tabTopFixPlacement: affichage horizontal en haut "taille des onglets fixe" (par défaut). Si la largeur de l'ensemble des d'onglets dépasse la largeur de la page, le dernier onglet visible devient un sélecteur permettant d'accéder aux onglets suivants qui ne sont pas affichés. Pour modifier la largeur d'un onglet dans ce mode, la règle css suivante peut être surchargée :
.dcpDocument__tabs--fixed .dcpTab__label {
width: 10em;
}
Anakeen\Ui\DocumentRenderOptions::tabTopProportionalPlacement: affichage horizontal en haut "taille des onglets variable". Tous les onglets ont la même largeur qui est proportionnelle à la largeur du document. Tous les onglets sont affichés quelque soit la largeur. Si le texte complet n'a pas la place de s'afficher, il est tronqué (ellipsis).Anakeen\Ui\DocumentRenderOptions::tabLeftPlacement: affichage vertical à gauche. Pour modifier la largeur d'un onglet dans ce mode, la règle css suivante peut être surchargée :
.dcpDocument__tabs--left .dcpDocument__tabs__list {
width: 10em;
}
# Cas particuliers
Aucun
# Exemples
Positionnement à gauche :
$options->document()->setTabPlacement(\Anakeen\Ui\DocumentRenderOptions::tabLeftPlacement);
# Options de rendu communes à tout type de Smart Fields
# showEmptyContent
Cette option indique le texte à afficher dans le cas où la valeur du Smart Field est vide.
Anakeen\Ui\CommonRenderOptions showEmptyContent(string $htmlText)
# Restrictions
- Utilisable uniquement pour les rendus de consultation
# Paramètres
L'argument en entrée est un fragment html affiché à la place de la valeur du Smart Field lorsque sa valeur est vide.
# Cas particuliers
Aucun
# Exemples
<?php
use Anakeen\AttributeIdentifiers\My_contact;
use Anakeen\Core\Internal\SmartElement;
use Anakeen\Ui\RenderOptions;
class MyCustomRender extends \Anakeen\Ui\DefaultView
{
public function getOptions(SmartElement $document): RenderOptions
{
$options = parent::getOptions($document);
$options->commonOption()->showEmptyContent("Non communiqué");
$options->commonOption(My_contact::zct_civility)->showEmptyContent("Non communiquée");
$options->commonOption(My_contact::zct_phone)->showEmptyContent('<b class="my-nophone">Pas de téléphone</b>');
$options->image(My_contact::zct_photo)->showEmptyContent('<img src="MY/Images/my_nophoto.png"/>');
return $options;
}
}
# setLink
Cette option ajoute un hyperlien sur la valeur du Smart Field si celui-ci est affiché.
Anakeen\Ui\CommonRenderOptions setLink(Anakeen\Ui\htmlLinkOptions $linkOption)
# Restrictions
- Utilisable uniquement pour les rendus de consultation
- Non applicable aux Smart Fields de type
array,frame,htmltextettab
# Paramètres
L'argument en entrée est un objet de type Anakeen\Ui\htmlLinkOptions qui configure les différents paramètres du lien :
target: Nom de la fenêtre du navigateur vers laquelle le lien sera envoyé. _ Si la valeur est_self(valeur par défaut), la fenêtre courante est utilisée. _ Si la valeur est_dialog, une fenêtre de dialogue interne sera utilisée.title: Message du tooltip du lien visible lorsque le pointeur de la souris est sur le lien. Ce titre est un fragment HTML et les variables de valeur de Smart Field ({ {value} }et{ {displayValue} }) peuvent être utilisées. Les parties variables du titre ne sont pas actualisées en cas de modification de la valeur.url: Url d'accès à la page. L'url est composée lors du rendu du Smart Field et les variables de valeur de Smart Field ({ {value} }et{ {displayValue} }) peuvent être utilisées. Ces valeurs sont encodées (au moyen de la fonctionencodeUriComponent). Les parties variables de l'url ne sont pas actualisées en cas de modification de la valeur.urls: Tableau d'url d'accès à la page pour les Smart Fields inclus dans un tableau. Si l'url à l'index (0 étant la première rangée) de la rangée du tableau est présent, la valeur donnée par le tableau "urls" est utilisé à la place de l'url standard.
Si target est différente de _self les options suivantes sont prises en compte :
windowHeight: Hauteur de la fenêtre de dialogue. Si target est égal à_dialog, la dimension doit être une dimension css valable (c'est à dire un nombre suivi immédiatement de son unité). Sinon la dimension est un nombre entier exprimé en pixels.windowWidth: Largeur de la fenêtre de dialogue. Si target est égal à_dialog, la dimension doit être une dimension css valable (c'est à dire un nombre suivi immédiatement de son unité). Sinon la dimension est un nombre entier exprimé en pixels.windowTitle(seulement sitargetest égal à_dialog) : Titre de la fenêtre de dialogue. Si cet argument est vide, alors le titre de la page ciblée est utilisée si son accès est autorisé (même domaine). Le titre est composé dynamiquement et les variables définissant la valeur du Smart Field peuvent être utilisées ({ {value} }et{ {displayValue} }pour tous les types de Smart Field).
De plus, lorsque windowHeight ou windowWidth est défini et que target est différent de _self et _dialog, la
fenêtre ouverte ne possède ni menus ni barre d'adresse.
Dans le rendus de consultation par défaut (
Anakeen\Ui\DefaultView), les liens sont affectés en fonction de la colonne link défini dans la définition du Smart
Field.
# Cas particuliers
Pour les Smart Fields "multiple" (type docid, account et enum), les variables de valeurs de Smart Field sont des
tableaux. Ils doivent être adressés en Mustache par des répétables.
Exemple :
<b>
Voici les valeurs :
<ul>
{{#.}}
<li>{{displayValue}}</li>
{{/.}}
</ul>
</b>
Pour les Smart Fields dans les tableaux, les variables et sont remplacés par la valeur du
Smart Field à la rangée (index) donnée.
Il est possible d'utiliser des url différentes par index. Dans ce cas, il faut renseigner la variable "urls" afin de donner des urls spécifiques par rangée.
# Exemples
Sur le Smart Field "my_text", ajout d'un lien vers "http://www.example.net".
$linkOption = new \Anakeen\Ui\htmlLinkOptions();
$linkOption->target = "_dialog";
$linkOption->title = "Go to My page";
$linkOption->windowHeight = "300px";
$linkOption->windowWidth = "500px";
$linkOption->windowTitle = "Mon test {{value}} {{displayValue}}";
$linkOption->url = "http://www.example.net";
$options->text("my_text")->setLink($linkOption);
Sur les images affichage d'une plus grande miniature et affichage de l'image en taille "200px" dans une boite de "200px".
<?php
$linkOption = new \Anakeen\Ui\htmlLinkOptions();
$linkOption->target = "_dialog";
$linkOption->title = ' <h3><img src="{{thumbnail}}&size=100"/>{{displayValue}}</h3>';
$linkOption->url = "{{{url}}}&size=200";
$linkOption->windowHeight = "200px";
$linkOption->windowWidth = "200px";
$options->image()->setLink($linkOption);
Modifier le titre (tooltip) du lien de la relation "myRelation" :
<?php
/**
* @var $link \Anakeen\Ui\HtmlLinkOptions
*/
$link = $options->docid(myAttributes::myRelation)->getOption(\Anakeen\Ui\CommonRenderOptions::htmlLinkOption);
if ($link) {
$link->title = "Voir le document de <br/><b>\"{{displayValue}}\"<b>";
}
# Css setLink
La couleur du tooltip généré par l'argument title est surchargeable à l'aide des règles css suivantes :
Exemple : tooltip écrit en noir sur fond vert pour tous les Smart Fields du cadre "my_frame"
.AnakeenFrame__content[data-attrid="my_frame"] .tooltip.AnakeenAttribute__linkvalue .tooltip-inner {
background-color: #f7f942; /* Green */
color: #000000;
}
.AnakeenFrame__content[data-attrid="my_frame"] .tooltip.AnakeenAttribute__linkvalue.tooltip.top .tooltip-arrow {
border-top-color: #f7f942;
}
.AnakeenFrame__content[data-attrid="my_frame"] .tooltip.AnakeenAttribute__linkvalue.tooltip.bottom .tooltip-arrow {
border-bottom-color: #f7f942;
}
Exemple : tooltip écrit en noir sur fond rose pour le Smart Field' "my_mail"
.AnakeenAttribute[data-attrid="my_mail"] .tooltip.AnakeenAttribute__linkvalue .tooltip-inner {
background-color: #f99adf; /* Pink */
color: #000000;
}
.AnakeenAttribute[data-attrid="my_mail"] .tooltip.AnakeenAttribute__linkvalue.tooltip.top .tooltip-arrow {
border-top-color: #f99adf;
}
.AnakeenAttribute[data-attrid="my_mail"] .tooltip.AnakeenAttribute__linkvalue.tooltip.bottom .tooltip-arrow {
border-bottom-color: #f99adf;
}
# setLabelPosition
Cette option indique le placement du label par rapport à la valeur du Smart Field.
Anakeen\Ui\CommonRenderOptions setLabelPosition(string $position)
# Restrictions
- Non applicable aux Smart Fields de type
tab. - Applicable de manière partielle aux Smart Fields de type
frame.
# Paramètres
L'argument en entrée peut prendre les valeurs suivantes :
Anakeen\Ui\CommonRenderOptions::autoPosition : Le libellé est positionné à gauche de la valeur si la limite de largeur
de page ("480px") n'est pas atteinte. Si la limite de largeur de page est atteinte le libellé est positionné au-dessus
de la valeur. La limite peut être modifiée lors de la définition d'un style personnalisé. Cette limite est indiquée dans
la variable less (@grid-float-breakpoint)
Anakeen\Ui\CommonRenderOptions::leftPosition : Le libellé est positionné systématiquement à gauche de sa valeur quelle
que soit la largeur de la fenêtre. La largeur du libellé correspond à 2/12ème de la largeur disponible.
Anakeen\Ui\CommonRenderOptions::upPosition : (valeur par défaut) : Le libellé est positionné systématiquement au
dessus de la valeur. La valeur et le libellé occupent chacun toute la largeur du document.
Anakeen\Ui\CommonRenderOptions::nonePosition : Le libellé n'est pas visible. La valeur occupe toute la largeur du
document.
Ces différentes positions sont définies comme des constantes de la classe Anakeen\Ui\CommonRenderOptions.
# Cas particuliers
Pour les cadres (type frame) :
la valeur
Anakeen\Ui\CommonRenderOptions::autoPositionest équivalente à la valeurAnakeen\Ui\CommonRenderOptions::upPosition.la valeur
Anakeen\Ui\CommonRenderOptions::leftPosition, n'est pas applicable.la valeur
Anakeen\Ui\CommonRenderOptions::nonePositionefface le libellé (header du cadre).
Pour les tableaux (type array) :
- pour la valeur "
Anakeen\Ui\CommonRenderOptions::autoPosition", la limite de largeur de page n'est pas la même que pour les Smart Fields "normaux". Cette limite est par défaut à1280pxafin de représenter le tableau dans des conditions optimales. Elle peut être modifiée avec la méthodesetResponsiveBreakpoints.
# Exemples
$options->text("my_attribute")->labelPosition(Anakeen\Ui\CommonRenderOptions::leftPosition);
# setAttributeLabel
Cette option permet de modifier le texte d'un libellé de Smart Field.
Anakeen\Ui\CommonRenderOptions setAttributeLabel(string $label)
# Restrictions
Aucune
# Paramètres
L'argument $label est un texte brut (et non un fragment HTML) qui sera utilisé comme label du Smart Field.
# Cas particuliers
Aucun
# Exemples
$options->text("my_attribute")->setAttributeLabel("Mon nouveau texte");
# setDescription
Cette option permet d'afficher une description détaillée pour un Smart Field.
<?php
Anakeen\Ui\CommonRenderOptions::setDescription(
string $htmlTitle,
string $position = Anakeen\Ui\CommonRenderOptions::topPosition,
string $htmlContent = "",
bool $collapsed = false)
# Restrictions
Aucune
# Paramètres
$htmlTitle: Description courte du Smart Field. Ce texte est en HTML, il convient au développeur d'échapper les éventuelles variables.$position: Position du texte à afficher. La position du texte dépend aussi du type de Smart Field. L'ensemble de ces positions ne sont pas reconnues pour tous les types de Smart Fields.$htmlContent: Description longue du Smart Field. Ce texte est en HTML, il convient au développeur d'échapper les éventuelles variables. Ce texte est affiché en dessous du texte du titre. Il est escamotable via un bouton. Un ascenseur est affiché si la longueur de ce texte dépasse la limite. Cette limite ("10em" par défaut) est configurable par css.$collapsed: Présentation de la description longue lors de l'affichage du document. Par défaut, cette description est affichée. Si le paramètre vauttruealors la description est escamotée. L'utilisateur doit alors cliquer sur le bouton présent sur le titre pour l'afficher.
# Position de la description des Smart Fields non structurant (hors tableau, onglet et cadre)
Smart Field contenant une valeur : type "text", "int", "date", etc. Ne concerne pas ces Smart Fields s'ils sont définis dans un tableau.
Anakeen\Ui\CommonRenderOptions::topPosition: Texte affiché au-dessus du contenu du Smart Field (libellé et valeur)
Anakeen\Ui\CommonRenderOptions::bottomPosition:Texte affiché au-dessous du contenu du Smart Field (libellé et valeur)
Anakeen\Ui\CommonRenderOptions::topLabelPosition: Texte affiché au-dessus du libellé du Smart Field
Anakeen\Ui\CommonRenderOptions::topValuePosition: Texte affiché au-dessus de la valeur du Smart Field
Anakeen\Ui\CommonRenderOptions::bottomLabelPosition: Texte affiché au-dessous du libellé du Smart Field
Anakeen\Ui\CommonRenderOptions::bottomValuePosition: Texte affiché au-dessous de la valeur du Smart Field
Anakeen\Ui\CommonRenderOptions::clickPosition: Affiche une ancre à droite du libellé. Cette ancre affiche la description lorsque l'utilisateur clique dessus.
# Récapitulilatif des positions des descriptions sur les champs
Affichage de descriptions dans diverses positions :
$displayPosition =
'<b style="float:right;color:orange;border:solid 1px orange;margin-left:2px">{{renderOptions.description.position}}</b>';
$options
->text(myAttribute::tst_ban_agence)
->setDescription(
$displayPosition . "<p>Nom et localisation de l'agence bancaire</p>",
\Anakeen\Ui\CommonRenderOptions::topPosition
);
$options
->text(myAttribute::tst_ban_etablissement)
->setDescription(
$displayPosition . "<p>L'identifiant domestique du compte : code banque<p><b> (5 chiffres)</b>",
\Anakeen\Ui\CommonRenderOptions::topValuePosition
);
$options
->text(myAttribute::tst_ban_guichet)
->setDescription(
$displayPosition . "<p>Le code guichet de la banque<p><b> (5 chiffres)</b>",
\Anakeen\Ui\CommonRenderOptions::topLabelPosition
);
$options
->text(myAttribute::tst_ban_numcompte)
->setDescription(
$displayPosition . "<p>Numéro du compte bancaire<p><b> (11 chiffres ou lettres)</b>",
\Anakeen\Ui\CommonRenderOptions::bottomValuePosition
);
$options
->text(myAttribute::tst_ban_iban)
->setDescription(
$displayPosition .
"<p>Le code IBAN <i>(International Bank Account Number)</i> représenté par une série de <b>27</b> chiffres et de lettres</p>",
\Anakeen\Ui\CommonRenderOptions::clickPosition,
"<p>Reprenant notamment (mais regroupés différemment) le code banque, le code guichet et le numéro de compte</p>",
true
);
$options
->text(myAttribute::tst_ban_bic)
->setDescription(
$displayPosition .
"<p>Le code BIC <i>(Business Identifier Code)</i> représenté par une série de <b>11 ou 8</b> lettres .</p>",
\Anakeen\Ui\CommonRenderOptions::bottomPosition
);
Libellé à gauche
La position des descriptions est sensible à la position du libellé. Si le libellé est à gauche les positions seront les suivantes.
# Cas particuliers
Le positionnement dans les tableaux est propre à ce type. Voir la position dans les tableaux.
Le positionnement dans les cadres est propre à ce type. Voir la position dans les cadres.
Le positionnement dans les onglets est propre à ce type. Voir la position dans les onglets.
# Variables utilisables dans les textes de descriptions.
Les variables suivantes sont utilisables comme variable "Mustache" dans la description courte ou la description longue.
id: identifiant du Smart Fieldlabel: label du Smart Field (localisé)needed: (bool) Indique si le Smart Field est obligatoirevisibility: visibilité du Smart Field(W,R,H, ...)type: type du Smart Field (text, date, int, ...)attributeValue.value: valeur brute du Smart Field au moment du rendu (la description n'est pas mise à jour lors de la modification du Smart Field)attributeValue.displayValue: valeur affichée du Smart Field au moment du rendurenderOptions.description: définition de la descriptioncollapsed: (bool) Valeur du paramètre $collapsedhtmlContent: Valeur du paramètre $htmlContenthtmlTitle: Valeur du paramètre $htmlTitleposition: Valeur du paramètre $position
# Règles css applicables aux descriptions
Les descriptions sont identifiables grâce à la classe AnakeenAttribute__description.
La description d'un Smart Field donné peut être repéré en indiquant le Smart Field HTML data-attrid sur la règle.
.dcpAttribute__description[data-attrid="tst_ban_etablissement"] {
...;
}
Modifier la couleur de fond pour toutes les descriptions :
.dcpAttribute__description {
background-color: #f4ffba;
}
/* Flèche vers la droite */
.dcpAttribute__description--left::after {
border-left-color: #f4ffba;
}
/* Flèche vers la gauche */
.dcpAttribute__description--right::after {
border-right-color: #f4ffba;
}
/* Flèche vers le bas */
.dcpAttribute__description--topLabel::after,
.dcpAttribute__description--topValue::after,
.dcpAttribute__description--top::after {
border-top-color: #f4ffba;
}
/* Flèche vers le haut */
.dcpAttribute__description--bottomLabel::after,
.dcpAttribute__description--bottomValue::after,
.dcpAttribute__description--bottom::after {
border-bottom-color: #f4ffba;
}
Modifier la couleur de la bordure pour toutes les descriptions :
.dcpAttribute__description {
border-color: #bfaf00;
}
/* Flèche vers la droite */
.dcpAttribute__description--left::before {
border-left-color: #bfaf00;
}
/* Flèche vers la gauche */
.dcpAttribute__description--right::before {
border-right-color: #bfaf00;
}
/* Flèche vers le bas */
.dcpAttribute__description--topLabel::before,
.dcpAttribute__description--topValue::before,
.dcpAttribute__description--top::before {
border-top-color: #bfaf00;
}
/* Flèche vers le haut */
.dcpAttribute__description--bottomLabel::before,
.dcpAttribute__description--bottomValue::before,
.dcpAttribute__description--bottom::before {
border-bottom-color: #bfaf00;
}
Supprimer la flèche pour la description du Smart Field "tst_ban_etablissement" :
.dcpAttribute__description[data-attrid="tst_ban_etablissement"]::after,
.dcpAttribute__description[data-attrid="tst_ban_etablissement"]::before {
display: none;
}
Modifier la hauteur maximale de la description longue :
.dcpAttribute__description__content {
max-height: 10em; /* hauteur maximale à indiquer */
}
# Exemples
Ajout d'information complémentaire au libellé. Dans cet exemple, le libellé n'est pas affiché (utilisation de setLabelPosition - nonePosition) mais il est utilisé dans la description qui est affiché au-dessus de chaque Smart Field.
$originalLabel = '<p><b>{{label}}</b></p>';
$options
->text(myAttribute::tst_ban_agence)
->setDescription(
$originalLabel . "<p>Nom et localisation de l'agence bancaire</p>",
\Anakeen\Ui\CommonRenderOptions::topPosition
)
->setLabelPosition(\Anakeen\Ui\CommonRenderOptions::nonePosition);
$options
->text(myAttribute::tst_ban_etablissement)
->setDescription(
$originalLabel . "<p>L'identifiant domestique du compte : code banque <b> (5 chiffres)</b><p>",
\Anakeen\Ui\CommonRenderOptions::topPosition
)
->setLabelPosition(\Anakeen\Ui\CommonRenderOptions::nonePosition);
$options
->text(myAttribute::tst_ban_guichet)
->setDescription(
$originalLabel . "<p>Le code guichet de la banque<b> (5 chiffres)</b><p>",
\Anakeen\Ui\CommonRenderOptions::topPosition
)
->setLabelPosition(\Anakeen\Ui\CommonRenderOptions::nonePosition);
$options
->text(myAttribute::tst_ban_numcompte)
->setDescription(
$originalLabel . "<p>Numéro du compte bancaire<b> (11 chiffres ou lettres)</b><p>",
\Anakeen\Ui\CommonRenderOptions::topPosition
)
->setLabelPosition(\Anakeen\Ui\CommonRenderOptions::nonePosition);
$options
->text(myAttribute::tst_ban_clecompte)
->setDescription(
$originalLabel . "<p>Clé du relevé d'identité bancaire <b> (2 chiffres)</b></p>",
\Anakeen\Ui\CommonRenderOptions::topPosition
)
->setLabelPosition(\Anakeen\Ui\CommonRenderOptions::nonePosition);
$options
->text(myAttribute::tst_ban_iban)
->setDescription(
$originalLabel .
"<p>Le code IBAN <i>(International Bank Account Number)</i> représenté par une série de <b>27</b> chiffres et de lettres</p>",
\Anakeen\Ui\CommonRenderOptions::topPosition,
"<p>Reprenant notamment (mais regroupés différemment) le code banque, le code guichet et le numéro de compte</p>",
true
)
->setLabelPosition(\Anakeen\Ui\CommonRenderOptions::nonePosition);
$options
->text(myAttribute::tst_ban_bic)
->setDescription(
$originalLabel .
"<p>Le code BIC <i>(Business Identifier Code)</i> représenté par une série de <b>11 ou 8</b> lettres .</p>",
\Anakeen\Ui\CommonRenderOptions::topPosition
)
->setLabelPosition(\Anakeen\Ui\CommonRenderOptions::nonePosition);
Le même exemple avec de la css pour personnaliser l'aspect :
/* Positionnement 2 colonnes pour les attributs du cadre tst_f_dombancaire */
.dcpFrame__content[data-attrid="tst_f_dombancaire"] .dcpAttribute {
float: left;
display: inline-block;
min-height: 34px;
width: calc(50% - 1em);
margin-left: 0.5em;
margin-right: 0.5em;
}
/* Colorisation des descriptions des champs */
.dcpAttribute__description[data-attrid="tst_ban_agence"] {
background-color: rgba(0, 128, 50, 0.2);
border-color: #02bf54;
background: linear-gradient(to right, #c9de96 0%, #8ab66b 44%, #47bc43 100%);
}
.dcpAttribute__description[data-attrid="tst_ban_etablissement"],
.dcpAttribute__description[data-attrid="tst_ban_guichet"],
.dcpAttribute__description[data-attrid="tst_ban_numcompte"],
.dcpAttribute__description[data-attrid="tst_ban_clecompte"] {
background-color: rgba(15, 61, 128, 0.2);
border-color: #0062bf;
background: linear-gradient(to right, #e4f5fc 0%, #bfe8f9 34%, #2ab0ed 71%, #9fd8ef 100%);
}
.dcpAttribute__description[data-attrid="tst_ban_iban"],
.dcpAttribute__description[data-attrid="tst_ban_bic"] {
background-color: rgba(128, 63, 13, 0.2);
border-color: #bf7410;
background: linear-gradient(to right, #fceabb 0%, #fccd4d 37%, #f8b500 70%, #fbdf93 100%);
}
/* Alignement des descriptions pour le mode 2 colonnes */
.dcpFrame[data-attrid="tst_f_dombancaire"] .dcpAttribute__description {
min-height: 6em;
}
/* Suppression de la flèche pour les description du cadre tst_f_dombancaire */
.dcpFrame[data-attrid="tst_f_dombancaire"] .dcpAttribute__description::after,
.dcpFrame[data-attrid="tst_f_dombancaire"] .dcpAttribute__description::before {
display: none;
}
# Utilisation des structures RENDERDESCRIPTION
Les descriptions peuvent aussi être renseignées via les Smart Element de type RENDERDESCRIPTION (Description de
formulaire). Ces descriptions indiquent les messages à afficher pour chacun des Smart Field présents dans ce Smart
Element.
Une description de formulaire est pris en compte par défaut si son champ rd_mode ("Utilisé par défaut dans le mode")
est renseigné. Si le mode est edit alors la description sera prise en compte sur les rendus de modification (héritant
de Anakeen\Ui\DefaultEdit), si le mode est view, il sera pris en compte pour les rendu de consultation (héritant de
Anakeen\Ui\DefaultView). Si le mode vaut view et edit, il sera pris dans les 2 cas. S'il est vide, il ne sera pas
pris en compte par défaut.
Du plus, le champ rd_lang (Restriction à la langue) permet de ne prendre la description en fonction de la langue de
l'utilisateur. Si le champ rd_lang est vide alors la description sera prise quelle que soit la langue de
l'utilisateur.
Il est possible de contrôler par programmation la description de formulaire à utiliser. Pour cela, il ne faut pas
indiquer le champ rd-mode dans la description de formulaire. La méthode
Anakeen\Ui\RenderDefault::applyRenderDescription() permet d'ajouter les descriptions du formulaire dans le rendu.
Attention
La méthode Anakeen\Ui\RenderDefault::applyRenderDescription() ajoute les descriptions. Les anciennes descriptions
ne sont pas effacées. Par contre, les nouvelles sont remplacées par les descriptions contenues dans la description de
formulaire.
<?php
use Anakeen\Core\Internal\SmartElement;
use Anakeen\Ui\RenderOptions;
class MyCustomRender extends \Anakeen\Ui\DefaultView
{
/**
* Les descriptions incluses dans la description de
* formulaire "MY_DESCRIPTION" est pris en compte
*/
public function getOptions(SmartElement $document): RenderOptions
{
$options = parent::getOptions($document);
$myDescriptions = \Anakeen\Core\SEManager::getDocument("MY_DESCRIPTION");
if ($myDescriptions) {
$this->applyRenderDescription($myDescriptions, $options);
}
return $options;
}
}
# displayDeleteButton
Cette option indique si le bouton de suppression doit être affiché ou non.
Anakeen\Ui\CommonRenderOptions displayDeleteButton(bool $display)
# Restrictions
- Utilisable uniquement pour les rendus de modification ou de création.
- Non applicable aux Smart Fields de type
array,frameettab.
# Paramètres
L'argument $display indique si le bouton de suppression doit être affiché. Le bouton de suppression est affiché par
défaut.
# Cas particuliers
Aucun
# Exemples
$options->text("my_field")->displayDeleteButton(false);
# setInputTooltip
Cette option indique un texte à afficher lorsque le champ du Smart Field à saisir a le focus. Le tooltip n'est pas
affiché au survol (hover), mais lorsque le champ de saisie obtient le focus.
Anakeen\Ui\CommonRenderOptions setInputTooltip(string $htmlText)
# Restrictions
- Utilisable uniquement pour les rendus de modification ou de création.
- Non applicable aux Smart Fields de type
color,array,frameettab.
# Paramètres
L'argument htmlText est un fragment HTML qui sera utilisé pour le texte du tooltip.
# Cas particuliers
Aucun
# Exemples
# Css setInputTooltip
La couleur de ce tooltip est surchargeable à l'aide des règles css suivantes :
Exemple tooltip écrit en noir sur fond jaune pour le cadre "my_frame"
.dcpFrame__content[data-attrid="my_frame"] .tooltip.dcpAttribute__editlabel .tooltip-inner {
background-color: #f7f942; /* Yellow */
color: #000000;
}
.dcpFrame__content[data-attrid="my_frame"] .tooltip.dcpAttribute__editlabel.tooltip.top .tooltip-arrow {
border-top-color: #f7f942;
}
.dcpFrame__content[data-attrid="my_frame"] .tooltip.dcpAttribute__editlabel.tooltip.bottom .tooltip-arrow {
border-bottom-color: #f7f942;
}
# setAutoCompleteHtmlLabel
Cette option permet d'afficher un tooltip lorsque la souris passe au-dessus du bouton de déclenchement de l'aide à la saisie. Par défaut aucun tooltip n'est affiché.
Anakeen\Ui\CommonRenderOptions setAutoCompleteHtmlLabel(string $htmlText)
# Restrictions
- Utilisable uniquement pour les rendus de modification ou de création.
- Applicable uniquement aux Smart Fields qui ont une aide à la saisie.
# Paramètres
L'argument htmlText est un fragment HTML qui sera utilisé pour le texte du tooltip.
# Cas particuliers
Aucun
# Exemples
$options->text(My_structure::my_workpostalcode)
{ {Hello>setAutoCompleteHtmlLabel("Choisissez un code postal du <b>Gers</b>");
# Css setAutoCompleteHtmlLabel
La couleur de ce tooltip est surchargeable à l'aide des règles css suivantes :
Exemple tooltip écrit en noir sur fond jaune pour le cadre "my_frame"
.dcpFrame__content[data-attrid="my_frame"] .tooltip.dcpAttribute__autocomplete .tooltip-inner {
background-color: #f7f942; /* Yellow */
color: #000000;
}
.dcpFrame__content[data-attrid="my_frame"] .tooltip.dcpAttribute__autocomplete.tooltip.top .tooltip-arrow {
border-top-color: #f7f942;
}
.dcpFrame__content[data-attrid="my_frame"] .tooltip.dcpAttribute__autocomplete.tooltip.bottom .tooltip-arrow {
border-bottom-color: #f7f942;
}
# addButton
Cette option ajoute un bouton à droite de la valeur.
En mode édition il est placé à gauche du bouton de suppression.
En mode consultation, il est placé à l'extrémité droite de la valeur.
Anakeen\Ui\CommonRenderOptions addButton(Anakeen\Ui\ButtonOptions $buttonOptions)
# Restrictions
- Non applicable aux Smart Fields de type
array,frameettab.
# Paramètres
L'argument en entrée est un objet de type Anakeen\Ui\ButtonOptions qui configure les différents paramètres du bouton.
target: Nom de la fenêtre du navigateur vers laquelle le lien sera envoyé. Si le nom est_dialog, une fenêtre de dialogue interne sera utilisée. Par défaut c'est_self.windowHeight: Hauteur de la fenêtre de dialogue La dimension doit être une dimension css valable (c'est à dire un nombre suivi immédiatement de son unité).windowWidth: Largeur de la fenêtre de dialogue La dimension doit être une dimension css valable (c'est à dire un nombre suivi immédiatement de son unité).windowTitle: Titre de la fenêtre de dialogue. Si cet argument est vide alors le titre de la page ciblée est utilisé si son accès est autorisé (même domaine). Le titre est composé dynamiquement et les variables{ {value} }et{ {displayValue} }peuvent être utilisées.
title: Texte HTML du tooltip du bouton visible lorsque le pointeur de la souris est sur le lien. Ce texte est un fragment HTML et les variables de valeur de Smart Field ({ {value} }et{ {displayValue} }) peuvent être utilisées.url: Url d'accès à la page. L'url est composée dynamiquement et les variables de valeur de Smart Field (et) peuvent être utilisées. Ces valeurs sont encodées (au moyen de la fonctionencodeUriComponent).htmlContent: Texte du bouton (fragment HTML de contenu phrasé). Ce texte est un fragment HTML et les variables de valeur de Smart Field (et{ {displayValue} }) peuvent être utilisées.class: Classe css supplémentaire à mettre sur le bouton afin de personnaliser le bouton par css ou l'identifier par javascript.
# Cas particuliers
Pour les Smart Fields "multiple" (type docid, account et enum), les variables de valeurs de Smart Field sont des
tableaux. Ils doivent être adressés en Mustache par des répétables.
Exemple :
<b>
Voici les valeurs :
<ul>
{{#.}}
<li>{{displayValue}}</li>
{{/.}}
</ul>
</b>
Note
Les urls commençant par #actions/ déclenchent l'événément actionClick
# Exemples
<?php
$buttonConfig = new Anakeen\Ui\ButtonOptions();
$buttonConfig->url = "/myapi/{{value}}";
$buttonConfig->title = "Send a mail to response";
$buttonConfig->class = "myClass";
$buttonConfig->target = "_dialog";
$buttonConfig->htmlContent = "<b>Send it</b>";
$options->text("my_mail")->addButton($buttonConfig);
Afficher un bouton sur une relation pour avoir un aperçu du Smart Element.
<?php
$viewDoc = new \Anakeen\Ui\ButtonOptions();
$viewDoc->htmlContent = '<i class="fa fa-eye"></i>';
$viewDoc->url = sprintf("api/v2/smart-elements/{{value}}.html");
$viewDoc->target = "_dialog";
$viewDoc->windowWidth = "400px";
$options->docid("my_relation")->addButton($viewDoc);
# setTemplate
Permet de définir le template à utiliser pour afficher la valeur du Smart Field.
Ce template ne s'applique qu'à la valeur et pas au label. Le label peut être effacé si nécessaire avec l'option de rendu
setLabelPosition.
Anakeen\Ui\CommonRenderOptions setTemplate(string $htmlText, array $extraKeys = array()) )
# Restrictions
En consultation, le template n'est pas appliqué si la valeur est vide. Dans ce cas, c'est l'option showEmptyContent qui est appliquée.
# Exception
Si un des templates ajoutés n'existe pas alors l'exception suivante est déclenchée à l'exécution :
UI0004 = 'Render template file not found : %s'
# Paramètres
L'argument $htmlText est un template Mustache.
L'argument $extraKeys est un tableau de [clés additionnelles][additional_keys].
# Déclaration d'un modèle
Exemple :
$options->frame("my_frame")->setTemplate('<div class="my">{{{attributes.my_firstattr.htmlContent}}}</div>');
$options->text("my_text")->setLabelPosition("none");
$options
->text("my_text")
->setTemplate(
'<div class="my">{{attributes.my_text.label}}/{{attributes.my_text.id}}' .
' {{attributes.my_text.attributeValue.value}}</div>'
);
// récupération du modèle dans un fichier (chemin relatif au répertoire d'installation)
$options->text("my_info")->setTemplate(file_get_contents("MYAPP/Templates/myInfo.mustache"));
Applicable à tous les types, y compris "array", même si ce dernier offre d'autres possibilités dans la déclaration d'un template spécifique comme cela est décrit dans les chapitres suivants.
La visibilité est applicable au contenu donc à l'ensemble du template de Smart Field.
# Clefs applicables au template
Le template est un template Mustache.
| Clef | Signification |
|---|---|
| {{properties.id}} | Identifiant du Smart Element |
| {{properties.name}} | Nom logique du Smart Element |
| {{properties.initid}} | Identifiant de la lignée du Smart Element |
| {{properties.icon}} | Url de l'icône du Smart Element |
| {{properties.title}} | Titre du Smart Element |
| {{properties.family.title}} | Titre de la Smart Structure du Smart Element |
| {{properties.family.id}} | Identifiant de la Smart Structure du Smart Element |
| {{properties.family.icon}} | Icône de la Smart Structure du Smart Element |
| {{properties.isReadMode}} | (booléen) Indique si le rendu de Smart Element est en mode consultation |
| {{properties.isWriteMode}} | (booléen) Indique si le rendu de Smart Element est en mode modification |
{{attributes.attrid.label}} | Libellé du Smart Field attrid |
{{attributes.attrid.attributeValue.value}} | Valeur brute du Smart Field attrid |
{{attributes.attrid.attributeValue.displayValue}} | Valeur affichable du Smart Field attrid |
{{attributes.attrid.attributeValue.[y]}} | Information de |
{{attributes.attrid.label}} | Libellé du Smart Field attrid |
{{attributes.attrid.isReadMode}} | Valeur booléenne indiquant que le mode d'affichage du Smart Field est la consultation |
{{attributes.attrid.isWriteMode}} | Valeur booléenne indiquant que le mode d'affichage du Smart Field est la modification |
{{attributes.attrid.isEmpty}} | Valeur booléenne indiquant que le Smart Field a une valeur vide (chaîne vide ou "null", tableau vide pour les multiples). 0 n'est pas considéré comme vide. Pour les structures, isEmpty est vrai si tous ses éléments sont vides aussi. |
{{attributes.attrid.renderOptions}} | Paramètres de rendu comme par exemple "labelPosition" ou "showEmptyContent" |
{{{attributes.attrid.htmlContent}}} | Fragment html interne correspondant au Smart Field x (fonction de la visibilité et du mode de rendu) |
{{{attributes.attrid.htmlView}}} | Fragment html interne correspondant label + content (non applicable au type tab ni aux Smart Fields contenu dans un tableau) |
{{{attributes.attrid.htmlDefaultContent}}} | Idem htmlContent sauf que dans ce cas, si le Smart Field a lui-même un template spécifique alors il ne sera pas pris en compte |
{{{attributes.attrid.htmlDefaultView}}} | Idem htmlView sauf que dans ce cas, si le Smart Field a lui-même un template spécifique alors il ne sera pas pris en compte |
| {{attribute.label}} | Label du Smart Field courant |
| {{attribute.attributeValue.value}} | Valeur brute du Smart Field courant (uniquement pour les Smart Fields non structurant) |
| {{attribute.attributeValue.displayValue}} | Valeur affichable du Smart Field courant |
| {{attribute.attributeValue.[y]}} | Information de |
| {{attribute.renderOptions}} | Paramètres de rendu du Smart Field comme par exemple "labelPosition" ou "showEmptyContent" |
| {{{attribute.htmlContent}}} | Fragment html interne du Smart Field courant (contenu seulement sans le label) |
| {{{attribute.htmlView}}} | Fragment html interne du Smart Field courant (label + content) (non applicable au type tab) |
| {{{attribute.htmlDefaultContent}}} | Idem htmlContent sauf que dans ce cas, si le Smart Field a lui-même un template spécifique alors il ne sera pas pris en compte |
| {{{attribute.htmlDefaultView}}} | Idem htmlView sauf que dans ce cas, si le Smart Field a lui-même un template spécifique alors il ne sera pas pris en compte |
| {{attribute.id}} | Identifiant du Smart Field courant |
| {{attribute.isReadMode}} | Valeur booléenne indiquant que le mode est la consultation (Utilisable pour avoir un template conditionnel en fonction du mode) |
| {{attribute.isWriteMode}} | Valeur booléenne indiquant que le mode d'affichage du Smart Field est la modification |
| {{attribute.isEmpty}} | Valeur booléenne indiquant que le Smart Field a une valeur vide. Ne peux pas être utilisé en consultation car si la valeur est vide, le Smart Field n'est pas affiché (Voir showEmptyContent) |
Pour les Smart Fields multiples, la valeur de attribute.attributeValue ou attributes.<attrid>.attributeValue est un
tableau de valeur.
- Exemple pour ajouter une
<div>autour d'un Smart Field :
$options->account(MyStructure::my_text)->setTemplate(
'<div style="outline:solid 1px red;padding:5px;">
{{{attribute.htmlDefaultView}}}
</div>'
);
On notera dans cet exemple, l'utilisation de htmlDefaultView et non htmlView afin d'indiquer explicitement qu'on
utilise pas notre propre template personnalisé.
- Exemple de modèle pour un Smart Field de type
accountmultiple
$options->account(MyStructure::my_account_multiple)->setTemplate(
'<div style="border:solid 1px grey;padding:5px;">
<ol>
{{#attribute.attributeValue}}
<li><img src="{{icon}}"> {{displayValue}}</li>
{{/attribute.attributeValue}}
</ol>
</div>'
);
WARNING
Si le Smart Field a modifier est dans un tableau alors les clefs en attributes.<attrid>.* sont restreintes au seul
attrid du Smart Field courant. Il n'est donc pas possible dans ce cas de représenter un autre Smart Fields que le Smart
Field courant.
# Modèle de cadre
Exemple de modèle de cadre:
$options->frame("my_frame")->setTemplate('<div>
<div>
label = {{attributes.first_field.label}}<br />
{{{attributes.first_field.htmlContent}}}
</div>
<div>
label = {{attributes.second_field.label}}<br />
{{{attributes.second_field.htmlContent}}}
</div>
<div>
label = {{attributes.third_field.label}}<br />
{{{attributes.third_field.htmlContent}}}
</div>
</div>');
# Modèle de tableau
Les clefs supplémentaires suivantes sont disponibles pour les tableaux.
| Clef | Signification |
|---|---|
{{attributes.<arrayAttrid>.rows}} | Liste des lignes de tableaux ("arrayAttrid" est un Smart Field de type tableau) |
{{content.<attrid>.label}} | Label du Smart Field "attrid" (élément de rows) |
{{{content.<attrid>.htmlContent}}} | Fragment html interne de la cellule y (élément de "rows") . |
{{content.<attrid>.attributeValue.value}} | Valeur brute (élément de "rows") |
{{content.<attrid>.attributeValue.displayValue}} | Valeur affichable (élément de "rows") |
{{content.<attrid>.attributeValue.[z]}} | Information de |
| ... | |
| {{attribute.rows}} | Liste des lignes du tableau courant |
| {{index}} | Numéro de la rangée (élément de "rows") |
Le template de tableau doit contenir une balise table avec la classe dcpArray__table pour indiquer le container qui
sera utilisé pour représenter le Smart Field.
Les classes de styles et les Smart Fields nécessaires au fonctionnement du widget de tableau seront ajoutés au modèle pour disposer d'un comportement et d'un aspect similaire au tableau original.
Exemple de modèle de tableau :
$options->frame("my_frame")->setTemplate('<table class="dcpArray__table">
<thead>
<tr>
<th class="special">Identification</th>
<th>Deuxième et troisième cellules</th>
</tr>
</thead>
<tbody>
{{#attribute.rows}}
<tr>
<td>
<b>{{content.my_firstcell.label}}</b> <br />
{{{content.my_firstcell.htmlContent}}}
</td>
<td>
{{{content.my_secondcell.htmlContent}}} <br />
{{{content.my_thirdcell.htmlContent}}}
</td>
</tr>
{{/attribute.rows}}
</tbody>
</table>');
Si le modèle de tableau n'est pas une balise table, il est nécessaire de préciser la classe dcpArray__content__line
dans l'élement qui sera considéré comme la rangée (tr).
Exemple de modèle de tableau contenant un Smart Field image (my_photo) et un Smart Field relation (my_species) avec
des balises div :
$options->frame("my_frame")->setTemplate('<div class="dcpArray__table">
{{#attribute.rows}}
<div class="dcpArray__content__line">
{{#content.my_photo.attributeValue.value}}
<img class="my__photo" src="api/v2/smart-elements/{{properties.id}}/images/my_photo/{{index}}/sizes/60x60c.png" />
{{/content.my_photo.attributeValue.value}} {{^content.my_photo.attributeValue.value}}
<img class="my__nophoto" src="api/v2/images/assets/sizes/60x60c/zoo_nophoto.png" />
{{/content.my_photo.attributeValue.value}}
<div>{{{content.my_species.htmlContent}}}</div>
</div>
{{/attribute.rows}}
</div>');
# Complément pour la modification de tableau
En mode "modification", le modèle général de tableau n'affiche pas les boutons pour supprimer, sélectionner et ajouter des lignes.
Pour placer ces éléments d'interface il faut les insérer explicitement dans le modèle.
$options->frame("my_frame")->setTemplate('<table class="dcpArray__table">
<thead>
<tr>
{{#attribute.toolsEnabled}}
<th>Outils</th>
{{/attribute.toolsEnabled}}
<th class="special">Identification</th>
<th>Deuxième et troisième cellules</th>
</tr>
</thead>
<tbody>
{{#attribute.rows}}
<tr>
{{#attribute.toolsEnabled}}
<td>{{{rowTools}}}</td>
{{/attribute.toolsEnabled}}
<td>
<b>{{content.my_firstcell.label}}</b> <br />
{{{content.my_firstcell.htmlContent}}}
</td>
<td>
{{}{content.my_secondcell.htmlContent}} <br />
{{{content.my_thirdcell.htmlContent}}}
</td>
</tr>
{{/attribute.rows}}
</tbody>
</table>
<div>{{{attribute.tableTools}}}</div>');
| Clef | Signification |
|---|---|
| {{rowTools}} | Boutons de gestion de la rangée de tableau (élément de rows) |
{{attributes.attrid.tableTools}} | Boutons de gestion du tableau attrid (contient le boutons d'ajout et de duplication) |
{{attributes.attrid.toolsEnabled}} | Booléen indiquant que le tableau peut être modifié (ajout, suppression, déplacement de lignes) |
TIP
Pour avoir un même modèle de tableau en consultation et en modification, il est possible d'afficher les boutons suivant
la variable { {attribute.toolsEnabled} }.
WARNING
Les modèles de tableau pour les formulaires doivent être basés sur des tableaux (balise table) HTML.
# Modèle de Smart Field contenu dans un tableau
Les Smart Fields qui sont dans un tableau disposent des mêmes possibilités que les modèles classiques. La différence se
situe au niveau de la clef { {attribute.attributeValue} }. Cette clef retourne la valeur de le Smart Field en fonction
de la rangée du tableau et non un tableau de valeurs.
WARNING
Pour les Smart Fields "multiple" dans un tableau, la valeur est un tableau qui contient la liste de valeurs de le Smart Field pour la rangée.
# Ajouter des clefs de modification
En plus des clefs prédéfinies des clefs supplémentaires peuvent être fournies pour le modèle.
$options
->docid(MyStructure::my_relation)
->setTemplate(
"<div style=\"border:inset 3px orange\">{{{Hello}}}<h1>{{attribute.id}}</h1> {{{attribute.htmlContent}}}</div>",
array("Hello" => "<h1>World</h1>")
);
Ces clefs sont des variables Mustache, elles peuvent aussi être utilisées dans un itérateur (valeur de type array) ou
pour une condition.
$options->docid()->setTemplate(
"<div>{{{Hello}}}<ol>{{#NumberList}}<li>{{Number}}</li>{{/NumberList}}</ol>
<h1>{{attribute.id}} / {{attribute.label}}</h1>
{{{attribute.htmlContent}}}</div>",
array(
"Hello" => "<h1>World</h1>",
"NumberList" => array(array("Number" => "One"), array("Number" => "Two"), array("Number" => "Three"))
)
);
Pour ajouter des clefs dans les rangées d'un tableau, il faut utiliser "attributes.rows".
Exemple d'utilisation des clefs pour renseigner la composition de la dernière colonne d'un tableau.
$options->arrayAttribute("zoo_array_dates")->setTemplate(
'
<table class="dcpArray__table"" rules="all" style="border:solid 3px orange; ">
<thead>
<tr>
<th class="special dcpArray__head__cell">
Identification : {{attributes.zoo_date_array.label}}
</th>
{{#attribute.isWriteMode}}
<th class="dcpArray__head__cell">
Tools
</th>
{{/attribute.isWriteMode}}
<th class="dcpArray__head__cell">
Deuxième et troisième cellules
</th>
<th class="dcpArray__head__cell">
Extra custom {{customTitle}}
</th>
</tr>
</thead>
<tbody>
{{#attribute.rows}}
<tr>
<td>
<b>{{content.zoo_date_array.label}}</b>
<br/>
{{{content.zoo_date_array.htmlContent}}}
</td>
{{#attribute.isWriteMode}}
<td>
{{{rowTools}}}
<br/>
THE TOOLS IN THE MIDDLE
</td>
{{/attribute.isWriteMode}}
<td>
{{{content.zoo_time_array.htmlContent}}}
<br/>
{{{content.zoo_timestamp_array.htmlContent}}}
</td>
<td>
{{custom.foo}}/{{custom.bar}}/{{customTitle}}
</td>
</tr>
{{/attribute.rows}}
</tbody>
</table>
<div style="border:solid 2px green; font-size:200%">
The table tools
{{#attribute.isWriteMode}}
{{{attribute.tableTools}}}
{{/attribute.isWriteMode}}
</div>
',
array(
"customTitle" => "Titre personnalisé",
"attribute" => array(
"rows" => array(
"custom" => array(
array(
"foo" => "One",
"bar" => "Uno"
),
array(
"foo" => "Two",
"bar" => "Duo"
),
array(
"foo" => "Three",
"bar" => "Trio"
)
)
)
)
)
);
# addHtmlClass À partir de la version 2021.01
Cette option permet de rajouter des classes HTML personnalisées à la racine de la DOM du Smart Field ou du Smart Element.
Anakeen\Ui\CommonRenderOptions addHtmlClass(string $class)
Le paramètre $class est une chaîne de caratères contenant une ou plusieurs classes séparées par un espace. Ces classes
sont ajoutées à l'élément racine de la DOM et sont manipulables par CSS ou
JavaScript.
# Restrictions
Aucune restriction
# Exemples
Ajout des classes my-custom-class et my-custom-view-class sur un Smart Field my_field:
$options->text("my_field")->addHtmlClass("my-custom-class my-custom-class-view");
DOM du Smart Field my_field
<div
class="row dcpAttribute form-group dcpAttribute--type--text dcpAttribute--visibility--W dcpAttribute__labelPosition--up my-custom-class my-custom-view-class"
data-attrid="my_field"
>
<div
class="dcpAttribute__left control-label dcpAttribute__label dcpAttribute__label--text dcpAttribute__labelPosition--up dcpLabel"
data-attrid="my_field"
>
<label for="view52-my_field">Field Label</label>
</div>
<div
class="dcpAttribute__right dcpAttribute__content dcpAttribute__content--text dcpAttribute__labelPosition--up dcpAttribute__content--widget"
data-attrid="my_field"
data-dcpattribute_content=""
data-type="text"
>
<span class="dcpAttribute__value dcpAttribute__value--read dcpAttribute__content__nobutton" data-attrid="my_field">
<span class="dcpAttribute__content__value">Field Value</span>
</span>
</div>
</div>
Ajout de la classe is-custom au Smart Element
$options->document()->addHtmlClass("is-custom");
DOM du Smart Element :
<div class="smart-element is-custom" data-controller="smart-element-controller-1">
<div class="smart-element-wrapper">
<div class="document">
... Contenu du Smart Element
</div>
</div>
</div>
# removeHtmlClass À partir de la version 2021.01
Cette option annule l'ajout de classes HTML personnalisées préalablement ajoutées par la méthode
addHtmlClass.
Anakeen\Ui\CommonRenderOptions removeHtmlClass(string $class)
Le paramètre $class est une chaîne de caractères contenant une ou plusieurs classes séparées par un espace. Ces
classes sont retirées de la DOM.
# Restrictions
Seules les classes personnalisées (ajoutées au moyen de addHtmlClass) sont enlevées. Les classes présentes par défaut à la racine de la DOM du Smart Element ou des Smart Fields ne peuvent pas être enlevées par cette méthode.
# Exemples
Suppression de la classe personnalisée class-b après l'ajout de class-a class-b class-c sur le Smart Field
my_field:
$options->text("my_field")->addHtmlClass("class-a class-b class-c");
$options->text("my_field")->removeHtmlClass("class-b");
DOM du Smart Field my_field
<div
class="row dcpAttribute form-group dcpAttribute--type--text dcpAttribute--visibility--W dcpAttribute__labelPosition--up class-a class-c"
data-attrid="my_field"
>
<div
class="dcpAttribute__left control-label dcpAttribute__label dcpAttribute__label--text dcpAttribute__labelPosition--up dcpLabel"
data-attrid="my_field"
>
<label for="view52-my_field">Field Label</label>
</div>
<div
class="dcpAttribute__right dcpAttribute__content dcpAttribute__content--text dcpAttribute__labelPosition--up dcpAttribute__content--widget"
data-attrid="my_field"
data-dcpattribute_content=""
data-type="text"
>
<span class="dcpAttribute__value dcpAttribute__value--read dcpAttribute__content__nobutton" data-attrid="my_field">
<span class="dcpAttribute__content__value">Field Value</span>
</span>
</div>
</div>
# setHtmlAttribute À partir de la version 2021.01
Cette option permet de définir un attribut HTML personnalisé à la racine de la DOM du Smart Element ou du Smart Field concerné
Anakeen\Ui\CommonRenderOptions setHtmlAttribute(string $attr, string | null $value)
Les paramètres sont :
$attr: une chaîne de caractères décrivant le nom de l'attribut HTML$value: une chaîne de caractères décrivant la valeur de l'attribut HTML, ounullsi l'on souhaite enlever un attribut HTML personnalisé
# Restrictions
Comme défini dans la norme HTML, les attributs HTML et leurs valeurs ne peuvent pas contenir les caractères suivants :
[ \ " ' > / `
Certains attributs ne sont pas modifiables. La méthode lève une erreur si un attribut est référencé dans l'utilisation
de la méthode setHtmlAttribute.
WARNING
Les attributs non modifiables sont :
data-controllerdata-structuredata-original-titledata-original-titledata-roledata-attriddata-typedata-dcpattribute_content
# Exemples
Ajout de l'attribut data-is-tagged à la valeur true sur le Smart Element:
$options->document()->setHtmlAttribute("data-is-tagged", "true");
DOM du Smart Element :
<div class="smart-element" data-controller="smart-element-controller-1" data-is-tagged="true">
<div class="smart-element-wrapper">
<div class="document">
... Contenu du Smart Element
</div>
</div>
</div>
Suppression de l'attribut personnalisé data-is-tagged au Smart Field my-field :
$options->common("my_field")->setCustomHTMLAttribute("data-is-tagged", null);
# setTranslations
Configuration des différents textes utilisés dans les interfaces des Smart Fields. Ces textes sont par défaut configurés et sont modifiés suivant la locale de l'utilisateur connecté.
Anakeen\Ui\CommonRenderOptions setTranslations(array $labels)
# Restrictions
Les textes à traduire sont fonction des types de Smart Fields.
Les labels suivants sont communs à tous les types :
deleteLabel: Tooltip affiché sur le bouton de suppression de valeurcloseErrorMessage: Tooltip de fermeture du message d'erreur de Smart Field
Suivant les types d'autres textes peuvent être traduits :
# Paramètres
L'argument $labels est un tableau php contenant chacun des labels défini par sa clé.
# Cas particuliers
# Exemples
$options->commonOption("my_attribute")->setTranslations(array(
"closeErrorMessage" => ___("Close error message", "my"),
"deleteLabel" => ___("Remove attribute value", "my")
));
# setCustomWidgetAttributeFunction
Modification du widget utilisé pour rendre le Smart Field
Anakeen\Ui\CommonRenderOptions setCustomWidgetAttributeFunction(string $widgetFunctionName)
# Restrictions
Le nom du widget doit être le nom d'un widget héritant de $.Anakeen.AnakeenAttribut qui est ajouté dans le contexte
d'exécution du document avant le rendu du widget.
# Paramètres
L'argument $widgetFunctionName est un nom de widget jquery ui héritant de $.Anakeen.AnakeenAttribut.
# Cas particuliers
Aucun.
# Exemples
Cet exemple associe le widget myCustomAttribute au Smart Field my_attribute.
Déclaration de l'option dans le options de rendu :
<?php
use Anakeen\Core\Internal\SmartElement;
use Anakeen\Ui\RenderOptions;
class MyCustomRender extends \Anakeen\Ui\DefaultView
{
/**
* L'attribut `my_attribute` utilisera le widget `myCustomAttribute`.
*/
public function getOptions(SmartElement $document): RenderOptions
{
$options = parent::getOptions($document);
$options->text("my_attribute")->setCustomWidgetAttributeFunction("myCustomAttribute");
return $options;
}
/**
* Ajout du fichier JS contenant le code du nouveau widget
*/
public function getJsReferences(SmartElement $document = null)
{
$js = parent::getJsReferences();
$js["myWidget"] = "MY/Layout/myWidget.js";
return $js;
}
}
Fichier "myWidget.js" de définition d'un nouveau widget de Smart Field.
$.widget("myproject.myCustomAttribute", $.Anakeen.AnakeenAttribute, {
/**
* Init the dom of the attribute
* @private
*/
_initDom: function() {
this._super();
if (this.getMode() === "write") {
//Add code for write representation of the attribute
} else {
//Add code for consult representation of the attribute
}
},
/**
* Init the event of the attribute
* @private
*/
_initEvent: function() {
//Add the custom event of the attribute
this._super();
},
/**
* Modify value to widget and send notification to the view
*/
setValue: function wAnakeenViewTreeSetValue(objValue) {
this._super(objValue);
//Add code for the modification of the value of the attribute
},
/**
* Return the value stored in the wiget
*
* @returns {*|number|.options.attributeValue}
*/
getValue: function wAnakeenViewTreeGetValue() {
let value = this._super();
//Add code for the consultation of the value of the attribute
return value;
},
getType: function wAnakeenViewTreegetType() {
//return the type of the attribute
return "myAttribute";
}
});
Autre exemple :
$options->htmltext()->setCustomWidgetAttributeFunction("AnakeenText");
Dans ce cas, tous les Smart Fields de type htmltext sont rendus comme des Smart Fields de type text. Le résultat est
que la valeur brute (texte avec les balises html) apparaitra à la place du texte formaté.
# Options de représentation type account
Le type account bénéficie des options de représentation du Smart Field de type docid.
Aucune méthode spécifique n'est disponible pour le Smart Field account.
# Options de représentation type array
# setRowCountThreshold
Cette option indique que le nombre de rangées d'un tableau doit être affiché lorsqu'il est supérieur à un certain seuil.
Par défaut, le nombre de rangée n'est pas affiché.
Anakeen\Ui\ArrayRenderOptions setRowCountThreshold(int $number)
# Restrictions
Aucune
# Paramètres
Si L'argument number est :
- égal à
0, alors le nombre de rangées est affiché systématiquement. - strictement positif, le nombre de rangées est affiché s'il est supérieur ou égal à cette limite.
- strictement négatif, le nombre de rangées n'est jamais affiché.
# Cas particuliers
Aucun
# Exemples
Affichage du nombre à partir de 10 rangées.
$options->arrayAttribute(My_structure::my_definition)->setRowCountThreshold(10);
# disableRowAdd
Cette option permet d'inhiber la possibilité d'ajouter une rangée dans un tableau.
À proprement parler, cette options supprime le bouton d'ajout de ligne, mais n'empêche pas l'ajout de rangées par programmation.
Anakeen\Ui\ArrayRenderOptions disableRowAdd(bool $disable)
# Restrictions
- Utilisable uniquement pour les rendus de modification ou de création.
# Paramètres
l'argument $disable indique si le bouton d'ajout de ligne doit être masqué.
# Cas particuliers
Aucun
# Exemples
Inhiber l'ajout dans le tableau "my_definition".
$options->arrayAttribute(My_structure::my_definition)->disableRowAdd(true);
# disableRowDel
Cette option permet d'inhiber la possibilité de supprimer une rangée dans un tableau.
À proprement parler, cette options supprime le bouton de suppression de ligne, mais n'empêche pas la suppression de rangées par programmation.
Anakeen\Ui\ArrayRenderOptions disableRowDel(bool $disable)
# Restrictions
- Utilisable uniquement pour les rendus de modification ou de création.
# Paramètres
l'argument $disable indique si le bouton de suppression de ligne doit être masqué.
# Cas particuliers
Aucun
# Exemples
Inhiber la suppression de rangée dans le tableau "my_definition".
$options->arrayAttribute(My_structure::my_definition)->disableRowDel(true);
# disableRowMove
Cette option permet d'inhiber la possibilité de déplacer une rangée dans un tableau.
À proprement parler, cette options supprime le bouton permettant de déplacer une ligne, mais n'empêche pas le déplacement d'une rangée par programmation.
Anakeen\Ui\ArrayRenderOptions disableRowMove(bool $disable)
# Restrictions
- Utilisable uniquement pour les rendus de modification ou de création.
# Paramètres
l'argument $disable indique si le bouton de déplacement de ligne doit être masqué.
# Cas particuliers
Aucun
# Exemples
Inhiber le déplacement de rangée dans le tableau "my_definition".
$options->arrayAttribute(My_structure::my_definition)->disableRowMove(true);
# setRowMinLimit
Cette option permet d'indiquer le nombre minimum de rangées pour un tableau.
Si le tableau a moins de rangées que le minimum indiqué, des rangées sont ajoutées jusqu'à cette limite lors du rendu du tableau. Les rangées ajoutées contiennent les valeurs par défaut des colonnes du tableau.
Le bouton de suppression de rangée est inhibé si la limite est atteinte.
Anakeen\Ui\ArrayRenderOptions setRowMinLimit(int $limit)
# Restrictions
- Utilisable uniquement pour les rendus de modification ou de création.
# Paramètres
l'argument $limit indique le nombre en dessous duquel le tableau sera automatiquement complété et le bouton de
suppression de ligne désactivé.
Si la limite est négative ou zéro aucune limite n'est définie.
# Cas particuliers
Cette option n'empêche pas supprimer des rangées par programmation. Elle empêche simplement les interactions utilisateur afin de ne pas supprimer des rangées si le seuil est atteint.
# Exemples
Le tableau "my_definition" doit avoir 5 rangées minimum.
$options->arrayAttribute(My_structure::my_definition)->setRowMinLimit(5);
# setRowMaxLimit
Cette option permet d'indiquer le nombre maximum de rangées pour un tableau.
Le bouton d'ajout de rangée est inhibé si la limite est atteinte.
Anakeen\Ui\ArrayRenderOptions setRowMaxLimit(int $limit)
# Restrictions
- Utilisable uniquement pour les rendus de modification ou de création.
# Paramètres
l'argument $limit indique le nombre au-dessus duquel le bouton d'ajout de rangée sera désactivé.
# Cas particuliers
Cette option n'empêche pas d'ajouter des lignes au dela du seuil par programmation. Elle contrôle juste l'interaction de bouton qui permet d'ajouter les rangées.
Si le tableau initial a plus de rangées que le seuil indiqué, les lignes au-delà du seuil ne sont pas supprimées. Le bouton "ajouter" est juste désactivé.
# Exemples
Le tableau peut avoir 10 rangées maximum dans le tableau "my_definition".
$options->arrayAttribute(My_structure::my_definition)->setRowMaxLimit(10);
# setRowMinDefault
Cette option permet d'indiquer le nombre minimum de rangées à afficher lors de l'édition d'un tableau.
Si le tableau a moins de rangées que le minimum indiqué, des rangées sont ajoutées jusqu'à cette limite lors du rendu du tableau. Les rangées ajoutées contiennent les valeurs par défaut des colonnes du tableau.
Anakeen\Ui\ArrayRenderOptions setRowMinDefault(int $default)
# Restrictions
- Utilisable uniquement pour les rendus de modification ou de création.
# Paramètres
l'argument $default indique le nombre en dessous duquel le tableau sera automatiquement complété.
Si la limite est négative ou zéro aucune limite n'est définie.
# Cas particuliers
Cette option n'empêche pas la suppression des rangées par l'interface.
# Exemples
Le tableau "my_definition" affiche toujours au moins la première rangée.
$options->arrayAttribute(My_structure::my_definition)->setRowMinDefault(1);
# setDescription (colonne de tableau)
Anakeen\Ui\CommonRenderOptions::topPosition: Texte affiché dans l'entête de tableau. Affiché au-dessus du libellé
Anakeen\Ui\CommonRenderOptions::bottomLabelPosition:Anakeen\Ui\CommonRenderOptions::bottomPosition:Texte affiché dans l'entête de tableau. Affiché au-dessous du libellé
Anakeen\Ui\CommonRenderOptions::topValuePosition: Texte affiché au-dessus de la valeur du Smart Field dans chaque rangée du tableau.
Anakeen\Ui\CommonRenderOptions::bottomValuePosition: Texte affiché au-dessous de la valeur du Smart Field dans chaque rangée du tableau.
Anakeen\Ui\CommonRenderOptions::clickPosition: Affiche une ancre à gauche du libellé dans l'entête du tableau. Cette ancre affiche la description lorsque l'utilisateur clique dessus.
# setDescription (tableau)
Cette option est une option commune qui permet d'afficher une description pour un tableau.
Son usage est le même mais le positionnement de la description est propre au type "tableau".
Anakeen\Ui\CommonRenderOptions::topPosition: Texte affiché dans l'entête de tableau. Affiché au-dessus du libellé
Anakeen\Ui\CommonRenderOptions::bottomPosition:Texte affiché dans l'entête de tableau. Affiché au-dessous du libellé
Anakeen\Ui\CommonRenderOptions::bottomLabelPosition: Texte affiché au-dessous de la valeur du Smart Field dans chaque rangée du tableau.
Anakeen\Ui\CommonRenderOptions::clickPosition: Affiche une ancre à gauche du libellé dans l'entête du tableau. Cette ancre affiche la description lorsque l'utilisateur clique dessus.
# setTranspositionWidth
Cette option indique la largeur à partir de laquelle le tableau est affiché en mode transposé. Le mode transposé permet d'afficher les tableaux sur des écrans de faible largeur.
Anakeen\Ui\ArrayRenderOptions setTranspositionWidth(string $transpositionWidth)
# Paramètres
- L'argument
$transpositionWidthindique la valeur de la largeur avec une unité absolue (px, rem, em).
Si la valeur est 0 alors le tableau n'est jamais transposé. La valeur par défaut est de "30rem".
Si la largeur du tableau est inférieure à $transpositionWidth le tableau est transposé. Si la largeur est supérieure
ou égale à $transpositionWidth, il n'est pas transposé.
Lorsque la taille du tableau est inférieur à 30rem :
Personnaliser la transposition
Lorsque le tableau est transposé, la classe css transpose est ajoutée à la balise table du tableau. La transposition
est faite intégralement en css. Il est alors tout à fait possible de modifier l'aspect de cette transformation en
surchargeant les règles css.
# Exemples :
- Le tableau "my_definition" est transposé si la taille de la fenêtre est inférieur ou égal à 600px
$options->arrayAttribute(My_structure::my_definition)->setTranspositionWidth("600px");
- Le tableau "my_definition" n'est jamais transposé
$options->arrayAttribute(My_structure::my_definition)->setTranspositionWidth("0");
# setTranslations
En plus des labels communs à tous les types de Smart Fields, les labels sur le widget array suivant peuvent être configurés.
Anakeen\Ui\ArrayRenderOptions setTranslations(array $labels)
# Restrictions
Aucune.
# Paramètres
Les labels suivants sont utilisés en modification :
dragLine: "Cliquer pour déplacer la ligne", : Message tooltip sur le bouton de déplacement de rangéeselectLine: "Selectionner la ligne", : Message tooltip sur le bouton de sélection de rangéedeleteLine: "Supprimer la ligne", : Message tooltip sur le bouton de suppression de rangée (icone poubelle)
Astuce
Mettre une chaine vide pour ne pas avoir de tooltip
# Options de représentation type color
Le widget de sélection de couleur est basé sur un widget
Kendo Ui Color Picker.
# setKendoColorConfiguration
Cette option permet de configurer l'aspect du widget de couleur.
Anakeen\Ui\ColorRenderOptions setKendoColorConfiguration(array $config)
# Restrictions
- Utilisable uniquement pour les rendus de modification ou de création.
- Attention : Les options propres à Kendo ne sont pas maintenues par Anakeen et leur bon fonctionnement n'est pas garanti par Anakeen.
# Paramètres
L'argument config est un tableau de valeurs indexées qui servent à modifier la configuration du widget.
Les valeurs possibles sont les
propriétés de configuration du widget kendo ui.
# Cas particuliers
Aucun
# Exemples
Choix d'une palette de deux couleurs.
$options->color(myFamily::my_choice)->setKendoColorConfiguration([
"palette" => ["#457fe2", "#e50054"],
"tileSize" => [
"width" => 100,
"height" => 50
]
]);
# Options de représentation type date
Le widget d'édition des date est basé sur un widget
kendo UI Date Picker.
# setKendoDateConfiguration
# Restrictions
Attention : Les options propres à Kendo ne sont pas maintenues par Anakeen et leur bon fonctionnement n'est pas garanti par Anakeen.
# Paramètres
L'argument config est un tableau de valeurs indexées qui servent à modifier la configuration du widget.
En modification, les valeurs possibles sont les
propriétés de configuration du widget kendo ui.
# Cas particuliers
- En consultation, seule la clé
formatest prise en compte. - La clé format est un format de date Kendo
# Exemples
Affichage de la date avec le jour de la semaine suivant la locale. Imposer une date inférieure à la date du jour
$options->date("MyFamily::my_birthday")->setKendoDateConfiguration(
array(
"format"=>"D",
"footer"=>"La date de naissance"
"max" => date("Y-m-d")
)
);
# setFormat
Cette option permet de modifier l'aspect de la valeur du Smart Field.
Anakeen\Ui\DateRenderOptions setFormat(string $format)
# Restrictions
- Utilisable uniquement pour les rendus de consultation.
# Paramètres
L'argument format est un template Mustache. Les variables qu'il peut utiliser sont :
value: Valeur brute,displayValue: Valeur formatée par le serveur.
Ce format doit être un fragment HTML valide.
Par défaut, le format est .
WARNING
Ce format est différent de celui indiqué par le widget kendo ui. La valeur de la variable contient
la valeur formatée par le widget si un format widget est précisé.
# Cas particuliers
Aucun
# Exemples
# setPlaceHolder
Cette option indique un texte qui est placé dans le champ de saisie lorsque la valeur est vide pour préciser le rôle de ce champ.
Anakeen\Ui\DateRenderOptions setPlaceHolder(string $text)
# Restrictions
- Utilisable uniquement pour les rendus de modification ou de création.
# Paramètres
L'argument $text est un texte simple (pas de html) qui sera utilisé comme placeholder du champ.
# Cas particuliers
Aucun
# Exemples
$options->date(My_family::my_date)->setPlaceHolder("Select a future date");
# Options de représentation type docid
TIP
Le widget d'édition des relation est basé sur un widget
kendo MultiSelect.
# setKendoMultiSelectConfiguration
Cette option permet de configurer le widget d'édition des relations.
Anakeen\UiSmartElementidRenderOptions setKendoMultiSelectConfiguration(array $config )
# Restrictions
- Utilisable uniquement pour les rendus de modification ou de création.
- Attention : Les options propres à Kendo ne sont pas maintenues par Anakeen et leur bon fonctionnement n'est pas garanti par Anakeen.
# Paramètres
L'argument config est un tableau de valeurs indexées qui servent à modifier la configuration du widget.
En modification, les valeurs possibles sont les
propriétés de configuration du widget kendo ui.
# Cas particuliers
- Les propriétés suivantes ne sont pas modifiables :
filter,autoBind,select,dataTextField,dataValueField,value,dataSource,select,change.
- La configuration
maxSelectedItemsn'est prise en compte que si le Smart Field est déclaré multiple.
Leur éventuelle modification est ignorée par le widget.
# Exemples
Modification des paramètres :
$options->docid()->setKendoMultiSelectConfiguration([
// Attendre 3 caractères avant de lancer l'aide à la saisie
"minLength" => 3,
// text de substitution lorsque le champ est vide
"placeholder" => "Search a document",
// Entête de la recherche
"headerTemplate" => '<div><h2>Résultat de la recherche</h2></div>'
]);
# setPlaceHolder
Cette option indique un texte qui est placé dans le champ de saisie lorsque la valeur est vide pour préciser le rôle de ce champ.
Anakeen\UiSmartElementidRenderOptions setPlaceHolder(string $text)
# Restrictions
- Utilisable uniquement pour les rendus de modification ou de création.
# Paramètres
L'argument $text est un texte simple (pas de html) qui est utilisé comme placeholder du champ.
# Cas particuliers
Aucun
# Exemples
$options->docid(My_family::my_document)->setPlaceHolder("Select the good document");
# setFormat
Cette option permet de modifier l'aspect de la valeur du Smart Field.
Anakeen\Ui\TextRenderOptions setFormat(string $format)
# Restrictions
- Utilisable uniquement pour les rendus de consultation.
# Paramètres
L'argument format est un format Mustache qui a comme variable les informations sur la valeur du Smart Field.
Ces informations pour le type docid sont :
value: Identifiant du Smart Element,displayValue: Titre du Smart Element.icon: Url de l'icône du Smart ElementfamilyRelation: Nom logique de la Smart Structureinitid: Identifiant du Smart Elementrevision: Revision du Smart Element (-1 si dernière révision)
Ce format doit être un fragment HTML valide.
Par défaut, le format est
<img class="dcpAttribute__value--icon" src="{{icon}}" />
<span class="dcpAttribute__content__value">{{displayValue}}</span>`.
# Cas particuliers
Aucun
# Exemples
Enlever l'icône de la Smart Structure pour les relations :
$options
->docid(My_family::my_relation)
->setFormat('<span class="dcpAttribute__content__value">{ {displayValue} }</span>');
# setDocumentIconSize
Cette option indique la dimension de l'icône de la relation.
Anakeen\UiSmartElementidRenderOptions setDocumentIconSize(string $size)
# Restrictions
- Utilisable uniquement pour les rendus de consultation.
# Paramètres
L'argument size indique la dimension de l'image à afficher.
Par défaut, la dimension est 14x14c. Cela affiche une icône carrée de 14px.
Le redimensionnement ne peut excéder la taille de l'icône originale.
Cette option ne modifie pas la taille css mais affiche une icône à la dimension désirée. Le poids du fichier icône est proportionnel à la taille demandée.
# Cas particuliers
Pour rétablir la taille par défaut, il faut indiquer null. Une dimension de 0 ou de 0x0, n'affichera pas l'icône.
# Exemples
Dimension de 32x32 rognée.
$options->docid(My_family::my_relation)->setDocumentIconSize("32x32c");
# addCreateDocumentButton
Cette option permet d'ajouter un bouton permettant de créer un Smart Element et de l'insérer dans le Smart Field. Si le Smart Field a déjà une valeur, le bouton affiche le formulaire de modification du Smart Element cible. Si le Smart Field n'a pas de valeur, le bouton affiche le formulaire de création.
Dans le cas d'un Smart Field multiple, le bouton ajouté affiche toujours un formulaire en création afin d'ajouter le nouveau Smart Element à la liste.
Anakeen\UiSmartElementidRenderOptions addCreateDocumentButton(\Anakeen\Ui\CreateDocumentOptions $options)
# Restrictions
- Utilisable uniquement pour les rendus de modification ou de création.
# Paramètres
L'argument $options permet de configurer le document à insérer. Il reprend les options de
(/ui/se/render/common/#addbutton)(/ui/se/render/common/#addbutton) pour configurer la taille de la fenêtre et les
caractéristiques du bouton.
Par contre, l'option target ne peux être que _dialog. Le formulaire pour le Smart Element à insérer ne s'ouvre que
dans une fenêtre de dialogue et ne peut être ouverte dans une autre fenêtre du navigateur.
L'option url n'est pas prise en compte. L'url utilisée pour l'affichage du formulaire est calculée en fonction des
paramètres de cette option.
L'option windowTitle est vide par défaut et le titre de la fenêtre de dialogue est calculé. Il reprend les
informations d'identification du document (icone et le nom du document). Dans ce cas
l'entête du Smart Element n'est pas affichée. Si cette option est
indiquée, l'entête du Smart Element est affiché.
Les autres paramètres sont :
familyName: Le nom logique de la Smart Structure utilisé pour la création. S'il n'est pas indiqué, la Smart Structure utilisée est celle du format du type du Smart Field. Ce paramètre n'est pas utilisé pour l'affichage du formulaire de modification.htmlCreateContent: Fragment HTML du bouton pour l'affichage en création. Le texte de l'optionhtmlContent(vide par défaut) précède ce texte.
Par défaut :<i class="fa fa-plus-circle" />htmlEditContent: Fragment HTML du bouton pour l'affichage en modification. Le texte de l'optionhtmlContent(vide par défaut) précède ce texte. Par défaut :<i class="fa fa-plus-pencil" />createLabel: Fragment HTML du label qui sera affiché sur le bouton du menu du formulaire permettant la sauvegarde et la fermeture de la fenêtre de dialogue.
Par défaut :Create and insert to "{ {label} }"updateLabel: Fragment HTML du label qui sera affiché sur le bouton du menu du formulaire permettant la création, l'insertion de la valeur et la fermeture de la fenêtre de dialogue.
Par défaut :Save and update "{ {label} }"
- formValues: Tableau indiquant les champs du formulaire qui doivent être modifiés lors de l'affichage du formulaire
de création. Ces valeurs ne sont pas utilisées pour le formulaire de modification. Les valeurs par défaut sont déjà
prérenseignées dans le formulaire. Les valeurs peuvent avoir 2 formes. Si c'est une chaîne de caractères, elle sera
considérée comme la valeur brute (value) et la valeur affichable (displayValue) du Smart Field. Dans ce cas, la
chaîne de caractères peut contenir des parties variables qui
permettent d'indiquer des informations du Smart Element principal.
Si cette chaîne est un tableau, il sera utilisé comme valeur complète du Smart Field. Dans ce cas, il doit contenir au moins
"value" dans ses index. Les valeurs complètes n'ont pas de parties variables.
Exemples :
Texte avec données variables : :
"Récupération de { {attributes.my_attr.attributeValue.displayValue} }"Récupération de la valeur complète d'un Smart Field du Smart Element d'origine :
"{ {attributes.my_attr.attributeValue} }"Objet avec seulement la valeur (ici cas d'un énuméré) :
["value"=> "M"]Objet complet avec valeur brute et affichable :
["value" => 1234, "displayValue" => "Mon document"]Objet complet (cas d'un fichier) :
["value" => "application/word|2892|Mon fichier.doc", "displayValue" => "Mon fichier.doc", "size" => 4567` "icon" => "resizeimg.php?img=CORE%2FImages%2Fmime-doc.png&size=14" ]
# Cas particuliers
Aucun
# Exemples
Affichage d'un formulaire d'un Smart Element de la Smart Structure "espèce" pour être inséré dans le Smart Field "species" de la Smart Structure "animal".
use Dcp\AttributeIdentifiers\Zoo_animal as AnimalAttributes;
use Dcp\AttributeIdentifiers\Zoo_espece as EspeceAttributes;
class AnimalRenderConfigEdit extends \Anakeen\Ui\DefaultEdit
{
public function getOptions(SmartElement $document)
{
$options = parent::getOptions($document);
$viewDoc=new \Anakeen\Ui\CreateDocumentOptions();
$viewDoc->formValues=[
EspeceAttributes::es_name => "Nouvelle espèce",
EspeceAttributes::es_description => "Provient de l'animal { {attributes.an_nom.attributeValue.displayValue} }",
EspeceAttributes::es_classe => sprintf("{ {attributes.%s.attributeValue} }", AnimalAttributes::an_classe),
EspeceAttributes::es_isprotected => ["value" => "1"],
EspeceAttributes::es_gardian => [
"value" => getIdFromName("", "ZOO_BIGGARDE"),
"displayValue"=>$document->getTitle("ZOO_BIGGARDE")],
];
$options->docid(AnimalAttributes::an_species)->addCreateDocumentButton($viewDoc);
return $options;
}
# Événements
Cette option déclenche les événements suivants sur la page web. Ils peuvent être interceptés par le contrôleur de Smart Element.
smartFieldCreateDialogSmartElementReady: lorsque le formulaire est affichésmartFieldCreateDialogSmartElementBeforeSetFormValues: avant l'affectation des valeurs dans le formulairesmartFieldCreateDialogSmartElementBeforeSetTargetValue: avant l'affectation du Smart Field dans le Smart Element principalsmartFieldCreateDialogSmartElementBeforeClose: avant la fermeture de la fenêtre de dialoguesmartFieldCreateDialogSmartElementBeforeDestroy: avant la destruction de la fenêtre de dialogue
# Options de représentation type double
Le type double bénéficie des options de représentation des Smart Fields de type int.
Les méthodes suivantes sont spécifiques au Smart Field double.
# setDecimalPrecision
Cette option indique le nombre de décimales du nombre.
En modification, la valeur est arrondie lors de la perte de focus (limitant ainsi la précision qui sera enregistrée en base).
En consultation, le nombre est affiché avec la précision indiquée. il est complété par des 0 s'il ne possède pas assez de décimales, et est arrondi si sa précision est supérieure.
Anakeen\Ui\DoubleRenderOptions setDecimalPrecision(int $number)
# Restrictions
Aucune
# Paramètres
L'argument number est un nombre positif ou nul. Si ce nombre est égal à 0, aucune limite n'est appliquée.
# Cas particuliers
Attention, lors de l'affichage du formulaire, les valeurs du serveurs sont tronquées si le nombre de décimales est
atteint. Par défaut, le nombre maximum de décimales n'est pas fixé. Par contre, la précision de la valeur est contrainte
par le type double de javascript.
# Exemples
Affichage de 4 décimales maximum.
$options->double()->setDecimalPrecision(4);
Ne pas montrer les zéros non significatifs avec 10 décimales :
$options
->double()
->setDecimalPrecision(10)
->setKendoNumericConfiguration([
"spinner" => false, // pas d'incrément prédéfini
"format" => "#,#.##########" // 10 décimales
]);
# Options de représentation type enum
# setDisplay
Cette option indique l'aspect du widget de choix d'énuméré.
Anakeen\Ui\EnumRenderOptions setDisplay(string $display)
# Restrictions
Utilisable uniquement pour les rendus de modification ou de création.
# Paramètres
Les valeurs possible pour l'argument $display sont :
list(valeur par défaut) : L'affichage de la sélection se présente sous forme d'une liste déroulante.
Cette liste n'est pas actualisée dynamiquement. Si l'énuméré est déclaré multiple (optionmultiple=yes), cet affichage est similaire à celui deautoCompletion.
WARNING
Dans ce mode d'affichage, la liste des énumérés est récupérée une seule fois lors de l'initialisation de l'affichage du Smart Field. Le filtre est réalisé sur le client avec les données initiales.
autoCompletion: Une liste de suggestions est présentée lorsqu'on saisit des caractères.
SiuseSourceUriesttrue, le serveur est interrogé à chaque caractère tapé pour retourner le résultat filtré. Si les données de l'énuméré sont déjà présentes sur le client, le résultat est filtré par le client sur le titre des libellés. L'opérateur utilisé est "commence par".
WARNING
Dans ce mode d'affichage, le filtre est réalisé sur le serveur après chaque modification du texte recherché.
vertical: L'affichage présente des boutons à cocher alignés verticalement, chaque choix s'affichant sur sa propre ligne.
Si l'énuméré est déclaré multiple (optionmultiple=yes), les boutons seront des checkbox ; dans le cas contraire, ce seront des boutons radio.
Cet affichage ne convient que si le nombre de choix est limité.
horizontal: L'affichage présente des boutons à cocher alignés horizontalement.
Si l'énuméré est déclaré multiple (optionmultiple=yes), les boutons seront des checkbox ; dans le cas contraire, ce seront des boutons radio.
bool: Cet affichage présente un seul bouton à bascule (coché ou pas coché). Cet affichage ne fonctionne que si le nombre d'éléments est de deux et seulement si l'énuméré n'est pas déclaré multiple (optionmultiple=yes).
Lors de l'affichage du formulaire, si la valeur initiale est vide, alors elle est affectée à la première valeur des deux valeurs possibles de l'énuméré.
# Cas particuliers
Aucun
# Exemples
Affichage vertical :
$options->enum(My_family::my_choice)->setDisplay(\Anakeen\Ui\EnumRenderOptions::verticalDisplay);
# useSourceUri
Cette option indique que le widget interroge le serveur pour avoir les données de l'énumeré.
Il n'utilise pas les données de l'énuméré fournie par l'api REST de la Smart Structure.
Anakeen\Ui\EnumRenderOptions useSourceUri(bool $useIt)
Important : Les données de l'énuméré sont fournis par l'api "structure" sauf si l'option eformat=auto est indiqué
comme option du Smart Field.
Le widget demande les informations de l'énuméré (via une requête au serveur) si ces données ne sont par fournies par la
structure de la Smart Structure au moment de l'initialisation du widget même si useSourceUri vaut false.
Par contre, si useSourceUri vaut true, les données sont demandées systématiquement au serveur.
En résumé, la requête serveur est envoyée dans les cas suivants :
| Requête serveur | useSourceUri=false | useSourceUri=true |
|---|---|---|
| eformat != auto | Non | Oui |
| eformat == auto | Oui | Oui |
Par défaut useSourceUri est égal à false et eformat est égal à list, donc le serveur n'est pas interrogé par
défaut pour connaître la liste des élements de l'énuméré.
# Restrictions
- Utilisable uniquement pour les rendus de modification ou de création.
# Paramètres
Le paramètre $useIt indique si le serveur doit être interrogé.
# Cas particuliers
# Exemples
# useFirstChoice
Cette option indique que le premier élément de la liste est sélectionné si la valeur est vide.
Anakeen\Ui\EnumRenderOptions useFirstChoice(bool $useFirst)
# Restrictions
- Utilisable uniquement pour les rendus de modification ou de création.
- Utilisable uniquement si l'énuméré n'est pas déclaré multiple (option
multiple=yes).
# Cas particuliers
Si une valeur par défaut est définie, cette option est sans effet.
# Exemples
# useOtherChoice
Cette option permet de rajouter un champ "Autre", permettant à l'utilisateur de saisir une valeur différente de celles proposées.
Anakeen\Ui\EnumRenderOptions useOtherChoice(bool $useIt)
# Restrictions
- Utilisable pour les rendus de modification
- Non applicable si affichage de type "booléen"
# Paramètres
Le paramètre $useIt indique si le champ de saisi est visible.
# Cas particuliers
# Exemples
# setPlaceHolder
Cette option indique un texte qui est placé dans le champ de saisie lorsque la valeur est vide pour préciser le rôle de ce champ.
Anakeen\Ui\EnumRenderOptions setPlaceHolder(string $text)
# Restrictions
- Utilisable uniquement pour les rendus de modification ou de création.
- Utilisable uniquement si l'option
setDisplayvaut :listouautocompletion
# Paramètres
L'argument $text est un texte simple (pas de html) qui sera utilisé comme placeholder du champ.
# Cas particuliers
Aucun
# Exemples
$options->enum(My_family::my_enum)->setPlaceHolder("Select the good one");
# setTranslations
En plus des labels communs à tous les types de Smart Fields, les labels sur le widget de choix de fichier peuvent être configurés.
Anakeen\Ui\FileRenderOptions setTranslations(array $labels)
# Restrictions
Aucune.
# Paramètres
Les labels suivants sont utilisés en modification :
chooseMessage: "Choisissez", : Message affiché si aucune valeur n'est sélectionnéeinvalidEntry: "Entrée invalide", : Message affiché si l'entrée sélectionnée ne fait pas partie de l'ensemble des valeurs possiblesinvertSelection: "Cliquer pour répondre """, : Message tooltip affiché pour le typeboolde l'optionsetdisplay.
Mot-clefs possibles : value, displayValueselectMessage: 'Sélectioner ', : Message tooltip pour le typehorizontalouverticalde l'optionsetdisplay
Mot-clefs possibles : value, displayValueunselectMessage: 'Désélectioner ', : Message tooltip de déselection pour le typehorizontalouverticalde l'optionsetdisplay. Mot-clefs possibles : value, displayValuechooseAnotherChoice: "Choisissez un autre choix", : Message "placeHolder" indiquant la saisie d'un autre choix (optionuseOtherChoice)selectAnotherChoice: "Valider cet autre choix", : Message du bouton de confirmation pour la saisie d'un autre choix (optionuseOtherChoice) - Visible sur les typesautocompletionetlistde l'optionsetdisplay.
Le label suivant est utilisé en consultation :
displayOtherChoice: " (autre choix)" : Format d'affichage de autre choix en consultation (optionuseOtherChoice).
Mot-clefs possibles : value, displayValue
# setOrderBy
Cette option indique l'ordre de tri des entrées de l'énuméré.
Anakeen\Ui\EnumRenderOptions setOrderBy(string $orderBy)
# Restrictions
- Cette option n'est prise en compte que lors de la modification.
TIP
Lors de la consultation, les éléments des énumérés multiples sont affichés dans l'ordre dans lequel ils ont été sélectionnés.
# Paramètres
Les valeurs possible pour l'argument $orderBy sont :
Anakeen\Ui\EnumRenderOptions::orderByOrderOption(default) : trie les énumérés par leur ordre inscrit dans la définition de l'énuméré.Anakeen\Ui\EnumRenderOptions::orderByKeyOption: trie les énumérés par ordre alphabétique de leur clé
WARNING
Ce tri ne tient pas compte de la locale de l'utilisateur. C'est un tri alphabétique non naturel.
Anakeen\Ui\EnumRenderOptions::orderByLabelOption: trie les énumérés par ordre alphabétique de leur label.
WARNING
Ce tri tient compte de la locale de l'utilisateur.
# Cas particuliers
Aucun
# Exemples
$options->enum(My_family::my_enum)->setOrderBy(Anakeen\Ui\EnumRenderOptions::orderByLabelOption);
# Options de représentation type file
# setContentDispositionInline
Cette option indique si le fichier à télécharger peut être consulté directement depuis le navigateur.
Anakeen\Ui\FileRenderOptions setContentDispositionInline(bool $inline)
# Restrictions
- Utilisable uniquement pour les rendus de consultation.
# Paramètres
Si l'argument inline est false (par défaut), le fichier est proposé au téléchargement lorsqu'on clique sur le
lien. Si la valeur est true, le fichier est affiché sur le navigateur si celui-ci prend en compte son format.
Note : Les options de liens sont applicables sur l'hyperlien généré.
# Cas particuliers
Aucun
# Exemples
Affichage direct sur une page différente
$fileLink = new \Anakeen\Ui\HtmlLinkOptions();
$fileLink->target = "_blank";
$options
->file(My_family::my_abstract)
->setLink($fileLink)
->setContentDispositionInline(true);
# setTranslations
En plus des labels communs à tous les types de Smart Fields, les labels sur le widget de choix de fichier peuvent être configurés.
Anakeen\Ui\FileRenderOptions setTranslations(array $labels)
# Restrictions
- Utilisable pour les rendus de modification ou de consultation.
# Paramètres
Les labels suivants utilisés en modification peuvent être changés :
dropFileHere: "Déposer le fichier ici"tooltipLabel: "Choisissez un fichier"downloadLabel: "Télécharger le fichier"recording: "Enregistrement"transferring: "Téléversement de"
Les textes de ces labels sont différents pour le type image.
Les labels suivants sont utilisés en consultation pour afficher la taille du fichier dans le tooltip :
kiloByte: "Ko"byte: "octets"
# Cas particuliers
# Exemples
Modification des traductions.
$options->file("my_file")->setTranslations([
"tooltipLabel" => "Choisissez un plan"
]);
# setPlaceHolder
Cette option indique un texte qui est placé dans le champ de saisie lorsque la valeur est vide pour préciser le rôle de ce champ.
Anakeen\Ui\FileRenderOptions setPlaceHolder(string $text)
# Restrictions
Utilisable uniquement pour les rendus de modification ou de création.
# Paramètres
L'argument $text est un texte simple (pas de html) qui sera utilisé comme placeholder du champ lorsque le champ est
vide.
# Cas particuliers
Aucun
# Exemples
$options->file(My_family::my_file)->setPlaceHolder("Select a pdf file, please.");
# setMimeIconSize
Cette option indique la dimension de l'icône du type mime du fichier.
Anakeen\Ui\FileRenderOptions setMimeIconSize(string $size)
# Restrictions
Utilisable pour les rendus de consultation et de modification.
# Paramètres
L'argument size indique la dimension de l'image à afficher.
Par défaut, la dimension est 20x20c. Cela affiche une icône carrée de 20px.
Le redimensionnement ne peut excéder la taille de l'icône originale qui est de 80x80px.
Cette option ne modifie pas la taille css mais affiche une icône à la dimension désirée. Le poids du fichier icône est proportionnel à la taille demandée.
# Cas particuliers
Pour rétablir la taille par défaut, il faut indiquer null. Une dimension de 0 ou de 0x0, n'affiche pas l'icône.
Sur le formulaire, l'icône est utilisée en image de fond (background-image) du champ de saisie (input). Elle ne peut dépasser la dimension du champ de saisie.
Les Smart Fields de type "image" n'utilisent pas cette icône dans leur représentation par défaut.
# Exemples
Dimension de 32x32 rognée.
$options->file(My_family::my_file)->setMimeIconSize("32x32c");
# Options de représentation type frame
# setCollapse
Le contenu d'un cadre est visible par défaut et son contenu peut être replié.
Cette option indique si la cadre peut être plié ou s'il doit être plié ou déplié par défaut.
Anakeen\Ui\TabRenderOptions setCollapse(bool|null $collapse)
# Restrictions
Aucune
# Paramètres
L'argument $collapse indique si le contenu du cadre doit être rendu replié.
Anakeen\Ui\FrameRenderOptions::collapseExpanded: Contenu déplié (valeur par défaut)Anakeen\Ui\FrameRenderOptions::collapseCollapsed: Contenu repliéAnakeen\Ui\FrameRenderOptions::collapseNone: Déplié et repliage non possible
# Cas particuliers
# Exemples
Ne pas autoriser le repliage des cadres :
class MyNoCollapseRender extends \Anakeen\Ui\DefaultView
{
public function getOptions(SmartElement $document)
{
$options = parent::getOptions($document);
$options->frame()->setCollapse(\Anakeen\Ui\FrameRenderOptions::collapseNone);
return $options;
}
}
# setDescription (cadre)
Cette option est une option commune qui permet d'afficher une description pour un tableau.
Son usage est le même mais le positionnement de la description est propre au type "cadre".
# Positionnement de la description d'un cadre
Anakeen\Ui\CommonRenderOptions::topPosition: Texte affiché au-dessus du cadre
Anakeen\Ui\CommonRenderOptions::bottomPosition: Texte affiché au-dessous du cadre
Anakeen\Ui\CommonRenderOptions::bottomLabelPosition: Texte affiché au-dessous du libellé du cadre.
Anakeen\Ui\CommonRenderOptions::clickPosition: Affiche une ancre à gauche du libellé du cadre. Cette ancre affiche la description lorsque l'utilisateur clique dessus.
# setResponsiveColumns
Cette option permet de placer les différents champs dans des colonnes suivant la largeur du cadre.
Différente taille de colonnes
Pour le cadre tst_f_identite
- 1 colonne si < 70 rem
- 2 colonnes => entre 70 et 100rem
- 3 => entre 100 et 110rem
- 4 => entre 110 et 120rem
- 5 => entre 120 et 130rem
- 6 => supérieur ou égal à 130rem
<?php
namespace Anakeen\SmartStructures\UiTest\TstUiEmployee\Renders;
use Anakeen\Ui\RenderOptions;
use SmartStructure\Fields\Tst_ddui_employee as myAttribute;
class EmployeeFrameViewSRCLRRender extends \Anakeen\Ui\DefaultView
{
public function getOptions(\Anakeen\Core\Internal\SmartElement $document): RenderOptions
{
$options = parent::getOptions($document);
$options
->frame(myAttribute::tst_f_identite)
->setResponsiveColumns([
["number" => 2, "minWidth" => "70rem", "maxWidth" => "100rem"],
["number" => 3, "minWidth" => "100rem", "maxWidth" => "110rem"],
["number" => 4, "minWidth" => "110rem", "maxWidth" => "120rem"],
["number" => 5, "minWidth" => "120rem", "maxWidth" => "130rem", "grow" => false],
["number" => 6, "minWidth" => "130rem", "grow" => false]
]);
return $options;
}
}
Résultat : Barre de menu personnalisée
La direction est par défaut de gauche à droite, il est aussi possible d'indiquer la direction de haut en bas.
Différente taille de colonnes
Pour le cadre tst_f_identite
- 1 colonne si < 70 rem
- 2 colonnes => entre 70 et 100rem
- 3 => entre 100 et 110rem
- 4 => entre 110 et 120rem
- 5 => entre 120 et 130rem
- 6 => supérieur ou égal à 130rem
<?php
namespace Anakeen\SmartStructures\UiTest\TstUiEmployee\Renders;
use Anakeen\Ui\FrameRenderOptions;
use Anakeen\Ui\RenderOptions;
use SmartStructure\Fields\Tst_ddui_employee as myAttribute;
class EmployeeFrameViewSRCLRRender extends \Anakeen\Ui\DefaultView
{
public function getOptions(\Anakeen\Core\Internal\SmartElement $document): RenderOptions
{
$options = parent::getOptions($document);
$options->frame(myAttribute::tst_f_identite)->setResponsiveColumns([
[
"number" => 2,
"minWidth" => "70rem",
"maxWidth" => "100rem",
"direction" => FrameRenderOptions::topBottomDirection
],
[
"number" => 3,
"minWidth" => "100rem",
"maxWidth" => "110rem",
"direction" => FrameRenderOptions::topBottomDirection
],
[
"number" => 4,
"minWidth" => "110rem",
"direction" => FrameRenderOptions::topBottomDirection
]
]);
return $options;
}
}
Résultat : Placement Top - Bottom des champs
L'aspect grow permet de d'étendre la dernière ligne si le nombre de champs est insuffisant pour remplir toute la
largeur. Cette option n'est valide qu'avec la direction FrameRenderOptions::leftRightDirection.
3 colonnes avec option `grow`
Pour le cadre tst_f_identite
- 1 colonne si < 70 rem
- 2 colonnes => entre 70 et 100rem
- 3 => entre 100 et 110rem (avec extension des champs)
<?php
namespace Anakeen\SmartStructures\UiTest\TstUiEmployee\Renders;
use Anakeen\Ui\FrameRenderOptions;
use Anakeen\Ui\RenderOptions;
use SmartStructure\Fields\Tst_ddui_employee as myAttribute;
class EmployeeFrameViewSRCLRRender extends \Anakeen\Ui\DefaultView
{
public function getOptions(\Anakeen\Core\Internal\SmartElement $document): RenderOptions
{
$options = parent::getOptions($document);
$options->frame(myAttribute::tst_f_identite)->setResponsiveColumns([
["number" => 2, "minWidth" => "70rem", "maxWidth" => "100rem"],
[
"number" => 3,
"minWidth" => "100rem",
"maxWidth" => "110rem",
"grow" => true,
"direction" => FrameRenderOptions::leftRightDirection
]
]);
return $options;
}
}
La dernière ligne partage sa largeur en 2 au lieu de 3
# Options de représentation type htmltext
Le widget d'édition des textes formatés est basé sur un widget
Kendo Ui Editor.
# setHeight
Cette option indique la hauteur de la zone d'écriture du widget d'édition.
Anakeen\Ui\HtmltextRenderOptions setHeight(string $heigth)
# Restrictions
- Utilisable uniquement pour les rendus de modification ou de création.
# Paramètres
L'argument height est une valeur avec unité (10rem par défaut). Les unités possibles sont les
unités css. Le pourcentage n'est pas une unité valide pour cette
option.
Si l'unité n'est pas précisé, c'est l'unité px qui est utilisée.
Cas particulier
La valeur auto permet que le hauteur soit fonction du contenu. La hauteur change au fur et à mesure de la rédaction.
# Exemples
Affichage d'une hauteur de 150px (Barre de menu non comprise).
$options->htmltext(My_family::my_article)->setHeight("150px");
# setToolbar
Cette option indique la barre de menu qui doit être disponible sur cet éditeur.
Anakeen\Ui\HtmltextRenderOptions setToolbar(string $toolbar)
# Restrictions
- Utilisable uniquement pour les rendus de modification ou de création.
# Paramètres
L'argument toolbar indique l'identifiant de la barre de menu à utiliser. La valeur par défaut est Simple.
Les valeurs prédéfinies sont :
Anakeen\Ui\HtmltextRenderOptions::basicToolbar:
Anakeen\Ui\HtmltextRenderOptions::simpleToolbar:
Anakeen\Ui\HtmltextRenderOptions::fullToolbar:
Cette option propose des barres d'outils prédéfinies qui configure l'option
tools de Kendo Ui Editor.
# Exemples
Affichage du menu "Basic".
$options->htmltext(My_family::my_article)->setToolbar(\Anakeen\Ui\HtmltextRenderOptions::basicToolbar);
# setKendoEditorConfiguration
Cette option permet de configurer le widget Kendo UI Editor.
Anakeen\Ui\HtmltextRenderOptions setKendoEditorConfiguration(array $config)
# Restrictions
- Utilisable uniquement pour les rendus de modification ou de création.
Attention
Les options propres à Kendo UI Editor ne sont pas maintenues par Anakeen et leur bon fonctionnement n'est pas garanti par Anakeen.
# Paramètres
L'argument config permet de modifier les valeurs de configuration du widget Kendo UI Editor. Les
valeurs possibles sont celles du widget
Kendo UI Editor.
# Exemples
Configurer sa propre barre de menu avec seulement "Gras" et "Italique".
<?php
$options->htmltext(My_family::my_article)->setKendoEditorConfiguration([
"tools" => ["bold", "italic"]
]);
# setAnchorsOptions
Cette option permet de définir les modalités d'ouverture des liens contenus dans ce Smart Field.
\Anakeen\Ui\HtmltextRenderOptions::setAnchorsOptions(\Anakeen\Ui\anchorOptions $anchorOptions)
Attention
Uniquement pris en compte lorsque le Smart Field n'est pas en modification.
# Paramètres
L'argument en entrée est un objet de type Anakeen\Ui\AnchorOptions qui configure les différents paramètres du lien :
target: Nom de la fenêtre du navigateur vers laquelle le lien sera envoyé.- Si la valeur est
_blank(valeur par défaut), une nouvelle fenêtre est utilisée. - Si la valeur est
_self, la fenêtre courante est utilisée. - Si la valeur est
_dialog, une fenêtre de dialogue interne sera utilisée.
- Si la valeur est
Si target est différente de _self les options suivantes sont prises en compte :
windowHeight: Hauteur de la fenêtre de dialogue. Si target est égal à_dialog, la dimension doit être une dimension css valable (c'est à dire un nombre suivi immédiatement de son unité). Sinon la dimension est un nombre entier exprimé en pixels. La valeur par défaut est300px.
windowWidth : Largeur de la fenêtre de dialogue. Si target est égal à _dialog, la dimension doit être une
dimension css valable (c'est à dire un nombre suivi immédiatement de
son unité). Sinon la dimension est un nombre entier exprimé en pixels. La valeur par défaut est 200px.
Si target est _dialog, les options suivantes sont prises en compte :
modal: indique si la fenêtre de dialogue doit être modale (falsepar défaut).
# Exemples
Ouverture de tous les liens dans une modale de 400 x 300px.
$options
->htmltext(My_family::my_article)
->setAnchorOptions(new \Anakeen\Ui\AnchorOptions('_dialog', '400px', '300px', true));
# Options de représentation type image
Le type image bénéficie des options de représentation des Smart Fields de type file.
Les méthodes suivantes sont spécifiques au Smart Field image.
# setThumbnailSize
Cette option indique la dimension de la miniature affichée.
Anakeen\Ui\ImageRenderOptions setThumbnailSize(string $size)
# Restrictions
- Utilisable uniquement pour les rendus de consultation.
# Paramètres
L'argument size indique la dimension de l'image à afficher.
Par défaut 48 indique une image de 48px de large.
Le redimensionnement ne peux excéder la taille de l'image originale.
Cette option ne modifie pas la taille css mais affiche une image à la largeur désirée. Le poids du fichier image est proportionnel à la taille demandée.
Par défaut, l'image est un lien qui affiche l'image originale dans une "target" _dialog de dimension 300x400.
# Cas particuliers
Pour afficher l'image dans sa taille originale, il faut indiquer null.
# Exemples
Largeur de 100px.
$options->image(My_family::my_photo)->setThumbnailSize("100");
Hauteur de 100px.
$options->image(My_family::my_photo)->setThumbnailSize("x100");
Largeur et hauteur de 100px rognée.
$options->image(My_family::my_photo)->setThumbnailSize("100x100c");
# Options de représentation type int
Le widget d'édition des entiers est basé sur un widget
Kendo Numeric textbox.
# setKendoNumericConfiguration
Cette option permet de configurer le widget d'édition des nombres entiers.
Anakeen\Ui\IntRenderOptions setKendoNumericConfiguration(array $config )
# Restrictions
- Utilisable uniquement pour les rendus de modification ou de création.
- Attention : Les options propres à Kendo ne sont pas maintenues par Anakeen et leur bon fonctionnement n'est pas garanti par Anakeen.
# Paramètres
L'argument config est un tableau de valeurs indexées qui servent à modifier la configuration du widget.
En modification, les valeurs possibles sont les
propriétés de configuration du widget kendo ui
Pour le mode consultation, seul le format est pris en compte.
# Cas particuliers
# Exemples
Ajouter des limites sur le nombre à saisir.
$options
->int(My_family::my_number)
->setPlaceHolder("Give a number between 10 and 20")
->setKendoNumericConfiguration([
"min" => 10,
"max" => 20
]);
# setFormat
Cette option permet de modifier l'aspect de la valeur du Smart Field.
Anakeen\Ui\IntRenderOptions setFormat(string $format)
# Restrictions
- Utilisable uniquement pour les rendus de consultation.
# Paramètres
L'argument format est un format Mustache qui a comme variables les informations sur la valeur du Smart Field.
Ces informations pour le type int sont :
value: Valeur brute,displayValue: Valeur formatée par le serveur.
Ce format doit être un fragment HTML valide.
Par défaut, le format est .
# Cas particuliers
Note : Ce format est différent de celui indiqué par le widget kendo ui. La valeur de la variable
contient la valeur formatée par le widget si un format widget est précisé.
# Exemples
# setTranslations
En plus des labels communs à tous les types de Smart Fields, les labels sur les flèches d'incrémentation et de décrémentation peuvent être configurés.
Anakeen\Ui\CommonRenderOptions setTranslations(array $labels)
# Restrictions
- Utilisable uniquement pour les rendus de modification ou de création.
# Paramètres
Les labels decreaseLabel et increaseLabel indiquent les textes surgissant sur les flèches d'incrémentation et de
décrémentation.
# Cas particuliers
# Exemples
Incrément de 5 et pose de l'unité "kg". Modification des traductions.
$options
->int(My_Family::my_mass)
->setKendoNumericConfiguration([
"step" => 5,
"format" => "#,## kg"
])
->setTranslations([
"decreaseLabel" => "5 kilos de moins",
"increaseLabel" => "5 kilos de plus"
]);
# setPlaceHolder
Cette option indique un texte qui est placé dans le champ de saisie lorsque la valeur est vide pour préciser le rôle de ce champ.
Anakeen\Ui\IntRenderOptions setPlaceHolder(string $text)
# Restrictions
- Utilisable uniquement pour les rendus de modification ou de création.
# Paramètres
L'argument $text est un texte simple (pas de html) qui sera utilisé comme placeholder du champ.
# cas particuliers
# Exemples
$options->int(My_family::my_number)->setPlaceHolder("Number less than 10");
# Options de représentation type longtext
Le type longtext bénéficie des options de représentation des Smart Fields de type text.
Les méthodes suivantes sont spécifiques au Smart Field longtext.
# setMaxDisplayedLineNumber
Cette option permet de limiter le nombre de lignes visibles sur le champs de saisie du texte.
Si le nombre de ligne de la valeur dépasse la limite un ascenseur vertical apparaît.
Anakeen\Ui\LongtextRenderOptions setMaxDisplayedLineNumber(int $number)
Par défaut, le champ est agrandi pour voir l'intégralité du texte. À chaque nouvelle ligne saisie la hauteur du champ s'agrandit. Par contre, la hauteur n'est pas diminuée si le nombre de ligne diminue.
Si le nombre est positif, le champ de saisie n'est pas redimensionnable manuellement pour les navigateurs qui le supportent.
# Restrictions
- Utilisable uniquement en mode modification ou création.
# Paramètres
L'argument number est un nombre positif ou nul. Si ce nombre est égal à 0 aucune limite n'est appliquée et le champ
de saisie s'agrandit en fonction du nombre de lignes saisies.
# Cas particuliers
Aucun
# Exemples
Affichage de 10 lignes maximum. Au delà un ascenseur vertical apparaît.
$options->longtext(My_family::my_definition)->setMaxDisplayedLineNumber(10);
# Options de représentation type money
Le type money bénéficie des options de représentation du Smart Field de type double.
Les méthodes suivantes sont spécifiques au Smart Field money.
# setCurrency
Cette option indique la devise de la somme d'argent.
Anakeen\Ui\MoneyRenderOptions setCurrency(string $currency)
# Restrictions
Aucune
# Paramètres
L'argument currency est une chaîne de caractère qui représente la devise.
Par défaut, la valeur est €.
# Cas particuliers
- Un Smart Fields de type
moneyne peut avoir plus de 2 décimales (contrainte serveur). La méthodesetDecimalPrecisionne peut pas dans ce cas avoir un argument supérieur à 2. - la position de la devise est fonction de la locale de l'utilisateur. Pour l'anglais, la position est à gauche et collé à la somme. Pour le français, la position est à droite et séparée de la somme par un espace.
# Exemples
Exemple :
Utiliser la livre comme devise.
$options->money(My_family::my_benefit)->setCurrency('£');
# Options de représentation type password
Les méthodes suivantes sont spécifiques au Smart Field password.
# hideValue
Cette option indique un texte qui est utilisé pour l'affichage du mot de passe lorsque celui-ci n'est pas vide.
Anakeen\Ui\PasswordRenderOptions hideValue(string $text)
WARNING
La valeur du mot de passe enregistré dans le document n'est pas crypté. Elle est accessible comme n'importe quelle autre valeur du document. Il est de la responsabilité du développeur de crypter et de protéger cette valeur si nécessaire.
# Restrictions
- Utilisable uniquement pour les rendus de consultation.
# Paramètres
L'argument $text est un texte simple (pas de html) pour la valeur d'affichage. Par défaut la valeur est *****.
# Cas particuliers
Aucun
# Exemples
$options->enum(My_family::my_password)->setPlaceHolder("Select a secret password");
# setPlaceHolder
Cette option indique un texte qui est placé dans le champ de saisie lorsque la valeur est vide pour préciser le rôle de ce champ.
Anakeen\Ui\PasswordRenderOptions setPlaceHolder(string $text)
# Restrictions
- Utilisable uniquement pour les rendus de modification ou de création.
# Paramètres
L'argument $text est un texte simple (pas de html) qui sera utilisé comme placeholder du champ.
# Cas particuliers
Aucun
# Exemples
$options->enum(My_family::my_password)->setPlaceHolder("Select a secret password");
# Options de représentation type tab
Les options d'affichage générales des onglets sont fournies par les options de Smart Element.
Le widget de gestion des onglets est basé sur un widget
Kendo tab Strip.
# setTooltipLabel
Cette option d'afficher un tooltip au-dessus de l'onglet lors du survol.
WARNING
Si le label est particulièrement long et qu'il ne peut être affiché intégralement dans l'onglet, le tooltip permet de voir le libellé en entier.
Anakeen\Ui\TabRenderOptions setTooltipLabel(string $label,
bool $html=false)
# Restrictions
Aucune
# Paramètres
L'argument
$labelindique le texte du tooltip.Il peut comporter les parties variables suivantes :
{ {label} }: Le libellé de l'onglet{ {id} }: L'identifiant de l'onglet
Si
$htmlest àtrue, $label ne sera pas échappé. Si$htmlest àfalse, $label sera échappé.
# Cas particuliers
Aucun
# Exemples
$options->tab(My_family::my_informations)->setTooltipLabel('Onglet informatif');
# setDescription (onglet)
Cette option est une option commune qui permet d'afficher une description pour un tableau.
Son usage est le même mais le positionnement de la description est propre au type "onglet".
# Positionnement de la description d'un onglet
Anakeen\Ui\CommonRenderOptions::topPosition: Texte affiché au-dessus du premier cadre contenu dans l'onglet
Anakeen\Ui\CommonRenderOptions::bottomPosition: Texte affiché au-dessous du dernier cadre contenu dans l'onglet
Anakeen\Ui\CommonRenderOptions::clickPosition: Affiche une ancre à gauche du libellé de l'onglet. Cette ancre affiche la description lorsque l'utilisateur clique dessus.
# Options de représentation type text
# setMaxLength
Cette option permet de limiter le nombre de caractères saisis par l'utilisateur. Cela n'est pas une contrainte et le champ saisi peut excéder cette limite par programmation.
Anakeen\Ui\TextRenderOptions setMaxLength(int $max)
# Restrictions
- Utilisable uniquement pour les rendus de modification ou de création.
# Paramètres
L'argument $max est un nombre positif. Si ce nombre est égal à 0, aucune limite n'est appliquée.
# Cas particuliers
Aucun
# Exemples
Limiter la saisie d'un numéro de téléphone à 10 caractères.
$options->text(My_family::my_phone)->setMaxLength(10);
# setKendoAutoCompleteConfiguration
Cette option permet de configurer le widget d'auto-complétion du champ.
Anakeen\UiSmartElementidRenderOptions setKendoAutoCompleteConfiguration(array $config )
# Restrictions
- Utilisable uniquement pour les rendus de modification ou de création.
- Attention : Les options propres à Kendo ne sont pas maintenues par Anakeen et leur bon fonctionnement n'est pas garanti par Anakeen.
# Paramètres
L'argument config est un tableau de valeurs indexées qui servent à modifier la configuration du widget.
En modification, les valeurs possibles sont les
propriétés de configuration du widget kendo Autocomplete.
# Cas particuliers
- Les propriétés suivantes ne sont pas modifiables :
filtering,dataTextField,dataSource,select.
Leur modification est ignorée par le widget.
# Exemples
Modification des paramètres :
$options->docid()->setKendoAutoCompleteConfiguration([
// Attendre 3 caractères avant de lancer l'aide à la saisie
"minLength" => 3,
// Entête de la recherche
"headerTemplate" => '<div><h2>Résultat de la recherche</h2></div>'
]);
# setPlaceHolder
Cette option indique un texte qui est placé dans le champ de saisie lorsque la valeur est vide pour préciser le rôle de ce champ.
Anakeen\UiSmartElementidRenderOptions setPlaceHolder(string $text)
# Restrictions
- Utilisable uniquement pour les rendus de modification ou de création.
# Paramètres
L'argument $text est un texte simple (pas de html) qui sera utilisé comme placeholder du champ.
# Cas particuliers
Aucun
# Exemples
$options->text(My_family::my_phone)->setPlaceHolder("Write work phone number");
# setFormat
Cette option permet de modifier l'aspect de la valeur du Smart Field.
Anakeen\Ui\TextRenderOptions setFormat(string $format)
# Restrictions
- Utilisable uniquement pour les rendus de consultation.
# Paramètres
L'argument format est un format Mustache qui a comme variables les informations sur la [valeur du Smart Field](TODO
REF).
Ces informations pour le type text sont :
value: Valeur brute,displayValue: Valeur formatée par le serveur.
Ce format doit être un fragment HTML valide.
Par défaut, le format est { {displayValue} }.
# Cas particuliers
Aucun
# Exemples
$options->text(My_family::my_title)->setFormat('<h1 class="my-red">{{displayValue}}</h1>');
# Options de représentation type time
Le widget d'édition des temps (heure / minute) est basé sur un widget
kendo Time Picker.
# setKendoTimeConfiguration
Cette option permet de configurer l'aspect du widget de temps.
Anakeen\Ui\TimeRenderOptions setKendoTimeConfiguration(array $config)
# Restrictions
Attention : Les options propres à Kendo ne sont pas maintenues par Anakeen et leur bon fonctionnement n'est pas garanti par Anakeen.
# Paramètres
L'argument config est un tableau de valeurs indexées qui servent à modifier la configuration du widget.
En modification, les valeurs possibles sont les
propriétés de configuration du widget kendo Time Picker.
# Cas particuliers
Pour le mode consultation, seul le format est pris en compte.
# Exemples
Intervalle de choix de 5 minutes
$options->time("MyFamily::my_time")->setKendoTimeConfiguration([
"interval" => 5
]);
# setFormat
Cette option permet de modifier l'aspect de la valeur du Smart Field.
Anakeen\Ui\TimeRenderOptions setFormat(string $format)
# Restrictions
- Utilisable uniquement pour les rendus de consultation.
# Paramètres
L'argument $format est un format Mustache qui a comme variables les informations sur la valeur du Smart Field.
Ces informations pour le type text sont :
value: Valeur brute,displayValue: Valeur formatée par le serveur.
Ce format doit être un fragment HTML valide.
Par défaut, le format est { {displayValue} }.
# Cas particuliers
Ce format est différent de celui indiqué par le widget kendo Time Picker. La valeur de la variable
{ {displayValue} } contient la valeur formatée par le widget si un format widget est précisé.
# Exemples
# setPlaceHolder
Cette option indique un texte qui est placé dans le champ de saisie lorsque la valeur est vide pour préciser le rôle de ce champ.
Anakeen\Ui\TimeRenderOptions setPlaceHolder(string $text)
# Restrictions
- Utilisable uniquement pour les rendus de modification ou de création.
# Paramètres
L'argument $text est un texte simple (pas de html) qui sera utilisé comme placeholder du champ.
# Cas particuliers
Aucun
# Exemples
$options->enum(My_family::my_time)->setPlaceHolder("Select the hour");
# Options de représentation type timestamp
Le type timestamp bénéficie des options de représentation du Smart Field de type date.
Les méthodes suivantes sont spécifiques au Smart Field timestamp.
Le widget d'édition des date est basé sur un widget
kendo Date Time Picker.
# setKendoDateConfiguration
Cette option permet de configurer l'aspect du widget de date.
Anakeen\Ui\DateRenderTimestamp setKendoDateConfiguration(array $config)
# Restrictions
Attention : Les options propres à Kendo ne sont pas maintenues par Anakeen et leur bon fonctionnement n'est pas garanti par Anakeen.
# Paramètres
L'argument config est un tableau de valeurs indexées qui servent à modifier la configuration du widget.
En modification, les valeurs possibles sont les
propriétés de configuration du widget kendo Date Time Picker.
# Cas particuliers
Pour le mode consultation, seul le format est pris en compte.
# Exemples
Affichage de la date avec le jour de la semaine suivant la locale ainsi que des heures, minutes et secondes.
$options->date("MyFamily::my_wakeup")->setKendoDateConfiguration(
array("format"=>"F")
));