{"id":32088,"date":"2016-02-04T11:16:56","date_gmt":"2016-02-04T05:46:56","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=32088"},"modified":"2016-02-08T15:21:38","modified_gmt":"2016-02-08T09:51:38","slug":"making-dropbox-documents-available-in-aem","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/making-dropbox-documents-available-in-aem\/","title":{"rendered":"Making Dropbox Documents Available in AEM"},"content":{"rendered":"<p><strong>Use Case<\/strong><\/p>\n<p>Consider a scenario where a company uploads thousands of document related to its policies or some other <a title=\"AEM Consulting\" href=\"http:\/\/www.tothenew.com\/wcm\/cq-aem-development-consulting\">stuff in AEM<\/a>. It would be an overhead for AEM to manage those documents resulting in the degradation of performance since AEM is already managing a lot of tasks.<\/p>\n<p><strong>Solution<\/strong><\/p>\n<p>One way of managing documents and avoid overhead in AEM is to use document management systems like Dropbox and Google Drive. On the AEM side, we would have some way to make those documents available for view\/download purpose.<\/p>\n<p>Following customization needs to be done:<\/p>\n<ul>\n<li><strong>Customization \u00a0of Touch UI content Finder:<\/strong> \u00a0Adding one more option in Asset category and to showcase dropbox documents in the content finder on the selection of this option.<\/li>\n<li><strong>Integration with Dropbox:<\/strong> Fetching the metadata of the documents using Importer<\/li>\n<li><strong>Creation of droppable component:<\/strong> Enabling user to drop asset from asset category onto the page.<\/li>\n<li><strong>Metadata management of Dropbox documents<\/strong><\/li>\n<\/ul>\n<p><b>Steps to Integrate Dropbox with AEM:<\/b><\/p>\n<p><strong>Pre-requisites:<\/strong><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Java 1.8 (Only in case if you install the source code attached below as the source contains some Java 8 specific code snippet.)<\/span><\/li>\n<li style=\"font-weight: 400;\"><strong><span style=\"font-weight: 400;\">You also need to install <\/span><a href=\"http:\/\/mvnrepository.com\/artifact\/com.fasterxml.jackson.core\/jackson-core\/2.6.5\"><span style=\"font-weight: 400;\">Jackson-core<\/span><\/a><span style=\"font-weight: 400;\"> bundle as dropbox-SDK has dependency on it<\/span><\/strong><\/li>\n<\/ul>\n<p><b>Step1:<\/b><\/p>\n<p>Sign up in dropbox and create a developer app in dropbox using the following link:<\/p>\n<p>https:\/\/www.dropbox.com\/developers\/apps\/create<\/p>\n<p>For our integration Dropbox with AEM, we would be requiring the <b>Access Token <\/b>( You need Click on \u201cGenerate Token\u201d button to get the Access token. The reason we are generating the token from the dropbox portal only so that we can skip the manual flow of OAuth2. For OAuth2 flow you can access <a href=\"https:\/\/datatracker.ietf.org\/doc\/rfc6749\/?include_text=1\">OAuth2.0<\/a> )<\/p>\n<p><b>Step2: <\/b><\/p>\n<p>Create the cloud services config page for Dropbox that has authoring dialog for parameters like Access Token, Target URL, Client-Identifier, Interval (The last three parameters we would be needing for creating the custom importer)<\/p>\n<p>For creating the custom cloud service, please refer <a href=\"https:\/\/docs.adobe.com\/docs\/en\/aem\/6-0\/develop\/extending\/cloud-service-configurations\/creating-a-custom-cloud-service.html\">Create Custom Cloud service<\/a><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-32091\" src=\"\/blog\/wp-ttn-blog\/uploads\/2016\/02\/Dropbox-Configuration.png\" alt=\"Dropbox Configuration\" width=\"534\" height=\"375\" \/><\/p>\n<p><strong>Step3<\/strong>: Adding dependencies related to dropbox. I have used the maven build tool.\u00a0 Add the following dependency to the project\u2019s pom.xml<\/p>\n<p>[code]<\/p>\n<p>&lt;dependency&gt;<br \/>\n&lt;groupId&gt;com.dropbox.core&lt;\/groupId&gt;<br \/>\n&lt;artifactId&gt;dropbox-core-sdk&lt;\/artifactId&gt;<br \/>\n&lt;version&gt;1.7.7&lt;\/version&gt;<br \/>\n&lt;\/dependency&gt;<\/p>\n<p>[\/code]<\/p>\n<p>Also, Embed transitive dependencies used by dropbox SDK using the following code:<\/p>\n<p>[code]<\/p>\n<p>&lt;Embed-Dependency&gt;dropbox-core-sdk;scope=compile|runtime&lt;\/Embed-Dependency&gt;<\/p>\n<p>[\/code]<\/p>\n<p><strong>Step4<\/strong>:<\/p>\n<p>Create the dropbox config page using the template that was created in Step2. You can go to &#8220;<strong>http:\/\/&lt;domain&gt;:&lt;port-no&gt;\/miscadmin#\/etc\/cloudservices<\/strong>&#8221; and create the page. The page would be created under the directory in CRXDE:<\/p>\n<p>\u201c<strong>\/etc\/cloudservices\/<\/strong>\u201d<\/p>\n<p>Add configure the page accordingly. Please see the below snapshot for reference.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-32092\" src=\"\/blog\/wp-ttn-blog\/uploads\/2016\/02\/Configurations.png\" alt=\"Configurations\" width=\"1129\" height=\"427\" \/><\/p>\n<p><b>Step 5<\/b><span style=\"font-weight: 400;\">: <\/span><\/p>\n<p>Till now we are done with basic setup required for integration.It\u2019s time to code NOW.<\/p>\n<p>Create a custom importer that will poll the dropbox and fetch the metadata of the documents. The importer will also create a node (of type dam: Asset) under the path specified in the cloud config dialog of Dropbox Cloud Configuration Page created in Step4.<\/p>\n<p>For reference, you can download <a href=\"https:\/\/github.com\/jatingupta030\/dropbox-integration\/blob\/master\/bundle\/src\/main\/java\/com\/ttnd\/cloud\/dropbox\/service\/DropboxImporter.java\">DropboxImporter.java<\/a><\/p>\n<p><strong>Step6<\/strong>: Once the importer will be created, the only part left is to display the imported content in DAM\u2019s content finder.<\/p>\n<p><strong>Note<\/strong>: The solution provided for displaying the content would only work in TOUCH UI because of the overlaying structure of the component.<\/p>\n<p><strong>(a)<\/strong> To add the option in dropdown for category under Asset tab in Content finder, we need do the following:<\/p>\n<ul>\n<li>Overlay the following structure: \u00a0<strong>\/libs\/cq\/gui\/components\/authoring\/clientlibs\/assetfinder\/js<\/strong> in apps. Delete all the child folders under js.<\/li>\n<li>Create a folder<strong> \u201cdropboxdocument\u201d <\/strong>and place the .js file under it. You can copy the .js file from <strong>\/libs\/cq\/gui\/components\/authoring\/clientlibs\/assetfinder\/js\/document\/documentController.js. <\/strong>Rename the file as per your wish and save.<\/li>\n<li>Now open the above js file and then change the \u201c<strong>name<\/strong>\u201d property to \u201c<strong>Dropbox Docs<\/strong>\u201d and \u201c<strong>itemResourceType<\/strong>\u201d to the path \u201c<strong>cq\/gui\/components\/authoring\/assetfinder\/dropbox<\/strong>\u201d<\/li>\n<li>Create js.txt in same hierarchy and add the path to the file created in above step and save all the above changes. Now open any page in TOUCH UI mode, you will find an extra option being added in dropdown.<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-32093\" src=\"\/blog\/wp-ttn-blog\/uploads\/2016\/02\/Content-finder.png\" alt=\"Content finder\" width=\"346\" height=\"321\" \/><\/p>\n<p>Key Properties:<\/p>\n<ul>\n<li><strong>name<\/strong>: The label that will be shown in the dropdown<\/li>\n<li><strong>itemResourceType<\/strong>: is the component that will be rendered in content finder for each asset<\/li>\n<li><strong>imageServlet<\/strong>: the service that will list of assets that match the mime types given in param and in response it will give the HTML code<\/li>\n<\/ul>\n<p><strong>(b)\u00a0<\/strong>Now we need to customize the code the component mentioned in itemResourceType property so that it can show the desired properties of the asset in content finder. Copy <strong><a href=\"https:\/\/github.com\/jatingupta030\/dropbox-integration\/blob\/master\/content\/src\/main\/content\/jcr_root\/apps\/cq\/gui\/components\/authoring\/assetfinder\/dropbox\/dropbox.jsp\"><span style=\"font-weight: 400;\">dropbox.jsp<\/span><\/a><\/strong>\u00a0to the path \u201c<strong>\/apps\/cq\/gui\/components\/authoring\/assetfinder\/dropbox\/<\/strong>\u201d<\/p>\n<p>Note: It can be any path. But according you need to change the itemResourceType property.<\/p>\n<p><strong>(c)<\/strong> We need to create the component in which dropbox documents can be dropped. So you can create a copy of OTB download component and modify the script accordingly.<\/p>\n<p>That\u2019s it\u2026\u2026\u2026.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-32097\" src=\"\/blog\/wp-ttn-blog\/uploads\/2016\/02\/final.png\" alt=\"final\" width=\"1087\" height=\"485\" \/><\/p>\n<p>This is how the directory structure will look like:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-32098\" src=\"\/blog\/wp-ttn-blog\/uploads\/2016\/02\/folder-hierarchy.png\" alt=\"folder hierarchy\" width=\"287\" height=\"476\" \/><\/p>\n<p>Download Source Code: <a href=\"https:\/\/github.com\/jatingupta030\/dropbox-integration\">dropbox-integration<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Use Case Consider a scenario where a company uploads thousands of document related to its policies or some other stuff in AEM. It would be an overhead for AEM to manage those documents resulting in the degradation of performance since AEM is already managing a lot of tasks. Solution One way of managing documents and [&hellip;]<\/p>\n","protected":false},"author":851,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":25},"categories":[1],"tags":[4847,1207,3044,3045,3042,3082,3043,3046],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/32088"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/851"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=32088"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/32088\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=32088"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=32088"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=32088"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}