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 0000000..d2f086a --- /dev/null +++ b/playground/forms/custom-toolbar-radio-button/index.ts @@ -0,0 +1,73 @@ +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 () => { + if (!instance) return; + + 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 0000000..6f6244e --- /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 0000000..dcaab85 --- /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