Cannot add my custom Aikau widget in the Share search page

[mlagneaux]

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 in a page ? I know how to add a new widget (push a new widget in the "widgets" object) but how to replace an existing one by my custom one ?

When I add my custom widget somewhere in the page, it doesn't show up :

var exportableSearchForm = {
   id: "FCTSRCH_EXPORTABLE_SEARCH_FORM",
   name: "js/dcnsgroup/ExportableSearchForm/ExportableSearchForm",
   config: {
      useHash: true,
      okButtonLabel: msg.get("faceted-search.search-form.ok-button-label"),
      okButtonPublishTopic : "ALF_SET_SEARCH_TERM",
      okButtonPublishGlobal: true,
      okButtonIconClass: "alf-white-search-icon",
      okButtonClass: "call-to-action",
      textFieldName: "searchTerm",
      textBoxIconClass: "alf-search-icon",
      textBoxCssClasses: "long hiddenlabel",
      textBoxLabel: msg.get("faceted-search.search-form.search-field-label"),
      queryAttribute: "term",
      optionsPublishTopic: "ALF_AUTO_SUGGEST_SEARCH",
      optionsPublishPayload: {
         resultsProperty: "response.suggestions"
      }, 
      /* new form features */
      exportButtonLabel: msg.get("export-button-label"),
      exportButtonPublishTopic : "ALF_SET_EXPORT_TERM",
      exportButtonPublishGlobal: true,
      exportButtonIconClass: "alf-white-search-icon",
      exportButtonClass: "call-to-action"
   }
};

var verticalLayout = widgetUtils.findObject(model.jsonModel, "id", "FCTSRCH_MAIN_VERTICAL_STACK");
verticalLayout.config.widgets.push(exportableSearchForm);
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

My Aikau widget JS file IS CORRECTLY LOADED in the browser :

define(
      [ "dojo/_base/declare", "alfresco/forms/SingleComboBoxForm",
            "dojo/text!./ExportableSearchForm.html", ],
      function(declare, SingleComboBoxForm, template) {
         return declare(
               [ SingleComboBoxForm, template],
               {
                  cssRequirements : [ {
                     cssFile : "./ExportableSearchForm.css",
                     mediaType : "screen"
                  } ],
                  i18nRequirements : [ {
                     i18nFile : "./ExportableSearchForm.properties"
                  } ],

                  /**
                   * The HTML template to use for the widget.
                   * 
                   * @instance
                   * @type {String}
                   */
                  templateString : template,

                  /**
                   * Adds the export button to the form.
                   * 
                   * @instance
                   */
                  createButtons : function alfresco_forms_ExportableSearchForm__createButtons() {
                     this.inherited(arguments);
                     if (this.showExportButton === true) {
                        var onButtonClass = this.exportButtonClass ? this.exportButtonClass
                              : "";
                        this.exportButton = new AlfButton(
                              {
                                 pubSubScope : this.pubSubScope,
                                 label : this
                                       .message(this.exportButtonLabel),
                                 additionalCssClasses : "confirmationButton "
                                       + onButtonClass,
                                 publishTopic : this.exportButtonPublishTopic,
                                 publishPayload : this.exportButtonPublishPayload,
                                 publishGlobal : this.exportButtonPublishGlobal,
                                 iconClass : this.exportButtonIconClass
                              }, this.exportButtonNode);
                     }
                  },
               });
      });
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

My custom widgets is not rendered but there is no error, neither in the browser logs or in alfresco.log or share.log !
The declare() function in my custom widget JS is called but my createButtons() function is not.

<b>Other question</b> : how Alfresco/Aikau does the mapping between the widget name defined in my faceted-search.get.js and the widget JS file to load ? At first I set the name "dcnsgroup/ExportableSearchForm/ExportableSearchForm" but with that name, the "/res/dcnsgroup/ExportableSearchForm/ExportableSearchForm.js" was loaded instead of the correct path "/res/<b>js</b>/dcnsgroup/ExportableSearchForm/ExportableSearchForm.js". So I added "/js" in the name to make it work.


Thanks you in advance for your answers,

Mickaël

[ddraper]

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-m...

I hope that helps.

Regards,
Dave

[stuartonmaui]

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

[redraccoon]

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/)

[stuartonmaui]

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.

[stuartonmaui]

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.

[stuartonmaui]

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.

[redraccoon]

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

[stuartonmaui]

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...">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…

[stuartonmaui]

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.