Manuel de référence
    • Introduction
    • Smart Data
    • Sécurité
    • Workflow
    • Les essentiels de l'API PHP
    • Composants graphiques
    • UIs de Smart Element
    • Internationalisation
    • Scripts
    • Module
    • API REST
    • Routes
    • Moteurs de transformation
    • Recherche générale
    • Supervision
    • Techniques avancées
    • Tableaux de bord
    • Workers
    Anakeen Platform 4
    Anakeen
    • Introduction
    • Smart Data
    • Sécurité
    • Workflow
    • Les essentiels de l'API PHP
    • Composants graphiques
    • UIs de Smart Element
    • Internationalisation
    • Scripts
    • Module
    • API REST
    • Routes
    • Moteurs de transformation
    • Recherche générale
    • Supervision
    • Techniques avancées
    • Tableaux de bord
    • Workers
    Anakeen Platform 4
    Anakeen
    • Représentation des Smart Elements

      • Introduction
        • Éléments inclus
        • Illustrations
          • Responsive design
      • Concepts
        • Rendu
        • Vue
      • Masque
        • Configuration d'un masque {#maskxml}
        • Visibilité des SmartFields {#maskvisibility}
          • Visibilité des SmartFields structurants {#maskvisibilitystruc}
      • Contrôle de vue
        • Profilage du contrôle de vue
        • Choix automatique de la vue {#autochoice}
        • Libellé du menu modifier
        • Astuces
        • Configuration d'un contrôle de vue {#viewcontrolxml}
        • Configuration générale
        • Configuration d'une vue
      • Classe de rendu
        • Classes de configuration de rendu par défaut
      • Méthodes de la classe de configuration de rendu

      • Options de rendu
        • Options de représentation type Smart Element {#smartElement-options}
          • setStickyTabs
          • setOpenFirstTab
          • setTabPlacement
        • Options de rendu communes à tout type de Smart Fields {#common-options}
          • showEmptyContent {#common-showemptycontent}
          • setLink
          • setLabelPosition {#common-setlabelposition}
          • setAttributeLabel {#common-setattributelabel}
          • setDescription {#common-setdescription}
          • displayDeleteButton {#common-displaydeletebutton}
          • setInputTooltip {#common-setinputtooltip}
          • setAutoCompleteHtmlLabel {#common-setautocompletehtmllabel}
          • addButton {#common-addbutton}
          • setTemplate {#common-settemplate}
          • addHtmlClass {#common-addhtmlclass}
          • removeHtmlClass {#common-removehtmlclass}
          • setHtmlAttribute {#common-sethtmlattribute}
          • setTranslations {#common-settranslations}
          • setCustomWidgetAttributeFunction {#common-setcustomwidgetattributefunction}
        • Options de représentation type account {#account-options}
        • Options de représentation type array {#array-options}
          • setRowCountThreshold {#array-setrowcountthreshold}
          • disableRowAdd {#array-disablerowadd}
          • disableRowDel {#array-disablerowdel}
          • disableRowMove {#array-disablerowmove}
          • setRowMinLimit {#array-setrowminlimit}
          • setRowMaxLimit {#array-setrowmaxlimit}
          • setRowMinDefault {#array-setrowmindefault}
          • setDescription (colonne de tableau) {#column-setdescription}
          • setDescription (tableau) {#array-setdescription}
          • setTranspositionWidth {#array-settranspositionwidth}
          • setTranslations {#array-settranslations}
        • Options de représentation type color {#color-options}
          • setKendoColorConfiguration {#color-setkendocolorconfiguration}
        • Options de représentation type date {#date-options}
          • setKendoDateConfiguration {#date-setkendodateconfiguration}
          • setFormat {#date-setformat}
          • setPlaceHolder {#date-setplaceholder}
        • Options de représentation type docid {#docid-options}
          • setKendoMultiSelectConfiguration {#docid-setkendomultiselectconfiguration}
          • setPlaceHolder {#docid-setplaceholder}
          • setFormat {#docid-setformat}
          • setDocumentIconSize {#docid-setdocumenticonsize}
          • addCreateDocumentButton {#docid-addcreatedocumentbutton}
        • Options de représentation type double {#double-options}
          • setDecimalPrecision {#double-setdecimalprecision}
        • Options de représentation type enum {#enum-options}
          • setDisplay {#enum-setdisplay}
          • useSourceUri {#enum-usesourceuri}
          • useFirstChoice {#enum-usefirstchoice}
          • useOtherChoice {#enum-useothertchoice}
          • setPlaceHolder {#enum-setplaceholder}
          • setTranslations {#enum-settranslations}
          • setOrderBy {#enum-setorderby}
        • Options de représentation type file {#file-options}
          • setContentDispositionInline {#file-setcontentdispositioninline}
          • setTranslations {#file-settranslations}
          • setPlaceHolder {#file-setplaceholder}
          • setMimeIconSize {#file-setmimeiconsize}
        • Options de représentation type frame {#frame-options}
          • setCollapse {#frame-setcollapse}
          • setDescription (cadre) {#frame-setdescription}
          • setResponsiveColumns {#frame-setresponsivecolumns}
        • Options de représentation type htmltext {#htmltext-options}
          • setHeight {#htmltext-setheight}
          • setToolbar {#htmltext-settoolbar}
          • setKendoEditorConfiguration {#htmltext-setKendoEditorConfiguration}
          • setAnchorsOptions {#htmltext-setanchorsoptions}
        • Options de représentation type image {#image-options}
          • setThumbnailSize {#image-setthumbnailsize}
        • Options de représentation type int {#int-options}
          • setKendoNumericConfiguration {#int-setkendonumericconfiguration}
          • setFormat {#int-setformat}
          • setTranslations {#int-settranslations}
          • setPlaceHolder {#int-setplaceholder}
        • Options de représentation type longtext {#longtext-options}
          • setMaxDisplayedLineNumber {#longtext-setmaxdisplayedlinenumber}
        • Options de représentation type money {#money-options}
          • setCurrency {#money-setcurrency}
        • Options de représentation type password {#password-options}
          • hideValue {#password-hidevalue}
          • setPlaceHolder {#password-setplaceholder}
        • Options de représentation type tab {#tab-options}
          • setTooltipLabel {#tab-settooltiplabel}
          • setDescription (onglet) {#tab-setdescription}
        • Options de représentation type text {#text-options}
          • setMaxLength {#text-setmaxlength}
          • setKendoAutoCompleteConfiguration {#text-setkendoautocompleteconfiguration}
          • setPlaceHolder {#text-setplaceholder}
          • setFormat {#text-setformat}
        • Options de représentation type time {#time-options}
          • setKendoTimeConfiguration {#time-setkendotimeconfiguration}
          • setFormat {#time-setformat}
          • setPlaceHolder {#time-setplaceholder}
        • Options de représentation type timestamp {#timestamp-options}
          • setKendoDateConfiguration {#timestamp-setkendodateconfiguration}
      • Associer une classe de rendu à un Smart Element
        • Fichiers de surcharge des éléments de rendu {#overloadRender}
          • Format
          • Prise en compte des surcharges
          • Définir l'accès à un rendu de Smart Element
          • Désactiver le calcul des etag {#disableetag}
        • Classe d'accès à un rendu de Smart Element
        • Définir les rendus dans un contrôle de vue
        • Définir un rendu par défaut pour une Smart Structure
      • Contrôleurs clients (javascript)
      • Contrôleur global
        • Méthodes du contrôleur global
          • addSmartElement
          • getScopedController
          • getControllers
          • addEventListener
          • registerFunction
          • setVerbose
      • Contrôleur restreint
        • Objets internes du contrôleur
          • Smart Element {#internal-SE}
          • Smart Field {#internal-SF}
          • Types de Smart Field {#smart-field-types}
        • Énuméré
          • Fenêtre de transition {#SE-transition}
          • Menu
        • Carte des événements du contrôleur restreint
          • Ordonnancement des événements
          • Modification
          • Sauvegarde
          • Suppression
          • Restauration
          • Passage de transition
          • Autres
        • Méthodes du contrôleur restreint de Smart Element
          • addEventListener {#addEventListener}
          • addConstraint
          • addCustomClientData
          • appendArrayRow
          • changeStateSmartElement
          • cleanSmartFieldErrorMessage
          • deleteSmartElement
          • drawTab
          • fetchSmartElement
          • getCustomServerData
          • getProperties
          • getProperty
          • getSmartFields
          • getSmartField
          • getValues
          • getValue
          • getMenus
          • getMenu
          • getCustomClientData
          • hasSmartField
          • hideSmartField
          • hasMenu
          • isLoaded
          • isModified
          • injectJS
          • injectCSS
          • insertBeforeArrayRow
          • listConstraints
          • listEventListeners
          • maskSmartElement
          • removeEventListeners
          • removeCustomClientData
          • removeArrayRow
          • restoreSmartElement
          • removeConstraint
          • reinitSmartElement
          • saveSmartElement
          • setValue
          • setSmartFieldErrorMessage
          • selectTab
          • showMessage
          • showSmartField
          • triggerEvent
          • tryToDestroy
          • unmaskSmartElement
        • Liste des événements déclenchés sur le Smart Element Ui
          • actionClick {#actionClick}
          • afterDelete
          • afterSave
          • afterRestore
          • beforeClose
          • beforeDelete
          • beforeRender
          • beforeRestore
          • beforeSave
          • beforeValidate
          • close
          • displayError
          • displayMessage
          • ready
        • Liste des événements déclenchés sur les Smart Fields
          • smartFieldAnchorClick
          • smartFieldArrayChange
          • smartFieldBeforeRender
          • smartFieldDownloadFile
          • smartFieldHelperResponse
          • smartFieldHelperSearch
          • smartFieldHelperSelect
          • smartFieldEnumResponse {#smartfieldenumresponse}
          • smartFieldEnumSearch {#smartfieldenumsearch}
          • smartFieldEnumSelect {#smartfieldenumselect}
          • smartFieldReady
          • smartFieldChange
          • smartFieldUploadFile
          • smartFieldUploadFileDone
          • smartFieldBeforeTabSelect
          • smartFieldAfterTabSelect
          • smartFieldTabChange
          • smartFieldConstraintCheck
          • smartFieldCreateDialogSmartElementReady
          • smartFieldCreateDialogSmartElementBeforeSetFormValues
          • smartFieldCreateDialogSmartElementBeforeSetTargetValue
          • smartFieldCreateDialogSmartElementBeforeClose
          • smartFieldCreateDialogSmartElementBeforeDestroy
          • beforeDisplayTransition
          • afterDisplayTransition
          • beforeTransitionClose
          • beforeTransition
          • failTransition
          • successTransition
      • Rendu de transition
        • Associer une classe de rendu de transition via le cycle de vie
        • Classe de rendu de transition
          • getCssReferences
          • getJsReferences
          • getTemplates
          • getTransitionParameters
          • getRenderOptions
    • Aide à la saisie

    # Contrôle de vue

    Les contrôles de vue permettent de spécifier des représentations alternatives pour un Smart Element. L'utilisateur peut choisir parmi ces représentations, en fonction de ses droits, ou alors le contrôle de vue peut déterminer dynamiquement la vue en fonction des droits de l'utilisateur.

    Chaque modalité de représentation est appelée une vue.

    Chaque vue est composée de :

    • un identifiant système (obligatoire) une chaîne alphanumérique, qui doit être unique au sein du contrôle de vue. Elle permet de désigner la vue de manière non ambiguë.
    • un libellé (obligatoire) une chaîne permettant de désigner la vue à l'utilisateur. Traduisible, elle est notamment utilisée dans les menus.
    • un type (obligatoire) consultation ou édition, détermine pour quelle type de représentation la-dite vue est utilisable.
    • une classe de rendu permet d'indiquer les modifications apportées à la vue.
    • un masque permet de spécifier un masque à appliquer lors de l'utilisation de cette vue
    • un numéro d'ordre entier utilisé pour le choix automatique, il permet d'indiquer un ordre de préférence pour les vues.
    • un caractère affichable. Indique si la vue doit être présentée à l'utilisateur sous forme de menu (pour lui permettre de choisir cette représentation), ou ne sera accessible que par programmation. Si la vue est affichable, alors elle sera présentée au moyen de son libellé. Si la vue affichable est la vue d'édition par défaut, celle-ci est affichée à la place du menu "Modifier" avec le nom de la vue. Elle n'est pas affichée ailleurs même si le paramètre "menu" est défini. Un nom de menu si la vue est affichable, indique le libellé du menu sous lequel doit être présentée la vue

    # Profilage du contrôle de vue

    Il est possible d'appliquer un profil à un contrôle de vue. Ce profil détermine alors pour chaque vue qui a le droit d'y accéder.

    Le profil en question peut être statique, mais également dynamique.

    # Choix automatique de la vue

    Les règles sont les suivantes :

    • Restriction à la liste des vues pour lesquelles
      • le type (consultation/édition) correspond à l'action courante,
      • l'utilisateur est autorisé à y accéder ,
      • l'ordre est strictement positif (≥ 1).
    • Classement des vues restantes par numéro d'ordre croissant.
    • Utilisation de la première des vues restantes (n° d'ordre le plus petit ≥ 1). Si aucune des vues n'est utilisable, c'est la vue par défaut qui est utilisée.

    Exemple : Soit le contrôle de vue suivant :

    Identifiant de la vue Label Type Ordre de sélection Affichable Droit User #1 Droit User #2
    VUE1 Vue n°1 Consultation 0 Oui X X
    VUE2 Vue n°2 Consultation 10 Non X
    VUE3 Vue n°3 Consultation 30 Non X
    VUE4 Vue n°4 Consultation 20 Oui X
    VUE5 Vue n°5 Édition 0 Oui X
    VUE6 Vue n°6 Édition 10 Non X
    VUE7 Vue n°7 Édition Non X X
    VUE8 Vue n°8 Édition 20 Oui X

    Soit l'url : /api/v2/smart-elements/1234.html

    Pour l'utilisateur n°1 :

    • Vue utilisée : VUE3
    • Vue de modification proposée dans le menu "Modifier" : Défaut (aucune vue d'édition n'est sélectionnable automatiquement)
    • Vue proposée sur le menu : VUE1, VUE5, VUE7

    Pour l'utilisateur n°2 :

    • Vue utilisée : VUE2
    • Vue de modification proposée dans le menu "Modifier" : VUE6
    • Vues proposées sur le menu : VUE1, VUE4, VUE8

    # Libellé du menu modifier

    Lors de la consultation, le libellé du menu "modifier" correspondra au libellé de la vue de modification choisie selon l'algorithme précédent.

    # Astuces

    Les ordres ne sont pas obligés de se suivre. Aussi, vous pouvez numéroter vos vues de 10 en 10, afin de faciliter l'ajout futur d'une nouvelle vue.

    Il est recommandé de restreindre la visibilité des attributs sur la Smart Structure, et d'élargir ces visibilités au moyen des contrôles de vue et des masques associés. Ainsi, il devient aisé d'avoir une vue d'administration, utilisant un masque dédié, et ayant le plus faible ordre, et les autres vues restreintes, sans masque et avec un ordre supérieur.

    # Configuration d'un contrôle de vue

    La configuration d'un contrôle de vue est fait par dans la balise smart:config/ui:view-control :

    <?xml version="1.0" encoding="UTF-8"?>
    <smart:config xmlns:smart="https://platform.anakeen.com/4/schemas/smart/1.0"
                  xmlns:ui="https://platform.anakeen.com/4/schemas/ui/1.0">
        <ui:view-control name="MY_CUSTOM_CVDOC" label="Mon libellé" structure="MY_STRUCTURE_NAME">
          [...]
        </ui:view-control>
    </smart:config>
    

    # Configuration générale

    Balises Description
    smart:config/ui:view-control/@name (obligatoire) Référence du contrôle de vue
    smart:config/ui:view-control/@label Libellé court du contrôle de vue
    smart:config/ui:view-control/@structure Référence à la structure (permet de gérer des droits dynamiques)
    smart:config/ui:view-control/ui:primary-mask/@ref Référence du masque primaire
    smart:config/ui:view-control/ui:description Texte de description du contrôle de vue

    Masque primaire

    Le masque primaire est appliqué sur toutes les vues déclarées dans le contrôle de vue. Si une vue déclare aussi un masque, ce masque secondaire sera appliqué aussi une fois le masque primaire appliqué.

    Exemple :

    <?xml version="1.0" encoding="UTF-8"?>
    <smart:config xmlns:smart="https://platform.anakeen.com/4/schemas/smart/1.0"
                xmlns:ui="https://platform.anakeen.com/4/schemas/ui/1.0">
      <ui:view-control name="{Nom_Logique_CVDOC}" label="{LIBELLE}" structure="{SMARTSTRUCTURE}">
        <ui:description>Différentes vues pour personnaliser les formulaires des mes Smart Elements</ui:description>
        <ui:primary-mask ref="MY_PRIMARY_MASK"/>
      </ui:view-control>
    </smart:config>
    

    # Configuration d'une vue

    La balise _smart:config/ui:view-control/ui:view-list contient la liste des vues disponibles.

    • smart:config/ui:view-control/ui:view-list contient une liste de <ui:view>.
    Balises de configuration des vues Description
    smart:config/ui:view-control/ui:view-list/ui:view/@name (obligatoire) Token servant d'identifiant unique
    smart:config/ui:view-control/ui:view-list/ui:view/@label (obligatoire) Nom d'affichage
    smart:config/ui:view-control/ui:view-list/ui:view/@display-mode (obligatoire) Mode d'affichage : 'consultation' / 'edition'
    smart:config/ui:view-control/ui:view-list/ui:view/@order (Entier) : Ordre de pour la sélection automatique
    smart:config/ui:view-control/ui:view-list/ui:view/@menu-displayed (Booléen / Valeur par défaut : true)Indique qu'un élément de menu sera affiché dans la barre de menu standard du Smart Element. La sélection de ce menu affichera le Smart Element avec la vue indiquée.
    smart:config/ui:view-control/ui:view-list/ui:view/@parent-menu-id (Chaîne de caractères)Seulement si menu-displayed est à true, indique que l'élément de menu sera affiché dans un menu déroulant dont le libellé sera la valeur de cet attribut
    smart:config/ui:view-control/ui:view-list/ui:view/ui:mask/@ref Référence du masque à appliquer sur cette vue
    smart:config/ui:view-control/ui:view-list/ui:view/ui:render-config/@class Référence de la classe PHP de rendu associée
    smart:config/ui:view-control/ui:creation-view/@ref Référence à la vue utilisée pour la création (parmi celles définies dans la balise view-list

    Exemple :

    <?xml version="1.0" encoding="UTF-8"?>
    <smart:config xmlns:smart="https://platform.anakeen.com/4/schemas/smart/1.0"
                xmlns:ui="https://platform.anakeen.com/4/schemas/ui/1.0">
      <ui:view-control name="{Nom_Logique_CVDOC}" label="{LIBELLE}" structure="{SMARTSTRUCTURE}">
         <ui:view-list>
            <ui:view name="ABC_DISPLAY_ADMIN" label="Display Admin" display-mode="consultation" order="1" menu-displayed="false"/>
            <ui:view name="ABC_DISPLAY_DEFAULT" label="Display Default" display-mode="consultation" order="10" menu-displayed="false"/>
            <ui:view name="ABC_DISPLAY_CREATE" label="Display Default" display-mode="edition"  menu-displayed="false" >
                <ui:mask ref="MY_MASK"/>
                <ui:render-config class="My\Custom\MyRender"/>
            </ui:view>
         </ui:view-list>
            <ui:creation-view ref="ABC_DISPLAY_CREATE"/>
      </ui:view-control>
    </smart:config>
    

    ← Masque Classe de rendu →