Edit properties side by side with document preview

Wolfg — Wed, 13 Jan 2021 10:37:41 GMT

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?

Re: Edit properties side by side with document preview

EddieMay — Wed, 13 Jan 2021 12:18:47 GMT

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,

Re: Edit properties side by side with document preview

Wolfg — Wed, 13 Jan 2021 12:30:46 GMT

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.

Re: Edit properties side by side with document preview

soltivka — Sat, 09 Sep 2023 14:11:31 GMT

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)

topic Re: Edit properties side by side with document preview in Alfresco Forum

Edit properties side by side with document preview

Re: Edit properties side by side with document preview

Re: Edit properties side by side with document preview

Re: Edit properties side by side with document preview