@entryscape/rdforms 10.5.0 → 10.6.0

package/index.bmd.js

@@ -1,15 +1,16 @@
 import 'whatwg-fetch';
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
+import bundleLoader from './src/template/bundleLoader';
+import ItemStore from './src/template/ItemStore';
+
 import './src/view/bmd/all';
 import './src/view/bmd/style.css';
 
-import ItemStore from './src/template/ItemStore';
 import Editor from './src/view/Editor';
 import Presenter from './src/view/Presenter';
-import ValidationPresenter from './src/view/ValidationPresenter';
-import bundleLoader from './src/template/bundleLoader';
 import renderingContext from './src/view/renderingContext';
+import ValidationPresenter from './src/view/ValidationPresenter';
 import LevelEditor from './src/view/bootstrap/LevelEditor';
 
-export {bundleLoader, ItemStore, Editor, Presenter, ValidationPresenter, LevelEditor, renderingContext};
+export { bundleLoader, ItemStore, Editor, Presenter, ValidationPresenter, LevelEditor, renderingContext };

package/package.json

@@ -8,7 +8,7 @@
     "application profile",
     "linked data"
   ],
-  "version": "10.5.0",
+  "version": "10.6.0",
   "main": "dist/rdforms.node.js",
   "browser": "dist/rdforms.react.js",
   "module": "main.js",

package/src/model/ChoiceBinding.js

@@ -1,4 +1,5 @@
 import ValueBinding from './ValueBinding';
+import {CODES} from './engine';
 
 const label = 'http://www.w3.org/2000/01/rdf-schema#label';
 const seeAlso = 'http://www.w3.org/2000/01/rdf-schema#seeAlso';
@@ -24,6 +25,11 @@ export default class ChoiceBinding extends ValueBinding {
     } else if (this.getValue() !== choice.value) {
       this.setValue(choice.value, choice, silent);
     }
+    if (choice && choice.mismatch) {
+      this.setMatchingCode(CODES.WRONG_VALUE);
+    } else if ((!choice || !choice.mismatch) && this.getMatchingCode() === CODES.WRONG_VALUE) {
+      this.setMatchingCode(CODES.OK);
+    }
   }
 
   getChoice() {
@@ -31,8 +37,8 @@ export default class ChoiceBinding extends ValueBinding {
   }
 
   setValue(value, choice, silent) {
-    super.setValue(value, choice, silent);
     const oldval = this.getValue();
+    super.setValue(value, choice, silent);
     const graph = this._statement.getGraph();
     graph.findAndRemove(oldval, label, undefined, silent);
     graph.findAndRemove(oldval, seeAlso, undefined, silent);

package/src/template/Item.js

@@ -49,6 +49,7 @@ export default class Item {
       'strictmatch',
       'relaxedDatatypeMatch',
       'viewAllTranslations',
+      'filterTranslations',
       'email',
       'atLeastOneChild',
       'atMostOneChild',
@@ -123,65 +124,59 @@ export default class Item {
     return this.getExtends() != null;
   }
 
-  getLabel(returnDetails, original) {
+  _getText(attr, returnDetails, original) {
     const s = this.getSource(original);
-    return returnDetails ? utils.getLocalizedValue(s.label) : utils.getLocalizedValue(s.label).value;
+    return returnDetails ? utils.getLocalizedValue(s[attr]) : utils.getLocalizedValue(s[attr]).value;
   }
-
-  setLabel(value, lang) {
+  _setText(attr, value, lang) {
     const s = this.getSource(true);
-    s.label = this._setLangHash(s.label, value, lang);
+    s[attr] = this._setLangHash(s[attr], value, lang);
     this.refreshExtends();
   }
-
-  getLabelMap(original) {
-    return this.getSource(original).label;
-  }
-
-  setLabelMap(map) {
-    setObjAttr(this.getSource(true), 'label', map);
-    this.refreshExtends();
-  }
-
-  getDescription(returnDetails, original) {
-    const s = this.getSource(original);
-    return returnDetails ? utils.getLocalizedValue(s.description) : utils.getLocalizedValue(s.description).value;
-  }
-
-  setDescription(value, lang) {
-    const s = this.getSource(true);
-    s.description = this._setLangHash(s.description, value, lang);
+  _setTextMap(attr, map) {
+    setObjAttr(this.getSource(true), attr, map);
     this.refreshExtends();
   }
 
-  getDescriptionMap(original) {
-    return this.getSource(original).description;
-  }
-
-  setDescriptionMap(map) {
-    setObjAttr(this.getSource(true), 'description', map);
-    this.refreshExtends();
-  }
-
-  getPlaceholder(returnDetails, original) {
-    const s = this.getSource(original);
-    return returnDetails ? utils.getLocalizedValue(s.placeholder) : utils.getLocalizedValue(s.placeholder).value;
-  }
-
-  setPlaceholder(value, lang) {
-    const s = this.getSource(true);
-    s.placeholder = this._setLangHash(s.placeholder, value, lang);
-    this.refreshExtends();
-  }
-
-  getPlaceholderMap(original) {
-    return this.getSource(original).placeholder;
-  }
-
-  setPlaceholderMap(map) {
-    setObjAttr(this.getSource(true), 'placeholder', map);
-    this.refreshExtends();
-  }
+  getLabel(returnDetails, original) { return this._getText('label', returnDetails, original); }
+  setLabel(value, lang) { this._setText('label', value, lang); }
+  getLabelMap(original) { return this.getSource(original).label; }
+  setLabelMap(map) { this._setTextMap('label', map); }
+
+  getEditLabel(returnDetails, original) { return this._getText('editlabel', returnDetails, original); }
+  setEditLabel(value, lang) { this._setText('editlabel', value, lang); }
+  getEditLabelMap(original) { return this.getSource(original).editlabel; }
+  setEditLabelMap(map) { this._setTextMap('editlabel', map); }
+
+  getDescription(returnDetails, original) { return this._getText('description', returnDetails, original); }
+  setDescription(value, lang) { this._setText('description', value, lang); }
+  getDescriptionMap(original) { return this.getSource(original).description; }
+  setDescriptionMap(map) { this._setTextMap('description', map); }
+
+  getEditDescription(returnDetails, original) { return this._getText('editdescription', returnDetails, original); }
+  setEditDescription(value, lang) { this._setText('editdescription', value, lang); }
+  getEditDescriptionMap(original) { return this.getSource(original).editdescription; }
+  setEditDescriptionMap(map) { this._setTextMap('editdescription', map); }
+
+  getHelp(returnDetails, original) { return this._getText('help', returnDetails, original); }
+  setHelp(value, lang) { this._setText('help', value, lang); }
+  getHelpMap(original) { return this.getSource(original).help; }
+  setHelpMap(map) { this._setTextMap('help', map); }
+
+  getPlaceholder(returnDetails, original) { return this._getText('placeholder', returnDetails, original); }
+  setPlaceholder(value, lang) { this._setText('placeholder', value, lang); }
+  getPlaceholderMap(original) { return this.getSource(original).placeholder; }
+  setPlaceholderMap(map) { this._setTextMap('placeholder', map); }
+
+  getPurpose(returnDetails, original) { return this._getText('purpose', returnDetails, original); }
+  setPurpose(value, lang) { this._setText('purpose', value, lang); }
+  getPurposeMap(original) { return this.getSource(original).purpose; }
+  setPurposeMap(map) { this._setTextMap('purpose', map); }
+
+  getSpecification(returnDetails, original) { return this._getText('specification', returnDetails, original); }
+  setSpecification(value, lang) { this._setText('specification', value, lang); }
+  getSpecificationMap(original) { return this.getSource(original).specification; }
+  setSpecificationMap(map) { this._setTextMap('specification', map); }
 
   /**
    * @return {String|null} as a URI, may be null for Groups, never null for Text or choice

package/src/utils.js

@@ -3,7 +3,7 @@ import { cloneDeep } from 'lodash-es';
 import system from './model/system';
 
 const getLocalizedValue = (hash) => {
-  const locale = moment.locale('sv');
+  const locale = moment.locale();
   if (hash == null) {
     return { precision: 'none' };
   } else if (typeof hash === 'string') {

package/src/view/Editor.js

@@ -61,6 +61,10 @@ export default class Editor extends Presenter {
     super._handleParams(params);
   }
 
+  getSubEditorForBinding(binding) {
+    return this._subEditors.find(editor => editor.getBinding() === binding);
+  }
+
   report(report) {
     const _report = report || bindingReport(this.binding);
 

package/src/view/Presenter.js

@@ -43,7 +43,8 @@ export default class Presenter extends View {
    * otherwise same as input bindings.
    */
   prepareBindings(item, bindings) {
-    if (!this.filterTranslations || item.getNodetype() !== 'LANGUAGE_LITERAL' || item.hasStyle('viewAllTranslations')) {
+    if (!item.hasStyle('filterTranslations') &&
+      (!this.filterTranslations || item.getNodetype() !== 'LANGUAGE_LITERAL' || item.hasStyle('viewAllTranslations'))) {
       return bindings;
     }
 

package/src/view/View.js

@@ -263,9 +263,9 @@ export default class View {
 
     // New rowDiv since we have a label
     if (lastRowNode == null) {
-      rowNode = renderingContext.domCreate('div', this.domNode);
+      rowNode = renderingContext.domCreate('div', this.domNode, binding ? this.getRowIndex(binding) : undefined);
     } else {
-      rowNode = renderingContext.domCreateAfter('div', lastRowNode);
+      rowNode = renderingContext.domCreateAfter('div', lastRowNode, binding ? this.getRowIndex(binding) : undefined);
     }
 
     item.getClasses().forEach((cls) => {
@@ -331,7 +331,6 @@ export default class View {
   }
 
   getLabelIndex(binding) {
-    const labelItem = binding.getItem();
     let idx;
     binding.getParent().getChildBindingsFor(binding.getItem()).reverse().find((b) => {
       idx = this._labelIndex[b.getHash()];
@@ -352,6 +351,10 @@ export default class View {
     return idx;
   }
 
+  getRowIndex(binding) {
+    return `${binding.getHash()}_${this._viewId}_row`;
+  }
+
   isMultiValued(item) {
     return false;
   }

package/src/view/bootstrap/RadioButtonsEditor.js

@@ -5,10 +5,10 @@ export default class RadioButtonsEditor {
     this.binding = args.binding;
     this.item = this.binding.getItem();
     this.choices = this.item.getChoices().map(c => ({
-      label: c.label,
+      label: c.editlabel || c.label,
       description: c.description,
       value: c.value,
-      text: this.item._getLocalizedValue(c.label).value,
+      text: this.item._getLocalizedValue(c.editlabel || c.label).value,
       choice: c,
     }));
 
@@ -45,7 +45,7 @@ export default class RadioButtonsEditor {
           .appendTo($divWrap);
       }
       if (c.description) {
-        $label.attr('title', this.item._getLocalizedValue(c.description).value
+        $label.attr('title', this.item._getLocalizedValue(c.editdescription || c.description).value
           || c.seeAlso || c.value);
       }
 
@@ -54,7 +54,7 @@ export default class RadioButtonsEditor {
         .attr('checked', c.value === currentValue)
         .attr('name', `rdformsRadio_${uniqueRadioButtonGroupNr}`)
         .appendTo($label);
-      $label.append(this.item._getLocalizedValue(c.label).value);
+      $label.append(this.item._getLocalizedValue(c.editlabel || c.label).value);
 
       if (c.mismatch) {
         $label.addClass('mismatch disabled');

package/src/view/bootstrap/choice.js

@@ -21,7 +21,7 @@ editors.itemtype('choice').choices().register((fieldDiv, binding, context) => {
   const item = binding.getItem();
   const choices = item.getChoices().map(c => ({
     id: c.value,
-    text: item._getLocalizedValue(c.label).value,
+    text: item._getLocalizedValue(c.editlabel || c.label).value,
     choice: c,
   }));
   if (!item.hasStyle('preserveOrderOfChoices')) {

package/src/view/bootstrap/labels.js

@@ -1,18 +1,22 @@
 import jquery from 'jquery';
 import renderingContext from '../renderingContext';
+import Editor from '../Editor';
 
 renderingContext.renderEditorLabel = (rowNode, binding, item, context) => {
   if (item.hasStyle('nonEditable') || item.hasStyle('heading')) {
     return renderingContext.renderPresenterLabel(rowNode, binding, item, context, true);
   }
 
-  let label = item.getLabel();
+  let label = item.getEditLabel() || item.getLabel();
   if (label != null && label !== '') {
     label = label.charAt(0).toUpperCase() + label.slice(1);
   } else {
     label = '';
   }
   const $labelDiv = jquery('<div class="rdformsLabelRow">').appendTo(rowNode);
+  if (binding) {
+    $labelDiv.attr('id', context.view.createLabelIndex(binding));
+  }
   context.labelNode = $labelDiv[0];
   const $label = jquery('<span class="rdformsLabel">').text(label).appendTo($labelDiv);
   const card = item.getCardinality();
@@ -49,32 +53,23 @@ renderingContext.renderEditorLabel = (rowNode, binding, item, context) => {
   }
   return undefined;
 };
-// TODO this is listening for any click and popover showings... too much! especially considering
-// that is being used in another application. Rewrite!
-jquery(document).ready(() => {
-  jquery(document.body).on('show.bs.popover click', (e) => {
-    jquery('[data-toggle="popover"]').each((node, a) => {
-      if (e.target.innerHTML !== a.innerHTML) {
-        jquery(a).popover('hide');
-      }
-    });
-  });
-});
 
-renderingContext.attachItemInfo = function (item, aroundNode/* , context */) {
-  if (item == null || (item.getProperty() == null && item.getDescription() == null)) {
+renderingContext.attachItemInfo = function (item, aroundNode, context) {
+  if (item == null || (item.getProperty() == null && item.getDescription() == null
+    && item.getEditDescription() == null)) {
     jquery(aroundNode).addClass('noPointer');
     return;
   }
 
-  const description = item.getDescription() || '';
+  const description = (context.view instanceof Editor ?
+    item.getEditDescription() || item.getDescription() : item.getDescription()) || '';
   let propinfo = '';
   if (item.getProperty()) {
     propinfo = `<div class="property"><a target="_blank" href="${item.getProperty()}">${
       item.getProperty()}</a></div>`;
   }
 
-  let label = item.getLabel();
+  let label = context.view instanceof Editor ? item.getEditLabel() || item.getLabel() : item.getLabel();
   if (label != null && label !== '') {
     label = label.charAt(0).toUpperCase() + label.slice(1);
   } else {
@@ -84,7 +79,7 @@ renderingContext.attachItemInfo = function (item, aroundNode/* , context */) {
     html: true,
     container: renderingContext.getPopoverContainer(),
     placement: 'auto',
-    trigger: 'click focus',
+    trigger: 'focus',
     title: label,
     content: `<div class="description">${
       description.replace(/(\r\n|\r|\n)/g, '<br/>')

package/src/view/bootstrap/style.css

@@ -32,6 +32,17 @@
     background-color: lightcoral;
 }
 
+.rdformsHelp {
+    color: red;
+    font-size: small;
+    display: none;
+    padding: 2px 0 6px;
+}
+
+.rdformsHelp.rdformsHelpActive {
+    display: block;
+}
+
 .rdformsDateValue .rdformsDatepicker {
     width: 12em;
     display: inline-block;

package/src/view/bootstrap/table.js

@@ -2,6 +2,7 @@ import renderingContext from '../renderingContext';
 import * as engine from '../../model/engine';
 import utils from '../../utils';
 import jquery from 'jquery';
+import Editor from '../Editor';
 
 
 const createChildBindingsForFirstFixedColumn = (bindings/* , context*/) => {
@@ -108,8 +109,11 @@ renderingContext.addEditorTable = (newRow, firstBinding, context) => {
   for (colInd = 0; colInd < childItems.length; colInd++) {
     const $th = jquery('<th>').appendTo($tHeadRow);
     jquery($th).addClass(`rdformsColumnHeader${colInd}`);
+    const childItem = childItems[colInd];
+    const label = context.view instanceof Editor ?
+      childItem.getEditLabel() || childItem.getLabel() : childItem.getLabel();
     renderingContext.attachItemInfo(item,
-      jquery('<span>').text(childItems[colInd].getLabel()).appendTo($th)[0], context);
+      jquery('<span>').text(label).appendTo($th)[0], context);
   }
   if (!firstBinding.getItem().hasStyle('firstcolumnfixedtable')) {
     const $addTh = jquery('<th>').addClass('rdformsTableControl').appendTo($tHeadRow);

package/src/view/bootstrap/text.js

@@ -32,18 +32,21 @@ editors.itemtype('text').datatype('xsd:duration').register(durationEditor);
     tb.set('value', '');
   }; */
 
-const addChangeListener = (inp, binding, regex, extLink) => {
+const addChangeListener = (inp, binding, regex, extLink, help) => {
   let to = null;
   const s = () => {
     to = null;
-    const val = inp.val();
+    const val = inp.val().trim();
     let disableExtLink = true;
-    if (!regex || regex.test(val)) {
+    if (val === '' || !regex || regex.test(val)) {
       binding.setGist(val);
       if (extLink && val) {
         extLink.prop('href', binding.getValue());
         disableExtLink = false;
       }
+      help.toggleClass('rdformsHelpActive', false);
+    } else {
+      help.toggleClass('rdformsHelpActive', true);
     }
     if (extLink) {
       extLink.toggleClass('rdformsExtLinkDisabled', disableExtLink);
@@ -63,19 +66,27 @@ const registerPattern = (pattern, datatype) => {
   const regex = new RegExp(pattern);
   editors.itemtype('text').datatype(datatype)
     .register((fieldDiv, binding, context) => {
-      const $input = jquery('<input type="text" class="form-control rdformsFieldInput">');
+      const $input = jquery(`<input type="text" class="form-control rdformsFieldInput"
+         placeholder="${binding.getItem().getPlaceholder() || ''}">`);
       $input.val(binding.getGist())
         .attr('pattern', pattern)
         .appendTo(fieldDiv);
 
+      const help = binding.getItem().getHelp();
+      let $help;
+      if (help) {
+        $help = jquery(`<span class="rdformsHelp">${help}</span>`);
+        $help.appendTo(fieldDiv);
+      }
+
       if (binding.getItem().hasStyle('externalLink')) {
         const $extLink = jquery(`<a class="fas fa-external-link-alt rdformsExtLink ${renderingContext.getExtLinkClass()}" target="_blank">`);
         $extLink.appendTo(context.controlDiv);
         jquery(fieldDiv).addClass('rdformsExtLinkControl');
-        addChangeListener($input, binding, regex, $extLink);
+        addChangeListener($input, binding, regex, $extLink, $help);
         $input.keyup();
       } else {
-        addChangeListener($input, binding, regex);
+        addChangeListener($input, binding, regex, undefined, $help);
       }
 
 
@@ -98,7 +109,7 @@ editors.itemtype('text').register((fieldDiv, binding, context) => {
   let $input;
   if (item.hasStyle('multiline')) {
     const originalNrOfLines = countLines(binding.getGist());
-    $input = jquery(`<textarea class="form-control rdformsFieldInput autoExpand" rows="${originalNrOfLines}">`);
+    $input = jquery(`<textarea class="form-control rdformsFieldInput autoExpand" placeholder="${item.getPlaceholder() || ''}" rows="${originalNrOfLines}">`);
     $input.on('input focus', function () {
       if (this.baseScrollHeight === undefined) {
         const originalHeight = $input.height();
@@ -110,13 +121,20 @@ editors.itemtype('text').register((fieldDiv, binding, context) => {
       this.rows = rows;
     });
   } else if (item.hasStyle('email')) {
-    $input = jquery('<input type="email" class="form-control rdformsFieldInput">');
+    $input = jquery(`<input type="email" class="form-control rdformsFieldInput" placeholder="${item.getPlaceholder() || ''}">`);
   } else {
-    $input = jquery('<input type="text" class="form-control rdformsFieldInput">');
+    $input = jquery(`<input type="text" class="form-control rdformsFieldInput" placeholder="${item.getPlaceholder() || ''}">`);
   }
   $input.val(binding.getGist())
     .appendTo(fieldDiv);
 
+  const help = item.getHelp();
+  let $help;
+  if (help) {
+    $help = jquery(`<span class="rdformsHelp">${help}</span>`);
+    $help.appendTo(fieldDiv);
+  }
+
   const pattern = item.getPattern();
   let regex = null;
   if (pattern != null) {
@@ -127,10 +145,10 @@ editors.itemtype('text').register((fieldDiv, binding, context) => {
     const $extLink = jquery(`<a class="fas fa-external-link-alt rdformsExtLink ${renderingContext.getExtLinkClass()}" target="_blank">`);
     $extLink.appendTo(context.controlDiv);
     jquery(fieldDiv).addClass('rdformsExtLinkControl');
-    addChangeListener($input, binding, regex, $extLink);
+    addChangeListener($input, binding, regex, $extLink, $help);
     $input.keyup();
   } else {
-    addChangeListener($input, binding, regex);
+    addChangeListener($input, binding, regex, undefined, $help);
   }
 
   // If language control should be present

package/src/view/jquery/components.js

@@ -4,12 +4,20 @@ import './text';
 import './choice';
 import './table';
 
+const createElement = (nodeStr, id) => {
+  const el = document.createElement(nodeStr);
+  if (id) {
+    el.id = id;
+  }
+  return el;
+};
+
 renderingContext.domQuery = (selector, node) => node.querySelector(selector);
 
-renderingContext.domCreate = (nodeStr, parent) => parent.appendChild(document.createElement(nodeStr));
+renderingContext.domCreate = (nodeStr, parent, id) => parent.appendChild(createElement(nodeStr, id));
 
-renderingContext.domCreateAfter = (nodeStr, sibling) =>
-  sibling.parentNode.insertBefore(document.createElement(nodeStr), sibling.nextSibling);
+renderingContext.domCreateAfter = (nodeStr, sibling, id) =>
+  sibling.parentNode.insertBefore(createElement(nodeStr, id), sibling.nextSibling);
 
 renderingContext.domSetAttr = (node, attr, value) => {
   if (value === '' || value === null) {
@@ -33,4 +41,4 @@ renderingContext.domClassToggle = (node, classStr, addOrRemove) => {
   });
 };
 
-renderingContext.prePresenterViewRenderer = renderingContext.preEditorViewRenderer;
+renderingContext.prePresenterViewRenderer = renderingContext.preEditorViewRenderer;

package/src/view/jquery/labels.js

@@ -1,8 +1,9 @@
 import jquery from 'jquery';
 import renderingContext from '../renderingContext';
+import Editor from '../Editor';
 
 renderingContext.renderPresenterLabel = (rowNode, binding, item, context, labelRow) => {
-  let label = item.getLabel();
+  let label = context.view instanceof Editor ? item.getEditLabel() || item.getLabel() : item.getLabel();
   if (label != null && label !== '') {
     label = label.charAt(0).toUpperCase() + label.slice(1);
   } else {
@@ -10,6 +11,9 @@ renderingContext.renderPresenterLabel = (rowNode, binding, item, context, labelR
   }
 
   const $labelDiv = jquery('<div class="rdformsLabel" tabindex="0">').text(label).appendTo(rowNode);
+  if (binding) {
+    $labelDiv.attr('id', context.view.createLabelIndex(binding));
+  }
   if (labelRow) {
     $labelDiv.addClass('rdformsLabelRow');
   }

package/src/view/react/buttons.js

@@ -104,7 +104,7 @@ renderingContext.addCreateChildButton = (rowDiv, labelDiv, binding, context) =>
       context.view.addRow(rowDiv, nBinding); // not the first binding...
     }
   };
-  let label = item.getLabel();
+  let label = item.getEditLabel() || item.getLabel();
   if (label != null && label !== '') {
     label = label.charAt(0).toUpperCase() + label.slice(1);
   } else {

package/src/view/react/choice.js

@@ -3,20 +3,26 @@ import React, { useState, useEffect } from 'react';
 import renderingContext from '../renderingContext';
 import system from '../../model/system';
 import utils from '../../utils';
+import { Editor } from './Wrappers';
 
 // -------------- Presenters ----------------
 const presenters = renderingContext.presenterRegistry;
 
-const choicify = func => (fieldDiv, binding) => {
+const choicify = func => (fieldDiv, binding, context) => {
   const choice = binding.getChoice();
+  const isEditor = context.view instanceof Editor;
   let desc;
   if (!choice) {
     return;
   }
-  if (choice.description) {
+
+  if (isEditor && choice.editdescription) {
+    desc = utils.getLocalizedValue(choice.editdescription).value;
+  } else if (choice.description) {
     desc = utils.getLocalizedValue(choice.description).value;
   }
-  func(fieldDiv, binding, choice, desc);
+
+  func(fieldDiv, binding, choice, desc, isEditor);
 };
 
 // Presenter for image.
@@ -34,13 +40,16 @@ presenters.itemtype('choice').style('stars').register(choicify(
     }
   }));
 
+const getLocalizedLabel = (choice, isEditor) =>
+  utils.getLocalizedValue(isEditor ? choice.editlabel || choice.label : choice.label);
+
 // Presenter for choices.
 presenters.itemtype('choice').register(choicify(
-  (fieldDiv, binding, choice, desc) => {
+  (fieldDiv, binding, choice, desc, isEditor) => {
     const item = binding.getItem();
     const title = desc || choice.seeAlso || choice.value;
     if ((item.hasStaticChoices() && !item.hasStyle('externalLink')) || item.hasStyle('noLink')) {
-      const locValue = utils.getLocalizedValue(choice.label);
+      const locValue = getLocalizedLabel(choice, isEditor);
       const langAttr = locValue.lang ? { lang: locValue.lang } : {};
       fieldDiv.appendChild(<div key={binding.getHash()} {...langAttr} title={title} src={choice.value
       }>{locValue.value}</div>);
@@ -55,11 +64,11 @@ presenters.itemtype('choice').register(choicify(
       delete attrs.component;
 
       fieldDiv.appendChild(React.createElement(() => {
-        const [locValue, setLocValue] = useState(utils.getLocalizedValue(choice.label));
+        const [locValue, setLocValue] = useState(getLocalizedLabel(choice, isEditor));
         useEffect(() => {
           if (choice.load != null) {
             choice.load(() => {
-              setLocValue(utils.getLocalizedValue(choice.label));
+              setLocValue(getLocalizedLabel(choice, isEditor));
             });
           }
         }, []);

package/src/view/react/choiceEditors/CheckBoxesEditor.js

@@ -25,7 +25,7 @@ export default function CheckBoxesEditor(props) {
   const [resetCount, setResetCount] = React.useState(0);
   const binding = props.binding;
   const item = binding.getItem();
-  const choices = useLocalizedSortedChoices(binding);
+  const choices = useLocalizedSortedChoices(binding, true);
   const choiceBindingPairs = useMemo(() => {
     const parentBinding = binding.getParent();
     const val2binding = {};

package/src/view/react/choiceEditors/ChoiceLookup.js

@@ -8,7 +8,7 @@ import ShowButton from './ShowButton';
 
 export default (props) => {
   const binding = props.binding;
-  const [choice, setChoice] = loadLocalizedChoice(binding);
+  const [choice, setChoice] = loadLocalizedChoice(binding, true);
   const [error, setError] = useState(binding.getChoice()?.mismatch === true);
 
   useEffect(() => {
@@ -44,6 +44,7 @@ export default (props) => {
     disabled {...(choice && choice.mismatch ? { mismatch: true } : {})}
     title={title}
     value={label}
+    placeholder={binding.getItem().getPlaceholder()}
     error={error}
     variant={renderingContext.materialVariant}
   /><ShowButton