Sub-PR: expression fields base

packages/form-js-editor/src/features/palette/components/Palette.js

@@ -26,7 +26,7 @@ import { PaletteEntry } from './PaletteEntry';
 
 export const PALETTE_GROUPS = [
   {
-    label: 'Basic input',
+    label: 'Input',
     id: 'basic-input'
   },
   {

packages/form-js-editor/src/features/properties-panel/PropertiesPanelHeaderProvider.js

@@ -11,6 +11,7 @@ import { useService } from './hooks';
 const headerlessTypes = [
   'spacer',
   'separator',
+  'expression',
   'html'
 ];
 

packages/form-js-editor/src/features/properties-panel/entries/ConditionEntry.js

@@ -46,14 +46,23 @@ function Condition(props) {
     return editField(field, 'conditional', { hide: value });
   };
 
+  let label = 'Hide if';
+  let description = 'Condition under which the field is hidden';
+
+  // special case for expression fields which do not render
+  if (field.type === 'expression') {
+    label = 'Deactivate if';
+    description = 'Condition under which the field is deactivated';
+  }
+
   return FeelEntry({
     debounce,
-    description: 'Condition under which the field is hidden',
+    description,
     element: field,
     feel: 'required',
     getValue,
     id,
-    label: 'Hide if',
+    label,
     setValue,
     variables
   });

packages/form-js-editor/src/features/properties-panel/entries/ExpressionFieldEntries.js

@@ -0,0 +1,76 @@
+import { FeelEntry, isFeelEntryEdited, SelectEntry, isSelectEntryEdited } from '@bpmn-io/properties-panel';
+import { useService, useVariables } from '../hooks';
+
+export function ExpressionFieldEntries(props) {
+  const { editField, field, id } = props;
+
+  const entries = [];
+
+  entries.push({
+    id: `${id}-expression`,
+    component: ExpressionFieldExpression,
+    isEdited: isFeelEntryEdited,
+    editField,
+    field,
+    isDefaultVisible: (field) => field.type === 'expression'
+  });
+
+  entries.push({
+    id: `${id}-computeOn`,
+    component: ExpressionFieldComputeOn,
+    isEdited: isSelectEntryEdited,
+    editField,
+    field,
+    isDefaultVisible: (field) => field.type === 'expression'
+  });
+
+  return entries;
+}
+
+function ExpressionFieldExpression(props) {
+  const { editField, field, id } = props;
+
+  const debounce = useService('debounce');
+  const variables = useVariables().map(name => ({ name }));
+
+  const getValue = () => field.expression || '';
+
+  const setValue = (value) => {
+    editField(field, [ 'expression' ], value);
+  };
+
+  return FeelEntry({
+    debounce,
+    description: 'Define an expression to calculate the value of this field',
+    element: field,
+    feel: 'required',
+    getValue,
+    id,
+    label: 'Target value',
+    setValue,
+    variables
+  });
+}
+
+function ExpressionFieldComputeOn(props) {
+  const { editField, field, id } = props;
+
+  const getValue = () => field.computeOn || '';
+
+  const setValue = (value) => {
+    editField(field, [ 'computeOn' ], value);
+  };
+
+  const getOptions = () => ([
+    { value: 'change', label: 'Value changes' },
+    { value: 'presubmit', label: 'Form submission' }
+  ]);
+
+  return SelectEntry({
+    id,
+    label: 'Compute on',
+    getValue,
+    setValue,
+    getOptions
+  });
+}

packages/form-js-editor/src/features/properties-panel/entries/index.js

@@ -16,6 +16,7 @@ export { TextEntry } from './TextEntry';
 export { HtmlEntry } from './HtmlEntry';
 export { HeightEntry } from './HeightEntry';
 export { NumberEntries } from './NumberEntries';
+export { ExpressionFieldEntries } from './ExpressionFieldEntries';
 export { NumberSerializationEntry } from './NumberSerializationEntry';
 export { DateTimeEntry } from './DateTimeEntry';
 export { DateTimeConstraintsEntry } from './DateTimeConstraintsEntry';

packages/form-js-editor/src/features/properties-panel/groups/GeneralGroup.js

@@ -18,6 +18,7 @@ import {
   HtmlEntry,
   HeightEntry,
   NumberEntries,
+  ExpressionFieldEntries,
   DateTimeEntry,
   TableDataSourceEntry,
   PaginationEntry,
@@ -43,6 +44,7 @@ export function GeneralGroup(field, editField, getService) {
     ...IFrameHeightEntry({ field, editField }),
     ...HeightEntry({ field, editField }),
     ...NumberEntries({ field, editField }),
+    ...ExpressionFieldEntries({ field, editField }),
     ...ImageSourceEntry({ field, editField }),
     ...AltTextEntry({ field, editField }),
     ...SelectEntries({ field, editField }),

packages/form-js-editor/src/render/components/editor-form-fields/EditorExpressionField.js

@@ -0,0 +1,32 @@
+import { ExpressionField, iconsByType } from '@bpmn-io/form-js-viewer';
+import { editorFormFieldClasses } from '../Util';
+import { useService } from '../../hooks';
+
+const type = 'expression';
+
+export function EditorExpressionField(props) {
+  const { field } = props;
+  const { expression = '' } = field;
+
+  const Icon = iconsByType('expression');
+  const expressionLanguage = useService('expressionLanguage');
+
+  let placeholderContent = 'Expression is empty';
+
+  if (expression.trim() && expressionLanguage.isExpression(expression)) {
+    placeholderContent = 'Expression';
+  }
+
+  return (
+    <div class={ editorFormFieldClasses(type) }>
+      <div class="fjs-form-field-placeholder">
+        <Icon viewBox="0 0 54 54" />{placeholderContent}
+      </div>
+    </div>
+  );
+}
+
+EditorExpressionField.config = {
+  ...ExpressionField.config,
+  escapeGridRender: false
+};

packages/form-js-editor/src/render/components/editor-form-fields/index.js

@@ -2,10 +2,12 @@ import { EditorIFrame } from './EditorIFrame';
 import { EditorText } from './EditorText';
 import { EditorHtml } from './EditorHtml';
 import { EditorTable } from './EditorTable';
+import { EditorExpressionField } from './EditorExpressionField';
 
 export const editorFormFields = [
   EditorIFrame,
   EditorText,
   EditorHtml,
-  EditorTable
+  EditorTable,
+  EditorExpressionField
 ];

packages/form-js-playground/test/spec/form.json

@@ -19,8 +19,8 @@
     },
     {
       "type": "iframe",
-      "label": "The bpmn-io web page",
-      "url": "https://bpmn.io/"
+      "label": "An example page rendered in an iframe",
+      "url": "https://example.com/"
     },
     {
       "type": "group",

packages/form-js-viewer/src/Form.js

@@ -175,6 +175,8 @@ export class Form {
       throw new Error('form is read-only');
     }
 
+    this._emit('presubmit');
+
     const data = this._getSubmitData();
 
     const errors = this.validate();

packages/form-js-viewer/src/render/components/FormField.js

@@ -53,6 +53,8 @@ export function FormField(props) {
     throw new Error(`cannot render field <${field.type}>`);
   }
 
+  const fieldConfig = FormFieldComponent.config;
+
   const valuePath = useMemo(() => pathRegistry.getValuePath(field, { indexes }), [ field, indexes, pathRegistry ]);
 
   const initialValue = useMemo(() => get(initialData, valuePath), [ initialData, valuePath ]);
@@ -121,8 +123,8 @@ export function FormField(props) {
     setInitialValidationTrigger(false);
 
     // add indexes of the keyed field to the update, if any
-    onChange(FormFieldComponent.config.keyed ? { ...update, indexes } : update);
-  }, [ onChange, FormFieldComponent.config.keyed, indexes ]);
+    onChange(fieldConfig.keyed ? { ...update, indexes } : update);
+  }, [ onChange, fieldConfig.keyed, indexes ]);
 
   if (hidden) {
     return <Hidden field={ field } />;
@@ -131,19 +133,28 @@ export function FormField(props) {
   const domId = `${prefixId(field.id, formId, indexes)}`;
   const fieldErrors = get(errors, [ field.id, ...Object.values(indexes || {}) ]) || [];
 
+  const formFieldElement = (
+    <FormFieldComponent
+      { ...props }
+      disabled={ disabled }
+      errors={ fieldErrors }
+      domId={ domId }
+      onChange={ disabled || readonly ? noop : onChangeIndexed }
+      onBlur={ disabled || readonly ? noop : onBlur }
+      onFocus={ disabled || readonly ? noop : onFocus }
+      readonly={ readonly }
+      value={ value }
+    />
+  );
+
+  if (fieldConfig.escapeGridRender) {
+    return formFieldElement;
+  }
+
   return (
     <Column field={ field } class={ gridColumnClasses(field) }>
       <Element class="fjs-element" field={ field }>
-        <FormFieldComponent
-          { ...props }
-          disabled={ disabled }
-          errors={ fieldErrors }
-          domId={ domId }
-          onChange={ disabled || readonly ? noop : onChangeIndexed }
-          onBlur={ disabled || readonly ? noop : onBlur }
-          onFocus={ disabled || readonly ? noop : onFocus }
-          readonly={ readonly }
-          value={ value } />
+        { formFieldElement }
       </Element>
     </Column>
   );

packages/form-js-viewer/src/render/components/form-fields/ExpressionField.js

@@ -0,0 +1,50 @@
+import { useCallback, useEffect } from 'preact/hooks';
+import { useExpressionEvaluation, useDeepCompareMemoize, useService, useEffectOnChange } from '../../hooks';
+
+const type = 'expression';
+
+export function ExpressionField(props) {
+  const {
+    field,
+    onChange,
+  } = props;
+
+  const {
+    computeOn,
+    expression
+  } = field;
+
+  const evaluation = useExpressionEvaluation(expression);
+  const evaluationMemo = useDeepCompareMemoize(evaluation);
+  const eventBus = useService('eventBus');
+
+  const sendValue = useCallback(() => {
+    onChange && onChange({ field, value: evaluationMemo });
+  }, [ field, evaluationMemo, onChange ]);
+
+  useEffectOnChange(evaluationMemo, () => {
+    if (computeOn !== 'change') { return; }
+    sendValue();
+  }, [ computeOn, sendValue ]);
+
+  useEffect(() => {
+    if (computeOn === 'presubmit') {
+      eventBus.on('presubmit', sendValue);
+      return () => eventBus.off('presubmit', sendValue);
+    }
+  }, [ computeOn, sendValue, eventBus ]);
+
+  return null;
+}
+
+ExpressionField.config = {
+  type,
+  label: 'Expression',
+  group: 'basic-input',
+  keyed: true,
+  escapeGridRender: true,
+  create: (options = {}) => ({
+    computeOn: 'change',
+    ...options,
+  })
+};

packages/form-js-viewer/src/render/components/icons/index.js

@@ -13,6 +13,7 @@ import SpacerIcon from './Spacer.svg';
 import DynamicListIcon from './DynamicList.svg';
 import TextIcon from './Text.svg';
 import HTMLIcon from './HTML.svg';
+import ExpressionFieldIcon from './ExpressionField.svg';
 import TextfieldIcon from './Textfield.svg';
 import TextareaIcon from './Textarea.svg';
 import IFrameIcon from './IFrame.svg';
@@ -31,6 +32,7 @@ export const iconsByType = (type) => {
     iframe: IFrameIcon,
     image: ImageIcon,
     number: NumberIcon,
+    expression: ExpressionFieldIcon,
     radio: RadioIcon,
     select: SelectIcon,
     separator: SeparatorIcon,

packages/form-js-viewer/src/render/components/index.js

@@ -15,6 +15,7 @@ import { DynamicList } from './form-fields/DynamicList';
 import { Taglist } from './form-fields/Taglist';
 import { Text } from './form-fields/Text';
 import { Html } from './form-fields/Html';
+import { ExpressionField } from './form-fields/ExpressionField';
 import { Textfield } from './form-fields/Textfield';
 import { Textarea } from './form-fields/Textarea';
 import { Table } from './form-fields/Table';
@@ -44,6 +45,7 @@ export {
   DynamicList,
   Image,
   Numberfield,
+  ExpressionField,
   Radio,
   Select,
   Separator,
@@ -69,6 +71,7 @@ export const formFields = [
   Taglist,
   Textfield,
   Textarea,
+  ExpressionField,
   Text,
   Image,
   Table,

packages/form-js-viewer/src/render/hooks/index.js

@@ -11,6 +11,7 @@ export { useReadonly } from './useReadonly';
 export { useService } from './useService';
 export { usePrevious } from './usePrevious';
 export { useFlushDebounce } from './useFlushDebounce';
+export { useEffectOnChange } from './useEffectOnChange';
 export { useDeepCompareMemoize } from './useDeepCompareMemoize';
 export { useSingleLineTemplateEvaluation } from './useSingleLineTemplateEvaluation';
 export { useTemplateEvaluation } from './useTemplateEvaluation';

packages/form-js-viewer/src/render/hooks/useEffectOnChange.js

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { usePrevious } from './usePrevious';
+
+function useEffectOnChange(value, callback, dependencies = []) {
+  const previousValue = usePrevious(value);
+
+  useEffect(() => {
+    if (value !== previousValue) {
+      callback();
+    }
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ value, ...dependencies ]);
+}
+
+export { useEffectOnChange };