using category control

[#1]

Hi everybody,

I have to add a category picker to a forum topic (form create new topic). After analysing the category picker in the document library I suggest that using the category control is strongly wired to the form-engine. Is it possible to use the category control (category.ftl) in a non form-engine generated form like the discussions-createtopic form?

Greetings Chris

[afaust]

Hello Christian,

I suggest using the Alfresco.module.ControlWrapper JS module to dynamically include a category picker in any type of Share UI. Take a look at the replication-job.js configuration UI for an example of its usage.

Regards
Axel

[#3]

Hi Axel,

thanks for reply, that's exactly what I found in the mean time. The ControlWrapper is my friend 🙂

Greetings Christian

[iru]

Hi there!

Sorry for pumping this thread but I'm having the same problem trying to use the category/tag picker in a dashlet preferences.
I'm not very skillfull with javascript, and Alfresco's Share Client API is quite a hell for me ATM.

Could anyone provide me a snippet code about howto approach this?
I've already tried the ControlWrapper but this just seems to ask for the html code for the popup rendering.

However I'm not able to link this content to anywhere.

I may be missing the render part, I've not analised it yet but some help would be appresiated.

Thx in advance.
___

EDIT: just to give more insight about what I'm trying to do

I've got this code on the 'doSetupFormsValidation' callback of my dashlet preferences 'SimpleDialog'

this.configDialog.widgets.filterCategory = new Alfresco.module.ControlWrapper(Alfresco.util.generateDomId()).setOptions({
  
type: "category",
  field: Dom.get(this.configDialog.id + "-filterCategories"),
  container: Dom.get(this.configDialog.id + "-filterCategoriesSelector"),
  value: "",
  controlParams:{
     displayMode: "list",
     multipleSelectMode: true
  },
  fnValueChanged:
  {
             fn: function(obj)
             {
                 alert('change');
             },
             scope: this
          }
});
 
 this.configDialog.widgets.filterCategory.render({
     
    fn: function()
    {
       alert('rendered');
    },
    scope: this
 });
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The POST request is correctly submited and received

POST http://localhost:8080/share/service/components/form/control-wrapper
200

controlParams   {"displayMode":"list","multipleSelectMode":true}
field   "page_x002e_component-2-1_x002e_user_x007e_admin_x007e_dashboard_x0023_default-configDialog-filterCategories"
htmlid   alf-id8
label   
name   wrapper-category
type   category
value
‍‍‍‍‍‍‍‍‍‍‍‍

<div id="alf-id8-control-wrapper" class="form-container inlineable">
<script type="text/javascript">//<![CDATA[
(function(){
   var picker = new Alfresco.ObjectFinder("alf-id8_wrapper-category-cntrl", "alf-id8_wrapper-category").setOptions({      
      
field: "wrapper-category",
      compactMode: true,
      mandatory: false,
      currentValue: "",      
      selectActionLabel: "Select",
      minSearchTermLength: 1,
      maxSearchResults: 1000
   }).setMessages(
      {… omitted i18n …
   );
   picker.setOptions(
   {
      itemType: "cm:category",
      multipleSelectMode: true,
      parentNodeRef: "alfresco://category/root", [^]
      itemFamily: "category",
      maintainAddedRemovedItems: false,
      params: "",
      createNewItemUri: "",
      createNewItemIcon: ""
   });
})();
//]]></script>

<div class="form-field inlineable">
      
      <div id="alf-id8_wrapper-category-cntrl" class="object-finder inlineable">         
      …. omitted …
</div>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

But the 'field' I'm setting up in the ControlWrapper renders the picture I'm attaching.


I assume that the 'component' that renders the selected categories and the 'Select' button is the one generated by the 'ObjectFinder' finder that is returned in the request response but don't know if I have to explicitly call it or what =|

[iru]

Finally I found the problem. I missed some imports.

Don't know why I didn't see any JS error because of not having this.

<@script type="text/javascript" src="${page.url.context}/res/components/object-finder/object-finder.js"></@script>
‍‍‍

This CSS import is also desirable to get the component correctly working.

<@link rel="stylesheet" type="text/css" href="${page.url.context}/res/components/object-finder/object-finder.css" group="dashlets"  />
‍‍‍

__

My overall 'get.head.ftl' is this, in case it may help so.

<#include "../component.head.inc">

<@link rel="stylesheet" type="text/css" href="${page.url.context}/res/modules/documentlibrary/global-folder.css" group="dashlets" /> 
<@link rel="stylesheet" type="text/css" href="${page.url.context}/res/components/object-finder/object-finder.css" group="dashlets"  />

<@script type="text/javascript" src="${page.url.context}/res/modules/form/control-wrapper.js"></@script>
<@script type="text/javascript" src="${page.url.context}/res/components/object-finder/object-finder.js"></@script>   
<@script type="text/javascript" src="${page.url.context}/res/modules/simple-dialog.js"></@script>
<@script type="text/javascript" src="${page.url.context}/res/modules/documentlibrary/global-folder.js"></@script>
‍‍‍‍‍‍‍‍‍‍‍