Controls

The module 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

The module beCPG controls is composed of two AMP that can be downloaded here. The AMP core must be deployed in Alfresco and the AMP share must be deployed in Share:

java -jar  $ALF/bin/alfresco-mmt.jar install becpg-controls-core-$BECPG_VERSION.amp $SERVER/webapps/alfresco.war -force
java -jar  $ALF/bin/alfresco-mmt.jar install becpg-controls-share-$BECPG_VERSION.amp $SERVER/webapps/share.war -force

Multilingual control

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

Click on flag link to open multilingual dialog:

Choose a language to add:

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

<code class="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>
</code>

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

autocomplete-association.ftl

Control path:

  • /fr/becpg/components/form/controls/autocomplete-association.ftl">

Parameters:

  • ds (string) The datasource used by the control

checkboxmany.ftl

Control path:

  • /org/alfresco/components/form/controls/checkboxmany.ftl

product-unit.ftl

Control path:

  • /org/alfresco/components/form/controls/product-unit.ftl

Parameters:

  • options: kg,g,lb,oz,L,cL,mL,gal,cp,fl_oz,P
    becpg.forms.field.productUnit

Datasource

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

An exemple is provided in the designer module.

Class Java:

<code 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) {
           ...
        }

}
</code>

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>

Decision tree control configuration

To configure a decision tree over a text field, it's necessary to add a control-param in the appearance section.

    <control template="/org/alfresco/components/form/controls/decision-tree.ftl">
        <control-param name="prefix"></control-param>
        <control-param name="data">
      </control-param>
   </control>

The decision tree must be added in the control-param name="data" and is in json format. Here is an understandable example of a decision tree:

                [
                    {
                    id : "q1",
                    start : true,
                    label : "What is the weather today?",
                    url : "https://www.accuweather.com",
                    lowerNote : "You can check in the attached website.",
                    mandatory : true,
                    choices : [
                        {
                           id : "q1r1",
                           label : "Outlook",
                           cid :  "q2"
                        },
                        {
                            id : "q1r2",
                            label : "Sunny",
                            cid :  "r1"
                        },
                        {
                            id : "q1r3",
                            label : "Rainy",
                            cid :  "q3"
                        }
                        ]
                    },
                    {
                    id : "q2",
                    label : "What are the evolution forecast?",
                    upperNote: "It's really important to know what the weather will be like!",
                    note : "You can check in the attached website in the first question.",
                    mandatory : true,
                    choices : [
                        {
                          id : "q2r1",
                           label : "It will be sunny soon",
                            cid :  "r1"
                        },
                        {
                            id : "q2r2",
                            label : "It will stay cloudy without rain",
                            cid :  "r2"
                        },
                        {
                            id : "q2r3",
                            label : "I will be rainy",
                            comment : true,
                            commentLabel: "How long does it would be rainy?",
                            textarea : true,
                            cid :  "q3"
                        }
                        ]
                    },
                    {                        
                    id : "q3",
                    label : "What do you have to wear against the rain?",
                    note : "Rain clothes checklist",
                    mandatory : false,
                    choices : [
                        {
                            id : "q3r1",
                            label : "Rain clothes checklist",
                            list: ["Umbrella","Waterproof cap","Coat","Boots"],
                            multiple : true,
                            checkboxes : true,
                            cid :  "r3"
                        }
                        ]
                    },
                    {
                    id : "q4",
                    label : "Have you got any remarks?",
                    mandatory : false,
                    choices : [
                        {
                          id : "q4r1",
                          label : "hidden",
                          comment : true,
                          textarea: true
                        }
                        ]
                    },
                    {
                            id : "r1",
                            label : "Enjoy your bright day!"
                    },
                    {
                            id : "r2",
                            label : "Beware to not take cold!"
                    },
                    {
                            id : "r3",
                            label : "Try to avoid getting outside!"
                    }  
                ]

Here are the main functions of a decision tree:

  • id : The id of the question or answer. To have something clear, we advise to put a "q" for question and an "r" for response, for instance.
  • start : Allow you to choose what question(s) you want to display at the start of the decision tree.
  • label : Display text of a question/answer/response in beCPG. If you need to have a free text question without any choice, you can use label : "hidden" and comment : "true".
  • note : Additionnal text over answers. Convenient when you want to split long question or add information.
  • upperNote : Additionnal note over answers.. Some position as previouss note. Useful to have a new line of text over answers.
  • lowerNote : Additionnal text under answers.
  • url : Allow you to add a url link. You can add more than one in using a table format, like ["link1","link2"].
  • mandatory : Define the mandatory aspects of answering a question.
  • cid : Define the next step in calling the next question/answer ID. It's possible to call several questions / answers by using a table, like ["question1","question2"], ["question1","response1"] par exemple.
  • multiple : Allow the user to choose several answers, present in the list in table format.
  • checkboxes : Display multiple possible answers with checkboxes. Works only if multiple : true is used.
  • comment : Allow the user to fill up a free text box if the linked answer is selected.
  • commentLabel : Displayed text for the comment section.
  • textarea : Displayed the comment section as textarea if true.

NOTE : User also have the possibility to deselect a single choice answer by double-clicking on it.

results matching ""

    No results matching ""