[Feature] Allow users to set read-only fields for the form.

[YaroslavOvdii]

@sofiiakvasnevska

Issue

https://github.com/Fliplet/fliplet-studio/issues/6734

Description

Allow users to set read-only fields for the form.

Screenshots/screencasts

https://share.getcloudapp.com/lluJrqBq

Backward compatibility

This change is fully backward compatible.

Reviewers

@upplabs-alex-levchenko

[tonytlwu]

I watched the screencast. Great screencast. Here are some changes.

Multiline input

Each line break needs to be converted into a <br> tag in the <p> inner HTML.

Star rating

Only show the number of stars matching the selected value

Checkboxes

Don't show all the options. The screencast showed 2 options are available, and none were selected. The output should show all the selected options in an unordered list.

Radios

Don't show all the options. The screencast showed 2 options are available, and none were selected. The output should show all the selected option in a <p> tag.

[YaroslavOvdii]

@tonytlwu
About Radios and Checkboxes.
If user doesn't set a default value and set readonly that means we wouldn't show anything in the build?

[tonytlwu]

If nothing is selected, show — in the <p> tag.

Note that the values could still be loaded by field.set() so make sure they work as well. It might not have a default until a data source entry is loaded.

[YaroslavOvdii]

@tonytlwu
Added requested changes.
Screencast on how these fields behave now.

[tonytlwu]

@YaroslavOvdii

Checkboxes

At 0:10 you set a default value for the checkbox, but I don't see any values displayed at 0:14 after it's marked as read-only.

Multiline

If read-only is enabled, hide the Rows option because it's no longer relevant.

[YaroslavOvdii]

@tonytlwu

Checkboxes
At 0:10 you set a default value for the checkbox, but I don't see any values displayed at 0:14 after it's marked as read-only.

To display selected checkboxes I checking if we have a checkbox option in value. And it seems that on the edit screen which you see on 0:14 we don't have set value yet but in build, value is set.

I wasn't able to figure out why it's happening.
Could you please give me the idea of where I should look to solve this issue?

[tonytlwu]

@YaroslavOvdii Please provide more technical detail of what's wrong and what you've tried to do to resolve it.

[YaroslavOvdii]

@tonytlwu
I believe it would be better if I just show what I meant in the post before.
What I've done in this video :
Added to the checkboxes template display of the selected value so we could see it.

As you may see, in the interface part, the value stays always empty.

[tonytlwu]

@YaroslavOvdii Yes, that's the same behaviour I saw in the other video too. I need you to investigate to find out why this is technically happening.

[YaroslavOvdii]

@tonytlwu with my further investigation I've discovered that we do not update a value in the interface because when we check the default value we are calling this emit this.$emit('_input', this.name, ordered);

but in the interface, there is nothing that is listening for this event.

So I've tried to add listener on this event the same as in build but it appears that the method that we use in build doesn't exist in the interface.

And unfortunately, I wasn't able to determine what library is controlling the interface. Could you please pinpoint where I can look to solve this issue?

[tonytlwu]

@YaroslavOvdii @squallstar will be more equipped to help you with the challenge

[squallstar]

@YaroslavOvdii the onInput method is responsible for updating the actual values in the list of variables that are sent when the form is submitted. This is because components cannot update the value of a parent component (the form itself) as Vue does not support two-way binding of properties.

Here is where onInput is defined:

fliplet-widget-form-builder/js/libs/form.js

Lines 316 to 335 in 4a99aec

	onInput: function (fieldName, value, fromPasswordConfirmation) {
	var $vm = this;
	this.fields.some(function(field) {
	if (field.name === fieldName) {
	if (field._type === 'flPassword' && fromPasswordConfirmation) {
	field.passwordConfirmation = value;
	} else {
	field.value = value;
	}
	$vm.triggerChange(fieldName, value);
	return true;
	}
	});
	if (data.saveProgress && typeof this.saveProgress === 'function') {
	this.saveProgress();
	}
	},

I am not sure whether you actually need that for achieving your feature but you can give it a go at copying it where required if necessary.