From df194ab276379178c051bf25b6e3020efc78bf13 Mon Sep 17 00:00:00 2001 From: Diljohn Singh Date: Fri, 23 Oct 2026 14:45:24 +0200 Subject: [PATCH 1/2] Adding pluggable widget release docs --- .../create-a-pluggable-widget-one.md | 12 ++++++++++++ .../create-a-pluggable-widget-one.md | 12 ++++++++++++ .../create-a-pluggable-widget-one.md | 14 +++++++++++++- 3 files changed, 37 insertions(+), 1 deletion(-) diff --git a/content/en/docs/howto/extensibility/pluggable-widgets/create-a-pluggable-widget-one.md b/content/en/docs/howto/extensibility/pluggable-widgets/create-a-pluggable-widget-one.md index 4e9fe259c8d..ebe6e276915 100644 --- a/content/en/docs/howto/extensibility/pluggable-widgets/create-a-pluggable-widget-one.md +++ b/content/en/docs/howto/extensibility/pluggable-widgets/create-a-pluggable-widget-one.md @@ -356,6 +356,18 @@ Our widget now looks like a Mendix widget, but does not behave like one yet. Whi * By defining a callback prop, a component advertises what data it is able to provide. Consumers of the callback get to decide how to respond to the availability of the new data. In this case we decided in `TextBox` that each time `TextInput` has new data, it is given to `props.textAttribute.setValue()`. +## Building & Releasing Your Widget + +Development build tested successfully. You can now create a release build to bundle with your module or publish the widget to the Marketplace. + +{{% alert color="info" %}}**Dev Build vs. Release Build**: Release builds are minified, optimized, and stripped of heavy console logging/source maps for optimal runtime performance in production. {{% /alert %}} + +1. Run `npm run prerelease` to scan for any linting errors. +1. Fix any errors that are found. +1. Run `npm run release` to create a release build. +1. Locate the generated `.mpk` file at `{widgetName}/dist/{version}/{widgetName}.mpk`. +1. Use this `.mpk` file for the Marketplace release or include it in your module for production. + Congratulations, you have now made a fully functional input widget! Continue with the next tutorial to learn how to add validation feedback, custom validations, and an on-change event activity. You will also learn how to handle a read-only state, improve web accessibility, and make a Studio Pro preview. diff --git a/content/en/docs/howto10/extensibility/pluggable-widgets/create-a-pluggable-widget-one.md b/content/en/docs/howto10/extensibility/pluggable-widgets/create-a-pluggable-widget-one.md index dc369be8623..04774caa628 100644 --- a/content/en/docs/howto10/extensibility/pluggable-widgets/create-a-pluggable-widget-one.md +++ b/content/en/docs/howto10/extensibility/pluggable-widgets/create-a-pluggable-widget-one.md @@ -357,6 +357,18 @@ Our widget now looks like a Mendix widget, but does not behave like one yet. Whi * By defining a callback prop, a component advertises what data it is able to provide. Consumers of the callback get to decide how to respond to the availability of the new data. In this case we decided in `TextBox` that each time `TextInput` has new data, it is given to `props.textAttribute.setValue()`. +## Building & Releasing Your Widget + +Development build tested successfully. You can now create a release build to bundle with your module or publish the widget to the Marketplace. + +{{% alert color="info" %}}**Dev Build vs. Release Build**: Release builds are minified, optimized, and stripped of heavy console logging/source maps for optimal runtime performance in production. {{% /alert %}} + +1. Run `npm run prerelease` to scan for any linting errors. +1. Fix any errors that are found. +1. Run `npm run release` to create a release build. +1. Locate the generated `.mpk` file at `{widgetName}/dist/{version}/{widgetName}.mpk`. +1. Use this `.mpk` file for the Marketplace release or include it in your module for production. + Congratulations, you have now made a fully functional input widget! Continue with the next tutorial to learn how to add validation feedback, custom validations, and an on-change event activity. You will also learn how to handle a read-only state, improve web accessibility, and make a Studio Pro preview. diff --git a/content/en/docs/howto9/extensibility/pluggable-widgets/create-a-pluggable-widget-one.md b/content/en/docs/howto9/extensibility/pluggable-widgets/create-a-pluggable-widget-one.md index 8ed5e2306cb..c983a65b9ed 100644 --- a/content/en/docs/howto9/extensibility/pluggable-widgets/create-a-pluggable-widget-one.md +++ b/content/en/docs/howto9/extensibility/pluggable-widgets/create-a-pluggable-widget-one.md @@ -384,9 +384,21 @@ The value from the attribute can be displayed and updated using the other input, * The `onUpdate` function is optional and it should be checked for availability before executing it * The custom widget TextBox will still not pass text to the Text box widget after this step—it will gain this functionality in [Build a Text Box Pluggable Widget: Part 2 (Advanced)](/howto9/extensibility/create-a-pluggable-widget-two/). +## Building & Releasing Your Widget + +Development build tested successfully. You can now create a release build to bundle with your module or publish the widget to the Marketplace. + +{{% alert color="info" %}}**Dev Build vs. Release Build**: Release builds are minified, optimized, and stripped of heavy console logging/source maps for optimal runtime performance in production. {{% /alert %}} + +1. Run `npm run prerelease` to scan for any linting errors. +1. Fix any errors that are found. +1. Run `npm run release` to create a release build. +1. Locate the generated `.mpk` file at `{widgetName}/dist/{version}/{widgetName}.mpk`. +1. Use this `.mpk` file for the Marketplace release or include it in your module for production. + Congratulations, you have now made a fully functional input widget! -Continue with the next tutorial to learn how to add validation feedback, custom validations, and an on-change event activity. You will also learn how to handle a read-only state, improve web accessibility, and make a Mendix Studio Pro preview. +Continue with the next tutorial to learn how to add validation feedback, custom validations, and an on-change event activity. You will also learn how to handle a read-only state, improve web accessibility, and make a Studio Pro preview. ## Read More From c99c11eaace3ee4caa8421b5a26f2e2661679105 Mon Sep 17 00:00:00 2001 From: ConnorLand <47385345+ConnorLand@users.noreply.github.com> Date: Fri, 23 Oct 2026 15:09:52 +0200 Subject: [PATCH 2/2] format --- .../pluggable-widgets/create-a-pluggable-widget-one.md | 6 +++--- .../pluggable-widgets/create-a-pluggable-widget-one.md | 6 +++--- .../pluggable-widgets/create-a-pluggable-widget-one.md | 4 ++-- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/content/en/docs/howto/extensibility/pluggable-widgets/create-a-pluggable-widget-one.md b/content/en/docs/howto/extensibility/pluggable-widgets/create-a-pluggable-widget-one.md index ebe6e276915..4daa65c9184 100644 --- a/content/en/docs/howto/extensibility/pluggable-widgets/create-a-pluggable-widget-one.md +++ b/content/en/docs/howto/extensibility/pluggable-widgets/create-a-pluggable-widget-one.md @@ -97,7 +97,7 @@ There is also a watcher available that will rebuild your widget as you make chan ### Using the Widget -When the build script completes it will package your widget as a `.mpk` file and copy it to the `widgets/` directory in your Mendix app. Now that the generator has finished its job it is time to use the widget in Studio Pro. To use the widget, do the following: +When the build script completes it will package your widget as a *.mpk* file and copy it to the `widgets/` directory in your Mendix app. Now that the generator has finished its job it is time to use the widget in Studio Pro. To use the widget, do the following: 1. To find your widget for the first time, you need to refresh the file system Studio Pro is looking at. Use F4 or select **App** > **Synchronize Project Directory** from the Studio Pro menu bar. 1. Open the **Home_Web** page in the page editor. @@ -365,8 +365,8 @@ Development build tested successfully. You can now create a release build to bun 1. Run `npm run prerelease` to scan for any linting errors. 1. Fix any errors that are found. 1. Run `npm run release` to create a release build. -1. Locate the generated `.mpk` file at `{widgetName}/dist/{version}/{widgetName}.mpk`. -1. Use this `.mpk` file for the Marketplace release or include it in your module for production. +1. Locate the generated *.mpk* file at `{widgetName}/dist/{version}/{widgetName}.mpk`. +1. Use this *.mpk* file for the Marketplace release or include it in your module for production. Congratulations, you have now made a fully functional input widget! diff --git a/content/en/docs/howto10/extensibility/pluggable-widgets/create-a-pluggable-widget-one.md b/content/en/docs/howto10/extensibility/pluggable-widgets/create-a-pluggable-widget-one.md index 04774caa628..027d73a8b3a 100644 --- a/content/en/docs/howto10/extensibility/pluggable-widgets/create-a-pluggable-widget-one.md +++ b/content/en/docs/howto10/extensibility/pluggable-widgets/create-a-pluggable-widget-one.md @@ -101,7 +101,7 @@ NPM version 7 changed the resolution behavior of peerDependencies. Try adding `- ### Using the Widget -When the build script completes it will package your widget as a `.mpk` file and copy it to the `widgets/` directory in your Mendix app. Now that the generator has finished its job it is time to use the widget in Studio Pro. To use the widget, do the following: +When the build script completes it will package your widget as a *.mpk* file and copy it to the `widgets/` directory in your Mendix app. Now that the generator has finished its job it is time to use the widget in Studio Pro. To use the widget, do the following: 1. To find your widget for the first time, you need to refresh the file system Studio Pro is looking at. Use F4 or select **App** > **Synchronize Project Directory** from the Studio Pro menu bar. 1. Open the **Home_Web** page in the page editor. @@ -366,8 +366,8 @@ Development build tested successfully. You can now create a release build to bun 1. Run `npm run prerelease` to scan for any linting errors. 1. Fix any errors that are found. 1. Run `npm run release` to create a release build. -1. Locate the generated `.mpk` file at `{widgetName}/dist/{version}/{widgetName}.mpk`. -1. Use this `.mpk` file for the Marketplace release or include it in your module for production. +1. Locate the generated *.mpk* file at `{widgetName}/dist/{version}/{widgetName}.mpk`. +1. Use this *.mpk* file for the Marketplace release or include it in your module for production. Congratulations, you have now made a fully functional input widget! diff --git a/content/en/docs/howto9/extensibility/pluggable-widgets/create-a-pluggable-widget-one.md b/content/en/docs/howto9/extensibility/pluggable-widgets/create-a-pluggable-widget-one.md index c983a65b9ed..4078989cb44 100644 --- a/content/en/docs/howto9/extensibility/pluggable-widgets/create-a-pluggable-widget-one.md +++ b/content/en/docs/howto9/extensibility/pluggable-widgets/create-a-pluggable-widget-one.md @@ -393,8 +393,8 @@ Development build tested successfully. You can now create a release build to bun 1. Run `npm run prerelease` to scan for any linting errors. 1. Fix any errors that are found. 1. Run `npm run release` to create a release build. -1. Locate the generated `.mpk` file at `{widgetName}/dist/{version}/{widgetName}.mpk`. -1. Use this `.mpk` file for the Marketplace release or include it in your module for production. +1. Locate the generated *.mpk* file at `{widgetName}/dist/{version}/{widgetName}.mpk`. +1. Use this *.mpk* file for the Marketplace release or include it in your module for production. Congratulations, you have now made a fully functional input widget!