Custom toolbar radio button

Author: 0mar-K

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]);
+});

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]
+---

playground/forms/custom-toolbar-radio-button/playground.url

@@ -0,0 +1,2 @@
+[InternetShortcut]
+URL=https://playground.pspdfkit.com/?p=eyJ2IjoxLCJjc3MiOiIvKiBBZGQgeW91ciBDU1MgaGVyZSAqL1xuIiwic2V0dGluZ3MiOnsiZmlsZU5hbWUiOiJiYXNpYy5wZGYifSwianMiOiJsZXQgaW5zdGFuY2UgPSBudWxsO1xuXG5jb25zdCBpdGVtID0ge1xuICB0eXBlOiBcImN1c3RvbVwiLFxuICBpZDogXCJhZGQtcmFkaW8tZ3JvdXBcIixcbiAgdGl0bGU6IFwiQWRkIFJhZGlvIEdyb3VwXCIsXG4gIG9uUHJlc3M6IGFzeW5jICgpID0%252BIHtcbiAgICBjb25zdCByYWRpb1dpZGdldDEgPSBuZXcgTnV0cmllbnRWaWV3ZXIuQW5ub3RhdGlvbnMuV2lkZ2V0QW5ub3RhdGlvbih7XG4gIGlkOiBOdXRyaWVudFZpZXdlci5nZW5lcmF0ZUluc3RhbnRJZCgpLFxuICBwYWdlSW5kZXg6IDAsXG4gIGZvcm1GaWVsZE5hbWU6IFwiTXlGb3JtRmllbGRcIixcbiAgYm91bmRpbmdCb3g6IG5ldyBOdXRyaWVudFZpZXdlci5HZW9tZXRyeS5SZWN0KHtcbiAgICBsZWZ0OiAxMDAsXG4gICAgdG9wOiAxMDAsXG4gICAgd2lkdGg6IDIwLFxuICAgIGhlaWdodDogMjBcbiAgfSlcbn0pO1xuY29uc3QgcmFkaW9XaWRnZXQyID0gbmV3IE51dHJpZW50Vmlld2VyLkFubm90YXRpb25zLldpZGdldEFubm90YXRpb24oe1xuICBpZDogTnV0cmllbnRWaWV3ZXIuZ2VuZXJhdGVJbnN0YW50SWQoKSxcbiAgcGFnZUluZGV4OiAwLFxuICBmb3JtRmllbGROYW1lOiBcIk15Rm9ybUZpZWxkXCIsXG4gIGJvdW5kaW5nQm94OiBuZXcgTnV0cmllbnRWaWV3ZXIuR2VvbWV0cnkuUmVjdCh7XG4gICAgbGVmdDogMTMwLFxuICAgIHRvcDogMTAwLFxuICAgIHdpZHRoOiAyMCxcbiAgICBoZWlnaHQ6IDIwXG4gIH0pXG59KTtcbmNvbnN0IGZvcm1GaWVsZCA9IG5ldyBOdXRyaWVudFZpZXdlci5Gb3JtRmllbGRzLlJhZGlvQnV0dG9uRm9ybUZpZWxkKHtcbiAgbmFtZTogXCJNeUZvcm1GaWVsZFwiLFxuICBhbm5vdGF0aW9uSWRzOiBuZXcgTnV0cmllbnRWaWV3ZXIuSW1tdXRhYmxlLkxpc3QoW3JhZGlvV2lkZ2V0MS5pZCwgcmFkaW9XaWRnZXQyLmlkXSksXG4gIG9wdGlvbnM6IG5ldyBOdXRyaWVudFZpZXdlci5JbW11dGFibGUuTGlzdChbXG4gICAgbmV3IE51dHJpZW50Vmlld2VyLkZvcm1PcHRpb24oeyBsYWJlbDogXCJPcHRpb24gMVwiLCB2YWx1ZTogXCIxXCIgfSksXG4gICAgbmV3IE51dHJpZW50Vmlld2VyLkZvcm1PcHRpb24oeyBsYWJlbDogXCJPcHRpb24gMlwiLCB2YWx1ZTogXCIyXCIgfSlcbiAgXSksXG4gIGRlZmF1bHRWYWx1ZTogXCIxXCJcbn0pO1xuYXdhaXQgaW5zdGFuY2UuY3JlYXRlKFtyYWRpb1dpZGdldDEsIHJhZGlvV2lkZ2V0MiwgZm9ybUZpZWxkXSk7XG4gIH1cbn07XG5cblxuXG5cblxuXG5cbk51dHJpZW50Vmlld2VyLmxvYWQoe1xuICAuLi5iYXNlT3B0aW9ucyxcbiAgdGhlbWU6IE51dHJpZW50Vmlld2VyLlRoZW1lLkRBUkssXG4gIHRvb2xiYXJJdGVtczogWy4uLk51dHJpZW50Vmlld2VyLmRlZmF1bHRUb29sYmFySXRlbXMsIHsgdHlwZTogXCJmb3JtLWNyZWF0b3JcIiB9XVxufSkudGhlbigoX2luc3RhbmNlKSA9PiB7XG4gICAgaW5zdGFuY2UgPSBfaW5zdGFuY2U7XG4gICAgaW5zdGFuY2Uuc2V0VG9vbGJhckl0ZW1zKChpdGVtcykgPT4gWy4uLml0ZW1zLCBpdGVtXSk7XG5cbn0pO1xuXHQifQ%253D%253D