Permet d’afficher un bouton

Edit me

Ce texte ne doit pas être supprimé!

Hérite de WidgetBase.

Fonction

Rendu

Utilisation

<form_row>
  <button label="Enregistrer et retourner" action="save">
    <redirection module="form" ctrl="frame" action="get">
      <params>
        <value alias="sid">bojxejoqlq1531402664725</value>
      </params>
    </redirection>
  </button>
</form_row>

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.

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 formualire, 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)
  • Ces deux options (glyphicon et fa) étant exclusifs la priorité est donnée à Glyphicon si elle sont toutes les deux présentes.

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’autre 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

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

<... action="{action_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}" .../>

field

Permet de vider seulement le champ du dataset donné

  • Version : >=2.15

  • Valeurs possibles : String

<... field="{field_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 dataset indiqué est mis à jour, pour cette action l’attribut est obligatoire.

  • Version : >=2.15

  • Valeurs possibles : String

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

Options

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" />

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}" />

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}" />

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}" />

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}" />

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" />

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" />

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" />

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

Utilisé dans le cadre de l’action refresh_dataset, indique au système que les paramètres doivent être transmis au serveur via le body du post

  • Version : >=2.15

  • Valeurs possibles : Boolean

  • Valeur par défaut : true

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

additional_params

utile 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}" />

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" />

Options groupées