How to change URL and page content without reloading page ? is it possible in weweb?

Ask us anything How do I?
1

I want to make an admin panel using Weweb. Our requirement is to have options on the left side, like any CMS (Content Management System), such as ‘Add Teacher,’ ‘Add Student,’ and ‘Add Course.’ When I click on an option, like ‘Add Student,’ a form should appear on the right side, and the URL should be something like ‘domain.com/student.’ However, when I click on ‘Add Teacher,’ the page should not reload, but the URL should change, and the student form should disappear while the teacher form appears.

Can I achieve this in Weweb, and how can I do it? Please share the method or approach I should use.

2

You need to use multipage sections that are linked. This way it will work ss you intended

3

please explain how? It seems like an elementary thing, which is elementary to do in any builder. But with weweb everything is different. I am already starting to hate it because of this.

4

If I do something with custom JS, it doesn’t work in the editor because the editor uses a different page path system. This turns working on the project into pure hell. When the task seems elementary simple. And in any other builder it can be done in 2 minutes. I’ve been working on this task for two days already.

5

Hello @se.belobrov :wave:

I understand your frustration, and we are sorry about this. While we genuinely want to help, please don’t use the community for venting. We aim to keep this space friendly and focused on solutions. This is a message to all community members.

Moreover, If you are stuck, you can contact support or come here, we also hold office hours. That being said, what you are trying to accomplish is easier in WeWeb than using custom JS and it can be done in less than 2 minutes.

There are two ways to manipulate URLs: using URL paths and query variables.

URL Paths:

URL Paths are the parts of the URL that come after the domain name and before any query string, separated by forward slashes. They represent hierarchical data or resources:
“users/123/posts”

When you add a page, you’re inviting to set the URL path by passing a dynamic parameter:

urlPath
urlPath2082×862 82.6 KB

When navigating to the page from another page, whether it be through using the Link to property or the Navigate to action, you will then be able to pass the ID

image
image752×1088 43.7 KB

You can use “Link to” or ‘‘Navigate to’’ in order to navigate to the same page or a different page and pass the ID as a parameter

You will then be able to retrieve the variable in the dynamic page. Furthermore, you don’t need to create and bind a new variable, it’s already provided:

image2
image2892×728 38.4 KB

Query variables

Query variables are parameters added to a URL after a question mark (?) that provide additional information for filtering, sorting, or changing the page content. They use key-value pairs in the format ?key=value

You can create a variable of type query:

image
image696×1252 36.7 KB

This variable will hold whatever value you pass to the URL, let’s say you have a URL /gallery?currentSelection=123, the variable will automatically be set to 123

To manage navigation using queries in WeWeb, it depends whether you stay on the same page or not:

  • If you change the page, you can use the Link to property or create a workflow with Navigate to
  • If you stay on the same page, you need to use the Change variable value action

If you do that, it will work the same way in the editor and published app

Let me know if you are still stuck or if something is not working. We are here to help, but since I don’t know the specific details of your project requirements, I might be missing something here.

1 Like