cancel
Showing results for 
Search instead for 
Did you mean: 

Is there a way to implement dynamic controlled list in share

bip1989
Star Contributor
Star Contributor

I am looking for implementing a dynamic controlled list in share edit properties form, when i select a value in another controlled list then a different set of values should get populated on selection. 

I tried share form configuration and i think It's not possible to do this via content model config and share form configuration.

1 ACCEPTED ANSWER

abhinavmishra14
World-Class Innovator
World-Class Innovator

Yes its not possible ootb. But have a look at the value assistance addon available on github.

https://github.com/dgcloud/alfresco-value-assistance

Go through these docs to understand the functions and see if that fits into your requirements:

https://www.tsgrp.com/2013/07/10/alfresco-data-list-driven-value-assistance/

https://www.tsgrp.com/2014/12/17/harnessing-the-power-of-alfresco-data-lists-for-cascading-value-ass...

~Abhinav
(ACSCE, AWS SAA, Azure Admin)

View answer in original post

10 REPLIES 10

abhinavmishra14
World-Class Innovator
World-Class Innovator

Yes its not possible ootb. But have a look at the value assistance addon available on github.

https://github.com/dgcloud/alfresco-value-assistance

Go through these docs to understand the functions and see if that fits into your requirements:

https://www.tsgrp.com/2013/07/10/alfresco-data-list-driven-value-assistance/

https://www.tsgrp.com/2014/12/17/harnessing-the-power-of-alfresco-data-lists-for-cascading-value-ass...

~Abhinav
(ACSCE, AWS SAA, Azure Admin)

Thanks for your response. I gone through the document and it looks promising. I will take reference from github link and try to implement. Thanks again. I will accept this as a solution after I complete my implementation.

bip1989
Star Contributor
Star Contributor

I was able to implement the controlled lists by taking the reference of github project. It works fine up to 2 levels. But doesn't support if there are additional levels. But its fine for now as i had to support only two. 
Thanks to the developer and this forum.

EddieMay
World-Class Innovator
World-Class Innovator

Hi @bip1989,

Glad to hear the @abhinavmishra14 was able to help you resolve your issue. Is there any chance that you could supply the code to show others how you overcame your problem? Perhaps we could publish it as a mini tutorial? Let me know if you're interested in pursuing this.

Thanks, 

Digital Community Manager, Alfresco Software.
Problem solved? Click Accept as Solution!

bip1989
Star Contributor
Star Contributor

hi @EddieMay 

Ofcourse. I will share the code definitely. I will capture all the changes i did as part of POC and share the details here over the weekends.  

Thanks for your support.

bip1989
Star Contributor
Star Contributor

Here are the changs we did in POC for dynamic controlled list. I have given the list of steps we followed.

ContentModel changes:


<aspect name="demo:jurisdictionsAspect">
<title>Jurisdictions Aspect</title>
<properties>
<property name="demo:state">
<title>State</title>
<type>d:text</type>
<multiple>true</multiple>
<index enabled="true">
<tokenised>false</tokenised>
</index>
</property>
<property name="demo:city">
<title>City</title>
<type>d:text</type>
<index enabled="true">
<tokenised>false</tokenised>
</index>
</property>
</properties>
</aspect>

<aspect name="demo:cascadingLevelsAspect">
<title>Cascading Levels Aspect</title>
<properties>
<property name="demo:level1">
<title>Level 1</title>
<type>d:text</type>
<index enabled="true">
<tokenised>false</tokenised>
</index>
</property>
<property name="demo:level2">
<title>Level 2</title>
<type>d:text</type>
<index enabled="true">
<tokenised>false</tokenised>
</index>
</property>
</properties>
</aspect>


Created a new Model : dynamicValueModel.xml

<model name="va:contentmodel" xmlns="http://www.alfresco.org/model/dictionary/1.0">
<description>TSG Value Assistance Content Model</description>
<version>1.0</version>

<imports>
<!-- Import Alfresco Dictionary Definitions -->
<import uri="http://www.alfresco.org/model/dictionary/1.0" prefix="d" />
<import uri="http://www.alfresco.org/model/datalist/1.0" prefix="dl" />
</imports>

<namespaces>
<namespace uri="http://www.tsgrp.com/model/va/1.0" prefix="va" />
</namespaces>

<types>
<type name="va:dynamicValueListItem">
<title>Dynamic Value List</title>
<description>Data list item for managing the dynamic controlled list</description>
<parent>dl:dataListItem</parent>
<archive>false</archive>
<mandatory-aspects>
<aspect>va:level1Aspect</aspect>
</mandatory-aspects>
</type>

<type name="va:twoLevelCascadingDynamicValueListItem">
<title>Two Level Cascading dynamic Value List</title>
<description>Data list item for managing the dynamically generated cascaded controlled list</description>
<parent>dl:dataListItem</parent>
<archive>false</archive>
<mandatory-aspects>
<aspect>va:level1Aspect</aspect>
<aspect>va:level2Aspect</aspect>
</mandatory-aspects>
</type>
</types>

<aspects>
<aspect name="va:level1Aspect">
<title>Level 1 Aspect</title>
<properties>
<property name="va:level1Label">
<title>Level 1 Label</title>
<type>d:text</type>
<multiple>false</multiple>
<index enabled="true">
<tokenised>false</tokenised>
</index>
</property>
<property name="va:level1Value">
<title>Level 1 Value</title>
<type>d:text</type>
<multiple>false</multiple>
<index enabled="true">
<tokenised>false</tokenised>
</index>
</property>
</properties>
</aspect>
<aspect name="va:level2Aspect">
<title>Level 2 Aspect</title>
<properties>
<property name="va:level2Label">
<title>Level 2 Label</title>
<type>d:text</type>
<multiple>false</multiple>
<index enabled="true">
<tokenised>false</tokenised>
</index>
</property>
<property name="va:level2Value">
<title>Level 2 Value</title>
<type>d:text</type>
<multiple>false</multiple>
<index enabled="true">
<tokenised>false</tokenised>
</index>
</property>
</properties>
</aspect>
</aspects>
</model>

Added the webscript as per the gitHub project at:
/alfresco/extension/templates/webscripts/org/orderofthebee/picklist.get.desc.xml
/alfresco/extension/templates/webscripts/org/orderofthebee/picklist.get.js
/alfresco/extension/templates/webscripts/org/orderofthebee/picklist.get.json.ftl

------------------------------------------------------
Share module changes:
------------------------------------------------------

Per gitHub project Reference as given in the link above, Created a new file under: META-INF/resources/my-share-module/js/dependent-control.js

Per gitHub project Reference as given in the link above, Created a new file under: META-INF/resources/my-share-module/js/dynamic-dropdown.js

---------------------------

Updated my share module message properties for newly added items:

aspect.demo_cascadingLevelsAspect=Cascading Levels Aspect
prop.demo_level1=Level 1
prop.desc.demo_level1=First Level
prop.demo_level2=Level 2
prop.desc.demo_level2=Second Level

aspect.demo_jurisdictionsAspect=Jurisdictions Aspect
prop.demo_state=State
prop.desc.demo_state=State in a country
prop.demo_city=City


Created properties file in share module: alfresco/web-extension/messages/dynanicValue-messages.properties

type.va_dynamicValueListItem=Dynamic Value List
type.va_twoLevelCascadingDynamicValueListItem=Two Level Cascading Dynamic Value List

aspect.va_level1Aspect=Level 1 Aspect
prop.va_level1Label=Level 1 Label
prop.desc.va_level1Label=Label for first level
prop.va_level1Value=Level 1 Value
prop.desc.va_level1Value=Value for first level

aspect.va_level2Aspect=Level 2 Aspect
prop.va_level2Label=Level 2 Label
prop.desc.va_level2Label=Label for second level
prop.va_level2Value=Level 2 Value
prop.desc.va_level2Value=Value for second level

Updated share-config-custom.xml (per my requirement), as we wanted to make this optional:

<aspects>
<visible>
<aspect name="demo:jurisdictionsAspect" />
<aspect name="demo:cascadingLevelsAspect" />
</visible>

<addable>
<aspect name="demo:jurisdictionsAspect" />
<aspect name="demo:cascadingLevelsAspect" />
</addable>

<removable>
<aspect name="demo:jurisdictionsAspect" />
<aspect name="demo:cascadingLevelsAspect" />
</removable>
</aspects>

Further updated the config to provide form config for new properties:

<config evaluator="aspect" condition="demo:jurisdictionsAspect">
<forms>
<form>
<field-visibility>
<show id="demo:state" />
<show id="demo:city" />
</field-visibility>
<appearance>
<field id="demo:state" label-id="prop.demo_state"
description-id="prop.desc.demo_state">
<control template="/com/demo/components/form/controls/dynamic-dropdown.ftl">
<control-param name="picklistName">State</control-param>
</control>
</field>
<field id="demo:city" label-id="prop.demo_city"
description-id="prop.desc.demo_city">
<control template="/com/demo/components/form/controls/dynamic-dropdown.ftl">
<control-param name="picklistName">City</control-param>
</control>
</field>
</appearance>
</form>
</forms>
</config>

<config evaluator="aspect" condition="demo:cascadingLevelsAspect">
<forms>
<form>
<field-visibility>
<show id="demo:level1" />
<show id="demo:level2" />
</field-visibility>
<appearance>
<field id="demo:level1" label-id="prop.demo_level1"
description-id="prop.desc.demo_level1">
<control template="/com/demo/components/form/controls/dynamic-dropdown.ftl">
<control-param name="picklistName">TwoLevelCascadingValueAssistance</control-param>
<control-param name="level">1</control-param>
<control-param name="loadLabel">true</control-param>
</control>
</field>
<field id="demo:level2" label-id="prop.demo_level2"
description-id="prop.desc.demo_level2">
<control template="/com/demo/components/form/controls/dynamic-dropdown.ftl">
<control-param name="picklistName">TwoLevelCascadingValueAssistance</control-param>
<control-param name="level">2</control-param>
<control-param name="dependsOn">prop_demo_level1</control-param>
<control-param name="loadLabel">true</control-param>
</control>
</field>
</appearance>
</form>
</forms>
</config>


<config>
<forms>
<dependencies>
<js src="/my-share-module/js/dependent-control.js" />
<js src="/my-share-module/js/dynamic-dropdown.js" />
</dependencies>
</forms>
</config>

<config evaluator="node-type" condition="va:dynamicValueListItem">
<forms>
<form>
<field-visibility>
<show id="va:level1Label" />
<show id="va:level1Value" />
</field-visibility>
<appearance>
<field id="va:level1Label" label-id="prop.va_level1Label"
description-id="prop.desc.va_level1Label">
<control>
<control-param name="maxLength">255</control-param>
</control>
</field>
<field id="va:level1Value" label-id="prop.va_level1Value"
description-id="prop.desc.va_level1Value">
<control>
<control-param name="maxLength">255</control-param>
</control>
</field>
</appearance>
</form>
</forms>
</config>

<config evaluator="model-type" condition="va:dynamicValueListItem">
<forms>
<form>
<field-visibility>
<show id="va:level1Label" />
<show id="va:level1Value" />
</field-visibility>
<appearance>
<field id="va:level1Label" label-id="prop.va_level1Label"
description-id="prop.desc.va_level1Label">
<control>
<control-param name="maxLength">255</control-param>
</control>
</field>
<field id="va:level1Value" label-id="prop.va_level1Value"
description-id="prop.desc.va_level1Value">
<control>
<control-param name="maxLength">255</control-param>
</control>
</field>
</appearance>
</form>
</forms>
</config>

<config evaluator="node-type" condition="va:twoLevelCascadingDynamicValueListItem">
<forms>
<form>
<field-visibility>
<show id="va:level1Label" />
<show id="va:level1Value" />
<show id="va:level2Label" />
<show id="va:level2Value" />
</field-visibility>
<appearance>
<field id="va:level1Label" label-id="prop.va_level1Label"
description-id="prop.desc.va_level1Label">
<control>
<control-param name="maxLength">255</control-param>
</control>
</field>
<field id="va:level1Value" label-id="prop.va_level1Value"
description-id="prop.desc.va_level1Value">
<control>
<control-param name="maxLength">255</control-param>
</control>
</field>
<field id="va:level2Label" label-id="prop.va_level2Label"
description-id="prop.desc.va_level2Label">
<control>
<control-param name="maxLength">255</control-param>
</control>
</field>
<field id="va:level2Value" label-id="prop.va_level2Value"
description-id="prop.desc.va_level2Value">
<control>
<control-param name="maxLength">255</control-param>
</control>
</field>
</appearance>
</form>
</forms>
</config>

<config evaluator="model-type" condition="va:twoLevelCascadingValueAssistanceListItem">
<forms>
<form>
<field-visibility>
<show id="va:level1Label" />
<show id="va:level1Value" />
<show id="va:level2Label" />
<show id="va:level2Value" />
</field-visibility>
<appearance>
<field id="va:level1Label" label-id="prop.va_level1Label"
description-id="prop.desc.va_level1Label">
<control>
<control-param name="maxLength">255</control-param>
</control>
</field>
<field id="va:level1Value" label-id="prop.va_level1Value"
description-id="prop.desc.va_level1Value">
<control>
<control-param name="maxLength">255</control-param>
</control>
</field>
<field id="va:level2Label" label-id="prop.va_level2Label"
description-id="prop.desc.va_level2Label">
<control>
<control-param name="maxLength">255</control-param>
</control>
</field>
<field id="va:level2Value" label-id="prop.va_level2Value"
description-id="prop.desc.va_level2Value">
<control>
<control-param name="maxLength">255</control-param>
</control>
</field>
</appearance>
</form>
</forms>
</config>

As per the gitHub project reference, added following templates to use it on forms:

/web-extension/site-webscripts/com/demo/components/form/controls/dynamic-dropdown.ftl


At last, Create the data list and configure the values which will be used dynamically. It allowed us to add/update new/existing values

bip1989
Star Contributor
Star Contributor

Hi @EddieMay 

i tried posting the files and changes we did for the dynamic controlled list. It's not showing up here. I tried twice

EddieMay
World-Class Innovator
World-Class Innovator

Hi @bip1989 ,

Thanks for trying! I think you will have to post using the <> code snippet tool, or screenshots as a last resort.

Digital Community Manager, Alfresco Software.
Problem solved? Click Accept as Solution!

bip1989
Star Contributor
Star Contributor

ContentModel changes:

<aspect name="demo:jurisdictionsAspect">
<title>Jurisdictions Aspect</title>
<properties>
	<property name="demo:state">
		<title>State</title>
		<type>d:text</type>
		<multiple>true</multiple>
		<index enabled="true">
			<tokenised>false</tokenised>
		</index>
	</property>
	<property name="demo:city">
		<title>City</title>
		<type>d:text</type>
		<index enabled="true">
			<tokenised>false</tokenised>
		</index>
	</property>
</properties>
</aspect>

<aspect name="demo:cascadingLevelsAspect">
<title>Cascading Levels Aspect</title>
<properties>
	<property name="demo:level1">
		<title>Level 1</title>
		<type>d:text</type>
		<index enabled="true">
			<tokenised>false</tokenised>
		</index>
	</property>
	<property name="demo:level2">
		<title>Level 2</title>
		<type>d:text</type>
		<index enabled="true">
			<tokenised>false</tokenised>
		</index>
	</property>
</properties>
</aspect>

Created a new Model : dynamicValueModel.xml

<model name="va:contentmodel" xmlns="http://www.alfresco.org/model/dictionary/1.0">
<description>Dynamic controlled list Content Model</description>
<version>1.0</version>

<imports>
<!-- Import Alfresco Dictionary Definitions -->
<import uri="http://www.alfresco.org/model/dictionary/1.0" prefix="d" />
<import uri="http://www.alfresco.org/model/datalist/1.0" prefix="dl" />
</imports>

<namespaces>
<namespace uri="http://www.demo.com/model/va/1.0" prefix="va" />
</namespaces>

<types>
<type name="va:dynamicValueListItem">
	<title>Dynamic Value List</title>
	<description>Data list item for managing the dynamic controlled list</description>
	<parent>dl:dataListItem</parent>
	<archive>false</archive>
	<mandatory-aspects>
		<aspect>va:level1Aspect</aspect>
	</mandatory-aspects>
</type>

<type name="va:twoLevelCascadingDynamicValueListItem">
	<title>Two Level Cascading dynamic Value List</title>
	<description>Data list item for managing the dynamically generated cascaded controlled list</description>
	<parent>dl:dataListItem</parent>
	<archive>false</archive>
	<mandatory-aspects>
		<aspect>va:level1Aspect</aspect>
		<aspect>va:level2Aspect</aspect>
	</mandatory-aspects>
</type>
</types>

<aspects>
<aspect name="va:level1Aspect">
	<title>Level 1 Aspect</title>
	<properties>
		<property name="va:level1Label">
			<title>Level 1 Label</title>
			<type>d:text</type>
			<multiple>false</multiple>
			<index enabled="true">
				<tokenised>false</tokenised>
			</index>
		</property>
		<property name="va:level1Value">
			<title>Level 1 Value</title>
			<type>d:text</type>
			<multiple>false</multiple>
			<index enabled="true">
				<tokenised>false</tokenised>
			</index>
		</property>
	</properties>
</aspect>
<aspect name="va:level2Aspect">
	<title>Level 2 Aspect</title>
	<properties>
		<property name="va:level2Label">
			<title>Level 2 Label</title>
			<type>d:text</type>
			<multiple>false</multiple>
			<index enabled="true">
				<tokenised>false</tokenised>
			</index>
		</property>
		<property name="va:level2Value">
			<title>Level 2 Value</title>
			<type>d:text</type>
			<multiple>false</multiple>
			<index enabled="true">
				<tokenised>false</tokenised>
			</index>
		</property>
	</properties>
</aspect>
</aspects>
</model>

Added the webscript as per the gitHub project at:


/alfresco/extension/templates/webscripts/org/orderofthebee/picklist.get.desc.xml
/alfresco/extension/templates/webscripts/org/orderofthebee/picklist.get.js
/alfresco/extension/templates/webscripts/org/orderofthebee/picklist.get.json.ftl

------------------------------------------------------
Share module changes:
------------------------------------------------------

Per gitHub project Reference as given in the link above, Created a new file under: META-INF/resources/my-share-module/js/dependent-control.js

Per gitHub project Reference as given in the link above, Created a new file under: META-INF/resources/my-share-module/js/dynamic-dropdown.js

Updated my share module message properties for newly added items:

aspect.demo_cascadingLevelsAspect=Cascading Levels Aspect
prop.demo_level1=Level 1
prop.desc.demo_level1=First Level
prop.demo_level2=Level 2
prop.desc.demo_level2=Second Level

aspect.demo_jurisdictionsAspect=Jurisdictions Aspect
prop.demo_state=State
prop.desc.demo_state=State in a country
prop.demo_city=City

Created properties file in share module: alfresco/web-extension/messages/dynanicValue-messages.properties

type.va_dynamicValueListItem=Dynamic Value List
type.va_twoLevelCascadingDynamicValueListItem=Two Level Cascading Dynamic Value List
aspect.va_level1Aspect=Level 1 Aspect
prop.va_level1Label=Level 1 Label
prop.desc.va_level1Label=Label for first level
prop.va_level1Value=Level 1 Value
prop.desc.va_level1Value=Value for first level
aspect.va_level2Aspect=Level 2 Aspect
prop.va_level2Label=Level 2 Label
prop.desc.va_level2Label=Label for second level
prop.va_level2Value=Level 2 Value
prop.desc.va_level2Value=Value for second level

Updated share-config-custom.xml (per my requirement), as we wanted to make this optional:

<aspects>
	<visible>
		<aspect name="demo:jurisdictionsAspect" />
		<aspect name="demo:cascadingLevelsAspect" />
	</visible>
	<addable>
		<aspect name="demo:jurisdictionsAspect" />
		<aspect name="demo:cascadingLevelsAspect" />
	</addable>
	<removable>
		<aspect name="demo:jurisdictionsAspect" />
		<aspect name="demo:cascadingLevelsAspect" />
	</removable>
</aspects>

Further updated the config to provide form config for new properties:

<config evaluator="aspect" condition="demo:jurisdictionsAspect">
<forms>
<form>
	<field-visibility>
		<show id="demo:state" />
		<show id="demo:city" />
	</field-visibility>
	<appearance>
		<field id="demo:state" label-id="prop.demo_state" 
			description-id="prop.desc.demo_state">
			<control template="/com/demo/components/form/controls/dynamic-dropdown.ftl">
				<control-param name="picklistName">State</control-param>
			</control>
		</field>
		<field id="demo:city" label-id="prop.demo_city" 
			description-id="prop.desc.demo_city">
			<control template="/com/demo/components/form/controls/dynamic-dropdown.ftl">
				<control-param name="picklistName">City</control-param>
			</control>
		</field>
	</appearance>
</form>
</forms>
</config>

<config evaluator="aspect" condition="demo:cascadingLevelsAspect">
<forms>
<form>
	<field-visibility>
		<show id="demo:level1" />
		<show id="demo:level2" />
	</field-visibility>
	<appearance>
		<field id="demo:level1" label-id="prop.demo_level1" 
			description-id="prop.desc.demo_level1">
			<control template="/com/demo/components/form/controls/dynamic-dropdown.ftl">
				<control-param name="picklistName">TwoLevelCascadingValueAssistance</control-param>
				<control-param name="level">1</control-param>
				<control-param name="loadLabel">true</control-param>
			</control>
		</field>
		<field id="demo:level2" label-id="prop.demo_level2" 
			description-id="prop.desc.demo_level2">
			<control template="/com/demo/components/form/controls/dynamic-dropdown.ftl">
				<control-param name="picklistName">TwoLevelCascadingValueAssistance</control-param>
				<control-param name="level">2</control-param>
				<control-param name="dependsOn">prop_demo_level1</control-param>
				<control-param name="loadLabel">true</control-param>
			</control>
		</field>
	</appearance>
</form>
</forms>
</config>


<config>
<forms>
<dependencies>
	<js src="/my-share-module/js/dependent-control.js" />
	<js src="/my-share-module/js/dynamic-dropdown.js" />
</dependencies>
</forms>
</config>

<config evaluator="node-type" condition="va:dynamicValueListItem">
<forms>
<form>
	<field-visibility>
		<show id="va:level1Label" />
		<show id="va:level1Value" />
	</field-visibility>
	<appearance>
		<field id="va:level1Label" label-id="prop.va_level1Label" 
			description-id="prop.desc.va_level1Label">
			<control>
				<control-param name="maxLength">255</control-param>
			</control>
		</field>
		<field id="va:level1Value" label-id="prop.va_level1Value" 
			description-id="prop.desc.va_level1Value">
			<control>
				<control-param name="maxLength">255</control-param>
			</control>
		</field>
	</appearance>
</form>
</forms>
</config>

<config evaluator="model-type" condition="va:dynamicValueListItem">
<forms>
<form>
	<field-visibility>
		<show id="va:level1Label" />
		<show id="va:level1Value" />
	</field-visibility>
	<appearance>
		<field id="va:level1Label" label-id="prop.va_level1Label" 
			description-id="prop.desc.va_level1Label">
			<control>
				<control-param name="maxLength">255</control-param>
			</control>
		</field>
		<field id="va:level1Value" label-id="prop.va_level1Value" 
			description-id="prop.desc.va_level1Value">
			<control>
				<control-param name="maxLength">255</control-param>
			</control>
		</field>
	</appearance>
</form>
</forms>
</config>

<config evaluator="node-type" condition="va:twoLevelCascadingDynamicValueListItem">
<forms>
<form>
	<field-visibility>
		<show id="va:level1Label" />
		<show id="va:level1Value" />
		<show id="va:level2Label" />
		<show id="va:level2Value" />
	</field-visibility>
	<appearance>
		<field id="va:level1Label" label-id="prop.va_level1Label" 
			description-id="prop.desc.va_level1Label">
			<control>
				<control-param name="maxLength">255</control-param>
			</control>
		</field>
		<field id="va:level1Value" label-id="prop.va_level1Value" 
			description-id="prop.desc.va_level1Value">
			<control>
				<control-param name="maxLength">255</control-param>
			</control>
		</field>
		<field id="va:level2Label" label-id="prop.va_level2Label" 
			description-id="prop.desc.va_level2Label">
			<control>
				<control-param name="maxLength">255</control-param>
			</control>
		</field>
		<field id="va:level2Value" label-id="prop.va_level2Value" 
			description-id="prop.desc.va_level2Value">
			<control>
				<control-param name="maxLength">255</control-param>
			</control>
		</field>
	</appearance>
</form>
</forms>
</config>

<config evaluator="model-type" condition="va:twoLevelCascadingValueAssistanceListItem">
<forms>
<form>
	<field-visibility>
		<show id="va:level1Label" />
		<show id="va:level1Value" />
		<show id="va:level2Label" />
		<show id="va:level2Value" />
	</field-visibility>
	<appearance>
		<field id="va:level1Label" label-id="prop.va_level1Label" 
			description-id="prop.desc.va_level1Label">
			<control>
				<control-param name="maxLength">255</control-param>
			</control>
		</field>
		<field id="va:level1Value" label-id="prop.va_level1Value" 
			description-id="prop.desc.va_level1Value">
			<control>
				<control-param name="maxLength">255</control-param>
			</control>
		</field>
		<field id="va:level2Label" label-id="prop.va_level2Label" 
			description-id="prop.desc.va_level2Label">
			<control>
				<control-param name="maxLength">255</control-param>
			</control>
		</field>
		<field id="va:level2Value" label-id="prop.va_level2Value" 
			description-id="prop.desc.va_level2Value">
			<control>
				<control-param name="maxLength">255</control-param>
			</control>
		</field>
	</appearance>
</form>
</forms>
</config>

As per the gitHub project reference, added following templates to use it on forms:

/web-extension/site-webscripts/com/demo/components/form/controls/dynamic-dropdown.ftl

At last, Create the data list and configure the values which will be used dynamically. It allowed us to add/update new/existing values