feat: no options text

gjulivan · gjulivan · commit 68800718dfaa · 2025-08-20T14:17:47.000+02:00
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.editorPreview.tsx b/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.editorPreview.tsx
@@ -22,7 +22,8 @@ export const preview = (props: CheckboxRadioSelectionPreviewProps): ReactElement
         labelId: `${id}-label`,
         readOnlyStyle: props.readOnlyStyle,
         ariaRequired: dynamic(false),
-        groupName: dynamic(`${id}-group`)
+        groupName: dynamic(`${id}-group`),
+        emptyOptionText: "NO OPTIONS AVAILABLE"
     };
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.tsx b/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.tsx
@@ -18,13 +18,14 @@ export default function CheckboxRadioSelection(props: CheckboxRadioSelectionCont
         labelId: `${props.id}-label`,
         readOnlyStyle: props.readOnlyStyle,
         ariaRequired: props.ariaRequired,
-        groupName: props.groupName
+        groupName: props.groupName,
+        emptyOptionText: props.emptyOptionText?.value ?? "NO OPTIONS AVAILABLE"
     };
 
     return (
         <div className={`widget-checkbox-radio-selection`}>
             {selector.status === "unavailable" ? (
-                <Placeholder />
+                <Placeholder emptyOptionText={commonProps.emptyOptionText} />
             ) : selector.type === "single" ? (
                 <RadioSelection selector={selector} {...commonProps} />
             ) : (
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.xml b/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.xml
@@ -190,6 +190,14 @@
             <!-- STATIC END-->
             <!-- GENERAL -->
             <propertyGroup caption="General">
+                <property key="emptyOptionText" type="textTemplate" required="false">
+                    <caption>Empty option text</caption>
+                    <description />
+                    <translations>
+                        <translation lang="en_US">NO OPTIONS AVAILABLE</translation>
+                        <translation lang="nl_NL">GEEN OPTIES BESCHIKBAAR</translation>
+                    </translations>
+                </property>
                 <property key="optionsSourceCustomContentType" type="enumeration" defaultValue="no" required="true">
                     <caption>Custom content</caption>
                     <description />
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/components/CheckboxSelection/CheckboxSelection.tsx b/packages/pluggableWidgets/checkbox-radio-selection-web/src/components/CheckboxSelection/CheckboxSelection.tsx
@@ -2,14 +2,16 @@ import classNames from "classnames";
 import { ReactElement, createElement, MouseEvent } from "react";
 import { SelectionBaseProps, MultiSelector } from "../../helpers/types";
 import { CaptionContent } from "../CaptionContent";
+import { Placeholder } from "../Placeholder";
 
 export function CheckboxSelection({
     selector,
     tabIndex = 0,
     inputId,
     ariaRequired,
     readOnlyStyle,
-    groupName
+    groupName,
+    emptyOptionText
 }: SelectionBaseProps<MultiSelector>): ReactElement {
     const options = selector.getOptions();
     const currentIds = selector.currentId || [];
@@ -68,7 +70,7 @@ export function CheckboxSelection({
                     </div>
                 );
             })}
-            {options.length === 0 && <div className="widget-checkbox-radio-selection-no-options">{`<...>`}</div>}
+            {options.length === 0 && <Placeholder emptyOptionText={emptyOptionText} />}
         </div>
     );
 }
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/components/Placeholder.tsx b/packages/pluggableWidgets/checkbox-radio-selection-web/src/components/Placeholder.tsx
@@ -1,9 +1,9 @@
 import { ReactElement, createElement } from "react";
 
-export function Placeholder(): ReactElement {
+export function Placeholder({ emptyOptionText }: { emptyOptionText: string }): ReactElement {
     return (
         <div className="form-control widget-checkbox-radio-selection-placeholder">
-            <div className="widget-checkbox-radio-selection-placeholder-content">Loading...</div>
+            <div className="widget-checkbox-radio-selection-placeholder-content">{emptyOptionText}</div>
         </div>
     );
 }
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/components/RadioSelection/RadioSelection.tsx b/packages/pluggableWidgets/checkbox-radio-selection-web/src/components/RadioSelection/RadioSelection.tsx
@@ -2,14 +2,16 @@ import classNames from "classnames";
 import { ChangeEvent, ReactElement, createElement, MouseEvent } from "react";
 import { SelectionBaseProps, SingleSelector } from "../../helpers/types";
 import { CaptionContent } from "../CaptionContent";
+import { Placeholder } from "../Placeholder";
 
 export function RadioSelection({
     selector,
     tabIndex = 0,
     inputId,
     ariaRequired,
     readOnlyStyle,
-    groupName
+    groupName,
+    emptyOptionText
 }: SelectionBaseProps<SingleSelector>): ReactElement {
     const asSingleCheckbox = selector.controlType === "checkbox";
 
@@ -80,7 +82,7 @@ export function RadioSelection({
                     </div>
                 );
             })}
-            {options.length === 0 && <div className="widget-checkbox-radio-selection-no-options">{`<...>`}</div>}
+            {options.length === 0 && <Placeholder emptyOptionText={emptyOptionText} />}
         </div>
     );
 }
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Association/Preview/AssociationPreviewSelector.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Association/Preview/AssociationPreviewSelector.ts
@@ -1,11 +1,10 @@
-import { SingleSelector, Status, CaptionsProvider, OptionsProvider } from "../../types";
 import {
     CheckboxRadioSelectionPreviewProps,
     OptionsSourceCustomContentTypeEnum
 } from "../../../../typings/CheckboxRadioSelectionProps";
-import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
 import { PreviewCaptionsProvider } from "../../Preview/PreviewCaptionsProvider";
 import { PreviewOptionsProvider } from "../../Preview/PreviewOptionsProvider";
+import { CaptionsProvider, OptionsProvider, SingleSelector, Status } from "../../types";
 import { getCustomCaption } from "../../utils";
 
 export class AssociationPreviewSelector implements SingleSelector {
@@ -24,7 +23,7 @@ export class AssociationPreviewSelector implements SingleSelector {
 
     constructor(props: CheckboxRadioSelectionPreviewProps) {
         this.readOnly = props.readOnly;
-        this.currentId = `single-${generateUUID()}`;
+        this.currentId = `PREVIEW_OPTION`;
         this.customContentType = props.optionsSourceCustomContentType;
         this.readOnly = props.readOnly;
         this.controlType = props.controlType;
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Database/Preview/DatabasePreviewSelector.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Database/Preview/DatabasePreviewSelector.ts
@@ -1,11 +1,10 @@
-import { SingleSelector, Status, CaptionsProvider, OptionsProvider, MultiSelector } from "../../types";
 import {
     CheckboxRadioSelectionPreviewProps,
     OptionsSourceCustomContentTypeEnum
 } from "../../../../typings/CheckboxRadioSelectionProps";
-import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
 import { PreviewCaptionsProvider } from "../../Preview/PreviewCaptionsProvider";
 import { PreviewOptionsProvider } from "../../Preview/PreviewOptionsProvider";
+import { CaptionsProvider, MultiSelector, OptionsProvider, SingleSelector, Status } from "../../types";
 import { getCustomCaption } from "../../utils";
 
 export class DatabasePreviewSelector implements SingleSelector {
@@ -23,7 +22,7 @@ export class DatabasePreviewSelector implements SingleSelector {
     options: OptionsProvider;
 
     constructor(props: CheckboxRadioSelectionPreviewProps) {
-        this.currentId = `single-${generateUUID()}`;
+        this.currentId = `PREVIEW_OPTION`;
         this.customContentType = props.optionsSourceCustomContentType;
         this.readOnly = props.readOnly;
         this.caption = new PreviewCaptionsProvider(new Map(), getCustomCaption(props));
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Preview/PreviewOptionsProvider.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Preview/PreviewOptionsProvider.ts
@@ -27,6 +27,6 @@ export class PreviewOptionsProvider implements OptionsProvider<ObjectItem, BaseO
         throw new Error("Method not implemented.");
     }
     getAll(): string[] {
-        return ["..."];
+        return ["PREVIEW_OPTION"];
     }
 }
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Static/Preview/StaticPreviewSelector.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Static/Preview/StaticPreviewSelector.ts
@@ -1,11 +1,10 @@
-import { SingleSelector, Status, CaptionsProvider, OptionsProvider } from "../../types";
 import {
     CheckboxRadioSelectionPreviewProps,
     OptionsSourceCustomContentTypeEnum
 } from "../../../../typings/CheckboxRadioSelectionProps";
 import { PreviewCaptionsProvider } from "../../Preview/PreviewCaptionsProvider";
 import { PreviewOptionsProvider } from "../../Preview/PreviewOptionsProvider";
-import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
+import { CaptionsProvider, OptionsProvider, SingleSelector, Status } from "../../types";
 import { getCustomCaption } from "../../utils";
 
 export class StaticPreviewSelector implements SingleSelector {
@@ -23,7 +22,7 @@ export class StaticPreviewSelector implements SingleSelector {
     options: OptionsProvider;
 
     constructor(props: CheckboxRadioSelectionPreviewProps) {
-        this.currentId = `single-${generateUUID()}`;
+        this.currentId = `PREVIEW_OPTION`;
         this.customContentType = props.optionsSourceCustomContentType;
         this.readOnly = props.readOnly;
         this.caption = new PreviewCaptionsProvider(new Map(), getCustomCaption(props));
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/types.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/types.ts
@@ -86,4 +86,5 @@ export interface SelectionBaseProps<Selector> {
     tabIndex: number;
     ariaRequired: DynamicValue<boolean>;
     groupName: DynamicValue<string> | undefined;
+    emptyOptionText: string;
 }
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/typings/CheckboxRadioSelectionProps.d.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/typings/CheckboxRadioSelectionProps.d.ts
@@ -58,6 +58,7 @@ export interface CheckboxRadioSelectionContainerProps {
     optionsSourceAssociationDataSource?: ListValue;
     staticAttribute: EditableValue<string | Big | boolean | Date>;
     optionsSourceStaticDataSource: OptionsSourceStaticDataSourceType[];
+    emptyOptionText?: DynamicValue<string>;
     optionsSourceCustomContentType: OptionsSourceCustomContentTypeEnum;
     optionsSourceAssociationCustomContent?: ListWidgetValue;
     optionsSourceDatabaseCustomContent?: ListWidgetValue;
@@ -92,6 +93,7 @@ export interface CheckboxRadioSelectionPreviewProps {
     optionsSourceAssociationDataSource: {} | { caption: string } | { type: string } | null;
     staticAttribute: string;
     optionsSourceStaticDataSource: OptionsSourceStaticDataSourcePreviewType[];
+    emptyOptionText: string;
     optionsSourceCustomContentType: OptionsSourceCustomContentTypeEnum;
     optionsSourceAssociationCustomContent: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };
     optionsSourceDatabaseCustomContent: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };

Original file line number	Diff line number	Diff line change
`@@ -27,6 +27,6 @@ export class PreviewOptionsProvider implements OptionsProvider<ObjectItem, BaseO`
`27`	`27`	`throw new Error("Method not implemented.");`
`28`	`28`	`}`
`29`	`29`	`getAll(): string[] {`
`30`		`- return ["..."];`
	`30`	`+ return ["PREVIEW_OPTION"];`
`31`	`31`	`}`
`32`	`32`	`}`