Boolean selector widget

[lorensansol]

Hello! The boolean widget generates true or false forcibly, but I need that, if nothing is specified, the value is not written to the yaml file.

I have thought about using the selection widget, and so you can even explicitly indicate that it is neither true nor false using none, removing or not writing this attribute in the yaml file.

Since the documentation indicates that the options field must be a list of numbers, a list of text strings or a list of objects with the fields label and value, I have opted for the latter, since a list with booleans it would not comply. I have left it like this:

- value: true
  label: On
- value: false
  label: Off

But Static CMS does not load, there are many errors in the console (as many as there are boolean selectors I have). Most indicate that it must be a list of numbers or text strings, here are some examples:

'.items.selectCases.select.properties.options.items.oneOf[2].properties.value.oneOf[0].type' must be string
'.items.selectCases.select.properties.options.items.oneOf[2].properties.value.oneOf[1].type' must be number
'.items.selectCases.select.properties.options.items.oneOf' must match exactly one schema in oneOf
'.items.selectCases.select.properties.options.items.oneOf[0].type' must be string
'.items.selectCases.select.properties.options.items.oneOf[1].type' must be number

I don't know if this is a development error of the CMS itself and I should indicate it elsewhere, but I would like to be able to select in a boolean way with the option of not indicating anything.

I've already tried putting quotes between "true" and "false" and the same thing happens.

I've thought about using a list like [0, 1], but I would have to change all the values in all the files in all my projects. If I can't find another solution, that would be what I would opt for.

Does anyone comes up with something?

[KaneFreeman]

What errors do you get when you put quotes around them?

- value: "true"
  label: On
- value: "false"
  label: Off

As the errors you provides are clearly indicating you did not give a string or boolean value for the value field.

[lorensansol]

It seems that this way it doesn't give me errors, but if there is an existing boolean value in the yaml file it doesn't read it correctly and if I add a value with the selector it saves it in quotes, so it is considered a string.

[lorensansol]

I just realized that if in any selector widget I choose none, it is saved in the YAML file with the empty value. I thought it would not write anything or even delete the attribute if it already existed.

This is quite important to me and I understand that it may not be the expected behavior for others.

Is there a way to change this?

I've thought of something like this:

- value: true
  label: 'On'
- value: false
  label: 'Off'
- value: null
  label: 'None'

[KaneFreeman]

The None value only appears if the Select widget is optional. Make it required and that will go away. Then you can provide your own None option like you suggested.

[lorensansol]

I have managed to create the boolean widget with the option of not writing any value using an x mark. I'm pasting it here in case it might help someone.

Note: I don't have much control over react, I created the following code based on ChatGPT and my intuition... I tried to make it have the same classes as the original boolean widget to avoid changing many styles.

function processMarkdown(string) {
  const htmlText = string
    .replace(/(\*\*|__)(.*?)\1/g, '<strong>$2</strong>')
    .replace(/(\*|_)(.*?)\1/g, '<em>$2</em>')
    .replace(/~~(.*?)~~/g, '<del>$1</del>')
    .replace(/\[(.*?)\]\((.*?)\)/g, '<a class="CMS_Hint_link" href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
  return htmlText;
}

const CustomBooleanControl = ({ label, value, onChange, field }) => {
  const { hint } = field;

  const handleToggle = () => {
    // Change the value between true and false when the switch is clicked
    const newValue = value === true ? false : true;
    onChange(newValue);
  };

  const handleClear = () => {
    // Clears the value if it exists, otherwise does nothing
    if (value !== undefined) {
      onChange(undefined);
    }
  };

  const isNull = value === undefined;

  let rootClassName = 'CMS_Field_root CMS_WidgetBoolean_root CMS_WidgetBooleanCustom_root CMS_Field_cursor-pointer group/active CMS_Field_inline';
  if (isNull) rootClassName += ' CMS_Field_disabled';

  return h('div', { className: rootClassName }, [
    h('div', { className: 'CMS_Field_wrapper' }, [
      h('div', { className: 'CMS_Field_inline-wrapper' }, [
        h('label', { className: 'CMS_Label_root CMS_Label_cursor-pointer CMS_Label_inline CMS_Field_label' }, label),
        h('button', {
          className: 'CMS_Switch_clear CMS_Autocomplete_button CMS_IconButton_root CMS_IconButton_sm CMS_Button_root-sm CMS_Button_text-primary',
          onClick: handleClear,
          type: 'button',
          role: 'button',
          tabindex: '0',
          'data-no-dnd': 'true',
        }, [
          h('svg', {
            viewBox: '0 0 24 24',
            'aria-hidden': 'true',
            focusable: 'false',
            fill: 'currentColor',
            xmlns: 'http://www.w3.org/2000/svg',
            className: 'CMS_IconButton_icon CMS_Autocomplete_button-icon',
          }, [
            h('path', {
              d: 'M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z',
            })
          ])
        ]),
        h('label', { className: 'CMS_Switch_root CMS_WidgetBoolean_input' }, [
          h('input', {
            type: 'checkbox',
            checked: value === true,
            onChange: handleToggle,
            className: 'CMS_Switch_input',
          }),
          h('div', { className: 'CMS_Switch_toggle' }),
        ]),
        hint && h('div', {
          className: 'CMS_Hint_root CMS_Hint_cursor-pointer CMS_Hint_inline CMS_Field_hint',
          dangerouslySetInnerHTML: { __html: processMarkdown(hint) },
        }),
      ])
    ])
  ]);
};

CMS.registerWidget('booleanCustom', CustomBooleanControl);

  .CMS_Switch_clear {
    opacity: 1;
  }
  .CMS_Field_disabled {
    .CMS_Switch_toggle {
      opacity: 0.5;
    }
    .CMS_Switch_clear {
      opacity: 0;
    }
  }

Thank you so much!