Save Sections for Re-usability Locally & Globally

Feature Request
#1

It’s been brought up in various places, so I’m making an official request so it is here.

It would be fantastic if there was a way to save a certain group of elements as a re-usable item that can be inserted in other parts of the website. For instance, if I created a row that had a bunch of stuff and formatting - I could save it and then insert it on other pages. Webflow has something like this called Symbols.

When you save it - it can have global or local scope. So if global - any change I make on that saved row - it will update on the entire website with the same changes. Whereas local will only effect the current page and not other locations I’ve inserted it.

In addition to this, I think it would be cool, if users could export these symbols or whatever, and then Wappler.io could have a section that allows users to download things people have made and saved and then import it into their own project.

#2

Wappler has that now. Isn’t that the same as includes?

#3

Includes doesn’t allow you to make changes without it changing every occurrence of that item.

#4

well if you want local then just copy the code to your page.
its not that time consuming

#5

I understand what Chad means - it’s being asked in the past indeed.

It’s about selecting and element or a group and defining it as a new template element. Maybe with parameters.

This is actually how some of our Bootstrap 4 templates already work.

We just need to make it more user manageable and also improve the insert components dialog to also show “user” components

2 Likes
#6

So basically we are talking about snippets, but a little better than snippets, so snippets extended because you can make it global or local. Makes sense I suppose.

2 Likes
#7

Would be nice to see an advanced snippet component and so beneficial…so I had a play with the Includes on a custom navbar, created it on a blank page, saved it to includes. I then opened up an existing project and started adding the SSI to the pages, worked as expected.

The problem is there is no way of opening up the SSI back in the design view and modifying it, it only opens in txt format…change to HTML and it still doesn’t allow it to open in Design View.

How can you save a snippet, re-use it throughout a project but still be able to visually see what you have, modify it and have it update pages throughout the project?

#8

Hi Charlie, you should be able to edit your include directly in design view. Have you followed the instructions in this documentation?

https://wappler.io/docs/#Server-Side-Includes

#9

Hi Brad, it tells you how to create an SSI, where to save it and how to load it. There is nothing about being able to edit in design view, I can open it up in the editor window, I can double click on it in the file manager view and it opens up the code editor. When I insert the SSI into a test page and try modifying it in design view it would let me.

#10

Hi Charlie - you open an SSI file just as any other file - from the File Manager - double click on the file to open in editor.

There is also a shortcut icon on the “Include file” inspector to open it direct from the place it is included.

#11

Yes doing that…but what my problem is, it’s showing up in code view, you can’t edit it as you visually see it when created initially…does that make sense ? What I’ve had to do for now is create a new page, create the nav bar in that page, then create the SSI. If I want to update the nav bar I open up the page I created it in and can see it visually, do the changes and see what I’m doing in design view then create the SSI again and overwrite the one initially created.

It would be cool if when I opened the SSI it automatically opened in a design view (not code) then you can change it graphically rather than by code…yes I’m a visual person not a coder and everything is done design wise rather than code wise

#12

SSI fiels create with Wappler, have a special comment on top of the code as first line:

<!-- Wappler include  -->

This makre sure the design view recognize them. Also used frameworks are automatically added as attributes, like:

<!-- Wappler include  jquery_slim_33="cdn" bootstrap4="cdn"-->

So if you have include files not generated by Wappler - you might want to include the above comment and reopen them. Then they will render in design view as well

1 Like
#13

Hi George,

The images below shows what I have when creating the SSI in Wappler. You’ll see that when I open it from the File Manager it opens in text/code and the design view button is greyed out, I can’t use it. When the SSI is inserted into a new page then yes it does render in the design view, but I can’t work on it.

Capture2
Capture2.PNG1063×312 17.6 KB

#14

Capture1
Capture1.PNG2766×797 120 KB

#15

Your SSI file does not have an extension (.php/.html) added.
Make sure you save the file in the required format, otherwise the editor doesn’t know what format it is.
So “Navbar Test” file must be saved as “NavbarTest.php” or “NavbarTest.html”.

1 Like