Nous avons effectué des mises à jour ! Consultez notre portail de documentation mis à jour ! En savoir plus...

Création de transactions à partir de boutons personnalisés

Prev Next

OneSpan Sign pour Dynamics CRM peut automatiser la préparation des transactions OneSpan Sign via un bouton personnalisé.

Avant de pouvoir créer un tel bouton, vous devez d’abord établir une relation entre la transaction concernée (esl_package) et l’Entité source (par exemple, un compte).

Pour en savoir plus sur la création de relations, consultez Microsoft TechNet à https://technet.microsoft.com/en-us/library/dn531171.aspx.

Après avoir rempli les conditions ci-dessus, vous pouvez créer un bouton personnalisé de l’une des manières suivantes :

Après avoir créé un bouton personnalisé, vous pouvez vouloir aller plus loin dans le processus d’automatisation en procédant à une ou plusieurs des étapes suivantes :

Créer un bouton personnalisé sur un formulaire CRM 

Pour créer un bouton personnalisé sur un formulaire CRM , effectuez les étapes suivantes :

Création du HTML et JavaScript source

La section Exemple HTML de ce guide fournit du code HTML et JavaScript qui crée deux boutons HTML, chacun pouvant être utilisé pour créer une transaction en utilisant des données d’un enregistrement de compte.

Vous devez d’abord écrire le code HTML et JavaScript requis. Cela créera l’élément visuel du bouton ainsi que sa fonctionnalité.

Les paramètres de la bibliothèque suivants sont requis dans le formulaire de fonction JavaScript :

  1. Dynamics 365 fournit un script pour initialiser le contexte client.

    <script src="../../ClientGlobalContext.js.aspx" type="text/javascript"></script>
  2. JQuery v 2.1.1 – Cette version est incluse avec Dynamics 2.1.1.

    <script src="../../esl_/scripts/jquery.js" type="text/javascript"></script>
  3. Module pour supporter XrmServiceToolkit. https://www.nuget.org/packages/json2/1.0.2.

    <script src="../../esl_/scripts/json.js" type="text/javascript"></script>
  4. XrmServiceToolkit est une bibliothèque JavaScript qui peut être utilisée pour le développement JavaScript sous la plateforme OneSpan Sign Embedded Integration pour les environnements CRM 2013/2015. Voir : https://xrmservicetoolkit.codeplex.com/. Les dépendances sont : JQuery et json2.

    <script src="../../esl_/scripts/XrmServiceToolkit.js" type="text/javascript"></script>

    L’étape 4 propose de nombreux raccourcis pour créer des requêtes web JavaScript vers Dynamics CRM. Vous pouvez utiliser JavaScript directement, ou utiliser jQuery.ajax.

    Utilisez le code suivant pour positionner deux boutons en haut de la ressource web :

    <ul>
      <li><button id="btnCreate">
      <img src="../../esl_/images/PackageCreateIcon.png" alt="Create Package" /><span>Create</span>
    </button></li>
      <li><button id="btnCreate2">
      <img src="../../esl_/images/PackageCreateIcon.png" alt="Create Package with template" /><span>Create2</span>
    </button></li>
    </ul>

    jQuery sert à lier chaque bouton à la fonction JavaScript appropriée. Une fois la ressource Web prête, elle peut être importée et testée dans Dynamics 365.

Importez la ressource web dans Dynamics 365

Après la création du code HTML et JavaScript, il doit être importé en tant que ressource Web dans Dynamics 365 afin d’être placé sur un formulaire CRM .

Pour importer la ressource Web pertinente dans Dynamics 365 :

  1. Depuis le menu OneSpan Sign Embedded Integration pour CRM, sélectionnez Paramètres > Personnalisations > Personnaliser le système.

  2. Depuis le ruban de la fenêtre de Solution qui apparaît, sélectionnez Ressources Web dans le menu déroulant Nouveau.

  3. Dans la fenêtre Nouvelle ressource Web , remplissez le champ Nom .

  4. Dans le champ Type , collez soit le code source HTML que vous avez écrit, soit sélectionnez un fichier existant (par exemple Exemple HTML) et cliquez sur Choisir un fichier.

  5. Cliquez sur Enregistrer puis sur Publier. La ressource Web devient accessible à l’ensemble du système.

Insertion de la ressource web dans un formulaire d’entité

Après avoir importé la ressource Web, elle doit être insérée dans un formulaire d’Entité (dans cet exemple, un compte).

Pour insérer la ressource Web dans un formulaire d’Entité :

  1. Depuis le menu OneSpan Sign Embedded Integration for CRM, sélectionnez Paramètres > Personnalisations > Personnaliser le système.

  2. Depuis le menu latéral de la fenêtre Solution , sélectionnez le formulaire d’entité à personnaliser, par exemple Entités > Formulaires > Compte.

  3. Cliquez sur Nouveau > formulaire principal.

  4. Cliquez sur l’onglet Insérer . Dans cet exemple, un onglet Une colonne a été inséré avant la section Résumé pour s’assurer que les boutons apparaissent en haut du formulaire.

  5. Depuis le ruban Insérer , cliquez sur Une colonne. Une section Tab est créée dans le panneau Insertion .

  6. Depuis le ruban, cliquez sur Ressource Web. La boîte de dialogue Ajouter une ressource web apparaît.

  7. Depuis le champ Ressource Web , sélectionnez le fichier de ressource web que vous avez créé dans Importer la ressource Web dans Dynamics 365.

  8. Remplissez les champs Nom et Étiquette .

  9. Si l’exemple HTML a été utilisé, les boutons suivants sont insérés en haut du formulaire :

    • Cliquer sur Créer crée une transaction. Si un contact principal est assigné au compte, il sera ajouté à la transaction en tant que signataire.

    • Cliquer sur Créer2 crée aussi une transaction. Le code tente de trouver un modèle enregistré nommé template01.

     

    • Pour diminuer le volume de JavaScript, cet exemple utilise jQuery. Pour plus d’informations, consultez la documentation en ligne de jQuery.

    • Dans l’exemple ci-dessus, la bibliothèque XrmServiceToolkit.js aide à raccourcir le code JavaScript. Cette bibliothèque peut être mise à jour.

    • Si vous souhaitez ajouter de l’animation ou bloquer l’interface utilisateur pendant l’exécution du code, utilisez le code suivant :

    function ShowProcessing (message) {
    
            if (typeof message != "string") {
                message = "Working...";
           }
            var $div = $("#containerLoadingProgress");
            if ($div.length === 0) {
                $div = parent.$("#containerLoadingProgress");
            }
    
            var $message = $div.find("#loadingtext");
            if ($message.length === 0) {
                $message = $("<div />", { "id": "loadingtext", "style": "position:absolute;top:58%;left:50%" });
                $div.append($message);
            }
           $message.text(message);
           $div.show();
       };
    
       function HideProcessing () {
           ///<summary>
           /// Hide the loader after the preocess is over.
           ///</summary>
           var $div = $("#containerLoadingProgress");
           if ($div.length === 0) {
               $div = parent.$("#containerLoadingProgress");
           }
           $div.hide();
        };
    

Création d’un bouton personnalisé sur le ruban

(1) Des informations sur la personnalisation du ruban se trouvent dans les commandes Personnaliser et la section ruban de la bibliothèque en ligne de Microsoft ; (2) vous pouvez également utiliser une extension tierce, comme l’extension Ribbon Workbench 2016 de develop1 : https://www.develop1.net/public/rwb/ribbonworkbench.aspx.

Lorsque vous créez le code JavaScript pertinent, les bibliothèques suivantes sont recommandées pour réduire le volume du code :

  • esl_/scripts/jquery.js

  • esl_/scripts/json.js

  • esl_/scripts/XrmServiceToolkit.js

Si vous utilisez l’application suggérée Ribbon Workbench 2016 , vous pouvez créer une solution contenant l’entité à laquelle associer le bouton d’action.

Pour créer un bouton personnalisé sur le ruban :

  1. Depuis le menu Ruban Workbench 2016 , cliquez sur Personnalisation. La fenêtre suivante apparaît.

  2. Depuis le menu Boîte à outils , cliquez et glissez l’icône Bouton jusqu’à la section Formulaire du menu supérieur.

  3. Dans le panneau Propriétés : Contrôle , complétez les champs. La valeur saisie dans le champ Étiquette est reflétée par l’icône Bouton .

  4. Depuis la section Formulaire du menu supérieur, cliquez sur Nouer. La fenêtre Actions apparaît.

  5. Complétez les champs avec les paramètres indiqués dans les prérequis ci-dessus. Le champ Action Javascript personnalisé peut être complété avec le code Javascript personnalisé de votre entreprise.

  6. Ce champ appellera des paramètres à passer à cette fonction.

Ajouter un document à une transaction

OneSpan Sign prend en charge les types de documents suivants :

  • Le format de document portable d’Adobe (*.pdf) — Les PDF sur lesquels OneSpan Sign peut agir ont généralement au moins ces permissions activées : (1) Modification du document ; (2) Signature ; (3) Remplissage des champs de formulaire.

  • Microsoft Word (*.Doc ou *. docx)

  • Open Office (*.odt)

  • Texte (*.txt)

  • Format de texte enrichi (*.RTF)

De plus, le pilote d’impression OneSpan Sign prend en charge tout document pouvant être imprimé depuis une application Windows (par exemple, Microsoft Word, Microsoft Excel, Microsoft PowerPoint).

Contraintes de taille de fichier

  • La taille maximale d’un seul document est de 16 Mo. Les documents plus petits offrent de meilleures performances — nous recommandons moins de 5 Mo par document.

  • La taille totale maximale de tous les documents d’une transaction est de 39 Mo.

  • Si votre organisation utilise des connecteurs Salesforce ou Microsoft SharePoint, la taille maximale du fichier est de 5 Mo par document.

  • Si votre organisation utilise des connecteurs Salesforce, le nombre maximal de documents pouvant être ajoutés à une transaction est de dix (10).

  • Si vous activez la livraison d’e-mail tout en configurant un destinataire, les pièces jointes supérieures à 5 Mo ne sont pas prises en charge.

Contraintes de noms de fichiers

  • Les noms de fichiers des documents ne doivent pas contenir les caractères suivants séparés par des virgules : *, /, \, :, <, >, |, ?, ".

  • Le nom d’un document ne peut pas contenir la chaîne signée.

Contraintes générales des fichiers

  • Nous vous recommandons de ne pas utiliser de documents PDF qui utilisent XML Forms Architecture. Pour plus d’informations, voir Soutien XFA.

  • Ne téléchargez pas les documents protégés par mot de passe ou corrompus. Celles-ci génèrent une erreur.

  • OneSpan recommande vivement de scanner un PDF pour détecter des erreurs de syntaxe (par exemple, en utilisant l’outil Preflight d’Adobe) et de résoudre les erreurs avant d’ajouter le document à une transaction.

  • Les PDF avec le drapeau NeedAppearances réglé sur true ne sont pas actuellement pris en charge.

Si vous souhaitez ajouter un document à une Transaction, le code suivant peut être : (1) ajouté à l’exemple ; (2) invoqué lorsque nécessaire.

////  Use this function to retrieve a list of notes for the current record.
////
////  parameters:
////     packageId :  package to link to
////     note :  json object
////             {
////               id: "guid of the note",
////               name: "text to display, should be the filename"
////             }
function queryCrmRelatedDocuments(id) {
    var select =
        "?$top=100&$select=AnnotationId,Subject,FileName,FileSize,ModifiedOn,OwnerId,ObjectId&$expand=OwnerId,ObjectId";
    select += "&$filter=ObjectId/Id eq guid'" + id + "' and IsDocument eq true";

    var list = [];

    XrmServiceToolkit.Rest.RetrieveMultiple("AnnotationSet",
        select,
        function(results) {
            $(results).each(function(index, data) {
                    list.push({
                        "name": data.FileName,
                        "id": data.AnnotationId
                    });

                    //Now the list is populated, you can call  'addNoteToPackage'
                },
                function(e) {
                    //Handle errors
                },
                function() {
                    /// handle when done, like hiding "busy" animation
                },
                true);
        });
}

////  Use this function to bind an existing note/attachment to a package.
////
////  parameters:
////     packageId :  package to link to
////     note :  json object
////             {
////               id: "guid of the note",
////               name: "text to display, should be the filename"
////             }
function addNoteToPackage(packageId, note) {
    var document0 = {
        esl_name: note.name,
        esl_description: note.name,
        esl_documentorder: 0,
        esl_filename: "note://" + note.id
    };

    XrmServiceToolkit.Rest.Create(
        document0,
        "esl_documentSet",
        function (result) {
            XrmServiceToolkit.Rest.Associate(
                packageId,
                "esl_packageSet",
                result.documentId,
                "esl_documentSet",
                "esl_package_document",
                function () {
                    ///Handle success
                },
                function (e0) {
                    ///Handle any errors, for example >>  alert(e0.message);
                },
                false);

        },
        function (e0) {
            ///Handle any errors, for example >>  alert(e0.message);
        },
        false);
}

Ajouter une convention à une transaction

Si vous souhaitez ajouter une Convention à une Transaction, le code suivant peut être ajouté à l’exemple ; (2) invoqué lorsque nécessaire.

////  Use this function retrieve a convention of CRM.
////
////  parameters:
////     name :  name of convention to lookup
////     successCallback :  function(data) {} which expect to receive a convention data
////             {
////               id: convention id,
////               name: name of the convention,
////             }
function getConventionByName(name, successCallback) {

    XrmServiceToolkit.Rest.RetrieveMultiple(
        "esl_conventionSet",
        "?$top=1&$select=esl_conventionId,esl_name&$filter=esl_name eq '" + name + "'",
        function (result) {

            var convention = {
                id: result[0].esl_conventionId,
                name: result[0].esl_name
            };

            // Handle success
            successCallback(convention);
        },
        function(e) {
            //Handle any errors
        },
        function () { },
        true);
}

Then adding the convention to the package using this function:

////  Use this function to bind an existing note/attachment to a package.
////
////  parameters:
////     packageId :  package to link to
////     note :  json object
////             {
////               id: "guid of the note",
////               name: "text to display, should be the filename"
////             }
function addConventionToPackage(packageId, conventionId) {
    XrmServiceToolkit.Rest.Associate(
        conventionId,
        "esl_conventionSet",
        packageId,
        "esl_packageSet",
        "esl_convention_package",
        function () {
            ///Handle success
        },
        function (e0) {
            ///Handle any errors, for example >>  alert(e0.message);
        },
        false);
}

Envoi automatique d’une transaction

Si vous souhaitez envoyer une transaction automatiquement, le code suivant peut être ajouté à l’échantillon ; (2) invoqué lorsque nécessaire.

function SendPackage (packageId) {

   var crmObject = {
        esl_request: "SendPackage",
        esl_parameter1: packageId  // the package Id is required
    };

    XrmServiceToolkit.Rest.Create(crmObject,
        "esl_plugincommandSet",
        function (data) {
            //Handle succerss
            //  'data' would contain an json object of type 'esl_plugincommand'
        },
        function (e) {
            //Handle error 'e'
        },
        true);
}