topic Customizing Share JavaScript Widgets in Alfresco Archive

Customizing Share JavaScript Widgets

kriton — Thu, 13 Dec 2012 16:54:30 GMT

I recently upgraded from 4.0.e to 4.2.b. Everything is good and since I've had the spare time I decide to look into refactoring my customizations so that they take advantage of added extension points as demonstated in this brilliant blog-post http://blogs.alfresco.com/wp/ddraper/2012/05/22/customizi

Re: Customizing Share JavaScript Widgets

mikeh — Thu, 13 Dec 2012 23:56:11 GMT

It would be good to explain your problems in concrete terms, rather than "most of these files". The new extension mechanism is still in its infancy, so examples of where it can be improved are gratefully received.

Re: Customizing Share JavaScript Widgets

kriton — Fri, 14 Dec 2012 09:37:25 GMT

hi Mike and thanks for your reply.

I gave one such example file in my first post, but I will list all of the ones that I had such a problem:

- modules/create-site.js
- modules/social-publish.js
- js/documentlibrary-actions.js
- js/forms-runtime.js

In all these I still have to overwrite the files with my customizations and I have failed to find any valid extension points.

Re: Customizing Share JavaScript Widgets

alejandrogarcia — Fri, 14 Dec 2012 09:58:18 GMT

Hi Kriton,

I have successfully performed some customization on client-side JavaScript in Alfresco Share 4.2b by following the instruction detailed in the same Dave Drapper's post you have mentioned. For me works like a charm but I don't know the level of customization that you require and what exactly you are trying to do. From my experience I can say that extension modules are very flexible and you can do almost any kind of customization, but at the same time I guess there could exist some limitations.

I'm not an expert, but if you give more details of what you need to customize perhaps I can help.

Regards.

Re: Customizing Share JavaScript Widgets

kriton — Fri, 14 Dec 2012 16:38:40 GMT

Hello there,

I agree with you. In most cases everything works like a charm.

The problem I am having is that not all not all client-side javascript objects are instantiated the same way (as widgets in webscript controllers). For example the ones that I mentioned in my previous post are not part of a particular webscript so they are not saved in the widgets array of a model, and as such I cannot use that pattern to extend them. This I guess is the case beacause they are more global and may be reused among different webscripts?

And as such I cannot see any way to extend them without replacing the orinal files…

Re: Customizing Share JavaScript Widgets

alejandrogarcia — Fri, 14 Dec 2012 17:13:19 GMT

Hello,

Yes, now I know what you mean and I understand the problem at all.

Well I have been doing a search in the Alfresco Share's source code to find out the uses of create-site.js, for example. I suggest you to do the same, this way you will see where and how is this resource imported by components and then try to figure out how could you perform the customization required.

First of all, create-site.js is referenced in share-config.xml in the global config section. I don't know, but looks like by doing that Share is including that resource in every page in the <head>, you can see it by viewing the source code of any Share page in your browser. On the other hand, create-site.js, is instanciated as widget in dynamic-welcome.get.html.ftl, dynamic-welcome.get.html.ftl, dashlets/my-sites.get.html.ftl, and my-workspaces.get.html.ftl; all of them are Freemarker templates which belong to a dashlet component.

Now, having in mind what I would try is to import the customized create-site.js:

1. In configuration, similarly as the original one is imported in share-config.xml.
2. By creating a extension module that customizes resources.get.html.ftl, as described here (https://forums.alfresco.com/en/viewtopic.php?f=48&t=47312#p140623).

And see what happens.

Also check how the other JS files are imported in Share pages as I have described for create-site.js.

I know I haven't solved you problem, but perhaps helps

Regards.

Re: Customizing Share JavaScript Widgets

kriton — Mon, 17 Dec 2012 12:38:48 GMT

hi again Alejandro and thank you for attempting to help me on this

According to my finds as well, things are more or less how you described them regarding how create-site.js is imported. The resource is imported in the three webscripts you mentioned much like other resources.
However the widget is not instantiated the same way in the javascript controller. Instead there appears to be no widget instantiation at this point.

Create-site.js module is also imported in the org\alfresco\components\header\header.get.html.ftl webscript. In this webscript javascript moduels are imported by reading from share configuration xml.


<@markup id="js">
   <#– JavaScript Dependencies –>
   <@script src="${url.context}/res/components/header/header.js" group="header"/>
   <@script src="${url.context}/res/modules/about-share.js" group="header"/>
   <#if config.global.header?? && config.global.header.dependencies?? && config.global.header.dependencies.js??>
      <#list config.global.header.dependencies.js as jsFile>
         <@script src="${url.context}/res${jsFile}" group="header"/>
      </#list>
   </#if>
</@>
‍‍‍‍‍‍‍‍‍‍‍‍

The snippet below from share-config-xml


       <header>
          …
         <dependencies>
            <css src="/modules/create-site.css" />
            <css src="/modules/header/sites.css" />
            <js src="/modules/create-site.js" />
            <js src="/modules/header/sites.js" />
         </dependencies>
      </header>
‍‍‍‍‍‍‍‍‍‍‍

Now I found that the widget instance for the create site is dynamically created using the following method call which is found in modules/create-site.js. This appears to be consistent in all cases, which is why I could not find any instantiation in any js controller or ftl file.


Alfresco.module.getCreateSiteInstance = function()
{
   var instanceId = "alfresco-createSite-instance";
   return Alfresco.util.ComponentManager.get(instanceId) || new Alfresco.module.CreateSite(instanceId);
};
‍‍‍‍‍‍‍

This does make things more straightforward. I can overwrite this function in my extension to instantiate my create-site widget extension instead of the default and it should work…

I also had a look at the modules/social-publish.js and from my first lance it appears to be using the same pattern.

There are still some things that do not make much sense to me however. modules/create-site.js is imported by using the xml configuration in the header file, but in the dahslets it is hardcoded in their .html.ftl instead. Is there a reason for this or is it just something that has not been updated properly yet?

I was thinking of just adding my import in the xml configuration, I don't know if I will run into any problems. I guess not as the header should be in all pages. Extending all the other html.ftl for this seems to much of a hassle…

Re: Customizing Share JavaScript Widgets

alejandrogarcia — Fri, 21 Dec 2012 15:38:27 GMT

Hi Kriton,

I'm glad you did some progress, and you discovered some interesting stuff as well! Regarding…

There are still some things that do not make much sense to me however. modules/create-site.js is imported by using the xml configuration in the header file, but in the dahslets it is hardcoded in their .html.ftl instead. Is there a reason for this or is it just something that has not been updated properly yet?

I really don't know the answer to that, I was wondering exactly the same when I performed the searches I mentioned in my first post to this thread. I think those client-side resources should be imported once in the whole resultant HTML response rather that twice which I think is happening after all.


   <script type="text/javascript" src="/share/res/modules/create-site_b5bb531ab15b8fc79081b0272c98584.js"></script>
   <script type="text/javascript" src="/share/res/modules/header/sites_bed5edd74497ac9c519bec978c17c6d7.js"></script>
   <script type="text/javascript">//<![CDATA[
var global_x002e_header_x0023_default=new Alfresco.component.Header("global_x002e_header_x0023_default").setOptions({"siteId":"","minSearchTermLength":1.0,"tokens":{"site":"","userid":"admin","pageid":""},"siteTitle":""}).setMessages({"message.status.failure": "Couldn't update status.", "message.status.success": "Status successfully updated.", "status.updated": "Last updated: {0}", "status.never-updated": "never", "status.default": "What are you doing?"});
//]]></script>
   <script type="text/javascript">//<![CDATA[
      Alfresco.util.createTwister.collapsed = "";
//]]></script>
   <script type="text/javascript">//<![CDATA[
      Alfresco.constants.DASHLET_RESIZE = true && YAHOO.env.ua.mobile === null;
//]]></script>
   <script type="text/javascript">//<![CDATA[
//]]></script>
   <script type="text/javascript" src="/share/res/components/dashlets/dynamic-welcome_1c9f18c8ff4e39b5b7326e8c2ecf66b9.js"></script>
   <script type="text/javascript" src="/share/res/modules/create-site_b5bb531ab15b8fc79081b0272c98584.js"></script>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Unfortunately I cannot guess accurately the consequences of that after the initialization of your custom widgets, I'm sorry I'm afraid we could only know the answer after some tests…

Nevertheless it seems you are in the right path, so it would be really interesting if you "share" whether you achieved what you were looking for or not and how

Regards.