Porting widget from 5.x to 6.x

Hi,
I am trying to port a couple of widgets to mapp 6.x but I run into similiar issue like @florent.boissadier in this thread.

I have a very basic example where I simply add a new method to directly change the back color of an input widget. I try to inherit the standard input widget and use the standard output widget for orientation but it seems like you can’t use the code in the same way that it worked before. Any hints would be great. The widget code is

'use strict';
define(['widgets/brease/NumericInput/NumericInput',
    'brease',
    'widgets/brXtended/NumericInput/libs/config'
], function (NumericInput, { decorators: { LanguageDependency, MeasurementSystemDependency } }, Config) {

    /**
     * @class widgets.brXtended.NumericInput
     * #Description
     * Input field for numeric values  
     * To edit values, an window for numeric input (=NumPad) will be shown  
     *    
     * @extends widgets.brease.NumericInput
     *
     * @aside example numinout
     *
     * @iatMeta category:Category
     * Numeric
     * @iatMeta description:short
     * Eingabe eines Wertes
     * @iatMeta description:de
     * Ermöglicht dem Benutzer einen numerischen Wert einzugeben
     * @iatMeta description:en
     * Enables the user to enter a numeric value
     */

    /**
     * @htmltag examples
     * Simple Code example
     *
     *     <div id="numInput01" data-brease-widget="widgets/brXtended/NumericInput"></div>
     *
     */

    /**
     * @method getValue
     * @hide
     */

    // Widget error numbers
    const err_unkown = 10000;
    const err_invalid_color = 10001;

    var defaultSettings = Config;

    var WidgetClass = NumericInput.extend(function NumericInput() {
        SuperClass.apply(this, arguments);
    }, defaultSettings);

    var p = WidgetClass.prototype;

    p.init = function () {
        if (this.settings.omitClass !== true) {
            this.addInitialClass('brXtendedNumericInput');
        }
        // breaseNumericInput css class should not be added
        this.settings.omitClass = true;

        NumericInput.prototype.init.call(this);
    };

     /**
     * @method setBackColorExt
     * @iatStudioExposed
     * Sets the back color of the widget.
     * @param {String} value The back color to be set
     */
    p.setBackColorExt = function (value) {
        var widget = this;
        var s = new Option().style;
        s.color = value;

        if (s.color !== ''){
            this.el.css('background-color', value);
        }
        else{
            widget._errorHandling(err_invalid_color);
        }
    };

    p._errorHandling = function _errorHandling(code) {
        console.log("NumericInput Error:" + code);

        var widget = this;
        /**
        * @event OnError
        * Fired when there is an error on the operation.
        * @iatStudioExposed
        * @param {Integer} result Number of error transmitted by the mapp component.
        */
        var ev = widget.createEvent('OnError', { result: code });
        if (ev !== undefined) {
            ev.dispatch();
        }

        // Send error to PLC logger
        if (!brease.config.editMode) {
            var m = 'Error ' + code + ' in brXtended on page ' + widget.settings.parentContentId +  ' at widget ' + this.elem.id;
            brease.loggerService.log(Enum.EventLoggerId.CLIENT_SCRIPT_FAIL, Enum.EventLoggerCustomer.BUR, Enum.EventLoggerVerboseLevel.OFF, Enum.EventLoggerSeverity.ERROR, [], m);
        }
    };

    /**
     * @method openNumPadExt
     * @iatStudioExposed
     * Opens the numeric keypad.
     */
    p.openNumPadExt = function () {
        this._showNumPad(this);
    };

    p._createUnitEl = function () {
        return $('<span></span>')
            .addClass('breaseNumericOutput_unit');
    };
    p._onFocusIn = function () {
        if (this.isDisabled === true) {
            this.inputEl.blur();
        } else {
            this.focusInTime = Date.now();
            this.el.addClass('active');
        }
    };
    return MeasurementSystemDependency.decorate(LanguageDependency.decorate(WidgetClass, false), true);

});

and the error message is

#	Category	Date/Time	Description	Error	Position	File
5	Error	06.05.2025 09:52:25,7689	C:\Program Files (x86)\BrAutomation\AS6\AS\TechnologyPackages\mappView\6.1.1\IATC\jsBuild\node_modules\.bin>IF "x86" == "AMD64" (			
6	Error	06.05.2025 09:52:25,7815	REM running under 64-bit CMD.EXE on 64-bit Windows  			
7	Error	06.05.2025 09:52:25,7845	 goto 64BIT 			
8	Error	06.05.2025 09:52:25,7845	)  ELSE (IF "x86" == "x86" IF "AMD64" == "AMD64" (			
9	Error	06.05.2025 09:52:25,7845	REM running under 32-bit CMD.EXE on 64-bit Windows...  			
10	Error	06.05.2025 09:52:25,7860	 goto 64BIT 			
11	Error	06.05.2025 09:52:25,7860	)  ELSE (			
12	Error	06.05.2025 09:52:25,7870	REM running under 32-bit CMD.EXE on 32-bit Windows...  			
13	Error	06.05.2025 09:52:25,7870	 goto 32BIT 			
14	Error	06.05.2025 09:52:25,7880	) ) 			
15	Error	06.05.2025 09:52:25,7880	grunt init - wwwRoot=C:/Program Files (x86)/BrAutomation/AS6/AS/TechnologyPackages/mappView/6.1.1/IATC/data/wwwRoot			
16	Error	06.05.2025 09:52:25,7890	Running "libraryBuild:C\:\Temp\mappViewSample1\Temp\mappView\Widgets\temp\build.json" (libraryBuild) task			
17	Error	06.05.2025 09:52:25,7890	Running "webpack:cwidgetsAS" (webpack) task			
18	Error	06.05.2025 09:52:25,7900	assets by status 11.3 KiB [cached] 1 asset			
19	Error	06.05.2025 09:52:25,7900	cacheable modules 8.1 KiB			
20	Error	06.05.2025 09:52:25,7910	  modules by path ../../../../../../../../../Temp/mappViewSample1/Logical/mappView/Widgets/brXtend...(truncated) 7.51 KiB			
21	Error	06.05.2025 09:52:25,7910	    ../../../../../../../../../Temp/mappViewSample1/Logical/mappView/Widgets/brXtend...(truncated) 3.7 KiB [built] [code generated]			
22	Error	06.05.2025 09:52:25,7940	    ../../../../../../../../../Temp/mappViewSample1/Logical/mappView/Widgets/brXtend...(truncated) 98 bytes [built] [code generated]			
23	Error	06.05.2025 09:52:25,7950	    ../../../../../../../../../Temp/mappViewSample1/Logical/mappView/Widgets/brXtend...(truncated) 3.72 KiB [built] [code generated]			
24	Error	06.05.2025 09:52:25,7956	  ../../../../../../../../../Temp/mappViewSample1/Temp/mappView/Widge...(truncated) 314 bytes [built] [code generated]			
25	Error	06.05.2025 09:52:25,7956	  ../../../../../../../../../Temp/mappViewSample1/Logical/mappView/widgets/brXtend...(truncated) 288 bytes [built] [code generated]			
26	Error	06.05.2025 09:52:25,7956	external "lib_brease" 42 bytes [built] [code generated]			
27	Error	06.05.2025 09:52:25,7966	external "jQuery" 42 bytes [built] [code generated]			
28	Error	06.05.2025 09:52:25,7976	external "lib_widgets" 42 bytes [built] [code generated]			
29	Error	06.05.2025 09:52:25,7976	ERROR in ../../../../../../../../../Temp/mappViewSample1/Logical/mappView/Widgets/brXtended/NumericInput/NumericInput.js 			
30	Error	06.05.2025 09:52:25,7986	Module not found: Error: Can't resolve 'widgets/brease/NumericInput/NumericInput' in 'C:\Temp\mappViewSample1\Logical\mappView\Widgets\brXtended\NumericInput'			
31	Error	06.05.2025 09:52:25,7996	resolve 'widgets/brease/NumericInput/NumericInput' in 'C:\Temp\mappViewSample1\Logical\mappView\Widgets\brXtended\NumericInput'			
32	Error	06.05.2025 09:52:25,8006	  Parsed request is a module			
33	Error	06.05.2025 09:52:25,8006	  No description file found in C:\Temp\mappViewSample1\Logical\mappView\Widgets\brXtended\NumericInput or above			
34	Error	06.05.2025 09:52:25,8016	  resolve as module			
35	Error	06.05.2025 09:52:25,8016	    looking for modules in C:\Temp\mappViewSample1\Logical\mappView\Widgets\brXtended\NumericInput			
36	Error	06.05.2025 09:52:25,8026	      C:\Temp\mappViewSample1\Logical\mappView\Widgets\brXtended\NumericInput\widgets doesn't exist			
37	Error	06.05.2025 09:52:25,8036	    looking for modules in C:\Temp\mappViewSample1\Logical\mappView\Widgets\brXtended			
38	Error	06.05.2025 09:52:25,8036	      C:\Temp\mappViewSample1\Logical\mappView\Widgets\brXtended\widgets doesn't exist			
39	Error	06.05.2025 09:52:25,8046	    looking for modules in C:\Temp\mappViewSample1\Logical\mappView\Widgets			
40	Error	06.05.2025 09:52:25,8046	      C:\Temp\mappViewSample1\Logical\mappView\Widgets\widgets doesn't exist			
41	Error	06.05.2025 09:52:25,8072	    looking for modules in C:\Temp\mappViewSample1\Logical\mappView			
42	Error	06.05.2025 09:52:25,8081	      existing directory C:\Temp\mappViewSample1\Logical\mappView\widgets			
43	Error	06.05.2025 09:52:25,8091	        No description file found in C:\Temp\mappViewSample1\Logical\mappView\widgets or above			
44	Error	06.05.2025 09:52:25,8101	        No description file found in C:\Temp\mappViewSample1\Logical\mappView\widgets\brease\NumericInput or above			
45	Error	06.05.2025 09:52:25,8112	        no extension			
46	Error	06.05.2025 09:52:25,8112	          C:\Temp\mappViewSample1\Logical\mappView\widgets\brease\NumericInput\NumericInput doesn't exist			
47	Error	06.05.2025 09:52:25,8122	        .js			
48	Error	06.05.2025 09:52:25,8132	          C:\Temp\mappViewSample1\Logical\mappView\widgets\brease\NumericInput\NumericInput.js doesn't exist			
49	Error	06.05.2025 09:52:25,8132	        .json			
50	Error	06.05.2025 09:52:25,8141	          C:\Temp\mappViewSample1\Logical\mappView\widgets\brease\NumericInput\NumericInput.json doesn't exist			
51	Error	06.05.2025 09:52:25,8141	        .wasm			
52	Error	06.05.2025 09:52:25,8156	          C:\Temp\mappViewSample1\Logical\mappView\widgets\brease\NumericInput\NumericInput.wasm doesn't exist			
53	Error	06.05.2025 09:52:25,8156	        as directory			
54	Error	06.05.2025 09:52:25,8167	          C:\Temp\mappViewSample1\Logical\mappView\widgets\brease\NumericInput\NumericInput doesn't exist			
55	Error	06.05.2025 09:52:25,8176	    looking for modules in C:\Temp\mappViewSample1\Logical			
56	Error	06.05.2025 09:52:25,8176	      C:\Temp\mappViewSample1\Logical\widgets doesn't exist			
57	Error	06.05.2025 09:52:25,8187	    looking for modules in C:\Temp\mappViewSample1			
58	Error	06.05.2025 09:52:25,8196	      C:\Temp\mappViewSample1\widgets doesn't exist			
59	Error	06.05.2025 09:52:25,8196	    looking for modules in C:\Temp			
60	Error	06.05.2025 09:52:25,8206	      C:\Temp\widgets doesn't exist			
61	Error	06.05.2025 09:52:25,8216	    looking for modules in C:\			
62	Error	06.05.2025 09:52:25,8216	      C:\widgets doesn't exist			
63	Error	06.05.2025 09:52:25,8227	    looking for modules in C:\Temp\mappViewSample1\Logical\mappView\Widgets			
64	Error	06.05.2025 09:52:25,8236	      C:\Temp\mappViewSample1\Logical\mappView\Widgets\widgets doesn't exist			
65	Error	06.05.2025 09:52:25,8247	    looking for modules in C:\Temp\mappViewSample1\Temp\mappView\Widgets			
66	Error	06.05.2025 09:52:25,8247	      C:\Temp\mappViewSample1\Temp\mappView\Widgets\widgets doesn't exist			
67	Error	06.05.2025 09:52:25,8263	 @ ../../../../../../../../../Temp/mappViewSample1/Temp/mappView/Widgets/cwidgets.js			
68	Error	06.05.2025 09:52:25,8263	ERROR in ../../../../../../../../../Temp/mappViewSample1/Logical/mappView/widgets/brXtended/NumericInput/libs/config.js 			
69	Error	06.05.2025 09:52:25,8273	Module not found: Error: Can't resolve 'brease/enum/Enum' in 'C:\Temp\mappViewSample1\Logical\mappView\widgets\brXtended\NumericInput\libs'			
70	Error	06.05.2025 09:52:25,8283	resolve 'brease/enum/Enum' in 'C:\Temp\mappViewSample1\Logical\mappView\widgets\brXtended\NumericInput\libs'			
71	Error	06.05.2025 09:52:25,8283	  Parsed request is a module			
72	Error	06.05.2025 09:52:25,8293	  No description file found in C:\Temp\mappViewSample1\Logical\mappView\widgets\brXtended\NumericInput\libs or above			
73	Error	06.05.2025 09:52:25,8293	  resolve as module			
74	Error	06.05.2025 09:52:25,8303	    looking for modules in C:\Temp\mappViewSample1\Logical\mappView\widgets\brXtended\NumericInput\libs			
75	Error	06.05.2025 09:52:25,8313	      C:\Temp\mappViewSample1\Logical\mappView\widgets\brXtended\NumericInput\libs\brease doesn't exist			
76	Error	06.05.2025 09:52:25,8313	    looking for modules in C:\Temp\mappViewSample1\Logical\mappView\widgets\brXtended\NumericInput			
77	Error	06.05.2025 09:52:25,8323	      C:\Temp\mappViewSample1\Logical\mappView\widgets\brXtended\NumericInput\brease doesn't exist			
78	Error	06.05.2025 09:52:25,8333	    looking for modules in C:\Temp\mappViewSample1\Logical\mappView\widgets\brXtended			
79	Error	06.05.2025 09:52:25,8333	      C:\Temp\mappViewSample1\Logical\mappView\widgets\brXtended\brease doesn't exist			
80	Error	06.05.2025 09:52:25,8343	    looking for modules in C:\Temp\mappViewSample1\Logical\mappView\widgets			
81	Error	06.05.2025 09:52:25,8343	      C:\Temp\mappViewSample1\Logical\mappView\widgets\brease doesn't exist			
82	Error	06.05.2025 09:52:25,8343	    looking for modules in C:\Temp\mappViewSample1\Logical\mappView			
83	Error	06.05.2025 09:52:25,8359	      C:\Temp\mappViewSample1\Logical\mappView\brease doesn't exist			
84	Error	06.05.2025 09:52:25,8368	    looking for modules in C:\Temp\mappViewSample1\Logical			
85	Error	06.05.2025 09:52:25,8368	      C:\Temp\mappViewSample1\Logical\brease doesn't exist			
86	Error	06.05.2025 09:52:25,8378	    looking for modules in C:\Temp\mappViewSample1			
87	Error	06.05.2025 09:52:25,8388	      C:\Temp\mappViewSample1\brease doesn't exist			
88	Error	06.05.2025 09:52:25,8388	    looking for modules in C:\Temp			
89	Error	06.05.2025 09:52:25,8398	      C:\Temp\brease doesn't exist			
90	Error	06.05.2025 09:52:25,8408	    looking for modules in C:\			
91	Error	06.05.2025 09:52:25,8418	      C:\brease doesn't exist			
92	Error	06.05.2025 09:52:25,8418	    looking for modules in C:\Temp\mappViewSample1\Logical\mappView\Widgets			
93	Error	06.05.2025 09:52:25,8428	      C:\Temp\mappViewSample1\Logical\mappView\Widgets\brease doesn't exist			
94	Error	06.05.2025 09:52:25,8438	    looking for modules in C:\Temp\mappViewSample1\Temp\mappView\Widgets			
95	Error	06.05.2025 09:52:25,8438	      C:\Temp\mappViewSample1\Temp\mappView\Widgets\brease doesn't exist			
96	Error	06.05.2025 09:52:25,8448	 @ ../../../../../../../../../Temp/mappViewSample1/Logical/mappView/Widgets/brXtended/NumericInput/NumericInput.js			
97	Error	06.05.2025 09:52:25,8448	 @ ../../../../../../../../../Temp/mappViewSample1/Temp/mappView/Widgets/cwidgets.js			
98	Error	06.05.2025 09:52:25,8458	webpack 5.90.3 compiled with 2 errors in 116 ms			
99	Error	06.05.2025 09:52:25,8469	Warning:  Use --force to continue.			
100	Error	06.05.2025 09:52:25,8469	Aborted due to warnings.			

Hi @stephan.stricker

I will take a look, it’s the numeric input from custom-widget repo ?

Yes, exactly. All the widgets are affected, but that’s probably the easiest one to figure out.

Thx for looking into this

In MappView 6, some namespaces is protected, so you need to change the define.
Here is something that work on my machine. (no compilation error on openning).
Btw you will need to register the widget too, you can take a look here (end of the file) :slight_smile:

NumericInput.js

'use strict';
define(['widgets',
    'brease',
    'widgets/brXtended/NumericInput/libs/config'
], function ({brease}, { decorators: { LanguageDependency, MeasurementSystemDependency } }, Config) {

    /**
     * @class widgets.brXtended.NumericInput
     * #Description
     * Input field for numeric values  
     * To edit values, an window for numeric input (=NumPad) will be shown  
     *    
     * @extends widgets.brease.NumericInput
     *
     * @aside example numinout
     *
     * @iatMeta category:Category
     * Numeric
     * @iatMeta description:short
     * Eingabe eines Wertes
     * @iatMeta description:de
     * Ermöglicht dem Benutzer einen numerischen Wert einzugeben
     * @iatMeta description:en
     * Enables the user to enter a numeric value
     */

    /**
     * @htmltag examples
     * Simple Code example
     *
     *     <div id="numInput01" data-brease-widget="widgets/brXtended/NumericInput"></div>
     *
     */

    /**
     * @method getValue
     * @hide
     */

    // Widget error numbers
    const err_unkown = 10000;
    const err_invalid_color = 10001;

    var defaultSettings = Config;

    var WidgetClass = brease.NumericInput.extend(function NumericInput() {
        SuperClass.apply(this, arguments);
    }, defaultSettings);

    var p = WidgetClass.prototype;

    p.init = function () {
        if (this.settings.omitClass !== true) {
            this.addInitialClass('brXtendedNumericInput');
        }
        // breaseNumericInput css class should not be added
        this.settings.omitClass = true;

        NumericInput.prototype.init.call(this);
    };

     /**
     * @method setBackColorExt
     * @iatStudioExposed
     * Sets the back color of the widget.
     * @param {String} value The back color to be set
     */
    p.setBackColorExt = function (value) {
        var widget = this;
        var s = new Option().style;
        s.color = value;

        if (s.color !== ''){
            this.el.css('background-color', value);
        }
        else{
            widget._errorHandling(err_invalid_color);
        }
    };

    p._errorHandling = function _errorHandling(code) {
        console.log("NumericInput Error:" + code);

        var widget = this;
        /**
        * @event OnError
        * Fired when there is an error on the operation.
        * @iatStudioExposed
        * @param {Integer} result Number of error transmitted by the mapp component.
        */
        var ev = widget.createEvent('OnError', { result: code });
        if (ev !== undefined) {
            ev.dispatch();
        }

        // Send error to PLC logger
        if (!brease.config.editMode) {
            var m = 'Error ' + code + ' in brXtended on page ' + widget.settings.parentContentId +  ' at widget ' + this.elem.id;
            brease.loggerService.log(Enum.EventLoggerId.CLIENT_SCRIPT_FAIL, Enum.EventLoggerCustomer.BUR, Enum.EventLoggerVerboseLevel.OFF, Enum.EventLoggerSeverity.ERROR, [], m);
        }
    };

    /**
     * @method openNumPadExt
     * @iatStudioExposed
     * Opens the numeric keypad.
     */
    p.openNumPadExt = function () {
        this._showNumPad(this);
    };

    p._createUnitEl = function () {
        return $('<span></span>')
            .addClass('breaseNumericOutput_unit');
    };
    p._onFocusIn = function () {
        if (this.isDisabled === true) {
            this.inputEl.blur();
        } else {
            this.focusInTime = Date.now();
            this.el.addClass('active');
        }
    };
    return MeasurementSystemDependency.decorate(LanguageDependency.decorate(WidgetClass, false), true);

});

Same for the Config.js
Config.js

define(['brease'], function (brease) {

    'use strict';

    /**
     * @class widgets.brXtended.NumericInput.Config
     * @extends core.javascript.Object
     * @override widgets.brXtended.NumericInput
     */
    // 
    brease.enum.BackgroundPosition.center_center;
    var config = {
    };

    return config;
});