Routing problems with external admin template for bootstrap 5

Wappler General How To
#7

This is my html:

<div class="content-body">
    <div is="dmx-route" path="/" url="_dashboard.php" id="new_dashboard"></div>
    <div is="dmx-route" path="/editar-usuarios" url="_adm_modificar_usuarios.php" id="admin_modificar_usuarios"></div>
</div>

Project setting:
image

Meta tags created automatically:
image

The auto generated .htaccess file:

image
image696×205 7.61 KB

My menu link with:
href="./editar-usuarios"

The dmx-route id “new_dashboard” is default and this should be replace when clic on menu link calling route dmx-route id “admin_modificar_usuarios” that have this path="/editar-usuarios"
But when I hover mouse on menu link show up this:
https://mydomain.com/app/vistas/admin/editar-usuario
The URL contains the original path of the file, it can’t get routing.
Is like routing is not been recognize.
At this point I don’t know how to solve this.
I really appreciate you help at this moment.

#8

Please maybe @patrick or @Teodor a bit of help.

#9

That looks incorrect. There should be no dot. Did you select this from the picker?

Do you have links relative to option set correctly in project settings?
Maybe check the doc for this and retry.

#10

Is SPA, so is internal:
href="./editar-usuarios" internal

Every link with an individual file, just following the docs about this.

#11

Internal is nodejs
Dot is asp.net

You are working on PHP.

#12

Refer this: Creating Single Page Apps (SPA)

#13


I’m using Routes picker and it automatically put ./
image
image941×250 14.1 KB

Ok, I see that internal check option has not effect in my case, meanwhile the problem is still there.

#14

If I change this:
href="./editar-usuarios"
With this:
href="/editar-usuarios"

After click I get redirected into https://mydomain.com/editar-usuarios
So no parcial load, it made a complete refresh with a 404 page.
New url should be https://mydomain.com/admin/tablero/editar-usuarios but I can’t ge it to work.

#15

You probably need to create a fresh project and check if that is the behaviour and report.

I have an old PHP project, and don’t see the dot for routes. So either something is wrong in latest Wappler version or something is wrong with the project you are working on.

#16

The thing is that before was working, migrating everything to new panel template with new paths and links make me to remove all the old routes and create new ones.

#17

Panel template?

#18

Sorry, I mean a new theme, new bootstrap theme

#19

That has nothing to do with PHP or routes.
I am assuming you do not use Git. While setting up theme, you must have changed something else on the pages… Causing this issue.

If you do use Git, you can revert back to the state before theme.

#20

Thanks @sid, you were right, something in page was causing the problem, but not precisily my fault. Took me too much time trying to figure it out why this.

I hope this helps to others if are planing to use external bootstrap 5 templates.
The theme that I’m using is an Admin Dashboard Template, of course bootstrap 5. Updating bootstrap oblidge me to change evething because new version 5.1.0 that differ from local wappler.
The main menu structure start like this:

<div class="horizontal-menu-wrapper">
<div class="header-navbar navbar-expand-sm navbar navbar-horizontal floating-nav navbar-dark navbar-shadow menu-border container-xxl" role="navigation" data-menu="menu-wrapper" data-menu-type="floating-nav">

And exactly this piece of code data-menu="menu-wrapper" breaks routing. I don’t know why but removing it the routing start working as spected.

#21

Based on your experience with external themes is routing the only issue or you also loose a lot of wappler functionalities ?

#22

The problem with third party themes and people with no or low experience with HTML/CSS/JS is that they are not aware of what may go wrong and how to debug. They don’t know what third party scripts from the theme developers are used and how are they used.

Based on posts in this community, third party templates/themes only cause problems to people with no experience in web development, for the reasons above.

1 Like
#23

Can’t wait someone develop and sell wappler themes then :wink:

#24

You can build your own themes inside Wappler, instead of waisting time fiddling with third party scripts and codes.

#25

It’s what i’m doing, i did few tries but sounds more problems than anything else.

#26

It’s true, in fact, first panel that I started doing with wappler is with bootstrap 5, but wappler include 5.0.2 bootstrap, new version is now 5.1.0 and updating to this new version cause a lot of changes.
Wappler is able to do any theme using bootstrap 5.0.2 version, it just that I didn’t planning a quick grow of functionalyties, and before starting doing a mess with old theme, I migrate to new theme without realize that tiny problems like data- attibutes that could breakes functionalities, beyond that, my new current theme works just perfect. Desesperation in trying to solve things fast I didn’t realize that could test part to part to debug and find the problem until now.

My experience until now using external templates

Pros

  • Most of functionalities in css, jquery, and a tons of features comes out of the box.
  • Easy to replace tables, content or any dinamyc data with wappler Data Bindings.
  • Depending of the template, most libraries comes up to date like bootstrap.

Cons:

  • Using out of the box sample comes with a tons of unnecesary code or functionalities that probably not using, just checking that, for me this is even more faster that start from zero in wappler.

Only never start with blank page sample using the admin external theme, in that case is better start using wappler from begining.