Framework 7 correct use of <template>?

i used to wrap content for the view in framework 7 to be loaded via routes. However if trying to put any content into a template wappler experiences some really weird behaviour like not including the html your trying to add from the child, however also sometimes add the child but not display the content or even the added child in the app structure view.

I am not sure if this is a bug or i am just doing something wrong here. Its really annoying to have to wrap the content in a template every time i want to deploy the code to test it in a browser then unwrap it again when i need to work on it again.

Is there any way to automatically wrap the page in a template ? I tried to play around with server inside includes but im still pretty fresh at this so i rather miserably failed or it cant be used like that.

create a page with the template and then add the path
example template page:

Add path, select in the route properties Type Component Url

I don’t know if it’s the best way but it works well for me

1 Like

Thanks, that’s how I have been trying to do it too. Current I’m putting the page only in the template when wanting to test the page then taking it out again when I need to edit it, it’s a huge pain and I’m not sure if it’s expected behavoir. Maybe I should be working out of dom view instead?

Don’t you have issues within wappler when adding elements that are in a template component though?

How do you deal with that?

Here i have an empty contents page inside a template block which contains the page and page contents.

I then click on block to add the block and i get this:

Nothing was added to the page, oddly the first time i did this it actually added the code to the page but did not add the component in the app structure list.

If i then delete the template block and goto add the block as before it correctly puts in the code and adds the component to the app structure as shown here:

I was wondering if there were any reason to this, its a bug or there is something i may need to add in the wappler include for it to work as i expect it to.

Edit: trying to add from the DOM menu get the same result of nothing getting added.


I have reproduced your sequence, and the same thing happens to me too, when i add an elements in the “app structure” menu it does not appear, even if the code is inserted correctly in the html.

I solved it by simply reloading the page or saving the template

To add elements directly from the DOM you must know the hierarchical structure of the framework well, you could insert elements that then do not work correctly, I suggest you use the “app structure” menu, there is everything you need.

I usually also use the official Framework7 documentation , there are many examples, just copy and paste into the project to see the results.

1 Like

I very much appreciate your time and input Pier.

I find what you say very strange, because on my computer its just constantly busted and no amount of editing\reloading or anything will fix it.

Here for example i have pulled out all the components and hit refresh and they still exist in the app component tree.
Reloading from the app structure bar or the design structure bar buttons makes no difference.

If i exit the page entirely then reload it then it returns empty, however trying to add a component and it doesn’t appear.

Here i have made changes to one of the components in the app structure and the changes are not reflected in the code, even after doing a refresh of the page, including refreshing the page from design view :

Really strange behaviour i am getting, i have been trying things for countless hours and have never got it to work. I have mostly just given up for the time being and posted a bug report here: Framework 7 Template Bug #1650968013152

I have certainly been digging into the documentation, after a lot of effort i managed to get the picker working in the browser though it doesnt show up in the wappler design. I did this by doing pretty much exactly what you are doing here, loading the page through a component url and putting the appropriate scripting down the bottom. This is how i eventually came across this issue i am having with the template component, as i can see ill be using it a lot i would like to get it ironed out and easier to use.

To make things a bit easier on myself in the shorter term i bound ctrl+k+c (comment selection) and ctrl+k+u (uncomment selection) to my mouse side buttons to comment and uncomment the template lines little easier.

To anyone completely new and wanting to work out how you can use the components that are not currently implemented you can copy the examples from the docs into a newly created HTML contents page:

In this example i am using the picker which doesn’t currently yet have native integration in Wappler but we can call it up anyway, the code is located at the very bottom of the page: - copy everything from the start of “template” to the end of “/script”, including the brackets.

You must leave the <!— Wappler include header that wappler makes because this tells the wappler UI what frameworks you are using and where to inherit styles - this also means that wappler wont ditch the right hand side section (app structure / design / styles / dom) leaving you writing html code with no assistance by hand. Delete everything that isn’t in the The result will look something like this:

You must have framework 7 router handler enabled which is the default in your project settings to be able to see the component url in the drop down in the next step.

Next you do as Pier has suggested and make a link to that page through the router. You then link to that content on your main page view like so:

- credit to Pier for photo

Next you will create a link which uses that route.

Then select the route you made on the popup and click select.

Now when you click on the link (in preview(eyeball) mode) you made in your main page you will see something like this:

The page link will take over your main view (you need to have a main view for this to work), if you have been messing with stuff start fresh or add this:

You can view the example by toggling the preview window from your main index page then clicking on your brand new link. However, you wont be able to edit it here you will need to open the html you made and edit it from there.

It will appear differently from the preview window to what it looks like when your editing if those components don’t have wappler converted components.
Your view when editing the page should look a little like like this:

I am unsure if there is a fix for that but its not really a huge deal breaker either way. Once your done and you run the app, the code will appear as it should.

1 Like