custom component for vaadin 23

Flow
1

Hi.
Anyone has examples on creating vaadin 23 flow custom component ?
I need a custom component with combination of a image, text field, button. Custom Component allows to set image data from server side.
@SoP89

2

You can browse Vaadin Add-on Directory. There are many different kinds of components there and usually there is Github repository link there.

For example I have published many there and using different techniques.

You can compose custom component with Java and low level Element API as server side composite. See e.g. GitHub - TatuLund/TwinColSelect: TwinColSelect component for Vaadin 14, 23 and 24

Or you can compose custom element using Lit and TypeScript and then implement Java API for it. See this GitHub - TatuLund/TabSheet: A simple TabSheet component for Vaadin 23 implement using LitElement based web component and Create a custom component with Lit | Vaadin for example.

The both repos show also how test your custom component.

3

Thanks for sharing Tatu.
@quick-witted-echidna FYI

4

@yummy-rhino my custom component has to create some child components dynamically. Example: My custom component needs a list of some textboxes. Number of textboxes are depending on the input binding data which to be set in runtime. Say if i set the input value for my custom component to create 3 textboxes, then custom component will generate 3 textboxes for it. So my custom component needs to have script to create child components dynamically at runtime.
Do you have any idea to do it ?

5

like these selection boxes. Number of selection boxes to be created in runtime by when we set value to the custom component
image.png

6

You can write any logic in your custom component as you like

7

even script to create child components in runtime ?

8

Sure why not

9

you have any example code to do this thing ?

10

I probably don’t the question, but once you apply a value to your custom component, a method is called and in there you add your logic? https://vaadin.com/docs/latest/components/custom-field

11

Perhaps it would be worth underlining the fact that a Flow component is really just a bunch of Flow UI code wrapped into its own Java class.

Which means that anything you can do in Flow outside of what you’d call a “component”, you can do in a component in exactly the same way.

In fact, the Java class representing a view in the application (that typically extends VerticalLayout or HorizontalLayout or Div), is also a component in the Flow sense of the word.

12

seem custom field is the thing I need

13

thanks for sharing the point

14

Below is code in custom component.

`import
( customElement, html, LitElement, import ‘@vaadin/vaadin-text-field’;
property }
from “lit-element’
@customElement(‘my-text-fields’)
export class MyTextFields extends LitElement t
@property (t type: Array }) data: string] = L”‘,
‘’];
Tender) t
return html’
$Ethis.data.map((value, index) =
html
‹vaadin-text-field
label=“Text $findex + 1}”

  • value=“$(value}”
    @change=“${(e: any) => this.updateData(index, e. target.value)}”
    ›
    }
    updateData index:
    number, value: string) (
    this.data[index] = value;
    this.requestUpdate();`
15

i want to use “for loop” to create multiple text-fields:
put for loop in below code is right way ?:

  return html'
  $Ethis.data.map((value, index) =
  html
  ‹vaadin-text-field
  label="Text $findex + 1}"
  - value="$(value}"
  @change="${(e: any) => this.updateData(index, e. target.value)}"
  ›</vaadin-text-field>
}```
16

image.jpg

17

That’s not Flow, though. Do you want to build a component in Java to use only in a Flow app, or do you want to build a Lit Web Component that can be used in non-Flow apps too?

18

i want to build a custom component with Lit and using it in Flow app. If the custom component has fixed number of child components, we can build it easily. But now my custom component needs generate child components dynamically. So we want to put a “for…loop” in Lit to generate these child components

19

right, well, I’m no Lit expert (and you’re asking this in the Flow channel), but the screenshot you posted there is doing exactly that, through a map, right? It maps each item in the array to a rendered <vaadin-text-field>