@entryscape/rdforms 10.5.2 → 10.6.2

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.2",
+  "version": "10.6.2",
   "main": "dist/rdforms.node.js",
   "browser": "dist/rdforms.react.js",
   "module": "main.js",
@@ -29,6 +29,7 @@
     "bootstrap-material-datetimepicker": "https://bitbucket.org/metasolutions/bootstrap-material-datetimepicker.git#webpack",
     "bootstrap-material-design": "^4.1.1",
     "core-js": "^3.1.4",
+    "circular-dependency-plugin": "^5.2.2",
     "ifdef-loader": "^2.1.1",
     "jquery": "^3.3.1",
     "jquery-mousewheel": "^3.1.13",

package/src/model/CODES.js

@@ -0,0 +1,17 @@
+export default {
+  UNKNOWN: 'unknown', // Used as a marker initially, to not mark everything red initially
+  OK: 'correct',
+  TOO_FEW_VALUES: 'few', // deprecated
+  TOO_FEW_VALUES_MIN: 'min',
+  TOO_FEW_VALUES_PREF: 'pref',
+  TOO_MANY_VALUES: 'many',
+  AT_MOST_ONE_CHILD: 'atmostonechild',
+  AT_LEAST_ONE_CHILD: 'atleastonechild',
+  EXACTLY_ONE_CHILD: 'exactlyonechild',
+  WRONG_VALUE: 'value',
+  WRONG_PATTERN: 'pattern',
+  WRONG_NODETYPE: 'nodetype',
+  WRONG_DATATYPE: 'datatype',
+  MISSING_LANGUAGE: 'language',
+  MISSING_CONSTRAINTS: 'constraints',
+};

package/src/model/CardinalityTracker.js

@@ -1,4 +1,5 @@
-import { CODES } from './engine';
+import CODES from './CODES';
+
 export default class CardinalityTracker {
   /**
    * A counter paired with a item with cardinality restrictions.

package/src/model/ChoiceBinding.js

@@ -1,4 +1,5 @@
 import ValueBinding from './ValueBinding';
+import CODES from './CODES';
 
 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/model/engine.js

@@ -11,6 +11,7 @@ import ValueBinding from './ValueBinding';
 import ChoiceBinding from './ChoiceBinding';
 import GroupURIBinding from './GroupURIBinding';
 import utils from '../utils';
+import CODES from './CODES';
 
 // See public API at the bottom of this file.
 
@@ -871,27 +872,8 @@ export { levelProfile };
  */
 export { detectLevel };
 
-const CODES = {
-  UNKNOWN: 'unknown', // Used as a marker initially, to not mark everything red initially
-  OK: 'correct',
-  TOO_FEW_VALUES: 'few', // deprecated
-  TOO_FEW_VALUES_MIN: 'min',
-  TOO_FEW_VALUES_PREF: 'pref',
-  TOO_MANY_VALUES: 'many',
-  AT_MOST_ONE_CHILD: 'atmostonechild',
-  AT_LEAST_ONE_CHILD: 'atleastonechild',
-  EXACTLY_ONE_CHILD: 'exactlyonechild',
-  WRONG_VALUE: 'value',
-  WRONG_PATTERN: 'pattern',
-  WRONG_NODETYPE: 'nodetype',
-  WRONG_DATATYPE: 'datatype',
-  MISSING_LANGUAGE: 'language',
-  MISSING_CONSTRAINTS: 'constraints',
-};
-
 export { CODES };
 
-
 export default { // TODO @valentino anti-pattern. This is done because engine is used in EntryScape. It shouldn't really...
   detectLevel,
   levelProfile,

package/src/model/validate.js

@@ -1,8 +1,9 @@
 import { namespaces as ns } from '@entryscape/rdfjson';
-import * as engine from './engine';
+import { fuzzyMatch, findBindingRelativeToParentBinding, matchPathBelowBinding } from './engine';
+import CODES from './CODES';
 
 const _clearMatchingCodes = (binding) => {
-  binding.setMatchingCode(engine.CODES.OK);
+  binding.setMatchingCode(CODES.OK);
   if (binding.getItem().getType() === 'group') {
     binding.getChildBindings().forEach(childBinding => _clearMatchingCodes(childBinding));
   }
@@ -66,8 +67,8 @@ const doNotProceedFurther = (groupBinding, childItem) => {
   // Don't check further if the binding is hidden due to missing dependencies
   const childPath = childItem.getDeps();
   if (childPath) {
-    const fromBinding = engine.findBindingRelativeToParentBinding(groupBinding, childPath);
-    if (!engine.matchPathBelowBinding(fromBinding, childPath)) {
+    const fromBinding = findBindingRelativeToParentBinding(groupBinding, childPath);
+    if (!matchPathBelowBinding(fromBinding, childPath)) {
       return true;
     }
   }
@@ -75,7 +76,7 @@ const doNotProceedFurther = (groupBinding, childItem) => {
 };
 
 const _createReport = (groupbinding, report, firstLevel) => {
-  if (groupbinding.getMatchingCode() !== engine.CODES.OK) {
+  if (groupbinding.getMatchingCode() !== CODES.OK) {
     return undefined;
   }
   const groupitem = groupbinding.getItem();
@@ -84,8 +85,8 @@ const _createReport = (groupbinding, report, firstLevel) => {
   // Check disabled since it is done for each child before recursive call
  /* const path = groupitem.getDeps();
   if (path && groupbinding.getParent() != null) {
-    const fromBinding = engine.findBindingRelativeToParentBinding(groupbinding.getParent(), path);
-    if (!engine.matchPathBelowBinding(fromBinding, path)) {
+    const fromBinding = findBindingRelativeToParentBinding(groupbinding.getParent(), path);
+    if (!matchPathBelowBinding(fromBinding, path)) {
       return undefined;
     }
   } */
@@ -101,11 +102,11 @@ const _createReport = (groupbinding, report, firstLevel) => {
       const nrOfValid = _countValidBindings(bindings);
       let code;
       if (nrOfValid > 1 && (groupitem.hasStyle('disjoint') || groupitem.hasStyle('atMostOneChild'))) {
-        code = engine.CODES.AT_MOST_ONE_CHILD;
+        code = CODES.AT_MOST_ONE_CHILD;
       } else if (nrOfValid !== 1 && groupitem.hasStyle('exactlyOneChild')) {
-        code = engine.CODES.EXACTLY_ONE_CHILD;
+        code = CODES.EXACTLY_ONE_CHILD;
       } else if (nrOfValid === 0 && groupitem.hasStyle('atLeastOneChild')) {
-        code = engine.CODES.AT_LEAST_ONE_CHILD;
+        code = CODES.AT_LEAST_ONE_CHILD;
       }
       if (code) {
         updateViaCardinalityTracker([groupbinding], code);
@@ -129,15 +130,15 @@ const _createReport = (groupbinding, report, firstLevel) => {
             report.errors.push({
               parentBinding: groupbinding,
               item: childItem,
-              code: engine.CODES.TOO_FEW_VALUES_MIN,
+              code: CODES.TOO_FEW_VALUES_MIN,
             });
-            updateViaCardinalityTracker(bindings, engine.CODES.TOO_FEW_VALUES_MIN);
+            updateViaCardinalityTracker(bindings, CODES.TOO_FEW_VALUES_MIN);
 /*            let counter = 0;
             bindings.forEach((binding) => {
               if (!binding.isValid()) {
                 if (counter < card.min) {
                   counter += 1;
-                  binding.setMatchingCode(engine.CODES.TOO_FEW_VALUES_MIN);
+                  binding.setMatchingCode(CODES.TOO_FEW_VALUES_MIN);
                 }
               }
             }); */
@@ -145,23 +146,23 @@ const _createReport = (groupbinding, report, firstLevel) => {
             report.warnings.push({
               parentBinding: groupbinding,
               item: childItem,
-              code: engine.CODES.TOO_FEW_VALUES_PREF,
+              code: CODES.TOO_FEW_VALUES_PREF,
             });
-//            updateViaCardinalityTracker(bindings, engine.CODES.TOO_FEW_VALUES_PREF);
+//            updateViaCardinalityTracker(bindings, CODES.TOO_FEW_VALUES_PREF);
           }
           if (card.max != null && card.max < nrOfValid) {
             report.errors.push({
               parentBinding: groupbinding,
               item: childItem,
-              code: engine.CODES.TOO_MANY_VALUES,
+              code: CODES.TOO_MANY_VALUES,
             });
-            updateViaCardinalityTracker(bindings, engine.CODES.TOO_MANY_VALUES);
+            updateViaCardinalityTracker(bindings, CODES.TOO_MANY_VALUES);
 /*            let counter = 0;
             bindings.forEach((binding) => {
               if (binding.isValid()) {
                 counter += 1;
                 if (counter > card.max) {
-                  binding.setMatchingCode(engine.CODES.TOO_MANY_VALUES);
+                  binding.setMatchingCode(CODES.TOO_MANY_VALUES);
                 }
               }
             }); */
@@ -172,7 +173,7 @@ const _createReport = (groupbinding, report, firstLevel) => {
 
     groupbinding.getChildBindings().forEach((binding) => {
       const item = binding.getItem();
-      if (binding.getMatchingCode() !== engine.CODES.OK) {
+      if (binding.getMatchingCode() !== CODES.OK) {
         report.errors.push({
           parentBinding: binding,
           item,
@@ -330,7 +331,7 @@ const _simplifyReport = (report) => {
 };
 
 const _resourceReport = (resource, graph, template, ignoreResources) => {
-  const binding = engine.fuzzyMatch(graph, resource, template);
+  const binding = fuzzyMatch(graph, resource, template);
   const report = bindingReport(binding);
   _filterReport(report, resource, ignoreResources || {});
   _simplifyReport(report);

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/view/Editor.js

@@ -1,5 +1,6 @@
 import renderingContext from './renderingContext';
 import Presenter from './Presenter';
+import CODES from '../model/CODES';
 import * as engine from '../model/engine';
 import { bindingReport } from '../model/validate';
 
@@ -61,6 +62,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);
 
@@ -70,7 +75,7 @@ export default class Editor extends Presenter {
     for (let j = 0; j < _report.errors.length; j++) {
       const err = _report.errors[j];
       if (err.parentBinding === this.binding) {
-        if (err.code === engine.CODES.TOO_FEW_VALUES_MIN) {
+        if (err.code === CODES.TOO_FEW_VALUES_MIN) {
           const item = err.item;
           let counter = item.getCardinality().min;
 
@@ -82,9 +87,9 @@ export default class Editor extends Presenter {
             }
             return counter === 0;
           });
-        } else if (err.code === engine.CODES.AT_MOST_ONE_CHILD) {
+        } else if (err.code === CODES.AT_MOST_ONE_CHILD) {
           this.binding.getChildBindings().forEach((binding) => {
-            if (binding.getMatchingCode() !== engine.CODES.OK) {
+            if (binding.getMatchingCode() !== CODES.OK) {
               renderingContext.domClassToggle(this._binding2node[binding.getHash()],
                 'errorReport', true);
             }

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/ValidationPresenter.js

@@ -1,6 +1,7 @@
 import renderingContext from './renderingContext';
 import Presenter from './Presenter';
-import engine, { CODES } from '../model/engine';
+import CODES from '../model/CODES';
+import engine from '../model/engine';
 import { bindingReport } from '../model/validate';
 
 const localize = (bundle, key, val) => {

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