Vue d’ensemble

Lors de la migration de l’ancienne interface utilisateur vers la nouvelle interface utilisateur d’AEM Guides, les mises à jour de ui_config doivent être converties en configurations d’interface utilisateur plus flexibles et modulaires. Ce framework permet d’adopter facilement des modifications dans editor_toolbar et autres barres d’outils. Le processus prend également en charge la modification d’autres vues et widgets dans l’application.

Modification de JSON pour différents écrans

Les fichiers JSON peuvent être ajoutés à la section Configuration de l’interface utilisateur de l’éditeur XML pour divers écrans et widgets. Vous trouverez ci-dessous une liste des widgets couramment utilisés et de leurs identifiants :

Structure générale de chaque fichier JSON

Chaque fichier JSON suit une structure cohérente :

Exemple de structure JSON :

{
  "id" : "editor_toolbar",
  "view": {
    "items": [
      {
        ...,
        "targetEditor": {
          "mode": [
            "preview"
          ],
          "editor": [
            "xml"
          ]
        },
        "target": {
          "key": "label",
          "value": "Table",
          "viewState": "prepend"
        },
        ...
      },
    ]
  }
}

Compréhension des propriétés targetEditor

Vous trouverez ci-dessous une répartition de chaque propriété, son objectif et les valeurs prises en charge.

mode

Définit le mode de fonctionnement de l’éditeur.

Valeurs prises en charge : author, source, preview, layout (précédemment toc), split

displayMode (facultatif)

Contrôle la visibilité ou l’interactivité des composants de l’interface utilisateur. La valeur par défaut est définie sur show si elle n’est pas spécifiée.

Valeurs prises en charge : show, hide, enabled, disabled

Exemple :

 {
        "icon": "textBulleted",
        "title": "Custom Insert Bulleted",
        "on-click": "$$AUTHOR_INSERT_REMOVE_BULLETED_LIST",
        "key": "$$AUTHOR_INSERT_REMOVE_BULLETED_LIST",
        "targetEditor": {
          "documentType": [
            "ditamap"
          ],
          "mode": [
            "author"
          ],
          "displayMode": "hide"
        }
      },

editor

Spécifie le type de document principal dans l'éditeur.

Valeurs prises en charge : ditamap, bookmap, subjectScheme, xml, css, translation, preset, pdf_preset

documentType

Indique le type de document principal.

Valeurs prises en charge : dita, ditamap, bookmap, subjectScheme, css, preset, ditaval, reports, baseline, translation, html, markdown, conditionPresets,

Des valeurs supplémentaires peuvent être prises en charge pour des cas d’utilisation spécifiques.

Exemple :

 {
        "icon": "textNumbered",
        "title": "Custom Numbered List",
        "on-click": "$$AUTHOR_INSERT_REMOVE_NUMBERED_LIST",
        "key": "$$AUTHOR_INSERT_REMOVE_NUMBERED_LIST",
        "targetEditor": {
          "documentType": [
            "dita",
            "ditamap"
          ],
          "mode": [
            "author",
            "source"
          ]

        }
      },

documentSubType

Classe ensuite le document en fonction des documentType.

Des valeurs supplémentaires peuvent être prises en charge pour des cas d’utilisation spécifiques.

Exemple :

 {
        "icon": "rename",
        "title": "Custom Rename",
        "on-click": "$$PUBLISH_PRESETS_RENAME",
        "label": "Custom Rename",
        "key": "$$PUBLISH_PRESETS_RENAME",
        "targetEditor": {
          "documentType": [
            "preset"
          ],
          "documentSubType": [
            "nativePDF",
            "aemsite",
            "json"
          ]

        }
      },

flag

Indicateurs booléens pour l’état ou les fonctionnalités du document.

Valeurs prises en charge : isOutputGenerated, isTemporaryFileDownloadable, isPDFDownloadable, isLocked, isUnlocked, isDocumentOpen

De plus, vous pouvez également créer un indicateur personnalisé à l’intérieur de extensionMap qui est utilisé comme indicateur dans targetEditor. Ici, extensionMap est une variable globale utilisée pour ajouter des clés personnalisées ou des valeurs observables.

Exemple :

 {
        "icon": "filePDF",
        "title": "Custom Export pdf",
        "on-click": "$$DOWNLOAD_TOPIC_PDF",
        "key": "$$DOWNLOAD_TOPIC_PDF",
        "targetEditor": {
          "documentType": [
            "markdown"
          ],
          "mode": [
            "preview"
          ],
          "flag": ["isPDFDownloadable"]

        }
      },

Exemples

Vous trouverez ci-dessous un exemple d’ajout, de suppression ou de remplacement d’un bouton dans la barre d’outils de l’éditeur.

Ajout d’un bouton

Ajout d'un nouveau bouton Insérer un tableau personnalisé dans editor_toolbar pour ajouter un tableau simple visible uniquement en mode aperçu.

{
  "id": "editor_toolbar",
  "view": {
    "items": [
      {
        "icon": "table",
        "title": "Insert Custom Table",
        "on-click": {
          "name": "$$AUTHOR_INSERT_ELEMENT",
          "args": [
            "simpletable",
            "table",
            "choicetable"
          ]
        },
        "key": "$$AUTHOR_INSERT_ELEMENT",
        "targetEditor": {
          "mode": [
            "preview"
          ],
        },
        "target": {
          "key": "label",
          "value": "Table",
          "viewState": "prepend"
        }
      }
    ]
  }
}

Suppression d’un bouton

Suppression d’un bouton de la barre d’outils. Ici, nous supprimons le bouton Ajouter une image de la barre d’outils de l’éditeur.

{
  "id": "editor_toolbar",
  "view": {
    "items": [
      {
        "hide": true,
        "target": {
          "key": "label",
          "value": "Image",
          "viewState": "replace"
        }
      }
    ]
  }
}

Remplacement d’un bouton

Remplacement du bouton Multimédia de la barre d’outils par le bouton d’insertion de lien Youtube visible uniquement en mode création.

{
  "id": "editor_toolbar",
  "view": {
    "items": [
      {
        "icon": "s2youtube",
        "title": "Youtube",
        "on-click": {
          "name": "$$AUTHOR_INSERT_ELEMENT",
          "args": "<object data='http://youtube.com'></object>"
        },
        "targetEditor": {
          "mode": [
            "author"
          ]
        },
        "target": {
          "key": "elementId",
          "value": "toolbar-multimedia",
          "viewState": "replace"
        }
      }
    ]
  }
}

Ajout d'un bouton en mode aperçu

Conformément à la conception, la visibilité des boutons est gérée séparément pour les modes verrouillé et déverrouillé (lecture seule) afin de conserver une expérience utilisateur claire et contrôlée. Par défaut, tout nouveau bouton ajouté est masqué lorsque l’interface est en mode lecture seule.
Pour rendre un bouton visible en mode lecture seule vous devez indiquer une cible qui le place dans une sous-section de la barre d’outils qui reste accessible même lorsque l’interface est verrouillée.
Par exemple, en spécifiant la cible en tant que Télécharger sous forme de PDF, vous pouvez vous assurer que le bouton apparaît dans la même section qu’un bouton visible existant, ce qui le rend accessible en mode déverrouillé.

"target": {
  "key": "label",
  "value": "Download as PDF",
  "viewState": "prepend"
}

Ajout d’un bouton Exporter en tant que PDF en mode Aperçu qui sera visible à la fois en mode verrouillé et en mode déverrouillé.

{
  "id": "editor_toolbar",
  "view": {
    "items": [
      {
        "icon": "filePDF",
        "title": "Export as PDF",
        "on-click": "$$DOWNLOAD_TOPIC_PDF",
        "key": "$$DOWNLOAD_TOPIC_PDF",
        "targetEditor": {
          "editor": [
            "ditamap",
            "xml"
          ],
          "mode": [
            "preview"
          ]
        },
        "target": {
          "key": "label",
          "value": "Download as PDF",
          "viewState": "prepend"
        }
      },
      {
        "icon": "filePDF",
        "title": "Export as PDF",
        "on-click": "$$DOWNLOAD_TOPIC_PDF",
        "key": "$$DOWNLOAD_TOPIC_PDF",
        "targetEditor": {
          "editor": [
            "ditamap",
            "xml"
          ],
          "mode": [
            "preview"
          ]
        }
      }
    ]
  }
}

Le fragment suivant présente le bouton Exporter en tant que PDF avec le scénario de verrouillage.

En outre, le bouton Exporter en tant que PDF avec le scénario de déverrouillage est visible dans le fragment de code ci-dessous.

Comment charger des fichiers JSON personnalisés

Comment charger un fichier CSS personnalisé

Vous pouvez également ajouter un CSS pour personnaliser l’aspect des boutons personnalisés ajoutés ou des widgets ou boutons existants dans l’interface utilisateur.

Pour un bouton personnalisé nouvellement ajouté, ajoutez un extraclass au bouton ou au composant personnalisé dans le fichier JSON.
Pour une ancienne classe, vous pouvez inspecter l’élément et modifier également les classes existantes.

{
  "icon": "table",
  "title": "Insert Custom Table",
  "extraclass": "custom-css",
  "key": "$$AUTHOR_INSERT_ELEMENT",
  "targetEditor": {
    "mode": [
      "preview"
    ],
  },
  "target": {
    "key": "label",
    "value": "Table",
    "viewState": "prepend"
  }
}

Exemple de personnalisation du css du bouton

Nous ajoutons ici un nouveau bouton Insérer un tableau personnalisé dans editor_toolbar pour ajouter un tableau simple visible uniquement en mode aperçu et y appliquer un CSS personnalisé.
Ce css modifie l’arrière-plan du bouton et la taille de police de son titre.

#editor_toolbar {
  .custom-css {
    background-color: burlywood;
    font-size: 2rem;
  }
}

{
  "id": "editor_toolbar",
  "view": {
    "items": [
      {
        "icon": "table",
        "title": "Insert Custom Table",
        "extraclass": "custom-css",
        ...
      }
    ]
  }
}

Étapes de conversion de la configuration de l’interface utilisateur en Json modulaires