From f720e9b9dbd24cd7c598c83ae555f1914d36fa2a Mon Sep 17 00:00:00 2001 From: Omar Date: Wed, 7 Jan 2026 00:57:21 +0200 Subject: [PATCH 1/4] Custom toolbar radio button --- .../custom-toolbar-radio-button/index.ts | 71 +++++++++++++++++++ .../playground.mdx | 6 ++ .../playground.url | 2 + 3 files changed, 79 insertions(+) create mode 100644 playground/forms/custom-toolbar-radio-button/index.ts create mode 100644 playground/forms/custom-toolbar-radio-button/playground.mdx create mode 100644 playground/forms/custom-toolbar-radio-button/playground.url diff --git a/playground/forms/custom-toolbar-radio-button/index.ts b/playground/forms/custom-toolbar-radio-button/index.ts new file mode 100644 index 00000000..dfd769b5 --- /dev/null +++ b/playground/forms/custom-toolbar-radio-button/index.ts @@ -0,0 +1,71 @@ +import type { Instance } from "@nutrient-sdk/viewer"; +import { baseOptions } from "../../shared/base-options"; + +let instance: Instance | null = null; + +const item = { + type: "custom", + id: "add-radio-group", + title: "Add Radio Group", + onPress: async () => { + const radioWidget1 = new window.NutrientViewer.Annotations.WidgetAnnotation( + { + id: window.NutrientViewer.generateInstantId(), + pageIndex: 0, + formFieldName: "MyFormField", + boundingBox: new window.NutrientViewer.Geometry.Rect({ + left: 100, + top: 100, + width: 20, + height: 20, + }), + }, + ); + const radioWidget2 = new window.NutrientViewer.Annotations.WidgetAnnotation( + { + id: window.NutrientViewer.generateInstantId(), + pageIndex: 0, + formFieldName: "MyFormField", + boundingBox: new window.NutrientViewer.Geometry.Rect({ + left: 130, + top: 100, + width: 20, + height: 20, + }), + }, + ); + const formField = new window.NutrientViewer.FormFields.RadioButtonFormField( + { + name: "MyFormField", + annotationIds: new window.NutrientViewer.Immutable.List([ + radioWidget1.id, + radioWidget2.id, + ]), + options: new window.NutrientViewer.Immutable.List([ + new window.NutrientViewer.FormOption({ + label: "Option 1", + value: "1", + }), + new window.NutrientViewer.FormOption({ + label: "Option 2", + value: "2", + }), + ]), + defaultValue: "1", + }, + ); + await instance!.create([radioWidget1, radioWidget2, formField]); + }, +}; + +window.NutrientViewer.load({ + ...baseOptions, + theme: window.NutrientViewer.Theme.DARK, + toolbarItems: [ + ...window.NutrientViewer.defaultToolbarItems, + { type: "form-creator" }, + ], +}).then((_instance: Instance) => { + instance = _instance; + instance.setToolbarItems((items) => [...items, item]); +}); diff --git a/playground/forms/custom-toolbar-radio-button/playground.mdx b/playground/forms/custom-toolbar-radio-button/playground.mdx new file mode 100644 index 00000000..6f6244e0 --- /dev/null +++ b/playground/forms/custom-toolbar-radio-button/playground.mdx @@ -0,0 +1,6 @@ +--- +category: forms +title: Add Grouped Radio Buttons with Custom Toolbar Button +description: Create a custom toolbar item that programmatically places pre-grouped radio buttons with a single click, avoiding manual renaming. +keywords: [forms, radio-button, custom-toolbar, toolbar-item, widget, form-field, radio-group, grouped radio-buttons] +--- diff --git a/playground/forms/custom-toolbar-radio-button/playground.url b/playground/forms/custom-toolbar-radio-button/playground.url new file mode 100644 index 00000000..dcaab858 --- /dev/null +++ b/playground/forms/custom-toolbar-radio-button/playground.url @@ -0,0 +1,2 @@ +[InternetShortcut] +URL=https://playground.pspdfkit.com/?p=eyJ2IjoxLCJjc3MiOiIvKiBBZGQgeW91ciBDU1MgaGVyZSAqL1xuIiwic2V0dGluZ3MiOnsiZmlsZU5hbWUiOiJiYXNpYy5wZGYifSwianMiOiJsZXQgaW5zdGFuY2UgPSBudWxsO1xuXG5jb25zdCBpdGVtID0ge1xuICB0eXBlOiBcImN1c3RvbVwiLFxuICBpZDogXCJhZGQtcmFkaW8tZ3JvdXBcIixcbiAgdGl0bGU6IFwiQWRkIFJhZGlvIEdyb3VwXCIsXG4gIG9uUHJlc3M6IGFzeW5jICgpID0%252BIHtcbiAgICBjb25zdCByYWRpb1dpZGdldDEgPSBuZXcgTnV0cmllbnRWaWV3ZXIuQW5ub3RhdGlvbnMuV2lkZ2V0QW5ub3RhdGlvbih7XG4gIGlkOiBOdXRyaWVudFZpZXdlci5nZW5lcmF0ZUluc3RhbnRJZCgpLFxuICBwYWdlSW5kZXg6IDAsXG4gIGZvcm1GaWVsZE5hbWU6IFwiTXlGb3JtRmllbGRcIixcbiAgYm91bmRpbmdCb3g6IG5ldyBOdXRyaWVudFZpZXdlci5HZW9tZXRyeS5SZWN0KHtcbiAgICBsZWZ0OiAxMDAsXG4gICAgdG9wOiAxMDAsXG4gICAgd2lkdGg6IDIwLFxuICAgIGhlaWdodDogMjBcbiAgfSlcbn0pO1xuY29uc3QgcmFkaW9XaWRnZXQyID0gbmV3IE51dHJpZW50Vmlld2VyLkFubm90YXRpb25zLldpZGdldEFubm90YXRpb24oe1xuICBpZDogTnV0cmllbnRWaWV3ZXIuZ2VuZXJhdGVJbnN0YW50SWQoKSxcbiAgcGFnZUluZGV4OiAwLFxuICBmb3JtRmllbGROYW1lOiBcIk15Rm9ybUZpZWxkXCIsXG4gIGJvdW5kaW5nQm94OiBuZXcgTnV0cmllbnRWaWV3ZXIuR2VvbWV0cnkuUmVjdCh7XG4gICAgbGVmdDogMTMwLFxuICAgIHRvcDogMTAwLFxuICAgIHdpZHRoOiAyMCxcbiAgICBoZWlnaHQ6IDIwXG4gIH0pXG59KTtcbmNvbnN0IGZvcm1GaWVsZCA9IG5ldyBOdXRyaWVudFZpZXdlci5Gb3JtRmllbGRzLlJhZGlvQnV0dG9uRm9ybUZpZWxkKHtcbiAgbmFtZTogXCJNeUZvcm1GaWVsZFwiLFxuICBhbm5vdGF0aW9uSWRzOiBuZXcgTnV0cmllbnRWaWV3ZXIuSW1tdXRhYmxlLkxpc3QoW3JhZGlvV2lkZ2V0MS5pZCwgcmFkaW9XaWRnZXQyLmlkXSksXG4gIG9wdGlvbnM6IG5ldyBOdXRyaWVudFZpZXdlci5JbW11dGFibGUuTGlzdChbXG4gICAgbmV3IE51dHJpZW50Vmlld2VyLkZvcm1PcHRpb24oeyBsYWJlbDogXCJPcHRpb24gMVwiLCB2YWx1ZTogXCIxXCIgfSksXG4gICAgbmV3IE51dHJpZW50Vmlld2VyLkZvcm1PcHRpb24oeyBsYWJlbDogXCJPcHRpb24gMlwiLCB2YWx1ZTogXCIyXCIgfSlcbiAgXSksXG4gIGRlZmF1bHRWYWx1ZTogXCIxXCJcbn0pO1xuYXdhaXQgaW5zdGFuY2UuY3JlYXRlKFtyYWRpb1dpZGdldDEsIHJhZGlvV2lkZ2V0MiwgZm9ybUZpZWxkXSk7XG4gIH1cbn07XG5cblxuXG5cblxuXG5cbk51dHJpZW50Vmlld2VyLmxvYWQoe1xuICAuLi5iYXNlT3B0aW9ucyxcbiAgdGhlbWU6IE51dHJpZW50Vmlld2VyLlRoZW1lLkRBUkssXG4gIHRvb2xiYXJJdGVtczogWy4uLk51dHJpZW50Vmlld2VyLmRlZmF1bHRUb29sYmFySXRlbXMsIHsgdHlwZTogXCJmb3JtLWNyZWF0b3JcIiB9XVxufSkudGhlbigoX2luc3RhbmNlKSA9PiB7XG4gICAgaW5zdGFuY2UgPSBfaW5zdGFuY2U7XG4gICAgaW5zdGFuY2Uuc2V0VG9vbGJhckl0ZW1zKChpdGVtcykgPT4gWy4uLml0ZW1zLCBpdGVtXSk7XG5cbn0pO1xuXHQifQ%253D%253D From f3efdcfac0929307210f7fd51f2626533f45b6b6 Mon Sep 17 00:00:00 2001 From: Omar Date: Thu, 8 Jan 2026 02:36:04 +0200 Subject: [PATCH 2/4] Updating the example's ts logic Added an explicit if (!instance) return --- playground/forms/custom-toolbar-radio-button/index.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/playground/forms/custom-toolbar-radio-button/index.ts b/playground/forms/custom-toolbar-radio-button/index.ts index dfd769b5..d2f086a9 100644 --- a/playground/forms/custom-toolbar-radio-button/index.ts +++ b/playground/forms/custom-toolbar-radio-button/index.ts @@ -8,6 +8,8 @@ const item = { id: "add-radio-group", title: "Add Radio Group", onPress: async () => { + if (!instance) return; + const radioWidget1 = new window.NutrientViewer.Annotations.WidgetAnnotation( { id: window.NutrientViewer.generateInstantId(), @@ -54,7 +56,7 @@ const item = { defaultValue: "1", }, ); - await instance!.create([radioWidget1, radioWidget2, formField]); + await instance.create([radioWidget1, radioWidget2, formField]); }, }; From f0066fee9443758efe2c06928bb2006c0b46fa14 Mon Sep 17 00:00:00 2001 From: Omar <109966465+0mar-K@users.noreply.github.com> Date: Mon, 19 Jan 2026 23:00:35 +0200 Subject: [PATCH 3/4] Used optional chaining for instance in create --- playground/forms/custom-toolbar-radio-button/index.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/playground/forms/custom-toolbar-radio-button/index.ts b/playground/forms/custom-toolbar-radio-button/index.ts index d2f086a9..f0dcc18f 100644 --- a/playground/forms/custom-toolbar-radio-button/index.ts +++ b/playground/forms/custom-toolbar-radio-button/index.ts @@ -8,8 +8,6 @@ const item = { id: "add-radio-group", title: "Add Radio Group", onPress: async () => { - if (!instance) return; - const radioWidget1 = new window.NutrientViewer.Annotations.WidgetAnnotation( { id: window.NutrientViewer.generateInstantId(), @@ -23,6 +21,7 @@ const item = { }), }, ); + const radioWidget2 = new window.NutrientViewer.Annotations.WidgetAnnotation( { id: window.NutrientViewer.generateInstantId(), @@ -36,6 +35,7 @@ const item = { }), }, ); + const formField = new window.NutrientViewer.FormFields.RadioButtonFormField( { name: "MyFormField", @@ -56,7 +56,8 @@ const item = { defaultValue: "1", }, ); - await instance.create([radioWidget1, radioWidget2, formField]); + + await instance?.create([radioWidget1, radioWidget2, formField]); }, }; From 180c7e0203f1882de21ba7c02cfeebf9c6221937 Mon Sep 17 00:00:00 2001 From: Omar <109966465+0mar-K@users.noreply.github.com> Date: Mon, 19 Jan 2026 23:01:13 +0200 Subject: [PATCH 4/4] Refine description for grouped radio buttons Updated the description to clarify that radio buttons are grouped. --- playground/forms/custom-toolbar-radio-button/playground.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/playground/forms/custom-toolbar-radio-button/playground.mdx b/playground/forms/custom-toolbar-radio-button/playground.mdx index 6f6244e0..acedc9cf 100644 --- a/playground/forms/custom-toolbar-radio-button/playground.mdx +++ b/playground/forms/custom-toolbar-radio-button/playground.mdx @@ -1,6 +1,7 @@ --- category: forms title: Add Grouped Radio Buttons with Custom Toolbar Button -description: Create a custom toolbar item that programmatically places pre-grouped radio buttons with a single click, avoiding manual renaming. +description: Create a custom toolbar item that programmatically places grouped radio buttons with a single click, avoiding manual renaming. keywords: [forms, radio-button, custom-toolbar, toolbar-item, widget, form-field, radio-group, grouped radio-buttons] --- +