Développement > Safe X3 WAS > Tokens > Liens dynamiques 

SEEWARNING Avant de créer votre site , il préférable de lire la documentation :Avant de commencer.


Le lien dynamique est un token qui permet de traiter les clics souris de l'utilisateur sur les zones sensibles de la page HTML que sont les tags <a> ou les tags <input type='button'>.

<input type='button' adx="MyDynamicLink" value="Cliquer ici">
<a adx="MyDynamicLink">Cliquer ici</a>

Les trois paramètres principaux d'un lien dynamiques sont :

1. l'action Web,
2. la page Web de destination,
3. la sélection.

L'ordre de la liste est l'ordre suivant lequel ces paramètres sont traités par le serveur XTEND.

Prise en main

L'action Web

Il existe deux types d'action qui sont:

  • Les actions traitées par le back-office X3 via l'appel du web service :
    • Login, création commande, modification coordonnées...
  • Les actions traitées par le serveur XTEND :
    • Pagination, sélection d'une ligne, changement de site/langue....

Chaque action est déclarée dans le dictionnaire par une fiche de paramétrage.

La page Web de destination

Il s'agit de la page affichée en retour de la requête postée sur le serveur.

Chaque page est déclarée dans le dictionnaire par une fiche de paramétrage.

SEEINFO La page de destination peut être modifiée par l'action.

Pour modifier la page de destination par programme (L4G), utilisez l'enchainement (enchainement programmé) de liens dynamiques :

Valorisez un paramètre du sous-programme avec le code du lien dynamique (avec ou sans action/sélection) qui pointe vers la page de destination.

La sélection

Le lien dynamique peut poster une sélection à destination du bloc principal de la page cible pour en modifier les critères de sélection.

La sélection permet de gérer le lien liste détail, le tri des tableaux ou le raffinement des requêtes.

SEEREFERTTO Pour plus d'informations, voir la documentation sur les Tokens Blocs.

Paramètres HTML

Les paramètres suivants sont pris en compte par les liens dynamiques.

Code 

Paramètres

Description

xacceptreload

Aucun

Force l'action du lien dynamique à s'exécuter sur rechargement de la page HTML (F5) même si le rechargement est bloqué dans le paramétrage de l'action ('Actif sur reload')

xparams

QueryString

Ajoute des paramètres dans l'URL du lien dynamique
Les paramètres sont de type Clé=Valeur~Clé=Valeur

<a adx="MyDynLink:xacceptreload&xparams=?PARCOD1=VAL1~PARCOD2=VAL2#xtdbottom">

Cet exemple :

  • force l'exécution de l'action 'sur F5',
  • valorise 2 variables utilisateur PARCOD1 et PARCOD2,
  • se positionne sur le signet 'xtdbottom' de la page de destination.
Positionnement à l'intérieur de la page de destination

Exemple montrant comment effectuer un positionnement à l'intérieur de la page de destination (via le paramètre HTML xparams) lorsque l'utilisateur clique sur un lien dynamique :

<!--Lien dynamique dans la page origine-->
<input type="button" value="Cliquer ici" adx="MYDYNLINK:xparams=#signet">
<a adx="MYDYNLINK:xparams=#signet">Cliquer ici</a>
<!--Page de destination-->
<body>
    <!--Code HTML -->
    <a name="signet">
    <!--Positionnement de la page lorsque l'utilisateur clic sur le bouton ci-dessus-->
    <!--Code HTML -->
</body>

Valoriser des variables utilisateur via les paramètres de l'URL

Exemple valorisant les variables utilisateur PARCOD1 et PARCODE avec VAL1 et VAL2 (via le paramètre HTML xparams) lorsque l'utilisateur clique sur un lien dynamique :

<!--Lien dynamique dans la page origine-->
<input type="button" value="Cliquer ici" adx="MYDYNLINK:xparams=?PARCOD1=VAL1~PARCOD2=VAL2">
<a adx="MYDYNLINK:xparams=?PARCOD1=VAL1~PARCOD2=VAL2">Cliquer ici</a>

Cas d'usage : lien liste détail

Le lien liste détail consiste à définir un lien pour accéder au détail d'une entité affichée dans une liste.
Par exemple : accéder au détail de l'article à partir du catalogue.

La page détail contient généralement des informations complémentaires provenant d'autres tables que celle utilisée pour afficher la liste.
Par exemple : la fiche de description riche d'un produit ou les produits associés (cross-selling).

Inversement l'utilisateur devra pourvoir retourner vers la liste à partir de la page détail sans perdre le contexte de la liste (critères de sélection, pagination...).

1. Création de l'entité affichée dans la liste
  • Création d'interface,
  • Création des champs,
  • Création des entité.
2. Création d'un bloc 'multi-enregistrements' pour lire et afficher la liste
  • Sélection de l'entité définie précédemment.
3. Création d'un lien dynamique pour sélectionner le détail de l'entité
  • Sélection de la même entité que le bloc liste.

Le lien dynamique sélectionne une entité telle que le code est égal à celui de la ligne courante.
La ligne courante est identifiée par le bloc ACURRENT (sommet de la pile du contexte de données).
Le lien 'Remplace la sélection du bloc principal'.

4. Création de la page web qui affiche la liste
  • Déclaration du bloc liste comme bloc principal de la page web,
  • Création du HTML pour afficher la liste.

<table>
    <tr>
        <th><b>Code</b></th>
        <th><b>Libellé</b></th>
    </tr>
<!--Bloc liste-->
<!adx="BLKITMLST">
    <tr>
        <!--Lien vers détail-->
        <td><a adx="DLKDETAIL"><span adx="CODE"></span></td>
        <td adx="DESCR"></td>
    </tr>
<!adx="BLKITMLST">
</table>

5. Création d'un 'bloc mono-enregistrement' pour lire et afficher le détail
  • Sélectionne la même entité que le bloc liste.

Le bloc mono-enregistrement a une sélection de type 'Dernier lien cliqué' pour qu'il utilise les critères de sélection du lien dynamique cliqué par l'utilisateur (celui créé précédemment avec la sélection sur ACURRENT.CODE).

6. Création d'un 'lien dynamique' pour le retour vers la liste
  • La page de destination est la page liste,
  • L'action web a pour code ABLKRESTOREMAINCTX
    Restaure le contexte du bloc principal.
7. Création de la page web qui affiche le détail
  • Création du HTML pour afficher le détail.

<!--Bloc détail-->
<!adx="BLKDETAIL">
    <b>Code    </b><span adx="CODE"></span><br>
    <b>Libellé </b><span adx="DESCR"></span><br>
    <b>Prix    </b><span adx="PRIX"></span><br>
    <b>Stock   </b><span adx="STOCK"></span><br>
<!adx="BLKDETAIL">
<!--Retour vers la liste-->
<a adx="DLKRETOURLISTE">retour liste</a>

Pour afficher des données complémentaires issues d'une autre table ou vue (par exemple une description riche d'un article ou des produits associés) :

  • Créez les entités et les blocs qui lisent ces entités en passant dans les critères de sélection le code de l'entité détail BLKDETAIL.CODE.

Retour page précédente

Le lien dynamique ADLKRETURN permet d'effectuer un retour arrière sur les pages XTEND qui ont été consultées.

  • fonctionne mieux que la touche 'Back' ou 'Reculer d'une page' du navigateur
  • ne prend pas en compte les liens dynamiques qui restent sur la même page

Exemple :

Si on pagine sur un catalogue d'articles le lien ADLKRETURN affichera la page qui a précédé l'affichage du catalogue sans tenir compte des actions de pagination contrairement à la touche back du navigateur.

Le moteur XTEND gère une pile de pages consultées par session utilisateur dont la taille est paramétrable via le paramètre de configuration :
xtend.server.gensetup.misc.rtnstacksize (20 par défaut).

Liens Prédéfinis

 Code

Paramètres

Action

Description

ADLKFIRSTPAGE

 Non

ABLKFIRSTPAGE

Affiche la première page d'un bloc
Syntaxe MonBloc.MonLienDynamique

ADLKNEXTPAGE

Non

ABLKNEXTPAGE

Affiche la page suivante d'un bloc

ADLKLASTPAGE

Non

ABLKLASTPAGE

Affiche la dernière page d'un bloc

ADLKSELECT

Non

ABLKSELECT

Sélectionne la ligne d'un bloc
MonBloc.MonChamp renvoie la valeur de MonChamp pour la ligne sélectionnée

ADLKUNSELECT

Non

ABLKUNSELECT

Déselectionne la ligne sélectionnée d'un bloc

ADLKRESTOREFORM

Non

ARESTOREFORM

Restaure un formulaire HTML avec les valeurs initiales
Ne tient pas compte du paramètre HTML xrc

ADLKRESTORESESSION

Non

ARESTORESESSION

Affiche la dernière page ouverte avant fermeture du navigateur
Utilisée dans la page de reconnexion (voir fiche site)

ADLKLOGIN

Oui

ASESSLOGIN

Login de l'utilisateur
Code utilisateur(AUSERCODE) et mot de passe(APWD) en paramètre
L'interface et le mapping des paramètre est à faire

ADLKLOGOUT

Non

ASESSLOGOUT

Déconnecte l'utilisateur

ADLKSWITCHCOOKIES

Non

ASESSSWITCHCOOKIES

Permute le mode 'sans cookies' et le mode 'avec cookies'
Utiliser le bloc conditionné ADISPNOCOOKIES pour afficher l'état avec/sans cookies de la session

ADLKTRACESET

Non

ATRACESET

Mise à jour de la trace XTEND

ADLKRETURN

Non

Non

Retour à la page précédente

ADLKPOSTPAGE

Non 

Non

Poste le formulaire de la page courante et retour sur la même page

ADLKSWITCHSITE

Oui

Non

Ouvre un autre site XTEND
!!Paramètres du site à renseigner

ADLKSWITCHLANG

Oui

Non

Non  Changement de langue utilisateur
!!Paramètres code langue à renseigner

 

Pré-requis

SEEREFERTTO Reportez-vous à la documentation de Mise en oeuvre

Gestion de l'écran

En-tête

Champs

Les champs suivants sont présents dans cet onglet :

Code du lien dynamique.

  • Site (champ FCYLIB)

Site Web courant.

  • Intitulé (champ INTIT)

Permet de définir un intitulé associé à chaque fiche.

Fermer

 

Onglet Général

Présentation

Paramètres généraux du lien dynamique.

Le Tableau "Param. Accès sous-programme" est alimenté si on a les conditions suivantes :

  • Le lien dynamique possède une sélection sur l'entité,
  • Cette entité est liée à une interface de type "Accès données sous-programme",
  • L'interface possède des champs paramètres "Acces sous-programme".

Lorsque ce tableau est non vide, il permet de définir une selection sur ces paramètres.

Fermer

 

Champs

Les champs suivants sont présents dans cet onglet :

Suivi

  • Suivi de l'activité (champ LOGMOD)

Sélectionnez 'oui' pour tracer les appels au lien dynamique dans le log du serveur XTEND.

  • Forcer le mode Http Get (champ POSTFORCE)

Sélectionnez 'oui' pour utiliser la méthode HTTP GET ; le lien doit être pris en compte par les moteurs de recherches (web crawlers).
Ceci est utilisé uniquement pour assurer la compatibilité du lien avec les moteurs de recherche.

SEEINFO Seuls les liens qui n'ont pas de paramètre contextuel pour la sélection et/ou l'action sont compatibles avec la méthode HTTP GET.

Destination

  • Page courante (champ PAGSAM)

Sélectionnez :

  • 'Oui' pour rester sur la page courante,
  • 'Non' pour saisir une page de destination.

Page de destination.

Dynamisme

Code de l'entité sélectionnée si le lien dynamique poste une sélection pour le bloc principal de la page de destination.

SEEINFO L'entité est utilisée pour l'aide à la saisie des critères de sélection dans l'onglet sélection.

  • Application sélection (champ SELBLCOPT)

Il existe trois types de modification des critères d'un bloc par un lien dynamique.
Ces trois options permettent de gérer la plupart des situations qui se présentent dans les pages web :

1. Les critères du lien dynamique 'Remplace la sélection du bloc principal'

SELECTION DU BLOC = CRITERES DE SELECTION DU LIEN

2. Les critères du lien dynamique 'S'ajoute à la sélection du bloc principal'

Effectue un raffinement de la requête du bloc avec le critères du lien.
SELECTION DU BLOC = CRITERES DE SELECTION DU BLOC + CRITERES DE SELECTION DU LIEN

3. Les critères du lien dynamique 'Se cumule à la sélection en-cours du bloc principal'

Effectue un raffinement de la requête du bloc en ajoutant (ET logique) la sélection du lien dynamique à la requête courante du bloc.
Cette option est utilisée si la sélection du bloc résulte du cumul de plusieurs liens dynamiques.
SELECTION DU BLOC = CRITERES DE SELECTION DU BLOC + SOMME DES CRITERES DE TOUS LES LIENS CLIQUES

SEEWARNING Restriction :
Seul les critères de sélection et de tri du bloc principal de la page (alias AMAIN) peuvent être modifiés par ceux des liens dynamiques.
Vous pouvez définir plusieurs blocs par page mais un seul (le bloc principal) pourra avoir des critères de sélection et de tri modifiables par l'utilisateur.

Code de l'action web si le lien dynamique a une action.

SEEINFO Les paramètres de l'action sont affichés automatiquement dans le bloc Paramètre de l'onglet Avancé pour indiquer la manière dont ils vont être valorisés.

  • Contrôler champs Web (champ ACTVERCHP)

Cochez la case pour que les paramètres de l'action déclarés comme 'Champs web obligatoires_' soient automatiquement contrôlés par XTEND.

Tableau Param. Accès sous-programme

Code du paramètre sous-programme.

  • Origine (champ VALTYP42)

  • Origine constante : valeur fixe saisie dans la colonne 'Cste / Attrib. Web'.

  • Origine 'Champ web' : valeur issue d'un champ du formulaire HTML (généralement saisi par l'utilisateur).
    La colonne 'Cste / Attrib. Web' contient le nom (attribut 'NAME') du champ <input> du formulaire HTML.

  • Origine 'Token champ' : valeur d'un champ d'un bloc dont les noms sont saisis dans les colonnes suivantes.

  • Cste / Attrib. Web (champ VALEUR42)

  • Origine constante : contient la valeur de la constante.

  • Origine 'Champ web' : contient le nom (attribut 'NAME') du champ <input> du formulaire HTML.
    Le paramètre sera valorisé avec la valeur de ce champ.

Code du bloc pour l'origine 'Token champ'.

Entité du bloc pour l'origine 'Token champ'.

  • Champ (champ VFIEKEY42)

Code du champ pour l'origine 'Token champ'.

Fermer

 

Onglet Avancé

Champs

Les champs suivants sont présents dans cet onglet :

Tableau Paramètres

Code du paramètre de l'action.

  • Origine (champ VALTYP41)

  • Origine constante : valeur fixe saisie dans la colonne 'Cste / Attrib. Web'.

  • Origine 'Champ web' : valeur issue d'un champ du formulaire HTML (généralement saisi par l'utilisateur).
    La colonne 'Cste / Attrib. Web' contient le nom (attribut 'NAME') du champ <input> du formulaire HTML.

  • Origine 'Token champ' : valeur d'un champ d'un bloc dont les noms sont saisis dans les colonnes suivantes.

  • Cste / Attrib. Web (champ VALEUR41)

  • Origine constante : contient la valeur de la constante.

  • Origine 'Champ web' : contient le nom (attribut 'NAME') du champ <input> du formulaire HTML.
    Le paramètre sera valorisé avec la valeur de ce champ.

Code du bloc pour l'origine 'Token champ'.

Entité du bloc pour l'origine 'Token champ'.

  • Champ (champ VFIEKEY41)

Code du champ pour l'origine 'Token champ'.

Enchaînement

Il s'agit de la page qui sera affichée si l'action sort en erreur.
Par défaut le moteur XTEND reste sur la page courante si une erreur se produit.

SEEWARNING Le moteur XTEND considère qu'une action a échoué si le web service invoqué a renvoyé au moins un message d'erreur.

  • Ench. programmé (champ SUIPRG)

'Oui' pour indiquer que c'est le traitement L4G qui renvoie le code du lien dynamique dans un paramètre du sous-programme.

Enchainement dynamique défini par le traitement L4G

Le traitement L4G peut décider du lien dynamique à enchainer en renvoyant le code du lien dans un paramètre du sous-programme.

  • Champ Ench. programmé :
    Le code du lien dynamique est stocké dans une entité de type session via le mapping de l'action.

  • Champs  Entité, Champ :
    Indiquent le code de l'entité de type session et le code du champ qui contient le code du lien dynamique à utiliser pour l'enchainement.

Le code du lien dynamique peut aussi être stocké dans une variable session (variable utilisateur).
Dans ce cas on indique :

  • 'ASESSION'
  • et le code de la variable qui contient le lien dans les paramètres Entité et Champ.

La page affichée suite à l'enchainement de plusieurs liens dynamiques est la page web associée au dernier lien dynamique traité.

 

 

Tableau Liens

Code du lien dynamique à exécuter.

Liste des liens dynamiques : les liens dynamiques saisis dans la liste seront exécutés séquentiellement tant qu'aucune erreur n'est renvoyée par le web service.

Fermer

 

Onglet Sélection

Présentation

Le lien dynamique a la capacité de poster une sélection à destination du bloc principal (AMAIN) de la page de destination. Si la sélection du bloc est 'altérable' et si les entités sélectionnées sont identiques, le bloc effectuera la sélection postée par le lien dynamique (en fonction du paramètre 'Application sélection').

Les champs de cet onglet sont actifs uniquement si un code entité a été sélectionné dans le champ 'Sélection sur l'entité' de l'écran 'Général'.

Fermer

 

Champs

Les champs suivants sont présents dans cet onglet :

Caractéristiques

  • Type de sélection (champ SELTYP)

Aucune : sélection de tous les les enregistrements.

Requête : application des critères de sélection du bloc.

Dernier lien cliqué : application des critères de sélection du lien dynamique qui a été cliqué pour accéder à la page qui contient le bloc.

  • Sélection altérable (champ SELDYNALT)

Non : la requête SQL associée au bloc ne peut pas être modifiée par celle d'un lien dynamique.

Oui : la requête peut être modifiée par celle associée à un lien dynamique.

SEEINFO La requête du bloc est la requête par défaut.

  • Optimisation (champ INTOPTIMI)

Choix de l'optimisation proposée par l'interface.

Aucune : Aucune optimisation

Pas de blob : l'interface ne renvoie pas le champs de type blob

Pas de clob : l'interface ne renvoie pas le champs de type clob

Ni clob, ni blob : l'interface ne renvoie pas le champs de type blob et clob

Synthèse sélection

  • champ RES30

Requête du bloc au format texte

Tableau Critères de sélection

  • Et/Ou (champ ANDOR30)

Opérateur logique d'enchainement des opérations.

  • ( (champ BRKLFTM30)

Parenthèses ouvrantes.

  • Champ (champ FIEKEY30)

Champ de l'entité dont la valeur est le premier opérande de l'opération.

  • champ OPE30

Opérateur de comparaison.

  • Origine (champ VALTYP30)

  • Origine constante : valeur fixe saisie dans la colonne 'Cste / Attrib. Web'

  • Origine 'Champ web' : valeur issue d'un champ du formulaire HTML (généralement saisi par l'utilisateur).
    La colonne 'Cste / Attrib. Web' contient le nom (attribut 'NAME') du champ <input> du formulaire HTML.

  • Origine 'Token champ' : valeur d'un champ d'un bloc dont les noms sont saisis dans les colonnes suivantes.

  • Cste / Attrib. Web (champ VALEUR30)

On saisit ici la valeur du paramètre. Celle-ci est saisie selon les cas comme un nombre, une date, ou un code alphanumérique. Lorsque le paramètre est de type menu local, on peut au choix saisir le début de l'intitulé, ou la valeur numérique correspondant au rang de l'intitulé dans la liste. Lorsque le code est contrôlé par une table annexe, une touche de sélection est utilisable pour le choisir.

Code du bloc pour l'origine 'Token champ'.

Entité du bloc pour l'origine 'Token champ'.

  • Champ (champ VFIEKEY30)

Code du champ pour l'origine 'Token champ'.

  • ) (champ BRKRGTM30)

Parenthèses fermantes.

  • Critère obligatoire (champ CRIOBY30)

  • Oui : la valeur du deuxième opérande doit être non vide sinon le message d'erreur 'AERRCRITMANDATORY' est renvoyés par XTEND.

  • Non : si la valeur du deuxième opérande est vide, le critère (la ligne) est ignoré.

  • Car. * pour tous (champ ALLSTAR30)

 

Entité

Indique les entités qui seront créées à partir du résultat de la requête.
L'entité contient l'interface de type 'Accès données' qui doit être appelée.

Interface de type 'Accès données' qui sera appelée.

  • champ INTTYPSEL

Type d'interface 'Accès données' qui sera appelée.

Fermer

 

Onglet Tri

Champs

Les champs suivants sont présents dans cet onglet :

Caractéristiques

  • Type de tri (champ SRTTYP)

Sélectionnez un type de tri :

  • Aucun: les enregistrements (lignes du bloc) ne sont pas triés.

  • Champ: tri suivant une liste de champs définis dans le tableau Tri.

  • Hasard : l'ordre des lignes est calculé de façon aléatoire par un traitement L4G post-requête. 'Hasard est  uilisé pour afficher aléatoirement une ligne parmi N.
  • Tri altérable (champ SRTDYNALT)

  • Non : les critères de tri ne peuvent pas être modifiés par un lien dynamique.

  • Oui : les critères de tri sont modifiables par un lien dynamique.

Tableau Tri

  • Champ (champ FIEKEY31)

Nom du champ pour l'origine 'Token champ'.

  • Ordre de tri (champ SRTORD31)

Orde de tri Ascendant/Descendant.

Fermer

 

Etats

Par défaut, les états suivants sont associés à la fonction :

 PRTSCR : Impression écran

Mais ceci peut être modifié par paramétrage.

Boutons spécifiques

Ce bouton permet de mettre à jour le dictionnaire XTEND au format XML.

Le serveur X3WEB prend en compte uniquement le dictionnaire sous ce format.

Il existe un fichier xml par dictionnaire.

Par exemple le fichier ACT.xml correspondant à l'ensemble des actions web pour le site Web courant.

Ce bouton permet de copier un lien dynamique.

Utilisation avancée

Fonction javaScript xtdDoDlk

Un token lien dynamique est toujours inséré comme attribut d'un tag HTML <a> ou <input type='button'>.

Lorsqu'un le serveur XTEND construit dynamiquement la page HTML : il génère, à l'emplacement des tokens lien dynamique, un appel à une fonction JavaScript de la bibliothèque XTEND (xtdDoDlk) sur l'événement onClick.

Les paramètres de la fonction xtdDoDlk sont contextuels et vont permettre à la bibliothèque XTEND de constituer les données (xml) à envoyer au serveur XTEND pour traiter l'action et la sélection.

<a  href="javascript:xtdDoSubmit('MYDLK',null);"
onclick="xtdDoDlk(this,'MYDLK',null,null,'XAA',0,null,event,false,'_1',false,null,false);">

<input type="button"
onclick="xtdDoDlk(this,'MYDLK',null,'MYBLOCK','XA',0,null,event,true,'',false,null,true);"
value="Add to cart"/>

Contexte de données

Lorsque l'utilisateur clique sur un lien dynamique, le contexte de données de la page n'existe plus sur le serveur.
Il a existé pendant la construction de la page puis a été supprimé.

Le serveur XTEND stocke, dans la page HTML (tag <span id="xtdctx">), le contexte de données nécessaire au traitement à posteriori des sélections et actions des liens dynamiques.

L'un des rôles de la fonction JavaScript xtdDoDlk est de retrouver le contexte de données associé au lien dynamique pour le renvoyer au serveur.

Exemple :

Pour un lien liste/détail (catalogue) on veut afficher dans la page 'détail' l'objet (article) sur lequel on a cliqué. Cette opération consiste, pour le serveur XTEND :

  • à mémoriser pour chaque ligne du catalogue les valeurs des critères de sélection (ici le code de l'article mais il peut y en avoir plusieurs) pour pouvoir les passer au bloc qui affiche le détail.

Le fait de stocker le contexte dans la page HTML assure un bon fonctionnement d'XTEND avec la touche Back du navigateur.

Appel d'un lien par programme

Pour appeler un lien dynamique par programme en JavaScript (non généré par XTEND), utilisez la fonction ci-dessous :

//aElmt est l'élément du DOM sur lequel on a cliqué
//aDlk est le code du lien dynamique à appeler
//aParams est optionnel et contient les paramètres de l'url (query string)
function xtdCallDlk(aElmt,aDlk,aParams){}

SEEWARNING Cette fonction ne peut être utilisée que si le lien dynamique n'a aucune référence à des champs XTEND dans les critères de sélection ou les paramètres de l'action.

Seuls les critères ou paramètres de type 'Champ web' sont pris en compte.

Comment intercepter le clic souris

Dans certains cas, le développeur peut être amené à intercepter le clic pour effectuer des contrôles.

Déclarez une fonction JavaScript de nom xtdDoMyDlk pour que la bibliothèque (XtendLib.js) l'appelle en passant en paramètre l'objet contextuel aDomOut (classe CXtdDomOut) qui permet d'accéder à toutes les informations sur le lien dynamique.

Cette fonction renvoie 'false' pour interrompre le traitement.

function xtdDoMyDlk(aDomOut)
{      
     if (aDomOut.isDlk("MyDynLink"))
     {
         // L'utilisateur a cliqué sur le lien MyDynLink
         return confirm("Confirmer votre action");
     }
     return true;
}

Vous pouvez aussi intercepter le processus juste avant l'envoie du formulaire vers le serveur (submit) en créant une fonction JavaScript xDoMySubmit dans la page :

function xDoMySubmit(aDlk,aDomOut){
    // Renvoie false pour interrompre le processus
    return true;
}

Class CXtdDomOut

Classe du paramètre aDomOut qui donne accès au contexte du lien dynamique.

// Renvoie la valeur de la variable utilisateur aKey
aDomOut.getUserVar(aKey);
// Renvoie le code du lien dynamique sur lequel l'utilisateur a cliqué
aDomOut.getDynLinkId();
// Renvoie l'index de la ligne (0 à N) si l'utilisateur a cliqué
// sur un lien qui est dans un bloc tableau'
aDomOut.getCurLineIdx();
// Renvoie true si l'utilisateur a cliqué sur le lien aArg
// aArg est soit un tableau de liens soit une String
aDomOut.isDlk(aArg);
    if (aDomOut.isDlk("DLK1","DLK2")){
        // Code si l'utilisateur a cliqué sur "DLK1" ou "DLK2"
    }
// Renvoie la liste des paramètres web (Class CXtdDlkWebParamsOut)
aDomOut.getWebParameters();
// Pour connaitre la valeur du paramètre web aName
// aIdx est l'index de la valeur si valeur multiple
aDomOut.getWebParameters().getParamValue(aName,aIdx)
// Renvoie un Array qui contient les valeurs du paramètre web aName
aDomOut.getWebParameters().getParamValues(aName)
// Renvoie la valeur d'un critère de sélection ou paramètre d'action
// aFieldName est le nom du champ XTEND utilisé pour le mapping
aDomOut.getDlkParamValues(aFieldName);
// Idem getDlkParamValues - aParamId est l'ID du paramètre dans mapping
// - Pour un critère de sélection l'ID est SEL + rang du critère (1-N)
// - Cette est plus exacte que getDlkParamValues car l'ID contrairement au nom du champ XTEND
aDomOut.getDlkParamValuesById(aParamId);

Comment ajouter des contrôles de saisie

Lorsqu'un paramètres d'action est déclaré comme 'Champ web obligatoire' la bibliothèque contrôle automatiquement :

  • la saisie d'une valeur,
  • le type pour les champs numériques et date.

Pour ajouter des contrôles supplémentaires sur les paramètres web, ajoutez la fonction xtdWebParamCheckValue ci-dessous dans la page HTML.

Cette fonction est appelée pour chaque paramètre web de l'action associée au lien dynamique et renvoie true pour valider la saisie.

Voir l'exemple dans la saisie du formulaire du site ASAMPLE.

Fonction xtdWebParamCheckValue

Paramètres :

  • aWebParamOut est l'objet qui représente le paramètre
    Voir class CXtdDlkWebParamOut
  • aInputFieldName est le nom du champ web
    Attribut name
  • aInputFieldIndex est l'index du champ dans le formulaire
    0 si un seul champ de nom aInputFieldName
  • aInputFieldValue est la valeur du paramètre pour l'index aInputFieldIndex

function xtdWebParamCheckValue(aWebParamOut,aInputFieldName,
                               aInputFieldIndex,aInputFieldValue){
    // Exemple : Contrôle du format du email sur le champ MAICOD
    if (aInputFieldName=="MAICOD"){
        var wEmail=xtdCheckEmail(aInputFieldValue);
        if (wEmail && wEmail!=aInputFieldValue){
            //Format OK
            //On met à jour la valeur avec le format calculé par xtdCheckEmail
            aWebParamOut.setValue(aInputFieldIndex,wEmail);
        }
        //True pour valider la saisie - False pour invalider
        return wEmail!=null;
    }
}

Class CXtdDlkWebParamOut

// Renvoie True si paramètre obligatoire
aWebParamOut.isMandatory();
// Renvoie l'iIndex du champ dans le formulaire HTML
// -> Il peut y avoir plusieurs champ de même nom dans un formulaire (tableau)
aWebParamOut.getIndex();
// Renvoie l'élément DOM
aWebParamOut.getElement(aIdx)
//aValue est un Array
aWebParamOut.setValues(aValue);
//aIdx est l'index (0 - N) de la valeur
aWebParamOut.setValue(aIdx,aValue);
// Renvoie la valeur d'un autre paramètre Web
// -> Utile si le contrôle la valeur d'un paramètre dépend d'autres paramètres
aWebParamOut.getParamValue(aName,aIdx);
// Renvoie la valeur dans un Array
aWebParamOut.getValues();
// Renvoie la valeur d'index aIdx
aWebParamOut.getValue(aIdx);
// Renvoie la valeur d'index 0
aWebParamOut.getFirstValue();
// Renvoie l'attribut name
aWebParamOut.getName();
// Renvoie le type de paramètre défini dan le dictionnaire XTEND
aWebParamOut.isInteger();
aWebParamOut.isX3Menu();
aWebParamOut.isDecimal();
aWebParamOut.isCurrency();
aWebParamOut.isDate();
aWebParamOut.isString();
aWebParamOut.isNumeric();
// Renvoie le type d'élément du DOM du paramètre
aWebParamOut.isHidden(aIdx);
aWebParamOut.isInputText(aIdx);
aWebParamOut.isCheckBox(aIdx);
aWebParamOut.isRadio(aIdx);
aWebParamOut.isTextArea(aIdx);
aWebParamOut.isSelect(aIdx);

Filtrer les paramètres à contrôler

Si la fonction xtdWebParamCheck est présente dans la page, la bibliothèque XTEND appelle cette fonction avant d'effectuer le contrôle du paramètre.

Cette fonction renvoie 'true' pour effectuer le contrôle de la valeur et false pour bloquer le contrôle.

Elle est particulièrement utile dans les listes de picking avec sélection des lignes par une case à cocher. Elle permet de filtrer les lignes pour effectuer le contrôle uniquement sur les lignes qui sont cochées.

Voir l'exemple dans la saisie du formulaire du site ASAMPLE.

Fonction xtdWebParamCheck

Paramètres :

  • aWebParamOut est l'objet qui représente le paramètre
    Voir class CXtdDlkWebParamOut
  • aInputFieldName est le nom du champ web
    Attribut name
  • aInputFieldIndex est l'index du champ dans le formulaire
    0 si un seul champ de nom aInputFieldName

var gNbChecked=0;
// Renvoie true si le paramètre web aInputFieldName/aInputFieldIndex doit être contrôlé
function xtdWebParamCheck(aWebParamsOut,aInputFieldName,aInputFieldIndex){
/*
    Exemple pour une liste de picking avec checkboxes (ASELECTED) pour sélectionner les lignes.
    On ne contrôle pas le champ AQUANTITY si la ligne n'est pas sélectionnée
*/
    if (aInputFieldName=="AQUANTITY"){
        // gNbChecked est un compteur des lignes sélectionnées
        // Il permet de bloquer l'action si aucune ligne n'est sélectionnée
        if (aInputFieldIndex==0) gNbChecked=0;
        // Ligne sélectionnée si la valeur de ASELECTED est égale à 1
        if (aWebParamsOut.getParamValue("ASELECTED",aInputFieldIndex)=="1"){
            gNbChecked++;
            return true;
        }
        return false;
    }
    return true;
}

Cas particulier des cases à cocher

Les CheckBoxes ont la particularité de ne pas être renvoyées dans le formulaire HTML si elles ne sont pas cochées.

Ce comportement n'est pas compatible avec le moteur XTEND qui se base sur l'index du champ dans le formulaire HTML pour associer les données saisies dans une même ligne d'un tableau.

Pour faire en sorte qu'une CheckBoxes soit renvoyée même si elle n'est pas cochée la bibliothèque, XTEND remplace les CheckBoxes non cochées par un champ 'input hidden' de même nom juste avant d'envoyer le formulaire vers le serveur (xtdProcessCheckBoxes).

La valeur utilisée pour valoriser les CheckBoxes non cochée est donnée par la variable globale gXtdCBUnSelelectedValue qui est vide par défaut (var gXtdCBUnSelelectedValue="").

Pour modifier la valeur :

  • Appelez la fonction xtdSetUnSelelectedValue avec la valeur choisie, par exemple sur l'événement onLoad de la page.

<script>
    // Page onLoad event
    function xBodyOnLoad()
    {
        // Set '0' value for unselected checkboxes
        xtdSetUnSelelectedValue('0');
        // Page initialization code
    }
</script>
<body onLoad="xBodyOnLoad();">
    <form>
        //Html code
    </form>
</body>

SEEINFO Lors du parsing de la page, XTEND détecte toutes les CheckBoxes qui ont un token adx et constitue une liste qui est envoyée vers le client dans le contexte de données de la page. Ce sont les CheckBoxes de cette liste qui sont prises en compte par la fonction xtdProcessCheckBoxes.

Accès aux 'Regional Settings'

Le serveur XTEND envoie au navigateur, dans le contexte de données de la page, les informations sur les 'Regional Settings' correspondants à la langue courante.

Pour accéder a ces informations :

  • Utilisez la fonction ci-dessous qui renvoie un objet dont la classe est CXtdRegionalSettings.

var wRegSettings=gXtdDOMFactory.getXtdDomIn().getRegionalSettings();

Méthodes de la class CXtdRegionalSettings

// Séparateur de décimales
wRegSettings.getDecimalSep();
// Séparateur de milliers
wRegSettings.getThousandSep();   
// Ordre de la date - MDY=0 - DMY=1 - YMD=2
wRegSettings.getDateOrder();
// Date pivot pour le calcule des dates X3
wRegSettings.getDatePivot();

Ajouter/Supprimer des variables et critères utilisateur

Les fonction ci-dessous permettent d'ajouter/supprimer des variables et critères utilisateur.

Les fonction xtdAjax* mettent à jour les variables sur le serveur via une requête Ajax, sans soumettre le formulaire HTML.

Les autres fonctions (hors xtdGetUserVar) soumettent le formulaire HTML.

// ---------------------------------------------------------------
function xtdRemoveUserVar(aId);
function xtdSetUserVar(aId,aValue);
function xtdGetUserVar(aId);
function xtdRemoveUserCrit(aId);
// ---------------------------------------------------------------
function xtdAjaxRemoveUserVar(aId);
function xtdAjaxRemoveAllUserVar();
function xtdAjaxSetUserVar(aId,aValue);
function xtdAjaxRemoveUserCrit(aId);
function xtdAjaxRemoveAllUserCrit();
function xtdAjaxSetUserCrit(aId,aValue);
function xtdRemoveAllUserCrit();

Afficher un message issu du serveur XTEND

La fonction ci-dessous affiche un message calculé par le serveur XTEND.
Le message est renvoyé dans la langue courante du site.

Paramètres :

  • aId est le code du message XTEND,
  • aP1,aP2.. sont les paramètres (facultatifs).

function xtdAlert(aId,aP1,aP2,aP3,aP4);
// L'exemple ci dessou affiche
// 'Vous êtes connecté à l'application avec le code utilisateur DIS001'
xtdAlert("ASESSLOGIN2","DIS001");

Accès au contexte d'appel de la page

La classe ci-dessous donne accès au contexte d'appel de la page pour connaitre le résultat d'une action :

var wCallCtx==gXtdDOMFactory.getXtdDomIn().getCallingCtx();
// ---------------------------------------------------------------
// CLASS CXtdCallingCtx
// ---------------------------------------------------------------
// Lien dynamique utilisé pour afficher la page courante
wCallCtx.getDynLink();
// True si la page est le résultat d'une action
wCallCtx.hasAction();
// Code de l'action
wCallCtx.getAction();
// True si l'action s'est bien déroulée - False si erreur
wCallCtx.getActionResult();

Messages d'erreur

Il n'y a pas de message d'erreur autre que les messages d'erreur génériques.

Tables mises en oeuvre

SEEREFERTTO Reportez-vous à la documentation de Mise en oeuvre