Edit properties side by side with document preview

cancel
Showing results for 
Search instead for 
Did you mean: 
Wolfg
Active Member

Edit properties side by side with document preview

Jump to solution

Hi,

We are currently evaluating Alfresco and created a model with custom document type and properties.
Is it somehow possible to edit the properties of a document while viewing the preview of the document side by side?

1 Solution

Accepted Solutions
EddieMay
Alfresco Employee

Re: Edit properties side by side with document preview

Jump to solution

Hi @Wolfg & welcome to Alfresco!

There is an extension that does something similar I believe. I think another suggestion could be this code approach. Another non-code option might be to open the document in a second browser window & do your side-by-side thing that way?

Cheers,

Digital Community Manager, Alfresco Software.
Problem solved? Click Accept as Solution!

View solution in original post

3 Replies
EddieMay
Alfresco Employee

Re: Edit properties side by side with document preview

Jump to solution

Hi @Wolfg & welcome to Alfresco!

There is an extension that does something similar I believe. I think another suggestion could be this code approach. Another non-code option might be to open the document in a second browser window & do your side-by-side thing that way?

Cheers,

Digital Community Manager, Alfresco Software.
Problem solved? Click Accept as Solution!
Wolfg
Active Member

Re: Edit properties side by side with document preview

Jump to solution

Thank's for the info. Working with two browser windows is somewhat cumbersome and not practical for everyday usage. But i will take a look at the two other proposed solutions.

soltivka
Member II

Re: Edit properties side by side with document preview

Jump to solution

For me worked fine this variant.
just go to the file :

 tomcat\webapps\share\WEB-INF\classes\alfresco\site-webscripts\org\alfresco\components\edit-metadata\edit-metadata-mgr.get.html.ftl

and change it's content like this (look to MY CHANGES START/END comments) 

<#include "../../include/alfresco-macros.lib.ftl" />
<script type="text/javascript">//<![CDATA[
   new Alfresco.component.ShareFormManager("${args.htmlid}").setOptions(
   {
      failureMessage: "edit-metadata-mgr.update.failed",
      defaultUrl: "${siteURL((nodeType!"document") + "-details?nodeRef=" + (nodeRef!page.url.args.nodeRef)?js_string)}"
   }).setMessages(${messages});
//]]></script>

<!--MY CHANGES --START -->
<style>
   #document-preview {
      position: fixed;
      top: 180px;
      right: 0;
      height:78%;
      width: 50%;
      box-sizing: border-box;
      overflow: hidden;
   }

   #resize-handle {
      position: fixed;
      top: 170px;
      right: 50%;
      width: 5px;
      background-color: grey;
      height: 78%;
      cursor: col-resize;
   }
</style>
<!--MY CHANGES --END -->

<div class="form-manager">
   <h1>${msg("edit-metadata-mgr.heading", fileName?html)}</h1>
</div>

<!--MY CHANGES --START -->
<div id="container">
   <div id="document-preview">
      <#if page.url.args.nodeRef??>
         <#assign documentNodeRef = page.url.args.nodeRef?html>
         <#assign documentPreviewURL = "http://127.0.0.1/share/proxy/alfresco/slingshot/node/content/" + documentNodeRef?replace(":", "") + "?noRedirect=true">
         <iframe src="${documentPreviewURL}" width="100%" height="100%"></iframe>
      </#if>
      <div id="resize-handle"></div>
   </div>
</div>
<script type="text/javascript">//<![CDATA[
   var resizeHandle = document.getElementById("resize-handle");
   var documentPreview = document.getElementById("document-preview");

   var resizingActive=false

   function startResizing(e) {
      if(resizingActive===false){
         resizingActive=true
         event.stopPropagation()
         document.addEventListener("mousemove", resize);
         document.addEventListener("click", stopResizing);
      }
      
   }

   function resize(e) {
      var newWidth = window.innerWidth - e.clientX;
      documentPreview.style.width = newWidth-15 + "px";
      resizeHandle.style.right = (newWidth - 20) + "px"; // Сдвиг разделителя
   }

   function stopResizing() {
      if(resizingActive===true){
         resizingActive=false
         event.stopPropagation()
         document.removeEventListener("mousemove", resize);
         document.addEventListener("click", stopResizing);
      }
      
   }

   resizeHandle.addEventListener("click", startResizing);

//]]></script>
<!--MY CHANGES --END -->

also note that we use the server address 127.0.0.1 in one of the added strings. Need to change this if the server is remote or somehow insert this value from global variables (didn't look up how to do that)