Search
  1. Home
  2. Documentación
  3. OneSpan Sign
  4. Guías
  5. Crear transacciones a partir de botones personalizados

Crear transacciones a partir de botones personalizados

Last modified: 2023-09-20

Crear transacciones a partir de botones personalizados

OneSpan Sign para Dynamics CRM puede automatizar la preparación de transaccionesOneSpan Sign a través de un botón personalizado.

Para poder crear un botón de este tipo, debe crear primero una relación entre da transacción correspondiente (esl_package) y la entidad de origen (por ejemplo, una cuenta).

Para obtener más información sobre la creación de relaciones, consulte Microsoft TechNet en https://docs.microsoft.com/es-es/previous-versions/dynamicscrm-2016/administering-dynamics-365/dn531171(v=crm.8)?redirectedfrom=MSDN.

Una vez cumplidos los requisitos previos anteriores, puede crear un botón personalizado de cualquiera de las siguientes maneras:

Una vez creado un botón personalizado, es posible que quiera dar un paso más en el proceso de automatización haciendo una o varias de las siguientes acciones:

Crear un botón personalizado en un formulario de CRM

Para crear un botón personalizado en un formulario de CRM, siga estos pasos:

Creación del código fuente HTML y JavaScript

La sección Ejemplo de HTML de esta guía proporciona código HTML y JavaScript para crear dos botones HTML, cada uno de los cuales se puede utilizar para crear una transacción utilizando datos de un registro de cuenta.

Primero debe escribir el código HTML y JavaScript necesario. De este modo, se creará el elemento visual del botón, así como su funcionalidad.

Los siguientes parámetros de la biblioteca son necesarios en el formulario de la función JavaScript:

  1. Dynamics 365 proporciona un script para inicializar el contexto de cliente.
    2. <script src="../../ClientGlobalContext.js.aspx" type="text/javascript"></script>
  2. JQuery v 2.1.1: esta versión se incluye con Dynamics 2.1.1. 
    3. <script src="../../esl_/scripts/jquery.js" type="text/javascript"></script>
  3. Módulo para admitir XrmServiceToolkit. https://www.nuget.org/packages/json2/1.0.2. 
    4. <script src="../../esl_/scripts/json.js" type="text/javascript"></script>
  4. XrmServiceToolkit es una biblioteca de JavaScript que se puede utilizar para el desarrollo de JavaScript bajo la plataforma para entornos de OneSpan Sign for Microsoft Dynamics CRM 2013/2015. Consulte: https://xrmservicetoolkit.codeplex.com/. Las dependencias son: JQuery y json2.
    5. <script src="../../esl_/scripts/XrmServiceToolkit.js" type="text/javascript"></script>

    El Paso 4 proporciona muchos accesos directos para crear solicitudes web de JavaScript para Dynamics CRM. Puede usar JavaScript directamente o jQuery.ajax.

    Utilice el siguiente código para colocar dos botones en la parte superior del recurso 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 se utiliza para vincular cada botón a la función JavaScript adecuada. Una vez que el recurso web está listo, se puede importar y probar en Dynamics 365.

Importar el recurso web en Dynamics 365

Una vez creado el código de HTML y JavaScript, se debe importar como Recurso web en Dynamics 365 para poder colocarlo en un formulario de CRM.

Para importar el recurso web correspondiente en Dynamics 365:

  1. En el menú de OneSpan Sign for Microsoft Dynamics CRM, seleccione Configuración > Personalizaciones > Personalizar el sistema.
  2. En la cinta de la ventana Solución que aparece, seleccione Recursos web en el menú desplegable Nuevo.
  3. En la ventana Recurso web nuevo, complete el campo Nombre.
  4. En el campo Tipo, pegue la fuente HTML que escribió o seleccione un archivo preexistente (por ejemplo, Ejemplo de HTML) y haga clic en Elegir archivo.
  5. Haga clic en Guardar y luego en Publicar. El recurso web pasa a estar disponible para todo el sistema.

Insertar el recurso web en un formulario de entidad

Después de importar el recurso web, se debe insertar en un formulario de Entidad (en este ejemplo, una cuenta).

Para insertar el recurso web en un formulario de entidad:

  1. En el menú de OneSpan Sign for Microsoft Dynamics CRM, seleccione Configuración > Personalizaciones > Personalizar el sistema.
  2. En el menú lateral de la ventana Solución, seleccione el formulario de entidad que va a personalizar, por ejemplo, Entidades > Cuenta > Formularios.
  3. Haga clic en Nuevo > Formulario principal.

  4. Haga clic en la pestaña Insertar. En este ejemplo, se insertó una pestaña de Una columna antes de la sección Resumen para asegurar que los botones aparezcan en la parte superior del formulario.
  5. En la cinta de la pestaña Insertar, haga clic en Una columna. Se crea una sección Pestaña en el panel Insertar.

  6. En la cinta, haga clic en Recurso web. Aparece el cuadro de diálogo Agregar recurso web.
  7. En el campo Recurso web, seleccione el archivo de recurso web que creó en Importar el recurso web en Dynamics 365.
  8. Complete los campos Nombre y Etiqueta.

  9. Si se utilizó la muestra de Ejemplo de HTML, se insertan los siguientes botones en la parte superior del formulario:
    • Al hacer clic en Crear, se crea una transacción. Si se asigna un contacto principal a la cuenta, se agregará a la transacción como firmante.
    • Al hacer clic en Crear2, también se crea una transacción. El código intenta encontrar un formulario guardado llamado template01.

     

    • Para reducir el volumen de JavaScript, este ejemplo utiliza jQuery. Para obtener más información, consulte la documentación en línea de jQuery.

    • En el ejemplo anterior, la biblioteca XrmServiceToolkit.js ayuda a acortar el código JavaScript. Esta biblioteca se puede actualizar.

    • Si desea agregar animación o bloquear la interfaz de usuario durante la ejecución del código, utilice el siguiente código:

    10. 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();
    };

Crear un botón personalizado en la cinta

(1) Puede encontrar información sobre la personalización de la cinta en la sección Personalizar comandos y la cinta de la biblioteca en línea de Microsoft; (2) también puede utilizar una extensión de terceros, como la extensión Ribbon Workbench 2016 de develop1: https://www.develop1.net/public/rwb/ribbonworkbench.aspx.

A la hora de crear el código JavaScript correspondiente, se recomiendan las siguientes bibliotecas para ayudar a reducir el volumen del código:

  • esl_/scripts/jquery.js
  • esl_/scripts/json.js
  • esl_/scripts/XrmServiceToolkit.js

Si utiliza la aplicación Ribbon Workbench 2016 sugerida, puede crear una solución que contenga la entidad a la que asociar el botón de acción.

Para crear un botón personalizado en la cinta:

  1. En el menú de Ribbon Workbench 2016, haga clic en Personalización. Aparece la siguiente ventana.

  2. En el menú Caja de herramientas, haga clic y arrastre el ícono Botón a la sección Formulario del menú superior.
  3. En el panel Propiedades: Control, complete los campos. El valor ingresado en el campo Etiqueta se refleja en el ícono Botón.
  4. En la sección Formulario del menú superior, haga clic en Nuevo. Aparece la ventana Acciones.
  5. Complete los campos con los parámetros indicados en los requisitos previos anteriores. El campo Acción de Javascript personalizada se puede completar con el código Javascript personalizado de su empresa.

  6. Este campo llamará a los parámetros para que pasen a esta función.

Agregar un documento a una transacción

OneSpan Sign soporta los siguientes tipos de documentos:

  • Formato de documento portátil de Adobe (*.pdf): los PDF sobre los que puede actuar OneSpan Sign suelen tener activados al menos estos permisos: (1) Cambiar el documento; (2) Firmar; (3) Rellenar los campos del formulario.
  • Microsoft Word (*.doc o *.docx)
  • Open Office (*.odt)
  • Texto (*.txt)
  • Formato de texto enriquecido (*.rtf)

Además, el controlador de impresión de OneSpan Sign es compatible con cualquier documento que se pueda imprimir desde una aplicación basada en Windows (por ejemplo,,Microsoft Word,Microsoft Excel,Microsoft PowerPoint).

Restricciones de tamaño de archivos

  • El tamaño máximo de un solo documento son 16 MB. Los documentos más pequeños ofrecen un mejor rendimiento: recomendamos menos de 5 MB por documento.
  • Si su organización utiliza los conectores Salesforce o Microsoft SharePoint, el tamaño máximo de los archivos es de 5 MB por documento.
  • Si su organización utiliza los conectores Salesforce, el número máximo de documentos que se pueden añadir a una transacción es de diez (10).
  • Si habilita la entrega de correo electrónico mientras configura un destinatario, no se admiten archivos adjuntos de más de 5 MB.

Restricciones de nombres de archivos

  • Los nombres de los archivos de documento no deben contener ninguno de los siguientes caracteres separados por comas: *, /, \, :, <, >, |, ?, ".
  • El nombre de un documento no puede contener la cadena esigned.

Restricciones generales de archivos

  • Le recomendamos que no utilice documentos PDF que utilicen la arquitectura de formularios XML. Para obtener más información, consulte Soporte XFA.
  • No cargue documentos protegidos con contraseña ni dañados. Se generará un error.
  • OneSpan le recomienda encarecidamente que analice un PDF en busca de errores de sintaxis (por ejemplo, con la herramienta de Adobe Prelight) y resuelva cualquier error antes de añadir el documento a la transacción.
  • Actualmente no se admiten archivos PDF con la marca NeedAppearances definida como true.

Si desea agregar un documento a una transacción, el siguiente código puede ser: (1) agregado a la muestra; (2) invocado cuando sea necesario.

////  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);
}

Agregar una convención a una transacción

Si desea agregar una convención a una transacción, el siguiente código puede ser: (1) agregado a la muestra; (2) invocado cuando sea necesario.

////  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);
}

Enviar una transacción automáticamente

Si desea enviar una transacción automáticamente, el siguiente código puede ser: (1) agregado a la muestra; (2) invocado cuando sea necesario.

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);
}
Was this information helpful?
X