Index | Prev | Next

UI Changelog

This file will document notable API changes specific to the Niagara UI. Hard breaking changes will always be documented on their own, but other notable non-breaking changes are worthy of their own description.

Niagara 4.10u1

Moment / Pikaday changes

Moment now has a dependency on bajaScript. This provides moment with certain locale information from the user’s language settings. To avoid the bajaScript dependency, moment can be required directly using the full module path: require nmodule/js/rc/moment/moment.min.

Due to this change, pikaday must be required after moment to ensure it is able to use moment for formatting. Code similar to:

define([ 'moment', 'pikaday' ], function () {
    // Make use of pikaday / moment
});

would need to transition to:

define([ 'moment' ], function () {
    require([ 'pikaday' ], function () {
        // Make use of pikaday / moment
    });
});

This will ensure that pikaday can detect and make use of moment.

If your unit tests incorporate tests for different languages like German ‘de’, you may want to update your browserMain.js with the new location of the localized moment ‘/module/js/rc/shims/moment/moment’ so that any calls to moment.startOf(‘week’) return the correct day of the week based on the current locale.

Niagara 4.10

BajaScript

Implicit batching introduced

When BajaScript performs multiple network calls in quick succession, those network calls will automatically batch into a single WebSocket message. See the documentation for baja.comm.Batch for full details.

Formatting support added to Complex#getDisplay

A context object can now be passed as the second argument to getDisplay(). The context will be used to format the display string, if possible. Only Simple types that have Type Extensions implemented will perform formatting; other types will use the unformatted display string sent from the server, as before. When a context is passed, getDisplay() will return a Promise.

The main use case for this change is baja.Format, which will now do a better job of respecting slot facets during formatting - most commonly for animating Widget properties in Px pages.

bajaux

spandrel introduced

spandrel is a new API introduced to ease the process of constructing Widgets that contain nested child Widgets. It also allows the construction of bajaux widgets using JSX.

It does not replace bajaux - it is built on top of it. There is no requirement that you use it, but we think you may find it useful. Check the bajaux documentation for full details, including a tutorial.

Widget constructor receives an object literal

The Widget constructor may now receive an object literal instead of three strings. The object literal specifies the Widget’s starting configuration. The old-style constructor is still supported by the framework for now, but it is strongly recommended that you switch to the new style. Please see the bajaux documentation for full details.

// old style.
// using this style, the initial set of properties passed to the constructor
// may not be respected because the add() call would overwrite them.
class MyWidget {
  constructor() {
    super(...arguments);
    this.properties().add('myProp', 'defaultValue');
  }
}
const w = new MyWidget({ properties: { myProp: 'myPropValue' } });
w.properties().getValue('myProp'); // defaultValue

// new style.
// using this style, the initial set of properties passed to the constructor
// will be respected, while still allowing for defaults.
class MyWidget {
  constructor(params) {
    super({
      params,
      defaults: { properties: { myProp: 'defaultValue' } }
    });
  }
}
const w = new MyWidget({ properties: { myProp: 'myPropValue' } });
w.properties().getValue('myProp'); // myPropValue

Widget#resolve receives ViewQueries

Previously, view: query parameters were stripped off before being passed to Widget#resolve. They are now included.

uxBuilder

UxMedia introduced

UxMedia is a new method of rendering Px graphics purely in the browser. See this overview of how it works.

webEditors

fe.buildFor() no longer accepts value as a Promise

If your value is a Promise, it must be resolved first.

// no longer works:
return fe.buildFor({ value: getValueAsync() });

// must now be:
return getValueAsync()
  .then((value) => fe.buildFor({ value }));

fe.buildFor() no longer rejects if a Widget already exists

If a Widget already exists in the DOM element you pass to fe.buildFor(), it will no longer reject - it will simply destroy the existing Widget before building a new one in its place.

Index | Prev | Next