WDTC – individual solutions, simpler as you think

[kovarj (Jaroslav Kovar)]

A little theory

Within mapp View we have meanwhile a lot of widgets, which allow many different use cases and provide a lot of functionality. As always when using a framework, providing ready made widgets / features is always a trade-off, between functionality and maintainability, so it is natural, that now everything customers might want is possible out of the box. Often such feature requests are carried to product management, to get them implemented … and too often such requests get rejected, as for R&D it is a lot of work and does not really pay back.

But exactly for that challenge, we have meanwhile the Widget Development Toolchain (WDTC).
Using the WDTC it is possible to provide additional functionality, in an easy and straight forward way – without R&D. Here are two nice examples.

The first example.

One customer wanted to have mapp View dialogs with “glass effect”. A glass effect is a CSS based style, which blurs the background and adds some special shadows to the content. Out of the box, this is not possible with mapp View – but it is easy to create a widget, to provide such a glass effect:

Creating this widget is actually not rocket-science, as the widget does not need to provide too much functionality. Effectively it is a “DIV”, which has some special CSS settings applied. The CSS settings you can have ChatGPT & Co creating for you.

The needed JavaScript is simple, as you mainly need to initialize a basic widget – how this is done you find in the help or tutorial (just copy it). It is even possible to have the different CSS settings to be configurable.

… the “trick” here is, that the CSS settings are exposed as string to Automation Studio – this is of course a workaround and has some drawbacks (e.g. not syntax check), but it does not cause too much work and for a single project, to get this effect, it should be acceptable!

The second example is a special gauge

Mainly a “color ring”, with a pointer. Mapp View provides a gauge, but you cannot style it as needed. But you can – again with the help of ChatGPT & Co – create your own gauge:

This one is a little more complex – as you need two DIVs … and little more knowledge about CSS – but AI comes in very handy here, and solves most of your problems. The gauge of course also needs a data binding and some “glue code”, but you can have AI most of this generated for you. The “trick” here is to ask AI to generate a (single!) web page and have e.g. a JavaScript function to update the gauge. You can then copy the code and encapsulate it as widget … Making the gauge styleable is again done by exposing the CSS settings directly.

The main concept / knowledge needed are part of the help and tutorial.

While the WDTC for sure cannot solve all problems, it is in many cases much easier to create widgets for specific needs as most think! If a customer has special styling needs or requires special widgets, looking into the WDTC prop. is a good idea!

---

Are you interested about implementation details? Check tutorial source files ( Spinner sample form WDTC online course ).

tutorial.zip (134.7 KB)

[hobi (Christian Hobelsberger)]

Servus … I can add a 3⃣️rd example.

A few days ago someone asked in the community, if there is a “read-aloud feature” in mapp View. Well, there is not, but using the WDTC, you can achieve that actually very easily.

Text to speech functionality is meanwhile part of every modern browser, so there is no need to bring 3rd party libraries into a widget. All you need is a “empty” widget, something like this:

'use strict';
define(['brease'], function ({
    core: { BaseWidget: SuperClass },
    controller: { uiController },
    events: { BreaseEvent }
}) {
    /**
    * @class widgets.tutorial.ReadAloud
    *
    * @extends brease.core.BaseWidget
    *
    * @iatMeta category:Category
    * Numeric
    * @iatMeta description:de
    * Read aloud a text
    * @iatMeta description:en
    * Read aloud a text 
    */

    const defaultSettings = {
        value: ""
    };

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

    const p = WidgetClass.prototype;

    p.init = function () {

        SuperClass.prototype.init.apply(this, arguments);
    };


    return WidgetClass;
});  

To this widget you add a “value” property of type string, together with a setter and a “show” function. Could look like this:

    /**
    * @cfg {String} value=0
    * @iatStudioExposed
    * @bindable
    * @iatCategory Data
    * Represents the value in the widget
    */

    /**
     * @method setValue
     * @iatStudioExposed
     * @param {String} value
     */
    p.setValue = function (value) {
        this.settings.value = value;
        this._showValue();
    };

    p._showValue = function () {

        const text = this.getValue();

        if ('speechSynthesis' in window) {

            const utterance = new SpeechSynthesisUtterance(text);

            // Optionale Einstellungen
            utterance.lang = 'en-US'; 
            utterance.pitch = 2;      
            utterance.rate = 1;       
            utterance.volume = 1;     

            window.speechSynthesis.speak(utterance);

        } else {
            console.log("Browser does not support text to speech ...");
        }
    }

If you bind a string value to the value property of this widgets, the “_showValue” function is triggered, which will start the speech synthesis and “read-aloud” the bound string.
Using the setter, it would also be possible to trigger the function directly by invoking the setter action. The speech synthesis code you can get from the generative AI of your choice!

This widget is of course rather minimalistic, it does not even have a graphical representation. But if you just want a read-aloud function, it might be a simple and quick solution!

CHH

[kovarj (Jaroslav Kovar)]

I marked this reply as a solution. So this topic does not bump up.