Permet d’afficher un bouton

Edit me

Hérite de WidgetBase.

Fonction

Rendu

Utilisation

<form_row>
  <button label="Enregistrer et ouvrir un nouveau formulaire" action="save">
    <redirection module="form" ctrl="frame" action="get">
      <params>
        <value alias="sid">bojxejoqlq1531402664725</value>
      </params>
    </redirection>
  </button>
</form_row>
Action Description dataset field label target tooltip
save Permet de sauvegarder les datasets en écriture          
exit Permet de quitter le formulaise sans sauvegarder          
refresh_dataset Permet de rafraîchir un ou plusieurs datasets          
stand_by Permet de mettre en attente des données Obligatoire        
reset Permet de réinistialiser un dataset Obligatoire        
back Permet de revenir à la page précédente          
modal Permet d’ouvrir une modale       Obligatoire  
close_modal Permet de fermer une modale et de mettre à jour un dataset utilisé dans la modale       Obligatoire  
cancel_modal Permet de fermer une modale sans mettre à jour un dataset utilisé dans la modale       Obligatoire  
request Permet d’envoyer une requête XHR.          
print Permet d’imprimer la page courante (équivalent d’un ctrl+p)          
disabled Permet de désactiver un bouton. Celui-ci apparaît alors grisé          
new_record Permet d’ajouter une nouvelle entrée dans un dataset. Obligatoire        

Ce composant est utilisé pour représenter un bouton à l’écran, plusieurs comportements (actions) sont nativement supporté(e)s (exit, save …).

En utilisant l’action exit avec le noeud <redirection> adéquat ce composant peut effectuer des redirections vers des frames spécifiques. En utilisant l’action request, le noeud <request> est nécessaire.

Ce composant intègre deux templates de rendu :

Template utilisé en l’absence d’option glyphicon ou fa (pour FontAwesome) :

<input type="button" onclick="return false;" id="{idUnique}" class="btn btn-default" value="{sLabel}" />

Template utilisé si l’option glyphicon ou fa est présente :

<button type="button" id="{idUnique}" class="btn btn-default">
   <span class="{sIconType} {sIconClass}"></span> {sValue}
</button>

Redirection

Le widget Button peut contenir un noeud enfant : <redirection>. Ce noeud permet d’indiquer au noyau un Uri spécifique pour effectuer l’action demandée.

Rappel : Ce noeud est obligatoire si l’attribut action est “stand_by”. La syntaxe de ce noeud n’est pas modifiée.

Il devient par conséquent simple de rediriger un utilisateur avec ce code :

<form_row>
	<button label="Voir Listing Patient" action="exit">
		<redirection module="listing" ctrl="index" action="getlisting">
			<params>
				<value alias="id">104</value>
			</params>
		</redirection>
	</button>
</form_row>

Un click sur le bouton lié à cette redirection entrainera un remplacement de la frame courante par la frame récupérer en exécutant un appel XHR vers : listing/index/getlisting/id/104 (Récupération du listing id = 104). Les trios modules/controller/action disponibles sont listés dans l’article Liens vers les modules.

Les attributs reconnus du noeud <redirection> sont :

  • module : (Obligatoire) Le module à utiliser pour construire l’url de redirection
  • ctrl : (Obligatoire) Le controller à utiliser pour construire l’url de redirection
  • action : (Obligatoire) L’action à utiliser pour construire l’url de redirection
  • type : (Facultatif, par défaut “frame”) Le type de redirection à effectuer :
    • frame : La redirection effectuera un remplacement de la frame courante, l’url appelée devra donc retourner un JSON de configuration de formulaire
    • window : La redirection sera un redirection “classique” de l’url courante (document.location.href)
    • Note : En réalité seule l’égalité type == “frame” est testée, par conséquent toute autre valeur que “frame” sera considérée comme étant équivalente à “window”.

Les paramètres (<params>) reconnus sont :

  • <value> : le contenu de ce noeud sera la valeur transmise.
    • L’attribut alias correspond au nom du paramètre qui sera fourni.
  • <dataset> : Aucun contenu pour ce noeud (balise XML auto-fermante)
    • L’attribut dataset_name correspond à l’id du dataset résultant de l’execution du DataQuery de la partie <data_structure>
    • L’attribut field correspond au nom du champ qui sera utilisé pour extraire la valeur de la ligne courante
    • L’attribut alias correspond au nom du paramètre qui sera envoyé lors de la redirection

Exemple complet :

<button action="exit" label="Editer fiche patient 104">
	<redirection module="form" ctrl="frame" action="get">
		<params>
			<value alias="id">104</value>
		</params>
	</redirection>
</button>
<button action="exit" label="Modifier le dossier">
	<redirection module="form" ctrl="frame" action="get">
		<params>
			<dataset dataset_name="dos" field="id_data" alias="id_dossier"/>
		</params>
	</redirection>
</button>

Important : Il est possible de retrouver un formulaire en utilisant un autre paramètre que l’id_data dans le varset ressource (paramètre id). Il s’agit de la valeur contenue dans l’attribut id du xml de formulaire, dans ce cas le nom du paramètre est sid.

<button action="exit" label="Accéder au formulaire patient">
	<redirection module="form" ctrl="frame" action="get">
		<params>
			<value alias="sid">ae485</value>
		</params>
	</redirection>
</button>

Note : Une écriture simplifiée est possible en entrant directement l’URL vers laquelle se rediriger. Il est possible de mettre le mot clé “nav:previous” pour indiquer de revenir sur la page précédente (correspond à l’action back). Permet d’utiliser l’action back pour une sauvegarde.

<button action="exit" label="Editer fiche patient">
	<redirection url="mymodule/data/send/id/42/id_data/{mon_dataset.id_data}" />
</button>
<button action="exit" label="Retour">
	<redirection url="nav:previous" />
</button>

Request

Le widget Button peut, de la même manière que <redirection>, contenir un noeud enfant : <request>. Ce noeud permet d’indiquer au noyau un Uri spécifique à exécuter. La requête XHR peut s’exécuter pour n’importe quel attribut action du bouton. Cependant, si l’on souhaite seulement exécuter la requête XHR sans autre comportement, il convient d’utiliser l’action “request”.

<button label="Sauvegarder" action="save">
        <request module="mymodule" ctrl="data" action="send">
                <params>
                        <value alias="id">104</value>
                </params>
        </request>
</button>

Il est possible d’afficher une boîte de dialogue au retour de la requête XHR. Pour cela, la méthode doit renvoyer un json pouvant contenir les attributs suivants :

  • title : titre de la boîte de dialogue
  • message : contenu de la boîte de dialogue
  • timeout : temps d’affichage de la boîte de dialogue (facultatif)

Attention : Le noeud request n’est pas pris en compte pour les actions suivantes: exit, back, standby.

Notes

  • Le marqueur {sIconType} est remplacé par glyphicon si l’option glyphicon est présente, il est remplacé par fa si l’option fa est présente. (Cf. documentation de Glyphicons - How to use ou de FontAwesome - Examples )
  • Le marqueur {sIconClass} est remplacé par la valeur de l’option (Ex: glyphicon-star pour Glypicon fa-camera-retro pour FontAwesome)
  • En la présence des 2 options glyphicon et fa, la priorité est donnée à Glyphicon.

Conseils

  • La class du bouton (<input> ou <button>) est déduite en combinant la classe ‘btn’ et la valeur de l’attribut class fournie depuis le XML, en l’absence d’attribut class ‘btn-default’ est utilisée. Il est donc possible d’utiliser d’autres classes de bouton que Bootstrap met à disposition.
  • Le positionnement de l’icône est à gauche du libellé par défaut, il est possible de la mettre à droite grâce à l’option glyphicon_align décrite ci-après.

Il est possible de forcer l’utilisation d’une balise <button> en passant par l’option node_type ayant pour valeur button

Attributs

Les attributs nécessaires au bon fonctionnement du widget sont signalés par un astérisque.

Ce widget hérite de fonctionnalités issues d’un autre widget. Consultez la documentation dédiée au WidgetBase pour vérifier si d’autres attributs sont disponibles.

action*

Indique quelle action faire lorsque l’utilisateur clique sur le bouton

  • Version : >=2.15

  • Valeurs possibles : save,exit,refresh_dataset,stand_by,reset,back,modal,close_modal,cancel_modal,request,print,disabled

<... action="{action_value}" .../>

data_set

Indique le dataset lié aux actions save ou refresh_dataset. Le rôle du dataset varie en fonction de l’action. Action ‘save’ : seul le dataset indiqué sera envoyé au serveur pour être sauvegardé (par défaut tous les datasets sont envoyés). Il est recommandé de faire référence à un dataset qui n’a pas de dépendance. Action ‘refresh_dataset’ : le(s) dataset(s) indiqué(s) est/sont mis à jour. Si l’attribut n’est pas précisé ou si la valeur est vide, tous les datasets sont rafraîchis.

  • Version : >=2.15

  • Valeurs possibles : ‘mon_dataset’ ou [‘mon_dataset_1’, ‘mon_dataset_2’] (syntaxe disponible uniquement pour l’action ‘refresh_dataset’)

<... data_set="{data_set_value}" .../>

field

Permet de vider seulement le champ du dataset donné

  • Version : >=2.15

  • Valeurs possibles : String

<... field="{field_value}" .../>

label

Indique le texte à afficher sur le bouton

  • Version : >=2.15

  • Valeurs possibles : String

<... label="{label_value}" .../>

target

Identifiant de la fenêtre modale à afficher (seulement dans le cas où l’attribut “action” vaut “modal”)

  • Version : >=2.15

  • Valeurs possibles : String

<... target="{target_value}" .../>

tooltip

Permet d’afficher une aide en passant au dessus du bouton

  • Version : >=2.15

  • Valeurs possibles : String

<... tooltip="{tooltip_value}" .../>

Options

Les options nécessaires au bon fonctionnement du widget sont signalées par un astérisque.

Ce widget hérite de fonctionnalités issues d’un autre widget. Consultez la documentation dédiée au WidgetBase pour vérifier si d’autres options sont disponibles.

additional_params

Appliqué uniquement pour l’action save. Permet d’envoyer des paramètres supplémentaires au controller

  • Version : >=2.15

  • Valeurs possibles : String

<option output="html" option_name="additional_params" value="{additional_params_value}" />

close_modal

utile pour un bouton contenu dans une boîte de dialogue, permet d’indiquer si la modale doit se fermer ou non lors du clic sur le bouton

  • Version : >=2.15

  • Valeurs possibles : Boolean

<option output="html" option_name="close_modal" value="false" />

data_backdrop

Active ou désactive la visibilité de l’overlay, et l’effet lorsqu’on clique en dehors de la fenêtre modale

  • Version : >=2.15

  • Valeurs possibles : true,false,static

  • Valeur par défaut : true

<option output="html" option_name="data_backdrop" value="true" />

data_keyboard

Fermer la fenêtre modale quand la touche “Echap” est pressée

  • Version : >=2.15

  • Valeurs possibles : Boolean

  • Valeur par défaut : true

<option output="html" option_name="data_keyboard" value="true" />

dlg_disabled

Pour les boutons de type save, indique s’il faut afficher ou non le message à la fin de la sauvegarde (par défaut à false)

  • Version : >=2.15

  • Valeurs possibles : Boolean

<option output="html" option_name="dlg_disabled" value="false" />

dlg_msg_success

Permet de forcer un Message pour la fenêtre (dialogBox) qui informe du succès de la sauvegarde

  • Version : >=2.15

  • Valeurs possibles : String

<option output="html" option_name="dlg_msg_success" value="{dlg_msg_success_value}" />

dlg_title_success

Permet de forcer un Titre pour la fenêtre (dialogBox) qui informe du succès de la sauvegarde

  • Version : >=2.15

  • Valeurs possibles : String

<option output="html" option_name="dlg_title_success" value="{dlg_title_success_value}" />

fa

Permet l’utilisation d’une icône FontAwesome dans le bouton, renforçant l’identification de l’action

  • Version : >=2.15

  • Valeurs possibles : Liste des icones fontawesome : https://fontawesome.com/icons?from=io

<option output="html" option_name="fa" value="{fa_value}" />

glyphicon

Permet l’utilisation d’une icône glyphicon de Bootstrap dans le bouton, renforçant l’identification de l’action

  • Version : >=2.15

  • Valeurs possibles : Liste des glyphicon : https://getbootstrap.com/docs/3.3/components/

<option output="html" option_name="glyphicon" value="{glyphicon_value}" />

glyphicon_align

Indique l’aligment de la glyphicon (gauche ou droite)

  • Version : >=2.15

  • Valeurs possibles : left,right

  • Valeur par défaut : left

<option output="html" option_name="glyphicon_align" value="left" />

node_type

permet de forcer l’utilisation d’une balise <button> pour le rendu HTML (plutôt que <input>)

  • Version : >=2.15

  • Valeurs possibles : String

<option output="html" option_name="node_type" value="{node_type_value}" />

post_params

Indique au système que les paramètres doivent être transmis au serveur via le body du post. Vaut “false” par défaut, sauf pour l’action refresh_dataset, pour laquelle la valeur par déafaut de l’option est “true”

  • Version : >=2.26

  • Valeurs possibles : Boolean

<option output="html" option_name="post_params" value="false" />

request_first

Mettre à true si la requête doit être exécutée avant l’action

  • Version : >=2.15

  • Valeurs possibles : String

<option output="html" option_name="request_first" value="false" />

tooltip_alignment

Détermine la position de l’info-bulle par rapport au bouton

  • Version : >=2.15

  • Valeurs possibles : String

  • Valeur par défaut : top

<option output="html" option_name="tooltip_alignment" value="top" />