AnsweredAssumed Answered

Cannot add my custom Aikau widget in the Share search page

Question asked by mlagneaux on Oct 23, 2015
Latest reply on May 19, 2016 by steven.okennedy
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

Outcomes