Link copied!

Variable Configurations Editor Examples

<vce-variable-configurations-editor variable-configurations="[]">
  <vce-variables-list vce-variables-list="vce-variables-list"></vce-variables-list>
  <vce-variable-editor-dialog reserved-ids="[]" has-image-type="true" string-editable="true" use-editable-image="true" vce-variable-editor-dialog="vce-variable-editor-dialog"></vce-variable-editor-dialog>
</vce-variable-configurations-editor>
<vce-variable-configurations-editor id="vceVarEditor" variable-configurations="[{&quot;id&quot;:&quot;apple&quot;,&quot;display_name&quot;:&quot;juicy apple&quot;,&quot;default_value&quot;:&quot;apple&quot;,&quot;is_overridable&quot;:false,&quot;type&quot;:&quot;string&quot;},{&quot;display_name&quot;:&quot;pear&quot;,&quot;id&quot;:&quot;pear&quot;,&quot;default_value&quot;:&quot;pear&quot;,&quot;is_overridable&quot;:false,&quot;type&quot;:&quot;string&quot;},{&quot;display_name&quot;:&quot;Orange&quot;,&quot;id&quot;:&quot;orange&quot;,&quot;default_value&quot;:10,&quot;is_overridable&quot;:true,&quot;type&quot;:&quot;integer&quot;},{&quot;id&quot;:&quot;lemon&quot;,&quot;display_name&quot;:&quot;Lemon&quot;,&quot;default_value&quot;:100,&quot;is_overridable&quot;:true,&quot;type&quot;:&quot;integer&quot;},{&quot;id&quot;:&quot;background&quot;,&quot;display_name&quot;:&quot;Background&quot;,&quot;default_value&quot;:&quot;#cccccc&quot;,&quot;is_overridable&quot;:true,&quot;type&quot;:&quot;color&quot;},{&quot;id&quot;:&quot;fruit&quot;,&quot;default_value&quot;:&quot;lemon&quot;,&quot;is_overridable&quot;:true,&quot;type&quot;:&quot;select&quot;,&quot;type_config&quot;:{&quot;options&quot;:[{&quot;id&quot;:&quot;1&quot;,&quot;name&quot;:&quot;Apple&quot;,&quot;value&quot;:&quot;apple&quot;},{&quot;id&quot;:&quot;2&quot;,&quot;name&quot;:&quot;Lemon&quot;,&quot;value&quot;:&quot;lemon&quot;},{&quot;id&quot;:&quot;3&quot;,&quot;name&quot;:&quot;Pear&quot;,&quot;value&quot;:&quot;pear&quot;},{&quot;id&quot;:&quot;4&quot;,&quot;name&quot;:&quot;Tomato&quot;,&quot;value&quot;:&quot;tomato&quot;}]}},{&quot;display_name&quot;:&quot;inject&quot;,&quot;id&quot;:&quot;inject&quot;,&quot;default_value&quot;:&quot;inject&quot;,&quot;is_overridable&quot;:false,&quot;type&quot;:&quot;string&quot;}]">
  <vce-variables-list vce-variables-list="vce-variables-list"></vce-variables-list>
  <vce-variable-editor-dialog reserved-ids="[]" has-image-type="true" string-editable="true" use-editable-image="true" vce-variable-editor-dialog="vce-variable-editor-dialog"></vce-variable-editor-dialog>
</vce-variable-configurations-editor>
Copy Javascript
Copied to clipboard! 
const vceVarEditor = document.getElementById('vceVarEditor');
vceVarEditor.addEventListener('update',(e) => {
  console.log(e.detail);
  vceVarEditor.setAttribute('variable-configurations', JSON.stringify(e.detail));
});
<vce-variable-configurations-editor id="vceVarEditor" variable-configurations="[{&quot;id&quot;:&quot;apple&quot;,&quot;display_name&quot;:&quot;juicy apple&quot;,&quot;default_value&quot;:&quot;apple&quot;,&quot;is_overridable&quot;:false,&quot;type&quot;:&quot;string&quot;},{&quot;display_name&quot;:&quot;pear&quot;,&quot;id&quot;:&quot;pear&quot;,&quot;default_value&quot;:&quot;pear&quot;,&quot;is_overridable&quot;:false,&quot;type&quot;:&quot;string&quot;},{&quot;display_name&quot;:&quot;Orange&quot;,&quot;id&quot;:&quot;orange&quot;,&quot;default_value&quot;:10,&quot;is_overridable&quot;:true,&quot;type&quot;:&quot;integer&quot;},{&quot;id&quot;:&quot;lemon&quot;,&quot;display_name&quot;:&quot;Lemon&quot;,&quot;default_value&quot;:100,&quot;is_overridable&quot;:true,&quot;type&quot;:&quot;integer&quot;},{&quot;id&quot;:&quot;background&quot;,&quot;display_name&quot;:&quot;Background&quot;,&quot;default_value&quot;:&quot;#cccccc&quot;,&quot;is_overridable&quot;:true,&quot;type&quot;:&quot;color&quot;},{&quot;id&quot;:&quot;fruit&quot;,&quot;default_value&quot;:&quot;lemon&quot;,&quot;is_overridable&quot;:true,&quot;type&quot;:&quot;select&quot;,&quot;type_config&quot;:{&quot;options&quot;:[{&quot;id&quot;:&quot;1&quot;,&quot;name&quot;:&quot;Apple&quot;,&quot;value&quot;:&quot;apple&quot;},{&quot;id&quot;:&quot;2&quot;,&quot;name&quot;:&quot;Lemon&quot;,&quot;value&quot;:&quot;lemon&quot;},{&quot;id&quot;:&quot;3&quot;,&quot;name&quot;:&quot;Pear&quot;,&quot;value&quot;:&quot;pear&quot;},{&quot;id&quot;:&quot;4&quot;,&quot;name&quot;:&quot;Tomato&quot;,&quot;value&quot;:&quot;tomato&quot;}]}},{&quot;display_name&quot;:&quot;inject&quot;,&quot;id&quot;:&quot;inject&quot;,&quot;default_value&quot;:&quot;inject&quot;,&quot;is_overridable&quot;:false,&quot;type&quot;:&quot;string&quot;}]">
<vce-variables-list vce-variables-list="vce-variables-list" show-search="true" show-copy-action="show-copy-action"></vce-variables-list>
<vce-variable-editor-dialog reserved-ids="[]" has-image-type="true" string-editable="true" use-editable-image="true" vce-variable-editor-dialog="vce-variable-editor-dialog"></vce-variable-editor-dialog>
</vce-variable-configurations-editor>
Copy Javascript
Copied to clipboard! 
const vceVarEditor = document.getElementById('vceVarEditor');
vceVarEditor.addEventListener('update',(e) => {
  vceVarEditor.setAttribute('variable-configurations', JSON.stringify(e.detail));
});