Support for radio buttons in Camunda embedded forms

Question

How can I use radio buttons as input types in a Camunda user task form? I only found an older thread where apparently radio buttons are not supported

Does anyone have newer information?

I would also need this element because our business analyst design radio-button-heavy UIs and quite adamant — sola
– sola, Commented Sep 17, 2021 at 8:06

zeropaper · Accepted Answer · 2016-12-30 06:38:49Z

0

I don't think radio buttons will ever be supported out-of-the-box in the embedded forms because their usage can vary a lot between use cases.

If you need to offer a choice (out of several possibilities) to the user, you can use the select element. If the select element really doesn't fit your needs, you can still use the cam-script directive to add your custom scripts.

answered Dec 30, 2016 at 6:38

zeropaper

5847 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kiarash Javadian · Accepted Answer · 2024-05-27 09:55:33Z

This is how I use Radio Buttons in my forms:

<div class="controls">
  <div class="form-group">
<div
  aria-labelledby="item"
  aria-required="false"
  role="group"
  class="form-radio radio"
>
  <div class="checkbox form-check">
    <label
      for="item_1"
      class="form-check-label label-position-right"
    >
      <span>1</span>
      <input
        role="radio"
        id="item_1"
        value="1"
        lang="en"
        class="form-check-input"
        type="radio"
        name="item-radio"
        ref="input"
        checked=""
      />
    </label>
  </div>
  <div class="checkbox form-check">
    <label
      for="item_2"
      class="form-check-label label-position-right"
    >
      <span>2</span>
      <input
        role="radio"
        id="item_2"
        value="2"
        lang="en"
        class="form-check-input"
        type="radio"
        name="item-radio"
        ref="input"
      />
    </label>
  </div>
  <input
    type="hidden"
    cam-variable-name="item"
    cam-variable-type="String"
    id="hidden_item"
    ng-model="item"
    autocomplete="off"
    class="ng-untouched ng-valid ng-valid-cam-variable-type ng-not-empty ng-valid-parse ng-pristine"
    value="2"
  />
</div>

And I apply event using javascript:

// Get all hidden input fields
  var hiddenInputs = document.querySelectorAll('input[type="hidden"]');
  hiddenInputs.forEach(function (hiddenInput) {
    // Get the key from the id of the hidden input field
    var key = hiddenInput.id.split("_")[1];

    // Get all radio buttons in the same group
    var radios = document.querySelectorAll(`input[name="${key}-radio"]`);

    radios.forEach(function (radio) {
      radio.addEventListener("change", function () {
        if (this.checked) {
          // Update the hidden input field with the value of the selected radio button
          hiddenInput.value = this.value;
        }
      });
    });
  });

Currently I am working to make it cleaner but this works fine.

Thank you for contributing to the Stack Overflow community. This may be a correct answer, but it’d be really useful to provide additional explanation of your code so developers can understand your reasoning. This is especially useful for new developers who aren’t as familiar with the syntax or struggling to understand the concepts. Would you kindly edit your answer to include additional details for the benefit of the community?

Collectives™ on Stack Overflow

Support for radio buttons in Camunda embedded forms

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related