nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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.

Find more posts tagged with

Accepted answers

Aeseir

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

All comments

Aeseir

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

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.

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.