How to achieve the same function as hidden input

Support
#1

I want to achieve a function , as html tag ’ ’ ，how do.

#2

Hi,

Could you please describe your task in more detail? For now, it’s unclear what you’re trying to achieve.

Regards,
Gleb

#3

Hi,
thanks !
Maybe I lost some info when I was writing.
My question is below:
For example , textfield component corresponding to html tag " < input type=‘text’ > " .
What is the component which is corresponding to html tag " < input type=‘hidden’ > " ?
or how to achieve the similar function?

#4

There is no built-in component that corresponds to <input type="hidden">, but you can create one with the help of Generic JavaScriptComponent.

  1. Create a JS connector file in the VAADIN directory (which must be created manually if not exists), e.g.: hidden-input-connector.js with the following content:
com_company_demo_component_HiddenInput = function () {
    let connector = this;
    let element = connector.getElement();
    element.innerHTML = "<input type=\"hidden\"/>";
}
  1. Add jsComponent to a screen, with the following definition:
<jsComponent initFunctionName="com_company_demo_component_HiddenInput">
    <dependencies>
        <dependency path="vaadin://component/hiddeninput/hidden-input-connector.js"/>
    </dependencies>
</jsComponent>

Demo project that demonstrates the above: input-hidden-demo.zip (83.3 KB). Take a look at user-browse.xml and hidden-input-connector.js

Regards,
Gleb

1 Like
#5

Hi Gleb, I was just wondering, how do I bind the data from input=hidden to a property/db column?
Or in general, how to persist data from jsComponent?
Thnak you! :pray::pray::pray:

#6

Hi,

jsComponent has no built-in data binding as it is not a field and can be used to integrate any JS library, so in general, if you want to persist data from jsComponent, you need to subscribe on value change and set value to an entity manually.

If you’re planning to use this jsComponent in multiple screens or bind to a multiple entity attributes, I’d recommend creating a full integration. It includes the followgin:

  • Create a Vaadin server-side component that extends AbstractJavaScriptComponent (see doc). In fact, jsComponent is a wrapper over AbstractJavaScriptComponent.
  • Create a Jmix wrapper component over Vaadin server-side component that implements data binding. Any existing field component can be used as an example, e.g. TextFieldImpl.
  • Create an XSD schema, XML loader and register a new component (CompositeComponent doc can be used as an example).

Regards,
Gleb