Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Extending Alfresco Digital Workspace with Docusign
Similar to Extending Alfresco Digital Workspace with Docusign (20)
Recently uploaded
Recently uploaded (20)
Extending Alfresco Digital Workspace with Docusign
- 1. Where Do I Sign? Right on the Line! Extending Alfresco Digital Workspace with DocuSign Bindu Wavell – bindu@ziaconsulting.com Vijay Prince – vprince@ziaconsulting.com
- 3. Learn. Connect. Collaborate. Alfresco Workspace Extensions The Alfresco Workspace team pioneered a way to dynamically configure key user interface elements such as: navigation sidebar links and groups, context menus, info drawers, toolbar elements, viewer actions, and metadata views all through a single JSON file. Think Aikau but simpler.
- 4. Learn. Connect. Collaborate. The Workspace team recently added the ability to use external Angular libraries to bring in custom user interface elements. Libraries can replace, add, or even remove components. Can also set up routing and rules. Alfresco Workspace Extensions
- 5. Learn. Connect. Collaborate. Alfresco Workspace Extensions Integrating extension configuration into the main app is done by including extension configuration in the app configuration.
- 6. Learn. Connect. Collaborate. Flow/SPA OAuth User triggers action to sign document Do we have valid DocuSign token for user? Document sent to DocuSign and user redirected to signature page User signs or cancels signing in DocuSign Redirected to Alfresco Workspace. If signed, document is updated in Alfresco User redirected to DocuSign sign-in page Yes No Did user sign in and grant access? Redirected to Alfresco Workspace, action is not performed No Redirected to Alfresco Workspace, action is retried Yes
- 7. Learn. Connect. Collaborate. Flow/SPA OAuth User triggers action to sign document Do we have valid DocuSign token for user? Document sent to DocuSign and user redirected to signature page User signs or cancels signing in DocuSign Redirected to Alfresco Workspace. If signed, document is updated in Alfresco Yes
- 9. Learn. Connect. Collaborate. Flow/SPA OAuth User triggers action to sign document Do we have valid DocuSign token for user? Document sent to DocuSign and user redirected to signature page User signs or cancels signing in DocuSign Redirected to Alfresco Workspace. If signed, document is updated in Alfresco User redirected to DocuSign sign-in page Did user sign in and grant access? Redirected to Alfresco Workspace, action is retried Yes No
- 11. Learn. Connect. Collaborate. Routing Challenges ● OAuth response handling with WebScript ● For SPA to reach DocuSign, we have to proxy DocuSign Auth and API calls:
- 12. Learn. Connect. Collaborate. App Configuratio n We use central app config file for passing in DocuSign integrator key (possibly other things like dev/prod DocuSign servers, etc.)
- 13. Learn. Connect. Collaborate. NGRX Store/Actions /Effects ● ngrx - reactive state for Angular ● State is managed in single hierarchy (store) ● Actions are dispatched to indicate something happened ● (Side)Effects observe actions and transform state in response
- 14. Learn. Connect. Collaborate. NGRX Store/Actions /Effects ● Alfresco Workspace uses ngrx internally ○ Dispatch actions to navigate, display messages, or open dialogs, etc… ● Extensions can create new actions, respond to new and existing actions, and dispatch new and existing actions ● We made an action/effect pair for signing a document and configured it into the document list and preview screens
- 15. Learn. Connect. Collaborate. Packaging & Installing Extensions ● You can npm publish your extension and then Alfresco Workspace projects can depend on your extension. ● However, some config will be required ● Denys’ ngi command line tool can perform most of this configuration for you ● Can install from npm or from a tar file
- 16. Learn. Connect. Collaborate. Upgrading Alfresco Workspace ● We forked the Alfresco Workspace repository ● We created a development branch from master ● When cloning our project ● origin points to our fork ● upstream points to original project from Alfresco ● Feature branches off of our development ● Pull requests back to our development ● We can pull updates into master from upstream and then rebase development on the new master ● We never commit to our master
- 17. Learn. Connect. Collaborate. Misc. ● Had issues with GETing document content using Alfresco JS API from browser (worked fine from node) ● Including third-party JavaScript libraries when type definitions can’t be found ● Using browserify
- 18. Questions?
Editor's Notes
- BOTH Vijay Prince – Solution Architect at Zia. Geek night?. First ADF project. 4-5hrs/week for 2 months. Great learning experience
- 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.)
- 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
- 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
- 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
- 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
- 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
- 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.
- 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
- 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
- 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
- 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.
- 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
- 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
- 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
- BINDU
- BINDU File uploading/posting issue should be fixed in new TypeScript based Alfresco JS API. https://github.com/Alfresco/alfresco-js-api/issues/377