JavaScript interaction with Fields

General
1

Hello,

first of all my apologies if this is the wrong forum. I thought “general help” fits best. If not, please feel free to move my post to a more appropriate one.
Here’s my problem:

I have a basic form with the following fields:

• First-Name
• Last-Name
• User-Name
• Passwort
• Type (e.g.: Admin, Master, User, Guest |more types can be added by the user)
• Date-of-Birth
• Telephone-Number

Since the user can add/change the “Type” I cannot hard-code rules. Therefore I want the user to be able to add Javascript to define his/her own rules. In this case the script should run every time ”Type” is changed.

For example something like this:

var a = form.getValue(Type);
if (a  == ‘Admin’) {
   form.setMandatory(‘Telephone-Number’, true);
   form.setMandatory(‘Date-of-Birth’, true);
} else {
  Form.setVisibility(‘Telephone-Number’, false);
}

Has anyone done something like this? Any suggestions where to start? Should I try to write my own libraries? Or should I use jQuery or something similar?

Any help is appreciated and thank you in advance,
Chris

2

Hi Chris
Rather than meddling with the client side implementation, you might want to set the “type” field immediate and take the necessary actions server-side instead. With Vaadin you should avoid clint-side business logic.

Here’s an example:

Select select = (Select) form.getField("type");
select.setImmediate(true);
select.addListener(new Property.ValueChangeListener() {
		public void valueChange(ValueChangeEvent event) {
			if ("Admin".equals(event.getProperty().getValue())) {
				form.getField("telephone").setRequired(true);
				form.getField("birthdate").setRequired(true);
			} else {
				form.getField("telephone").setRequired(false);
			}
		}
	});

In addition, when doing Vaadin client-side programming, always prefer GWT api over plain javascript/jQuery. See
https://vaadin.com/book/-/page/gwt.html

3

Hello Tomi,

sorry it took me so long to answer but I tried to restructure the code and thought a lot about how to put as much logic into the server side. However during this „restructuring/thinking“ phase it became more and more obvious, that we need to be able to offer the end user some possibility to execute some basic Javascript functions. The thought is to deploy the application and then leave the individual logic to the end user while we only do general updates to the program.
Another example of what we are trying to do is a form with:

  • First-Name
  • Last-Name
  • Date-Of-Birth
  • User-Name
  • Password

It would be great if the end user could create their own logic on how to handle “User-Name”. For example some might want to be able to combine the First-Name and the Last-Name to a User-Name, or always add the year of birth to it…

So I guess we need a client side mechanism. I was hoping that someone might have developed something like this. If there was/is money involved maybe there is a way I could contribute some as well…

Or is there a way to “inject” java code into an application without redeploying it? This would also be a nice thing to have… ?

Thank you for your thoughts,
Chris