Hello, Your component looks so useful but I can't manage to get it working

Directory URL Parameter Mapping
1

Hello,

Your component looks so useful but I can’t manage to get it working can you look at this piece of code ? It outputs null when accessing a page with url like “example/someString”. Thank you very much !


18526887.png
18526887.png879×346 35.3 KB

2

Hi!

The problem here is caused by the order of execution: at the time of view construction (that is, when constructor is called), it is not attached to the UI and, therefore, router data is not available. Then, once the router creates instance, it calls setParameters(...) and then, if your implements BeforeEnterListener, calls beforeEnter(). Only at this point route arguments are parsed and assigned to fields.

3

You are a life saver thank you very much appreciate your quick response !

And if I may ask what is the best way for me to store URL and format it?

Example: I’m on url: “param1/param2/param3/param4…” and user decides to use filter and that filter has addValueChangeListener which is changing param2. What is the best way to change this param and reroute to that url ?

4

I think UrlParameterMappingHelper.format(...) might help:

@UrlParameter
public Integer orderId = 12345;

@UrlParameter
public Integer orderRowId = null;

...

String url = UrlParameterMappingHelper.format(this,"order/:orderId
[/:orderRowId]/:1", "edit");
// url = "order/12345/edit"

orderRowId = 78;
String url2 = UrlParameterMappingHelper.format(this,"order/:orderId
[/:orderRowId]/:1", "edit");
// url = "order/12345/78/edit"
5

Note, that practically you don’t have to redirect, a call to UI.getCurrent().getPage().getHistory().replaceState(null, url); will replace the URL in the location bar in browser. Of course, you’ll have to apply changes yourself in this case, but, on the other hand, it’ll be faster.

6

Is there a way I can include query parameters as well ?

7

Here is an example of parsing query parameters:

import org.vaadin.flow.helper.*;

...

@Route("example")
@UrlParameterMapping(queryParameters = { "exampleId=:exampleId", "mode=:mode" })
@UrlParameterMapping(path = ":exampleId", queryParameters = { "mode=:mode" })
// Will match /example/12345 and set exampleId to 12345, mode to null
// Will also match /example?exampleId=34567&mode=edit and set exampleId to 34567 and mode to "edit"
class MyView extends Div implements HasUrlParameterMapping {
    @UrlParameter
    public Integer exampleId;
    
    @UrlParameter(regEx = "edit|preview")
    public String mode;
    ...
}

Theoretically, UrlParameterMappingHelper.format might also work with query parameters, But I have never tested it practically, so there could be some issues with that,