4.0 Reusing existing Alfresco components for a customization

[loftux]

I've read David Drapers excellent posts on the new extensibility features coming in 4.0.
There is one scenario I cannot figure out how to do. I want to reuse existing components, one could be to implement the categories tree in Site documentlibrary, my particular test case was to add the preview to the edit-metadata page.
What I did was
-added site-data/extension/edit-metadata-preview.xml with content

<extension>
   <modules>
      <module>
         <id>Edit Metadata with Preview</id>
         <description>Adding document preview to edit metadata page</description>
         <customizations>
            <customization>
               <targetPackageRoot>org.alfresco</targetPackageRoot>
               <sourcePackageRoot>se.loftux</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" index="25">
                     <url>/components/preview/web-preview</url>
                     <properties>
                        <nodeRef>{nodeRef}</nodeRef>
                     </properties>
                  </sub-component>
               </sub-components>
            </component>
         </components>
      </module>
   </modules>
</extension>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

- added templates/se/loftux/edit-metadata.ftl with content

<@region id="metadata-web-preview" target="edit-metadata" action="after" scope="template" />‍

-deployed the extension module.

The customization ftl is picked up, but what I get when rendering is: <div id="unbound-region-metadata-web-preview">
So something is wrong with my component declaration. What am I missing?

[erikwinlof]

> Each is declared as its own component. If we instead would in template-instance/document-details.xml would have just one component "document-panels" with each of the above components as a sub-component, am I right to assume that I could just have re-ordered them with index declaration in my extension module?
> Now it isn't, so is there another way for a simple re-order?

Yes you are absolutely right, using a "document-panels" approach would have been the best solution. The reason we didn't is, as David said, that we wanted to make the effort of upgrading as easy as possible, at least where it was possible. Preserving the region id's meant that previous installations custom component-bindings for those regions still would work and wouldn't need to be reimplemented. That was the only reason, if we would have started form scratch using a "document-panels" would have been the best way. (That approach is actually what is used in the "out of the box templates" that was added to HEAD a couple of days ago: http://blogs.alfresco.com/wp/ewinlof/2011/10/12/create-pages-in-alfresco-share-using-new-out-of-the-... )

This does unfortunately have the effect that you mention, that reordering the objects isn't as easy as changing the index. If I were to do such a customization I would still use the component bindings as Dave also mentioned. First remove the component:
<sub-components>
  <sub-component id="default">
    <evaluations>
      <evaluation id="alwaysRemove">
        <render>false</render>
      </evaluation>
    </evaluations>
  </sub-component>
</sub-components>

…and then add the component you removed into a new region. The reason I think its better to do it this way is that if you have multiple modules working at once, reordering the regions (rather than the components) could become very hard to predict where youre components actually end up.
Imagine module A adds a new component on index 0 for region "document-actions" region. If then module B goes along and reorders the regions  using the freemarker directives) and places "document-actions" at the bottom module A's new component would suddenly not be placed
at the top of of the page, but instead somewhere in the bottom. Preserving the ordering of the regions however at least increases the odds of the components ending up at the correct places even though it still is impossible to say exactly where it will end up when multiple modules are in action.

> -maybe the new extension framework is not a fit here, and the "old way" is better?

Yes I think you're right. If you want to change the structure of the page, overriding the template sure sounds like the way to go, it is after all the templates only job to do exactly that.


> Lots of questions here, if you dont find time to answer now, I'll bring them to Devcon.

Haha, I must say I like David doing the speach, looking forward to hear him answer all your tricky but very relevant questions 🙂

Anyway I'm not sure how much I've actually added to the discussion but its an interesting one so I wanted to jump in 🙂 Please go ahead and challenge us, and come up with more improvement ideas, so we can make it better.

Cheers, Erik

[rjohnson]

This is an old post now, but its contents proved invaluable to me when I was trying to do exactly what Loftux was trying to do.

The theme of the post changes just about post 5 where Loftux ask about positioning preview and edit form side-by-side and we get into a discussion about subcomponents and regions generating markup. After that the post is about document details panel re-ordering and the discussion of positioning of preview and edit form side-by-side dries up.

Well, I have a solution to positioning (at least with 4.2c onwards).

As at 4.2c (maybe earlier) the edit-metatdata.ftl contains @markup directives, and with this the best and simplest way to deal with positioning is to use @markup to replace the bd section with markup of you choosing.

I started from the point of having the preview displaying using @region to add the new metadata-web-preview region. From then in the file edit-metatdata.ftl I replaced

<@region id="metadata-web-preview" target="edit-metadata" action="after" scope="global" />
‍‍‍

with

<@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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Bingo. Preview on the left, edit form on the right.

I hope this helps someone.

Thanks for this great post

Bob Johnson

[douglascrp]

Hello.

I'm trying to implement your idea on Share 5.1.f, but I couldn't find a way to make it work.

This is the thread I started on the issue