topic Re: Cannot add my custom Aikau widget in the Share search page in Alfresco Archive

Cannot add my custom Aikau widget in the Share search page

mlagneaux — Fri, 23 Oct 2015 16:52:44 GMT

Hi, I want to add an "Export" button in the Share search form. I understand that I have to replace the "FCTSRCH_SEARCH_FORM" Aikau widget in the faceted-search.get.js by my custom widget (which we can name, for example "FCTSRCH_EXPORTABLE_SEARCH_FORM).First question : how to replace an Aikau widget

Re: Cannot add my custom Aikau widget in the Share search page

ddraper — Tue, 27 Oct 2015 19:41:31 GMT

There is information on swapping out widgets in this blog post: https://www.alfresco.com/blogs/developer/2015/04/01/adding-views-to-filtered-search/

Also, the Aikau GitHub tutorial (https://github.com/Alfresco/Aikau/blob/master/tutorial/chapters/Contents.md) has all the information you need to defining packages for your custom widgets (see the section on creating a new package here: https://github.com/Alfresco/Aikau/blob/master/tutorial/chapters/Tutorial2.md)

This blog post has other information on the mapping between widgets and source code: https://www.alfresco.com/blogs/developer/2013/09/18/how-to-add-amd-packages-to-share-via-extension-modules/

I hope that helps.

Regards,
Dave

Re: Cannot add my custom Aikau widget in the Share search page

stuartonmaui — Wed, 23 Mar 2016 23:20:17 GMT

I have an all-in-one project. I'm having trouble getting any custom widget to show up. To simplify things, I took the page from the Aikau GitHub tutorial (2 or 3) as a working starting point, launching it from a site link. All of the example's widgets work, but my custom widget (horizontal widgets with a label as the single widget) is an empty div.
I placed the home page into the project's site-webscripts/../pages folder and it worked right away. It then occurred to me that I had not written a dummy surf home.get.desc.xml. Adding one seems to make no difference.
Referring to your fourth link, my implementation of site-data/extensions/foo-foo-extension-modules.xml follows the same pattern. While trying to make things work I experimented with package names. It seems that the naming followed by multiple examples is a convention, not a requirement: a

<package name="example" location="js/example"/>‍

. I could also use

<package name="exampleWidgets" location="js/example"/>‍

, changing the widget name on the page to "exampleWidgets/somewidget" without generating errors. At first I was reading more into this and confused. Anyway, I can always see my package on the page, in page source.
Looking at examples, I see packages whose content is contained in a JAR. It makes me wonder if there is something different about the all-in-one that impacts package usage. Please comment.
EDIT: Looking at dojo errors in the brower, which pointed to an error loading the page due to AMD loading, having something to do with "require" errors. I've returned to my original attempt at configuration, infra, which produces an error in the share alfresco log: ERROR [org.springframework.extensions.surf.DependencyAggregator] [http-bio-8080-exec-20] Could not find compressed file: js/ksvrm/DateBar.js

Re: Cannot add my custom Aikau widget in the Share search page

redraccoon — Thu, 31 Mar 2016 15:34:00 GMT

go to your folder "js/ksvrm/DateBar.js"

copy and past your file DateBar.js

change it's name to DateBar.js -> DateBar.min.js

(when you check in console of the web browser, in ressources / frames / script, you can see Alfresco use compressed webscript, if then it's working you should compress the js using the kind of website http://javascriptcompressor.com/)

Re: Cannot add my custom Aikau widget in the Share search page

stuartonmaui — Wed, 06 Apr 2016 19:33:00 GMT

Since I had hacked on the project so much, I created a new one, imported files by group making each conform to the example (at least as I understand it). When the page with one of my custom widgets loads, the browser console shows
The following AMD module loading error occurred" Error: scriptError
Stack trace:
makeError@http://localhost:8080/share/res/js/lib/dojo-1.10.4/dojo/dojo.js:119:15
req.injectUrl/errorDisconnector<@http://localhost:8080/share/res/js/lib/dojo-1.10.4/dojo/dojo.js:1727:21
3f1b42d3f51529dabe2af76fecf9ebcd.js:59817:9
alfresco_core_Page__onError() 3f1b42d3f51529dabe2af76fecf9ebcd.js:59817
req.signal/<() dojo.js:375
forEach() dojo.js:106
req.signal() dojo.js:374
req.injectUrl/errorDisconnector<()
Inspecting the page source via the browser (Mozilla) shows
packages: [
                  { name: "surf", location: "js/surf"},
                  { name: "dijit", location: "js/lib/dojo-1.10.4/dijit"},
                  { name: "cmm", location: "js/alfresco/cmm"},
                  { name: "alfresco", location: "js/aikau/1.0.39.5/alfresco"},
                  { name: "cm", location: "js/lib/code-mirror"},
                  { name: "widgets", location: "js/ksvrm/widgets"},
                  { name: "org.ksvrm.aoi", location: "src/main/java"},
                  { name: "share-components", location: "components"},
                  { name: "jquery", location: "js/lib/jquery-1.11.1", main: "jquery-1.11.1.min"},
                  { name: "example", location: "js/example"},
                  { name: "service", location: "../service"},
                  { name: "share", location: "js/share"},
                  { name: "jqueryui", location: "js/lib/jquery-ui-1.11.1", main: "jquery-ui.min"},
                  { name: "dojox", location: "js/lib/dojo-1.10.4/dojox"},
                  { name: "dojo", location: "js/lib/dojo-1.10.4/dojo"}
               ]
My package "js/ksvrm/widgets" is on the page.
Since the error refers to package loading, I moved all widgets not used on the test page out of the widgets path with the same results. On my page, specifying "widget/widget_name" or "/widget/widget_name" had no effect so I still think that the problem occurs before widgets are rendered. site/data/extensions/ attached.

Re: Cannot add my custom Aikau widget in the Share search page

stuartonmaui — Thu, 07 Apr 2016 18:52:24 GMT

This error was caused by a blunder on my part. I had left intact much of the example code that comes in an aoi project. There were two paths in the web/js/<project>/ widgets and example. Both were accounted for with beans (webscript-context) and modules (site-data/extensions/…-extension-modules) The error is apparently the result of overlapping module paths.

Re: Cannot add my custom Aikau widget in the Share search page

stuartonmaui — Fri, 08 Apr 2016 22:36:34 GMT

I have an Aikau page in an all in one project with 5.1 EA. I can successfully navigate to the page but the page's content div is always empty. There are no error messages anywhere. I've tried everything I can think of.
The page contains the following widget.
<blockcode>
define(["dojo/_base/declare",
        "dijit/_WidgetBase",
        "alfresco/core/Core",
        "dijit/_TemplatedMixin",
        "dojo.base.lang",
        "alfresco/buttons/AlfButton",
        "dojo/text!./templates/DatesShiftLeftWidget.html"
    ],
    function(declare, _Widget, _Templated, template, Core) {
      return declare([_Widget, _Templated, Core], {
         name: "alfresco/buttons/AlfButton",
         cssRequirements: [{cssFile:"./css/DatesShiftLeftWidget.css",mediaType:"screen"}],
         i18nRequirements: [ {i18nFile: "./i18n/DatesShiftLeftWidget.properties"} ],
         templateString: template,
         postCreate: function ksvrm_DatesShiftLeftWidget__postCreate() {
            logger.debug("DatesShiftLeft post create");
            this.inherited(arguments);
            this.pubSubScope="IRPAGE";
            this.publishTopic="DBSHIFT";
            this.description=this.message("SHIFT-LEFT-DESC");
            this.publishPayload="left";
         }
      })
});
</blockcode>
Its template file (.html) contains
<blockcode>
<div class="dateshiftleft">
   <img src="/opt/ksvrm/ksvrm_images/DatesLeftIcon.png" alt="Shift Dates Left Arrow Button">
</div>
</blockcode>
Its i18n properties file has
<blockcode>
SHIFT-LEFT-DESC=Go to the prior Sunday or other entry date
</blockcode>
Its css file
<blockcode>
.dateshiftleft {
   margin: 0px;
   width: 14px;
   vertical-align: center;
   text-align: center;
   border-style: none;
   background-image: none;
}
</blockcode>
The surf page definition is
<blockcode>
<?xml version='1.0' encoding='UTF-8'?>
<page>
   <title>Income Reconciliation Page</title>
   <description>View, Create and manage Income Reconciliation entries</description>
</page>
</blockcode>
The aikau page descriptor is (in …get.xml)
<blockcode>
<webscript>
   <shortname>Income Reconciliation</shortname>
   <description>Classification of income according to chart of accounts</description>
   <family>share</family>
   <url>/ksvrm-income-reconciliation</url>
   <authentication>none</authentication>
</webscript>
</blockcode>
The …get.html.ftl is a one-liner
<blockcode>
<@processJsonModel group="share" />
</blockcode>
There is also a fifty line i18n .properties file.
The extension model are defined as follows:
<blockcode>
<extension>
<modules>
    <module>
      <id>ksvrm-alf-installation-share-amp Extension Modules</id>
      <version>1.0</version>
      <auto-deploy>true</auto-deploy>
      <configurations>
        <config evaluator="string-compare" condition="WebFramework" replace="false">
          <web-framework>
            <dojo-pages>
              <packages>
                <package name="ksvrm" location="js/ksvrm" />
                <package name="org.ksvrm.aoi" location="src/main/java" />
              </packages>
            </dojo-pages>
          </web-framework>
        </config>
      </configurations>
    </module>
</modules>
</extension>
</blockcode>
I've been learning and coding for many months. I had high hopes that 5.1 would have some updated examples, but we still have examples writing in tomcat directories. I should be updating to the official release but at this point there is no point. I am about ready to chuck it, look for a new platform and start over. My first programming was a PDP8-E in 1974. These days I mostly use Mathematica. I was never a fan of web programming in general, but I could do it (or at least thought I could). I have been on and seen quite a few projects since then, some highly successful and others blazing failures. But I have never seen anything quite like this one.

Re: Cannot add my custom Aikau widget in the Share search page

redraccoon — Mon, 11 Apr 2016 08:02:44 GMT

aikau is really spécifique, if you would like to work on this you really have to go trought some tutorials from start

I think it's impossible to understand starting with what you wrote

the most important =>

https://github.com/Alfresco/Aikau/blob/master/tutorial/chapters/Tutorial1.md

the really cool too =>

https://www.alfresco.com/blogs/developer/2014/09/30/aikau-mini-examples-data-list-part-1/

and the good to know =>

http://ohej.github.io/alfresco-tutorials/tutorial/aikau/tutorial.html#inter-widget-communication

by the way really nice computer
http://www.vintagecomputer.net/digital/pdp8e/Digital_PDP8e-2.JPG

Re: Cannot add my custom Aikau widget in the Share search page

stuartonmaui — Wed, 13 Apr 2016 01:25:43 GMT

Here is the my entire share customization with a bare minimum. In summary this is an all-in-one project. The repo has a number of models, some java and some webscripts that deal directly with the repository. It is not a problem (yet) as nothing there is referenced besides carrying through model definitions in share-config-custom.xml. This work as I can add their datalists to a site with no problems.
In share, there is a single Aikau page with two widgets, one from alfresco/… and one from my customization (and there is only one custom widget in the project). I can make a link to the page in a "site links" dashlet with the localhost...hdp/wp/ksvrm-income-reconciliation and navigate to it. The page appears with its custom title thanks to the first (alfresco) widget. Following this (within the content div) is my widget which does not appear. I have always suspected something wrong with my widget package declaration and spent an inordinate amount of time playing with that and getting nowhere.
Here are my files in depth first order on the project explorer tree in Eclipse in a project generated with (command line) SDK2.2.0 All of them are under the Share amp.
First is src/main/amp/config/alfresco/web-extension/site-data/extensions/ksvrm-alf-installation-share-amp-extension-modules.xml


<extension>
  <modules>
    <module>
      <id>ksvrm-alf-installation-share-amp Extension Modules</id>
      <version>1.0</version>
      <auto-deploy>true</auto-deploy>
      <configurations>
        <config evaluator="string-compare" condition="WebFramework" replace="false">
          <web-framework>
            <dojo-pages>
              <packages>
                <package name="ksvrm" location="js/ksvrm" />
              </packages>
            </dojo-pages>
          </web-framework>
        </config>
      </configurations>
    </module>
  </modules>
</extension>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The <a href="http://docs.alfresco.com/community/concepts/dev-extensions-share-architecture-extension-points-intro-aikau-pages.html">Intoduction to Aikau Pages</a> example has this


<extension>
  <modules>
    <module>
      <id>Example Aikau Widgets</id>
      <version>1.0</version>
      <auto-deploy>true</auto-deploy>
      <configurations>
        <config evaluator="string-compare" condition="WebFramework" replace="false">
          <web-framework>
            <dojo-pages>
              <packages>
                <package name="example" location="js/example"/>
              </packages>
            </dojo-pages>
          </web-framework>
        </config>
      </configurations>
    </module>
  </modules>
</extension>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

In src/main/amp/config/alfresco/web-extension/site-data/pages is the file ksvrm-income-reconciliation.xml containing the Surf stub definition as mentioned in this <a href="https://www.alfresco.com/blogs/developer/2014/11/18/creating-aikau-site-pages-for-share">blog post</a> . This is an optional file that serves only to make the page available in the site configuration tool. I can remove it and the results are unchanged.


<?xml version='1.0' encoding='UTF-8'?>
<page>
   <title>Income Reconciliation Page</title>
   <description>View, Create and manage Income Reconciliation entries</description>
</page>
‍‍‍‍‍‍‍

In src/main/amp/config/alfresco/web-extension/site-webscripts/org/ksvrm/pages are four files for the "real" Aikau page. Aside from ksvrm-income-reconciliation.properties (which should be harmless) are these three files:
ksvrm-income-reconciliation-get.desc.xml


<webscript>
   <shortname>Income Reconciliation</shortname>
   <description>Classification of income according to chart of accounts</description>
   <family>share</family>
   <url>/ksvrm-income-reconciliation</url>
   <authentication>none</authentication>
</webscript>
‍‍‍‍‍‍‍‍‍

ksvrm-income-reconciliation-get.html.ftl


<@processJsonModel group="share" />
‍‍‍

ksvrm-income-reconciliation.get.js


model.jsonModel = {
   widgets: [{
      id: "SET_PAGE_TITLE",
        name: "alfresco/header/SetTitle",
        config: {
            title: "Income Reconciliation"
        }
   },{
      id: "TEST_KSVRM_WIDGET",
      name: "ksvrm/widgets/DateBarDate"
   }]
};
‍‍‍‍‍‍‍‍‍‍‍‍‍‍

When I test this page the first widget works as the title is set correctly. When I inspect the page's content div it contains the first widget followed by an empty div, presumably for my widget, which does not make it to the page.
In the path src/main/amp/web/js/ksvrm/widgets are the following
css/DateBarDate.css


.d-bar-date {
    width: 30px;
    horizontal-align: center;
}
‍‍‍‍‍‍

The folder src/main/amp/web/js/ksvrm/widgets/i18n that is empty.
Last, templates/DateBarDate.html


<div class="d-bar-date">
   
</div>
‍‍‍‍‍

Finally, in the widgets folder itself is DateBarDate.js which merely instantiates an alfresco/html/label


define(["dojo/_base/declare",
        "dijit/_WidgetBase",
        "alfresco/core/Core",
        "dijit/_TemplatedMixin",
        "alfresco/html/Label",
        "dojo/text!./templates/DateBarDate.html"
    ],
    function(declare, _Widget, _Templated, template, Core) {
               
      return declare([_Widget, _Templated, Core], {
         name: "alfresco/html/Label",
         cssRequirements: [{cssFile:"./css/DateBarDate.css",mediaType:"screen"}],
         templateString: template,
         label: "Test Label Widget"
      })
});
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RE the nice computer - I almost bought one once but my wife was blind to its artistic value. I keyed in the boot loader so many times that I still remember the starting execution address 1176 (Octal of course). It was a big deal the day it was upgraded from 4K to 8K of memory. I do have one of <a href="http://www.oldcalculatormuseum.com/casiofx1.html">these</a> with all of the nixie tubes working. It has a cube root button. Entering 27 and pushing it gets you a minute or so of flashing display where you can pick out log like numbers. It finally stops with 3.00000…

Re: Cannot add my custom Aikau widget in the Share search page

stuartonmaui — Thu, 21 Apr 2016 23:01:12 GMT

On this page
https://www.alfresco.com/blogs/developer/2013/02/26/creating-custom-share-widgets/
you will see the function signatures directly above. I don't think that this is correct as, for example, the "TemplateWidget" included by the SDK uses a different order of arguments. Unfortunately, changing them did not solve my problem.

Re: Cannot add my custom Aikau widget in the Share search page

stuartonmaui — Fri, 22 Apr 2016 22:41:57 GMT

I put my widget in a new project generated by the SDK, in the same folder as the furnished example with "TemplateWidget" and added it to the "simple-page." The widget uses the arguments


function(declare, _Widget, Core, _Templated, template)
‍‍‍

Again, my widget does not show up while its companion in the same folder works as it should.
Something is wrong with the widget. I recoded it to separate it from the alfresco/html/Label that it contains.
<blockcode>
define(["dojo/_base/declare",
        "dijit/_WidgetBase",
        "alfresco/core/Core",
        "dijit/_TemplatedMixin",
        "alfresco/html/Label",
        "dojo/text!./templates/DateBarDate.html"
    ],
    function(declare, _Widget, Core, _Templated, template) {

   return declare([_Widget, Core, _Templated], {
             id: "MY_ELUSIVE_LABEL_WIDGET",
        templateString: template,
             cssRequirements: [{cssFile:"./css/DateBarDate.css",mediaType:"screen"}],
             config: {
                 widgets: [{
                     name: "alfresco/html/Label",
                     id: "MY_ELUSIVE_LABEL",
                     config: {
                         label: "the MISSING LABEL"
                     }
                  }]
              }
   })
});
</blockcode>
Which unfortunately still doesn't work.

Re: Cannot add my custom Aikau widget in the Share search page

stuartonmaui — Fri, 22 Apr 2016 23:37:07 GMT

I removed the widget and placed text directly in the .html file. The text appeared as it should. Something with the above use of alfresco/html/Label as a widget it wrong.

Re: Cannot add my custom Aikau widget in the Share search page

steven_okennedy — Thu, 19 May 2016 12:29:33 GMT

At least some of your problem here is related to the ordering of your parameters. From the above you had:


define(["dojo/_base/declare",
        "dijit/_WidgetBase",
        "alfresco/core/Core",
        "dijit/_TemplatedMixin",
        "alfresco/html/Label",
        "dojo/text!./templates/DateBarDate.html"
    ],

    function(declare, _Widget, Core, _Templated, template){
…
‍‍‍‍‍‍‍‍‍‍‍‍

The way that the AMD/dojo stuff works is that it resolves the strings you provide as arguments to define into the right objects/functions and passes them as parameters to the function you provide. This allows you to reference these resolved ("loaded") objects using the names of your parameters. It maps them in the order you provide. So from the above:

"dojo/_base/declare" -> declare
"dijit/_WidgetBase" -> _widget
"alfresco/core/Core" -> Core
"dijit/_TemplatedMixin" -> _Templated
"alfresco/html/Label" -> <em>template</em>
"dojo/text!./templates/DateBarDate.html" -> <em>Nothing!</em>

So you are acutally mapping the Label widget to the parameter template and attempting to use that as the templateString. You need to add another parameter, e.g. Label, in between _Templated and template in order for your parameters to be representing what you think they are.

The main issue however, is that you're not constructing your widget in a way that it is going to do anything. Your widget is "extending" _Widget, Core and _Templated via the mixins you've specified, but there's nothing within those mixins that will process most of the properties you're specifying. E.g. templateString: template will work because the _Templated mixin has logic that's being run to take the string from your template and turn it into the relevant Dom objects. Similarly, Core handles your cssRequirements and includes the right stylesheet.

However, there's nothing in _Widget, Core or _Templated that will do anything with your config element automatically. What you'll need to do is put some logic in your widget to process any subwidgets it might contain. There's an out of the box mixin called ProcessWidgets that you can use as the base parent for your widget (it already includes Core, _WidgetBase and _TemplatedMixin for you so it simplifies things a bit further


define(["dojo/_base/declare",
        "alfresco/core/ProcessWidgets",
        "alfresco/html/Label",
        "dojo/text!./templates/DateBarDate.html"
    ],

    function(declare, ProcessWidgets, Label, template) {

   return declare([ProcessWidgets], 
        {
            id: "MY_ELUSIVE_LABEL_WIDGET",
       templateString: template,
            cssRequirements: [{cssFile:"./css/DateBarDate.css",mediaType:"screen"}],
            widgets: 
            [
                {
                    name: "alfresco/html/Label",
                    id: "MY_ELUSIVE_LABEL",
                    config: 
                    {
                        label: "the MISSING LABEL"
                    }
                }
            ]
    })
});
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

You can see I've fixed the parameters above and I've also removed the "config" element as a porperty - config gets mapped by default to the top level properties of the widget, so this.widgets is what's needed rather than this.config.widgets. Using ProcessWidgets mixes in a function called postCreate which is part of the Dojo/Dijit widget lifecycle and will be called once the template processing and rendering has been completed. For your info (the more you can see, the less magic things get), the function that's being inherited looks like this (you don't to put this code in yourself as its coming from ProcessWidgets:


   postCreate: function alfresco_core_ProcessWidgets__postCreate() {
      domClass.add(this.domNode, this.additionalCssClasses || "");
      if (this.widgets)
      {
         this.processWidgets(this.widgets, this.containerNode);
      }
   }
‍‍‍‍‍‍‍‍‍

So you can see that it's going to take any widget object literals that exist in this.widgets and it's going to process them, creating widget objects from them out of widget definitions, and the best thing is, this mechanism will work if create your child widgets literally in the widget definition like we have above, or if you pass in the widgets you want when you call your custom widget in the json model from your webscript. Have a look at how some of the out of the box widgets like HorizontalWidgets etc are put together if you want to see more.

Lastly, to make sure your widget knows where to put your child widgets, it's easiest to include some specific parameters in the html file:


<div class="d-bar-date" data-dojo-attach-point="containerNode">
</div>
‍‍‍‍

This additional attach-point parameter gives your widget a property called this.containerNode to use as the place to add child nodes under - you can see it's used by ProcessWidgets in the postCreate function above. This is a quick shrtcut to you have to go and do a Dom search to find the right parent to add the new children under.

On your frustrations, I fully understand, having picked up and dropped attempts at "doing" Aikau stuff a couple of times before. However, its like pretty much any modern web framework these days you need to know a certain amount about the technologies backing it before it can be useful, e.g. in the same way you can't effectively do NodeJs without understanding npm, webpack etc etc. at least at a basic level, similarly you won't get far in creating custom Aikau widgets without understanding basic Dojo/Dijit widget lifecycle and Surf extensions. Once you do though, you can do quite a lot quite quickly with a relatively small amount of code. The documentation is growing and improving (as are the number of prebuilt widgets available) but it does require the time to go through the main tutorial from start to finish more or less before you'll get the hang of it

Regards

Steven