0

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?

enter image description here

2
  • Do you want to add the source and target textboxes on the edit conditions window? Feb 2, 2023 at 12:55
  • Yes. In the then condition.. Something like, if true, then textbox1 mirror textbox2.. is this possible? Feb 2, 2023 at 12:59

1 Answer 1

0

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.

enter image description here

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

4
  • Thank you @Sumit Bhatia, that helped me to get started. I am not able to find where the target is set. In my case, I have source and target to be set. I am adding the actions in the file \sitecore modules\Web\ExperienceForms\scripts\forms.conditions.js I need source and target. Any help on where I can get/set the source and target actionfieldselect item Feb 6, 2023 at 13:19
  • As I understand that you need a source and target dropdown with your action. I think you need to check the code written in the above files, that how the actionfieldselect items are being added to dropdown and then you can add some condition to show or hide on the basis of condition that you have written. Feb 6, 2023 at 13:38
  • That's the question, where to set it? Still exploring Feb 8, 2023 at 5:40
  • I think you should add this in the csthml that I have mentioned in my answer. Feb 8, 2023 at 6:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.