diff --git a/packages/form-js-viewer/src/render/components/form-fields/Button.js b/packages/form-js-viewer/src/render/components/form-fields/Button.js
index 09d330a81..966c88f3c 100644
--- a/packages/form-js-viewer/src/render/components/form-fields/Button.js
+++ b/packages/form-js-viewer/src/render/components/form-fields/Button.js
@@ -1,4 +1,5 @@
import { formFieldClasses } from '../Util';
+import { useSingleLineTemplateEvaluation } from '../../hooks';
const type = 'button';
@@ -7,6 +8,8 @@ export function Button(props) {
const { action = 'submit' } = field;
+ const evaluatedLabel = useSingleLineTemplateEvaluation(field.label || '', { debug: true });
+
return (
);
diff --git a/packages/form-js-viewer/test/spec/render/components/form-fields/Button.spec.js b/packages/form-js-viewer/test/spec/render/components/form-fields/Button.spec.js
index 481f1774e..53f51c0e0 100644
--- a/packages/form-js-viewer/test/spec/render/components/form-fields/Button.spec.js
+++ b/packages/form-js-viewer/test/spec/render/components/form-fields/Button.spec.js
@@ -4,6 +4,8 @@ import { Button } from '../../../../../src/render/components/form-fields/Button'
import { createFormContainer, expectNoViolations } from '../../../../TestHelper';
+import { MockFormContext } from '../helper';
+
let container;
describe('Button', function () {
@@ -38,6 +40,44 @@ describe('Button', function () {
expect(button.textContent).to.equal('Reset');
});
+ it('should render with expression label', function () {
+ // when
+ const { container } = createButton({
+ initialData: {
+ foo: '42 labels',
+ },
+ field: {
+ ...defaultField,
+ label: '=foo',
+ },
+ });
+
+ // then
+ const button = container.querySelector('button');
+
+ expect(button).to.exist;
+ expect(button.textContent).to.equal('42 labels');
+ });
+
+ it('should render with templated label', function () {
+ // when
+ const { container } = createButton({
+ initialData: {
+ foo: '42',
+ },
+ field: {
+ ...defaultField,
+ label: 'My label {{foo}}',
+ },
+ });
+
+ // then
+ const button = container.querySelector('button');
+
+ expect(button).to.exist;
+ expect(button.textContent).to.equal('My label 42');
+ });
+
it('should render with default type (submit)', function () {
// when
const { container } = createButton();
@@ -132,10 +172,18 @@ const defaultField = {
type: 'button',
};
-function createButton(options = {}) {
- const { disabled, field = defaultField } = options;
-
- return render(, {
- container: options.container || container.querySelector('.fjs-form'),
- });
+function createButton({ services, ...restOptions } = {}) {
+ const options = {
+ field: defaultField,
+ ...restOptions,
+ };
+
+ return render(
+
+
+ ,
+ {
+ container: options.container || container.querySelector('.fjs-form'),
+ },
+ );
}