I opened an existing pwa project into Wappler. When I click index.html I can open design or code view as expected. But when I open any other .html file inside Wappler, I can only see the code. Design view is grayed out. How can I access design view for all the html pages?
Hello,
The design view is only available for pages having HTML/head/body tags and content/include pages created in Wappler.
To expand on what @teodor mentioned. The Wappler editor looks for a custom tag at the top of the Include file.
Example:
Code from example:
<!-- Wappler include head-page="index.php" appconnect="local" is="dmx-app" bootstrap4="cdn" fontawesome_4="local" jquery_33="cdn" id="index" components="{"dmxFormatter":{},"dmxTyped":{},"dmxBrowser":{},"dmxStateManagement":{}}" dmx-on:load=""-->
If you add something like below, you might be able to get the Design view to work.
<!-- Wappler include head-page="index.html" -->
After that you could also add in App Connect, Bootstrap, and the other components to get the App Structure panel to display the structure.
Thanks @Teodor and @kfawcett. My goal is to modify Nectar web kit to create a PWA. All their pages start with < template >. Nectar’s rep told me it cannot be used with Wappler. And I can’t try your suggestion bc I got locked out of trial period. What should I do? Happy to subscribe but want to be sure I can use it with Nectar. Here’s their link:
https://nectar.website/
Nectar’s format is exactly the same as Framework7 Kitchen Sink:
One index.html and several < template > html pages with components.
Why not just use Framework 7 that is already in Wappler?
Design. Is it possible?
Yes, Framework 7 is already in Wappler.
I meant Nectar. Which is essentially Kitchen Sink with better design and more pre-made pages. Both built on top of Framework7. I want to open nectar (or kitchen sink) inside wappler and start creating my custom pwa by copy paste their components onto the visual editor. How can I do this?
If Nectar is based on Framework7, then the majority of the template should work within Wappler. In order for Wappler to understand that you’re using Framework7 you need to add the framework to the index.html page.
For all of the pages, except for index.html you should add include code like this at the top. the “framwork7…” should match what you picked on the index.html page.
