Empty editor widget

[Aeseir]

Heya,

Currently when Editor widget is loaded without any editable layers, it shows as blank (image attached).

Is there a way so that it shows a custom message to advise user that its empty because no editable layers are present?

It ain't be best UX seeing a empty white box, you don't know what the go is.

[RamaniGanason]

Making some text to appear instead of the empty box seems pretty tough (atleast for me). I would suggest to hide/don't add the widget if there are no editableLayers present in the loaded map.

view.when(() => { 
 view.map.loadAll().then(() => {
  // Get all the editable layers in the loaded map
  console.log(view.map.editableLayers.length);

  // Only add the Editor widget is there is more than 1 editableLayers
  if (view.map.editableLayers.length > 0) {
   const editor = new Editor({
    view: view,
    layerInfos: [pointInfos, lineInfos, polyInfos]
   });
   // Add the widget to the view
   view.ui.add(editor, "top-right");
  }
 }); 
});

[Aeseir]

I've had it like that previously but then it created some confusion for end users that weren't well versed. They would rather it was empty but there then hidden. The ask is to see about adding content to it when empty, which seems to be leaning towards custom ui.

[Aeseir · Accepted solution]

I ended up with a elegant solution that meets my needs. Sharing with community:

use the reactiveUtils to watch for editable layers. If there are none, hide the editor, alternative show it.

By default editor is hidden.

reactiveUtils.watch(
        () => this.view?.map.editableLayers.length,
        (count) => toggleEditor() = count ? true : false
      );