Ajouter un bouton d’action personnalisé dans l’interface utilisateur de création de correspondance add-custom-action-button-in-create-correspondence-ui

Accédez à https://'[server]:[port]'/[ContextPath]/crx/de et connectez-vous en tant qu’administrateur.

Dans le dossier des applications, créez un dossier appelé defaultApp avec un chemin d’accès/structure similaire au dossier defaultApp (situé dans le dossier de configuration). Procédez comme suit pour créer le dossier :

1. Faites un clic droit sur le dossier defaultApp à l’emplacement suivant et sélectionnez Nœud de recouvrement  :

   /libs/fd/cm/config/defaultApp/

   

2. Assurez-vous que la boîte de dialogue du nœud de recouvrement possède les valeurs suivantes :

   Chemin d’accès : /libs/fd/cm/config/defaultApp/

   Emplacement du recouvrement : /apps/

   Correspondance des types de nœuds : activé.

   

3. Cliquez sur OK.

4. Cliquez sur Enregistrer tout.

Effectuez une copie du fichier acmExtensionsConfig.xml (branche /libs) sous la branche /apps.

1. Accédez à « /libs/fd/cm/config/defaultApp/acmExtensionsConfig.xml ».

2. Faites un clic droit sur le fichier acmExtensionsConfig.xml et sélectionnez Copier.

   

3. Cliquez avec le bouton droit de la souris sur le dossier defaultApp sous « /apps/fd/cm/config/defaultApp/ », puis sélectionnez Coller.

4. Cliquez sur Enregistrer tout.

Double-cliquez sur la copie du fichier acmExtentionsConfig.xml que vous venez de créer dans le dossier des applications. Le fichier s’ouvre en vue de sa modification.

Recherchez le code suivant :

<?xml version="1.0" encoding="utf-8"?>
<extensionsConfig>
    <modelExtensions>
        <modelExtension type="LetterInstance">
  <customAction name="Preview" label="loc.letterInstance.preview.label" tooltip="loc.letterInstance.preview.tooltip" styleName="previewButton"/>
            <customAction name="Submit" label="loc.letterInstance.submit.label" tooltip="loc.letterInstance.submit.tooltip" styleName="submitButton" permissionName="forms-users"/>
            <customAction name="SaveAsDraft" label="loc.letterInstance.saveAsDraft.label" tooltip="loc.letterInstance.saveAsDraft.tooltip" styleName="submitButton" permissionName="forms-users"/>
            <customAction name="Close" label="loc.letterInstance.close.label" tooltip="loc.letterInstance.close.tooltip" styleName="closeButton"/>
        </modelExtension>
    </modelExtensions>
</extensionsConfig>

Pour envoyer la lettre par courrier électronique, vous pouvez utiliser le workflow LiveCycle Forms. Pour ajouter une balise customAction sous la balise modelExtension dans le fichier acmExtensionsConfig.xml, procédez comme suit :

 <customAction name="Letter Review" label="Letter Review" tooltip="Letter Review" styleName="" permissionName="forms-users" actionHandler="CM.domain.CCRCustomActionHandler">
      <serviceName>Forms Workflow -> SendLetterForReview/SendLetterForReviewProcess</serviceName>
    </customAction>

La balise modelExtension comporte un ensemble de balises enfants customAction configurant l’action, les autorisations et l’aspect du bouton d’action. Voici la liste des balises de configuration customAction :

Outre les paramètres ci-dessus, des configurations supplémentaires associées à une action personnalisée customAction peuvent exister. Ces configurations supplémentaires sont accessibles au gestionnaire via l’objet CustomAction.

Cliquez sur Enregistrer tout.

Faites un clic droit sur le dossier Paramètres régionaux au chemin d’accès suivant et sélectionnez Nœud de recouvrement  :

/libs/fd/cm/config/defaultApp/locale

Assurez-vous que la boîte de dialogue du nœud de recouvrement possède les valeurs suivantes :

Chemin d’accès : /libs/fd/cm/config/defaultApp/locale

Emplacement du recouvrement : /apps/

Respect des types de nœud : activé

Cliquez sur OK.

Cliquez sur Enregistrer tout.

Faites un clic droit sur le fichier suivant et sélectionnez Copier  :

/libs/fd/cm/config/defaultApp/locale/ACMExtensionsMessages.properties

Faites un clic droit sur le dossier Paramètres régionaux à l’emplacement suivant et sélectionnez Coller  :

/apps/fd/cm/config/defaultApp/locale/

Le fichier ACMExtensionsMessages.properties est copié dans le dossier de paramètres régionaux.

Pour localiser les libellés de l’action/du bouton personnalisé(e) nouvellement ajouté(e), créez le fichier ACMExtensionsMessages.properties correspondant au paramètre régional approprié dans /apps/fd/cm/config/defaultApp/locale/.

Par exemple, pour localiser l’action/le bouton personnalisé(e) créé(e) dans cet article, créez un fichier nommé ACMExtensionsMessages_fr.properties avec l’entrée suivante :

loc.letterInstance.letterreview.label=Revue De Lettre

De même, vous pouvez ajouter des propriétés supplémentaires (par rapport à l’info-bulle et au style, par exemple) dans ce fichier.

Cliquez sur Enregistrer tout.

Accédez à https://[host]:'port'/system/console/bundles. Le cas échéant, connectez-vous en tant qu’administrateur.

Recherchez le lot du bloc de création Adobe Asset Composer. Redémarrez le lot : cliquez sur Arrêter, puis sur Démarrer.

Accédez à https://'[server]:[port]'/[ContextPath]/crx/de. Le cas échéant, connectez-vous en tant qu’administrateur.

Dans le dossier d’applications, créez un dossier nommé js dans la branche /apps de CRX, dont la structure est semblable au dossier suivant :

/libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/js

Procédez comme suit pour créer le dossier :

1. Cliquez avec le bouton droit sur le dossier  js à l’emplacement suivant et sélectionnez Nœud de recouvrement  :

   /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/js

2. Assurez-vous que la boîte de dialogue du nœud de recouvrement possède les valeurs suivantes :

   Chemin : /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/js

   Emplacement du recouvrement : /apps/

   Respect des types de nœud : activé

3. Cliquez sur OK.

4. Cliquez sur Enregistrer tout.

Dans le dossier js, procédez comme suit pour créer un fichier nommé ccrcustomization.js avec le code de traitement d’action du bouton :

1. Cliquez avec le bouton droit sur le dossier  js au chemin suivant, puis sélectionnez Créer > Créer un fichier  :

   /apps/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/js

   Nommez le fichier ccrcustomization.js.

2. Double-cliquez sur le fichier ccrcustomization.js pour l’ouvrir dans CRX.

3. Dans le fichier, collez le code suivant puis cliquez sur Enregistrer tout  :

   code language-javascript

   /* for adding and handling custom actions in Extensible Toolbar. * One instance of handler will be created for each action. * CM.domain.CCRCustomActionHandler is actionHandler class. */ var CCRCustomActionHandler; CCRCustomActionHandler = CM.domain.CCRCustomActionHandler = new Class({ className: 'CCRCustomActionHandler', extend: CCRDefaultActionHandler, construct : function(action,model){ } }); /** * Called when user user click an action * @param extraParams additional arguments that may be passed to handler (For future use) */ CCRCustomActionHandler.prototype.handleAction = function(extraParams){ if (this.action.name == CCRCustomActionHandler.SEND_FOR_REVIEW) { var sendForReview = function(){ var serviceName = this.action.actionConfig["serviceName"]; var inputParams = {}; inputParams["dataXML"] = this.model.iccData.data; inputParams["letterId"] = this.letterVO.id; inputParams["letterName"] = this.letterVO.name; inputParams["mailId"] = $('#email').val(); /*function to invoke the LivecyleService */ ServiceDelegate.callJSONService(this,"lc.icc.renderlib.serviceInvoker.json","invokeProcess",[serviceName,inputParams],this.onProcessInvokeComplete,this.onProcessInvokeFail); $('#ccraction').modal("hide"); } if($('#ccraction').length == 0){ /*For first click adding popup & setting letterName.*/ $("body").append(popUp); $("input[id*='letterName']").val(this.letterVO.name); $(document).on('click',"#submitLetter",$.proxy( sendForReview, this )); } $('#ccraction').modal("show"); } }; /** * Should the action be enabled in toolbar * @param extraParams additional arguements that may be passed to handler (For future use) * @return flag indicating whether the action should be enabled */ CCRCustomActionHandler.prototype.actionEnabled = function(extraParams){ /*can be customized as per user requirement*/ return true; }; /** * Should the action be visible in toolbar * @param extraParams additional arguments that may be passed to handler (For future use) * @return flag indicating whether the action should be enabled */ CCRCustomActionHandler.prototype.actionVisible = function(extraParams){ /*Check can be enabled for Non-Preview Mode.*/ return true; }; /*SuccessHandler*/ CCRCustomActionHandler.prototype.onProcessInvokeComplete = function(response) { ErrorHandler.showSuccess("Letter Sent for Review"); }; /*FaultHandler*/ CCRCustomActionHandler.prototype.onProcessInvokeFail = function(event) { ErrorHandler.showError(event.message); }; CCRCustomActionHandler.SEND_FOR_REVIEW = "Letter Review"; /*For PopUp*/ var popUp = '<div class="modal fade" id="ccraction" tabindex="-1" role="dialog" aria-hidden="true">'+ '<div class="modal-dialog modal-sm">'+ '<div class="modal-content">' + '<div class="modal-header">'+ '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</code></button>'+ '<h4 class="modal-title"> Send Review </h4>'+ '</div>'+ '<div class="modal-body">'+ '<form>'+ '<div class="form-group">'+ '<label class="control-label">Email Id</label>'+ '<input type="text" class="form-control" id="email">'+ '</div>'+ '<div class="form-group">'+ '<label class="control-label">Letter Name</label>'+ '<input id="letterName" type="text" class="form-control" readonly>'+ '</div>'+ '<div class="form-group">'+ '<input id="letterData" type="text" class="form-control hide" readonly>'+ '</div>'+ '</form>'+ '</div>'+ '<div class="modal-footer">'+ '<button type="button" class="btn btn-default" data-dismiss="modal"> Cancel </button>'+ '<button type="button" class="btn btn-primary" id="submitLetter"> Submit </button>'+ '</div>'+ '</div>'+ '</div>'+ '</div>';

Accédez à https://'[server]:[port]'/system/console/configMgr et connectez-vous en tant qu’administrateur.

Localisez la configuration du SDK client d’Adobe LiveCycle et cliquez sur Modifier (icône de modification). Le panneau de configuration s’ouvre.

Saisissez les informations suivantes, puis cliquez sur Enregistrer  :

• URL du serveur  : URL du serveur LC dont dépend le service Envoi pour révision utilisé par le code du gestionnaire d’action.
• Nom d’utilisateur  : nom d’utilisateur de l’administrateur du serveur LC.
• Mot de passe  : mot de passe du nom d’utilisateur de l’administrateur.

Connectez-vous en tant qu’administrateur à l’interface administrateur du serveur LiveCycle® à l’adresse https:/[lc server]/:[lc port]/adminui.

Accédez à Accueil > Services > Applications et services > Gestion des applications.

Si l’application SendLetterForReview est déjà présente, ignorez les étapes restantes de cette procédure. Dans le cas contraire, effectuez les étapes suivantes.

Cliquez sur Importer.

Cliquez sur Choisir un fichier et sélectionnez SendLetterForReview.lca.

Cliquez sur Aperçu.

Sélectionnez Déployer les ressources à l’exécution à la fin de l’importation.

Cliquez sur Importer.

Connectez-vous en tant qu’administrateur à https:/[host]:'port'/system/console/configMgr.

Recherchez et cliquez sur Configuration du SDK client d’Adobe LiveCycle. Le panneau Configuration du SDK client d’Adobe LiveCycle s’affiche.

Dans la liste Nom du service, cliquez sur l’icône + et ajoutez un nom de service SendLetterForReview/SendLetterForReviewProcess.

Cliquez sur Enregistrer.

Connectez-vous avec les informations d’identification d’administrateur à l’interface administrateur du serveur LiveCycle à https:/[lc server]:[lc port]/adminui.

Accédez à Accueil > Services > Applications et services > Gestion des services.

Recherchez et cliquez sur EmailService.

Dans Hôte SMTP, configurez le service de messagerie.

Cliquez sur Enregistrer.

Mettez à jour l’URL du serveur Experience Manager dans cmsa.properties dans DSCSample.jar, qui se trouve à l’emplacement suivant :

DSCSample.jar\com\adobe\livecycle\cmsa.properties

Indiquez les paramètres suivants dans le fichier de configuration :

• crx.serverUrl=https:/host:port/[context path]/[AEM URL]
• crx.username= nom d’utilisateur Experience Manager
• crx.password= mot de passe Experience Manager
• crx.appRoot=/content/apps/cm

Le fichier DSCSample.jar utilise l’API renderLetter. Pour plus d’informations sur l’API renderLetter, voir Interface LetterRenderService.

Démarrez Workbench et connectez-vous.

Sélectionnez Fenêtre > Afficher les vues > Composants. La vue Composants est ajoutée à Workbench ES2.

Faites un clic droit sur Composants et sélectionnez Installer un composant.

Sélectionnez le fichier DSCSample.jar via l’explorateur de fichiers et cliquez sur Ouvrir.

Faites un clic droit sur RenderWrapper et sélectionnez Démarrer le composant. Si le composant démarre, une flèche verte apparaît en regard du nom du composant.

Videz la mémoire cache du navigateur.

Dans l’interface utilisateur de création de correspondance, cliquez sur Révision de lettre et indiquez l’ID de messagerie du réviseur.

Cliquez sur Envoyer.