How to include the web-preview component in the edit-metadata form on Share 5.1.f

douglascrp

Hello.

I'm following the following thread 4.0 Reusing existing Alfresco components for a customization  and I'm trying to implement the same thing on Share 5.1.f.

Below is my code, including the path for each of them.

config/alfresco/web-extension/site-data/extensions/edit-metadata-preview.xml

<extension>
    <modules>
        <module>
            <id>Edit Metadata with Preview</id>
            <description>Adding document preview to edit metadata page</description>
            <auto-deploy>true</auto-deploy>
            <customizations>
                <customization>
                    <targetPackageRoot>org.alfresco</targetPackageRoot>
                    <sourcePackageRoot>br.com.dgcloud</sourcePackageRoot>
                </customization>
            </customizations>
            <components>
                <component>
                    <region-id>metadata-web-preview</region-id>
                    <source-id>edit-metadata</source-id>
                    <scope>template</scope>
                    <sub-components>
                        <sub-component id="metadatapreview">
                            <url>/components/preview/web-preview</url>
                            <properties>
                                <nodeRef>{nodeRef}</nodeRef>
                                <api>api</api>
                                <proxy>alfresco</proxy>
                                <dependencyGroup>document-details</dependencyGroup>
                            </properties>
                        </sub-component>
                    </sub-components>
                </component>
            </components>
        </module>
    </modules>
</extension>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

config/alfresco/web-extension/templates/br/com/dgcloud/edit-metadata.ftl

<@markup id="bd-new" target="bd" action="replace" scope="global">
   <div id="bd">
      <div class="share-form">
         <@region id="edit-metadata-mgr" scope="template" />
         <div class="yui-g">
            <div class="yui-u first">
            <@region id="metadata-web-preview" scope="global"/>
            </div>
            <div class="yui-u">
            <@region id="edit-metadata" scope="template"/>
            </div>
         </div>
      </div>
   </div>
</@markup>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I can see the DIVs elements created as defined in the edit-metadata.ftl file, but the metadata-web-preview div get the id as follow:

<div id="unbound-region-metadata-web-preview">‍

I have already tried a lot of combinations with scope, region-id and source-id, but nothing seems to work.

I was able to include the web-preview component once, but it ended up under the metadata form, which is positioned in the right side, and I got the same unbound-region-metadata-web-preview created in the left side, always empty.

Can anyone please shed some light on this?

Thank you.

afaust

As I explained yesterday on IRC, an extension module can only customize a component already bound to a region via sub-components. If the region has not yet been bound to a component using regular Surf model objects, none of the code to consider extension modules is called at all for that region / component.

Dave Draper‌ is correct to point out the scope of the region should be "template". The scope of the markup is completely irrelevant since the markup directive does not support this attribute.

In order to bind the region to a component (without modifying the site-data/template-instances/edit-metadata.xml) you simply need to provide a component XML descriptor in (web-extension/)site-data/components/ - in this case the file must be named template.metadata-web-preview.edit-metadata.xml and its content should be

<?xml version='1.0' encoding='UTF-8'?>
<component>
   <scope>template</scope>
   <region-id>metadata-web-preview</region-id>
   <source-id>edit-metadata</source-id>
   <url>/components/preview/web-preview</url>
   <properties>
      <nodeRef>{nodeRef}</nodeRef>
      <api>api</api>
      <proxy>alfresco</proxy>
      <dependencyGroup>document-details</dependencyGroup>
   </properties>
</component>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I have verified this locally using a 5.2 install.

To summarize: Extension modules cannot inject new regions and bind them to a component on their own. They always need to supply at least an empty / dummy component model object to trigger the sub-components handling for the new region.