topic Re: using category control in Alfresco Archive

using category control

Fri, 22 Mar 2013 14:20:48 GMT

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-

Re: using category control

afaust — Sun, 24 Mar 2013 15:50:02 GMT

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

Re: using category control

Tue, 26 Mar 2013 13:58:02 GMT

Hi Axel,

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

Greetings Christian

Re: using category control

iru — Thu, 31 Oct 2013 08:18:00 GMT

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 =|

Re: using category control

iru — Mon, 04 Nov 2013 15:50:00 GMT

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>
‍‍‍‍‍‍‍‍‍‍‍