Edit properties side by side with document preview

[Wolfg]

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?

[EddieMay · Accepted 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,

[Wolfg]

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]

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)