Projet

General

Profil

Wiki » Technical-doc » Core »

Controls

beCPG controls provides controls for the Alfresco Share forms, it is required by the designer. These controls can be installed and used without the designer.

Installation

Controls are now part of becpg-core module

Multilingual control

This control will automatically appear next to MLText field, it allows to provide field translation.

Click on flag link to open multilingual dialog:

To override locale list, add in share-config-custom.xml:

<config evaluator="string-compare" condition="Languages" replace="true">
      <!-- the list of available language files -->
      <languages>
         <language locale="en_US">English</language>
         <language locale="de_DE">German</language>
         <language locale="es_ES">Spanish</language>
         <language locale="fr_FR">French</language>
         <language locale="it_IT">Italian</language>
         <language locale="ja_JP">Japanese</language>
         <language locale="nl_NL">Dutch</language>
         <language locale="ru_RU">Russian</language>
         <language locale="zh_CN">Chinese (Simplified)</language>
         <language locale="pt_PT">Protuguese</language>
         <language locale="no_NO">Norwegian</language>
         <language locale="sv_SE">Swedish</language>
         <language locale="el_GR">Greek</language>
      </languages>
   </config>

Language picker control

This control can be add to a multiple value text field, and will display a picker to choose between different locale set under share-config-custom.xml.

<field id="rep:reportTplClassName">
   <control template="/org/alfresco/components/form/controls/textfield.ftl"/>
</field>

Autocomplete control

This module provides 2 usable controls :
  • the control autocomplete.ftl that suggests text values
  • the control autocomplete-association.ftl that suggests association values (nodes with noderef)

Configuration

autocomplete.ftl

Control path:
  • /fr/becpg/components/form/controls/autocomplete.ftl
Parameters:
  • ds (string) The datasource used by the control
  • parent (optional,string) The parent field, for example: bcpg:projectHierarchy2 is linked to bcpg:projectHierarchy1 by setting parent to bcpg_projectHierarchy1
  • local (optional,boolean, false) The datasource is local (webscript share/alfresco)
  • style (optional,string) The style applied to the field
  • maxLength (optional,int) The max length for the text field
  • size (optional,int) The size of the text field
  • showTooltip (optional,boolean, false) Should we show tooltips
  • showPage (optional,boolean, true) Should we show pagination
  • saveTitle (optional,boolean, false) Should we save the label or value

Example:

<field id="pjt:projectHierarchy1" set="mainInfo">
    <control template="/org/alfresco/components/form/controls/autocomplete.ftl">
        <control-param name="ds">becpg/autocomplete/linkedvalue/values/System/ProjectLists/bcpg:entityLists/project_Hierarchy
        </control-param>
    </control>
</field>
<field id="pjt:projectHierarchy2" set="mainInfo">
    <control template="/org/alfresco/components/form/controls/autocomplete.ftl">
        <control-param name="ds">becpg/autocomplete/linkedvalue/values/System/ProjectLists/bcpg:entityLists/project_Hierarchy
        </control-param>
        <control-param name="parent">pjt_projectHierarchy1
        </control-param>
    </control>
</field>

autocomplete ParentValue

To add an autocomplete Parent Value, you have to :
  • Go to the model designer.
  • Add an autocomplete on a field.
  • Go under automplete, Parameters, ds.
  • Specify the field "Value" with this url " becpg/autocomplete/ParentValue?className=....&attributeName=.... " (Change the dots with your classeName value and attributeName value).

Example :
In the following screenshot, we are adding a parent value. The field is pjt:blItem from the datalist pjt:budgetList.

autocomplete-association.ftl

Control path:
  • /fr/becpg/components/form/controls/autocomplete-association.ftl">
Parameters:
  • ds (string) The datasource used by the control

Select and filter parents

The control to choose a parent can be parametered to filter the parent selected before. To achieve that, you have to use the parentMode mode in the autocomplete control :

<field id="bcpg:parentLevel">
    <control template="/org/alfresco/components/form/controls/autocomplete.ftl">
        <control-param name="ds">becpg/autocomplete/ParentValue?className=pjt:taskList&#38;attributeName=pjt:tlTaskName
        </control-param>
        <control-param name="urlParamsToPass">itemId</control-param>
        <control-param name="parent">bcpg_parentLevel</control-param>
        <control-param name="parentMode">true</control-param>
    </control>
</field>

It is also possible to overload the parent selection function when a box is checked to make it recursive :

{add image}

You can overload the selection function in the gantt-columnRenderer :

var checkChilds = function (vTaskList, id,checked){
    for ( var j = 0; j < vTaskList.length; j++) {
        if (vTaskList[j].getParent() == id) {
            JSGantt.scope.selectedItems[vTaskList[j].getID()] =checked;
            if( Dom.get("taskChecked-"+vTaskList[j].getID())){
                Dom.get("taskChecked-"+vTaskList[j].getID()).checked = checked;
            }
            if(vTaskList[j].getGroup()){
                checkChilds(vTaskList,vTaskList[j].getID(), checked);
            }
        }
     }
}

g.selectItem = function(input,id){
    var vTaskList = g.getList();
    for ( var i = 0; i < vTaskList.length; i++) {
        if(vTaskList[i].getID() == id && vTaskList[i].getGroup()){

            checkChilds(vTaskList, id,input.checked);
            break;
        }
    }

    JSGantt.scope.selectedItems[id] = input.checked;
    YAHOO.Bubbling.fire(JSGantt.scope.scopeId+"selectedItemsChanged");
};

Datasource

To provide a datasource, we need to implement a Java plugin.

An exemple is provided in the designer module.

Class Java:

public class ExempleListValuePlugin extends AbstractBaseListValuePlugin {

    @Override
    public String[] getHandleSourceTypes() {
        return new String[] {"exempleSourceType" };
    }

    @Override
    public ListValuePage suggest(String sourceType, String query, Integer pageNum, Map<String, Serializable> props) {
           ...
        }

}

Config Spring:

<bean id="exempleListValuePlugin" parent="baseListValuePlugin"  init-method="init" 
             class="fr.becpg.repo.designer.listvalue.ExempleListValuePlugin"/>

Url of datasource

<control template="/fr/becpg/components/form/controls/autocomplete.ftl">
   <control-param name="ds">becpg/autocomplete/exempleSourceType</control-param>
</control>

Color picker control

These control can be set on a text field and will store the hexadecimal web notation of the color.

<field id="bcpg:dynamicCharactGroupColor">
   <control template="/org/alfresco/components/form/controls/selectcolorpicker.ftl" />
</field>

Decision Tree control (PLM Only)

Decision tree can be configured to display a list of questions and to store the results as JSON under a text field.

Exemple of JSON configuration :

<field id="bcpg:allergenListDecisionTree">
    <control template="/org/alfresco/components/form/controls/decision-tree.ftl">
        <control-param name="prefix">allergenList</control-param>
        <control-param name="data">
                    [{id:"q1",choices :
                    [{id : "yes" , cid : "q3" }, {id: "no" , cid : "q2"}, {id:"-", cid :
                    "q2"}]},
                    {id:"q2",choices :
                    [{id : "yes" , cid : "q3", comment : true}, {id:"no", cid : "r1"},
                    {id:"-", cid : "q3"}]},
                    {id:"q3",choices :
                    [{id : "yes" , cid : "q4"}, {id:"no", cid :"r1"}, {id:"-", cid :
                    "q4"}]},
                    {id:"q4",choices :
                    [{id : "yes", cid :"r1"}, {id:"no", cid:"r2"}, {id:"-"}]},
                    {id:"r1"}, {id:"r2"}
                    ]
        </control-param>
    </control>
</field>