Renseignez les champs Date et heure avec l’heure actuelle à l’aide d’une extension d’éditeur de fragment de contenu dans Experience Manager as a Cloud Service
Dans Adobe Experience Manager as a Cloud Service, le champ standard Date/Heure dans les modèles de fragment de contenu reste vide lorsque les auteurs créent ou modifient un fragment de contenu dans le nouvel éditeur de fragment de contenu. Dans l’éditeur hérité, ces champs étaient préremplis avec l’heure système actuelle, mais le nouvel éditeur les laisse vides et nécessite que les auteurs saisissent manuellement la valeur. Cette modification affecte les workflows de création qui dépendent des valeurs temporelles par défaut. Pour renseigner automatiquement le champ, implémentez un champ personnalisé via le framework d’extensibilité de l’interface utilisateur de l’éditeur de fragments de contenu et définissez l’heure actuelle lorsque la valeur du champ est vide. Pour résoudre ce problème, créez, déployez et testez l’extension de champ personnalisé.
Description description
Environnement
- Adobe Experience Manager as a Cloud Service (l’extensibilité de l’interface utilisateur de l’éditeur de fragments de contenu est prise en charge)
Problème/Symptômes
- Les champs Date et heure des fragments de contenu sont vides par défaut dans le nouvel éditeur.
- Les auteurs doivent saisir manuellement l’heure actuelle.
Cause
Le nouvel éditeur de fragment de contenu ne remplit pas automatiquement les champs Date et heure par défaut. Pour restaurer ce comportement, un champ personnalisé doit être implémenté à l’aide du framework d’extensibilité.
Résolution resolution
Pour renseigner automatiquement l’heure actuelle, procédez comme suit :
-
Installer et mettre à jour l’interface de ligne de commande Adobe App Builder.
- Exécutez
npm install -g @adobe/aio-cli. - Exécutez
aio plugins:update.
- Exécutez
-
Initialisez un projet d’extension Éditeur de fragment de contenu à l’aide du modèle d’éditeur :
- Exécutez
aio app init --template @adobe/aem-cf-editor-ui-ext-tpl.
- Exécutez
-
Implémentez un composant React de champ Date/Heure personnalisé :
- Utilisez l’API Custom Fields pour enregistrer votre champ personnalisé.
- Dans votre composant, vérifiez si la valeur du champ est vide. Si tel est le cas, définissez-le sur l’heure actuelle du système.
- Exemple:
«
importer { useEffect } à partir de ‘react’;
exporter la fonction par défaut CustomDateTimeField({ value, onChange }) {
useEffect() => {
if (!value) {
onChange(new Date().toISOString());
}
}, [ value, onChange] );
// Effectuer le rendu de votre entrée date/heure ici, permettant le remplacement manuel
}
«
- Enregistrez ce composant en tant que champ personnalisé pour votre propriété Date/Heure à l’aide du framework d’extensibilité.
4. Déployez votre extension dans votre environnement AEM en suivant les étapes de déploiement standard pour les extensions App Builder.
5. Testez l’extension : - Ouvrez un fragment de contenu dans le nouvel éditeur.
- Ajoutez ou modifiez un champ Date/Heure et vérifiez qu’il est automatiquement rempli avec l’heure système actuelle.
- Confirmez que les auteurs peuvent toujours modifier la valeur selon les besoins.