If a check box is checked, copy the text box value to another text box in sitecore forms

Question

I am building a form using sitecore forms. I am trying to create a condition in sitecore forms that, if a checkbox is checked, the value of textbox1 should be copied to text box2.

I created a custom Action type as 'mirror'. I need to add source text box and target text box. Can anyone help me how to customize this?

Answer 1

If you want to customize this window then you can refer to ConditionsEditor.csthml file that resides under this folder location.

wwwroot\<your-application-directory>\sitecore\shell\client\Applications\FormsBuilder\Layouts\Renderings\ConditionsEditor

If you see this file, you can find a section called @*templates for editing value parameters on conditions and actions*@ and here you can find something that you want to achieve.

For example, I have added a new textbox for @*template for text input fields*@ like below.

@*template for text input fields*@
<script type="text/html" id="textbox">
    <input class="sc-textbox form-control" data-bind="event: { change: $root.changeValue }, value: $data.value, attr:{ placeholder: $valueTemplate.Watermark, title: $valueTemplate.Tooltip }" type="text"/>
    <input class="sc-textbox form-control" data-bind="event: { change: $root.changeValue }, value: $data.value, attr:{ placeholder: $valueTemplate.Watermark, title: $valueTemplate.Tooltip }" type="text"/>
</script>

And I was able to see the view something like this.

So it is something you can try to add and understand the logic to use with your condition only.

This folder contains other files like CSS and JS. Like if you want to update the JS on your control then you can find this under ConditionsEditor.js file something like below.

addCondition: function(fieldCondition) {
    var condition = {
        fieldId: "",
        operatorId: "",
        value: ""
    };
        fieldCondition.conditions.push(condition);
        fieldCondition.trigger("add:Conditions", condition);
    },

removeCondition: function(fieldCondition, condition) {
    var idx = fieldCondition.conditions.indexOf(condition);
    if (idx !== -1) {
        fieldCondition.conditions.splice(idx, 1);
        fieldCondition.trigger("remove:Conditions", condition);
    }
},

I hope this will help you to get started.

Thanks