Hey,
i have 8 checkboxes but i want that the user can just tick on at the time.
Can i do this with my code or are radiobuttons available?
import { CheckboxEntry } from '@bpmn-io/properties-panel';
import { useService } from 'bpmn-js-properties-panel';
import { keys } from 'min-dash';
import React, { useRef } from 'react';
export default function(element) {
return [
{
id: 'checkbox1',
element,
component: checkbox1,
},
{
id: 'checkbox2',
element,
component: checkbox2,
},
{
id: 'checkbox3',
element,
component: checkbox3,
},
{
id: 'checkbox4',
element,
component: checkbox4,
},
{
id: 'checkbox5',
element,
component: checkbox5,
},
{
id: 'checkbox6',
element,
component: checkbox6,
},
{
id: 'checkbox7',
element,
component: checkbox7,
}
];
}
//const selectedCheckboxId = useRef(null);
function checkbox1(props) {
const modeling = useService('modeling');
const { element, id } = props;
const getValue = () => {
return element.businessObject.checkbox1 || false;
}
const setValue = value => {
if (value && selectedCheckboxId.current) {
modeling.updateProperties(element, {
[selectedCheckboxId.current]: false
});
}
selectedCheckboxId.current = id;
return modeling.updateProperties(element, {
checkbox1: value
});
}
return <CheckboxEntry
id={ id }
label={ 'offen' }
getValue={ getValue }
setValue={ setValue }
/>
}
function checkbox2(props) {
const modeling = useService('modeling');
const { element, id } = props;
const getValue = () => {
return element.businessObject.checkbox2 || false;
}
const setValue = value => {
if (value && selectedCheckboxId.current) {
modeling.updateProperties(element, {
[selectedCheckboxId.current]: false
});
}
selectedCheckboxId.current = id;
return modeling.updateProperties(element, {
checkbox2: value
});
}
return <CheckboxEntry
id={ id }
label={ 'in Erstellung' }
getValue={ getValue }
setValue={ setValue }
/>
}
function checkbox3(props) {
const modeling = useService('modeling');
const { element, id } = props;
const getValue = () => {
return element.businessObject.checkbox3 || false;
}
const setValue = value => {
if (value && selectedCheckboxId.current) {
modeling.updateProperties(element, {
[selectedCheckboxId.current]: false
});
}
selectedCheckboxId.current = id;
return modeling.updateProperties(element, {
checkbox2: value
});
}
return <CheckboxEntry
id={ id }
label={ 'freigegeben' }
getValue={ getValue }
setValue={ setValue }
/>
}
function checkbox4(props) {
const modeling = useService('modeling');
const { element, id } = props;
const getValue = () => {
return element.businessObject.checkbox4 || false;
}
const setValue = value => {
if (value && selectedCheckboxId.current) {
modeling.updateProperties(element, {
[selectedCheckboxId.current]: false
});
}
selectedCheckboxId.current = id;
return modeling.updateProperties(element, {
checkbox2: value
});
}
return <CheckboxEntry
id={ id }
label={ 'abgelehnt' }
getValue={ getValue }
setValue={ setValue }
/>
}
function checkbox5(props) {
const modeling = useService('modeling');
const { element, id } = props;
const getValue = () => {
return element.businessObject.checkbox5 || false;
}
const setValue = value => {
if (value && selectedCheckboxId.current) {
modeling.updateProperties(element, {
[selectedCheckboxId.current]: false
});
}
selectedCheckboxId.current = id;
return modeling.updateProperties(element, {
checkbox2: value
});
}
return <CheckboxEntry
id={ id }
label={ 'zurückgestellt' }
getValue={ getValue }
setValue={ setValue }
/>
}
function checkbox6(props) {
const modeling = useService('modeling');
const { element, id } = props;
const getValue = () => {
return element.businessObject.checkbox6 || false;
}
const setValue = value => {
if (value && selectedCheckboxId.current) {
modeling.updateProperties(element, {
[selectedCheckboxId.current]: false
});
}
selectedCheckboxId.current = id;
return modeling.updateProperties(element, {
checkbox2: value
});
}
return <CheckboxEntry
id={ id }
label={ 'in Überarbeitung' }
getValue={ getValue }
setValue={ setValue }
/>
}
function checkbox7(props) {
const modeling = useService('modeling');
const { element, id } = props;
const getValue = () => {
return element.businessObject.checkbox7 || false;
}
const setValue = value => {
if (value && selectedCheckboxId.current) {
modeling.updateProperties(element, {
[selectedCheckboxId.current]: false
});
}
selectedCheckboxId.current = id;
return modeling.updateProperties(element, {
checkbox2: value
});
}
return <CheckboxEntry
id={ id }
label={ 'außer Kraft gesetzt' }
getValue={ getValue }
setValue={ setValue }
/>
}