Time Picker component not visible in production Profile

Flow
1

I’m using a Time Picker in an Layout.
If I run with ‘mvn spring-boot:run’ it is visible in my browser but when I start with mvn spring-boot:run -Pproduction it is no more visible.

2

Time Picker component not visible in production Profile

3

Can you share some of your code? Do you have a javascript error?

4

Sorry, it is the DateTimePicker and in production mode the timePicker UI is absent - only DatePicker is visible.

5

Code sharing is blocked by a Discord Bot…

6

vonPicker = new DateTimePicker(“Beginn”);
vonPicker.setLocale(Locale.GERMANY);
vonPicker.setDatePickerI18n(setDatePickerGerman());
vonPicker.setWidthFull();
vonPicker.setTooltipText(“Beginn”);
vonPicker.setValue(LocalDateTime.now().plusHours(1));
abfrageBinder.forField(vonPicker).asRequired(PFLICHTFELD)
.withValidator(vonPickerVal → vonPickerVal.isBefore(bisPicker.getValue()),
“Geben Sie ein Beginn-Datum vor dem Endedatum ein!”)
.bind(Abfrage::getBeginnzeitpunkt, Abfrage::setBeginnzeitpunkt);

    bisPicker = new DateTimePicker("Ende");
    bisPicker.setLocale(Locale.GERMANY);
    bisPicker.setDatePickerI18n(setDatePickerGerman());
    bisPicker.setValue(LocalDateTime.now().plusDays(1).plusHours(2));
    bisPicker.setWidthFull();
    bisPicker.setTooltipText("Ende");
    bisPicker.setLabel("Ende");
    bisPicker.setMin(LocalDateTime.now().plusDays(1).plusHours(1));
    bisPicker.addValueChangeListener(e ->
            abfrageBinder.forField(bisPicker).asRequired(PFLICHTFELD)
                    .withValidator(bisPickerVal -> bisPickerVal.isAfter(vonPicker.getValue()),
                            "Geben Sie ein Ende-Datum nach dem Beginn-Datum ein!")
                    .bind(Abfrage::getEndezeitpunkt, Abfrage::setEndezeitpunkt)
7

…
HorizontalLayout hLayoutPicker = new HorizontalLayout(vonPicker, bisPicker);
hLayoutPicker.setWidthFull();
vLayoutAbfrage.add(hLayoutPicker);
…
SplitLayout splitLayout = new SplitLayout(vLayoutAbfrage, anotherComponent);
splitLayout.setSplitterPosition(70);
splitLayout.addThemeVariants(SplitLayoutVariant.LUMO_SMALL);

    this.add(splitLayout);
    this.getFooter().add(teilfragenButton, abbrechenButton);

    return this;
8

class extends Dialog

9

Any news?

10

You can try to add an annotation LoadDependenciesOnStartup. The documentation is here Production Build | Deploying to Production | Vaadin Docs

11

It’s very likely the same issue as here: Discord

12

Thank you for your answer. I will check.

13

I also checked html and saw that the timepicker ist empty:

14

image.png

15

Did you try to add this annotation @LoadDependenciesOnStartup on top of the class that implements AppShellConfigurator ?

16

The issue was a wrong annotation. It was using Route for a component instead of UIScope.
Issue solved. Thanks.

17

do you mind explaining further, I am having a similar issue

18

@faithful-emu
It seems that there are JS issues for me, and I guess it fails to set the value for DateTimePicker:
message.txt (10.1 KB)

19

image.png

20

The relevant code:

    public void updateFields(){
        nfId.setValue(0.0 + data.id);
        tfTitle.setValue(data.title);
        LocalDateTime localDateTime = data.msCreated.toLocalDateTime();
        UI ui = UI.getCurrent(); // not null
        dfMsCreated.setStep(Duration.ofMinutes(60));
        dfMsCreated.setValue(localDateTime);
        dfMsCreated.setValue(LocalDateTime.of(2020, 6, 12, 15, 45, 8));
        selStatus.setValue(data.status);
        selType.setValue(data.type);
    }