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.

[binduwavell]

Dave Draper‌ are there known issues with creating sub-components in a module extension these days? Should this work? I wonder if creating the new sub-component using traditional SURF and then referencing it in would help?

[ddraper]

There aren't any issues that I'm aware of, however ... looking at the original source:

<@markup id="bd">
   <div id="bd">
      <div class="share-form">
         <@region id="edit-metadata-mgr" scope="template" />
         <@region id="edit-metadata" scope="template" />
      </div>
   </div>
   </@>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

It looks like the template scope should be "template" and not "global" as has been used in the extension. In the extension the region has been defined as:

<@region id="metadata-web-preview" scope="global"/>‍

Try changing "global" to "template"

[douglascrp]

I'm almost 100% sure that I tried that among all the combinations

But ok, I'm going to give it a try and let you know the result.

Thank you

[ddraper]

Well, the scopes definitely don't match in the examples that you've copy/pasted into the question. You're defining a template scope component and then referencing global scope in the region.

[douglascrp]

Hey Dave.

I tried your suggestion, and still, it doesn't work.

This is how I did it:

Replacing the new region scope as template as suggested.

<@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="template"/>
            </div>
            <div class="yui-u">
            <@region id="edit-metadata" scope="template"/>
            </div>
         </div>
      </div>
   </div>
</@markup>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I also tried using the markup scope as template, like this:

<@markup id="bd-new" target="bd" action="replace" scope="template">
   <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="template"/>
            </div>
            <div class="yui-u">
            <@region id="edit-metadata" scope="template"/>
            </div>
         </div>
      </div>
   </div>
</@markup>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

After those tests, I got the same result, the unbound region.

Could you please try provide a working code for this or try to identify where the problem is?

Thank you for your attention.

[afaust · Accepted solution]

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.

[douglascrp]

I'm going to try the approach you suggested tonight.

Thank you for all the information.

[douglascrp]

Hey Axel Faust‌

Finally I was able to retry what we were discussing here.

Your idea worked like a charm.

Thank you for your help, and sorry for my late response.

The requirements changed a lot since then.