Porting widget from 5.x to 6.x

Widget Development Tool Chain
1

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.
2

Hi @stephan.stricker

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

3

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

Thx for looking into this

4

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;
});
6

So I got a little bit further in my porting but now I am stuck again. With mapp 5.x you could reference files from brease widgets like the focus handler like this

define([
    'widgets/brease/DropDownBox/DropDownBox',
    'widgets/brease/DropDownBox/libs/FocusHandler',

but this does not seem to work anymore. Has the notation changed or does not work anymore?

Stephan

7

Hi Stephan,

As this post WDTC widget | The OpcUa viewer widget - #7 by hobi from Christian Hobelsberger tell, there is some module that are not exposed anymore.
I don’t really know if “libs” folder isn’t exposed but I could take a look tonight.

The easiest solution is to copy paste the module in the new widget but you need to take care of the import of the module you have import.

I keep you in touch after taking an eyes.

8

Hi Florent,
that would be unfortunate because ideally I would reference as much as possible when I inherit existing widgets. Cop and paste would work, but then I have to check these files every time a new mappView update comes out.

@hobi Can you get us some insides how we should inherit existing widgets with AS6?

Stephan

9

Yep that’s the problem :confused:

10

Hi Stephan,

what Florent wrote is basically true.

In the old WDK you had the possibility to access virtually everything you found - but with the big risk that things break with the next version, as there were no defined interfaces.
For that reason (and the fact that we switched to webpack) we decided to define strict interfaces. This gives WDTC users the possibility to write sustainable code - and on the R&D side, we know what users can / will use, and can ensure that these functions do not break between versions (or, if we need to break them, we can at least inform).

Which functions you can use, you find in the WDTC documentation, the accessible functions are marked with “API”.

What’s the best solution depends on what you need to do.
Typical options are:

  • inherit from the BRease widget and bring in the desired function / function changes by adding or overwritten existing functions.

  • If this does not work for you, you’d need to copy the BRease code into your widget. In some cases prop. even the whole widget and create your own version.
    And yes, this mean you need to check for changes in future versions - but this is something you need to do anyways (and you had to do it in the past, too!)
    If you copy the whole widget, you can avoid this to a certain extend - as you “freeze” the widget and decouple it from the BRease version.

CHH

3 Likes
11

Thanks for the clarification @hobi !

12

So I copied the whole dropdown box widget from brease, but there is still a mountain of references that I have to change because the brease widget references tons of stuff within brease that I may or may not be able to reference through API. This was way easier before.

@hobi
It would be great to have an example how we are supposed to copy or inherit an existing widget and what needs to be changed.

Stephan

1 Like