Extending Alfresco Digital Workspace with Docusign

Editor's Notes

• #2: BOTH Vijay Prince – Solution Architect at Zia. Geek night?. First ADF project. 4-5hrs/week for 2 months. Great learning experience
• #3: BINDU Story: At Zia, we have created a couple of digital-signature integrations to Alfresco Share, one of these integrates DocuSign. Alfresco invited us to participate in the launch of the extension mechanism for Alfresco Workspace (Alfresco Content App.) Right from the beginning Alfresco suggested that another DocuSign integration would make a great story. We set out to create a basic integration where people could sign their own documents. We have grand plans to allow for other flows and configurability like requesting signatures from others (fixed lists and ad-hoc.)
• #4: BINDU Denys Vuika will be presenting Extensibility for ADF Applications next in this room. https://devcon.alfresco.com/speaker/denys-vuika/ https://alfresco.github.io/alfresco-content-app/#/extending/ https://angular.io/guide/libraries Configure via JSON files.. It can dynamically reference components / features/ routes that are in the main application or in a library
• #5: BINDU Denys Vuika will be presenting Extensibility for ADF Applications next in this room. https://devcon.alfresco.com/speaker/denys-vuika/ https://alfresco.github.io/alfresco-content-app/#/extending/ https://angular.io/guide/libraries Configure via JSON files.. It can dynamically reference components / features/ routes that are in the main application or in a library
• #6: BINDU Denys Vuika will be presenting Extensibility for ADF Applications next in this room. https://devcon.alfresco.com/speaker/denys-vuika/ https://alfresco.github.io/alfresco-content-app/#/extending/ https://angular.io/guide/libraries Configure via JSON files.. It can dynamically reference components / features/ routes that are in the main application or in a library
• #7: BINDU https://oauth.net/2/grant-types/implicit/ https://auth0.com/docs/flows/concepts/single-page-login-flow https://developer.okta.com/blog/2018/05/24/what-is-the-oauth2-implicit-grant-type
• #8: VIJAY As Bindu mentioned, there are 2 main workflows. The first workflow will show the signing process with a DocuSign Authenticated session. The second workflow will show the signing process where there is no DocuSign Authenticated session. https://oauth.net/2/grant-types/implicit/ https://auth0.com/docs/flows/concepts/single-page-login-flow https://developer.okta.com/blog/2018/05/24/what-is-the-oauth2-implicit-grant-type
• #9: VIJAY We want to sign the document that is shown in the preview screen. Lets look at the process.. What just happened? Let us walk through the steps. We have configured the preview page to show the ‘Sign Document’ action. Since we have an authenticated DocuSign session, we are sending the document to DocuSign for signature as shown in the SnackBar. The document is opened in the embedded signing flow in DocuSign. The user signs the document. DocuSign makes a callback to Alfresco Workspace. Workspace now fetches the signed document from DocuSign and updates in Alfresco.
• #10: VIJAY In this workflow, the user has to Authenticate with DocuSign before they can sign a document. The interesting part of this workflow is that..Workspace remembers the action that the user wanted to do before authentication..In this case, ‘Sign Document’ action is called after authentication. Docusign Auth -> redirect to workspace -> call ‘Sign Document’ action -> Upload the doc to docusign and sign -> Make a callback to Workspace -> Fetch signed doc from docusign -> update in Alfresco https://oauth.net/2/grant-types/implicit/ https://auth0.com/docs/flows/concepts/single-page-login-flow https://developer.okta.com/blog/2018/05/24/what-is-the-oauth2-implicit-grant-type
• #11: VIJAY In this workflow, we have configured the Document List view to show the ‘Sign Document’ action. This workflow will show that the user has to Authenticate with DocuSign before they can sign a document. we authenticate in DocuSign and redirects back to workspace. workspace remembers the action that was performed and it uploads the document to DocuSign...then it redirects to the embedded signing flow. DocuSign redirects back to the document list. Workspace fetches the signed document from DocuSign and updates the document in Alfresco. We are going back to preview just to show the signature is there
• #12: BINDU Alfresco uses Hashbased routing by default. Docusign returns hash based routes and we had to use webscripts to handle routing from Docusign CORS issue - simplest way is to serve the angular app to proxy the services
• #13: VIJAY to integrate with DocuSign, we need a client id (integrator key). each installation will have a different id. we dont want to bake this into the code. We want to use a central configuration file. Workspace uses app.config.json for its extensions.. We just added our custom configuration into this app config file to be used in the code. The screenshot at the left shows us retrieving the clientId from the config file.
• #14: BINDU https://ngrx.io/ NGRX is a framework inspired by Redux. Alfresco uses ngrx for state information. It is used to dispatch actions. The effect gets the action and a piece of the state, performs business logic and then updates the state
• #15: BINDU https://ngrx.io/ Alfresco uses ngrx for state information. It is used to dispatch actions. The effects gets th action and a piece of the state, performs business logic and then updates the state
• #16: VIJAY ngi.json - we want to package our extension so that it is easy to deliver . There are 2 ways to package. 1) publish to npm or 2) create a local tar ball 1) OOTB npm install works but requires us to manually updates a few files. Like add import statements in app.module.ts and updating ‘angular.json’ with references to the assets of the extensions. 2) use ngi tool created by Denys. The ngi command line tool automates a bunch of changes we had to manually do in npm install. All you need is to install ngi tool and create a ngi.json as shown in the screenshot. The tool can take the extension as a local tar ball or from NPM and install to the project..for example, if we had a npm library, we can just say ‘ngi zia-extension’. If we had a tarball, we can use ‘ngi zia-extension-0.0.1.tgz zia-extension’. ngi updates angular.json. there are links in our slides and you can take a look at it https://medium.com/@DenysVuika/announcing-ngi-installer-for-angular-libraries-f29c003d4fcd https://www.npmjs.com/package/@ngstack/install
• #17: BINDU
• #18: BINDU File uploading/posting issue should be fixed in new TypeScript based Alfresco JS API. https://github.com/Alfresco/alfresco-js-api/issues/377