Drag and Drop design way to arrange elements on Pages

Feature Request
#1

HI,

I´d like to request for a drag and drop visual way to move elements on a page in Wappler.

I find the actual, Bootstrap. Framework7 and plus plus plus…way a bit too sofisticated to arrange few elements one need on a page.
There seems to be a zillion options that a new user will not be looking for for to build a catalog or an admin website or even a small business website.

Added to the new Wappler vesions falling everyweek, one wonder when it can master the latest versions.

But most of all not having this visual way to drop Tables, fields, photo frame wherever you´d want them to appear quickly on a page is limiting the Design process and speed with Wappler as it is now…

Although there is quite some long and clear tutorials…things are just not as intuitive as they would probably be with a “drag and drop” then resize “mouse work”.

I can understand that Wappler s way of structuring Row/column/containers is a necessary step to offer responsive website / page making and databinding…but that is - to my view - a bit too stiff compared to what other website making tools already offer.
(although most dont deal with databinding)

Therefore if the Wappler Team could get inspired from those Visual tool down the road, Wappler would become a super easy tool to Design pages with it.

Among one of some great visual tool that requires almost no tutorial and can produce great looking website in few hours is one made by some italian guy :
[wysiwygwebbuilder.com](http://WYSIWYG Web Builder xx)

it can deal with some data binding to some xtend but is nto designed for that.

Still, I would recomand it as a great reference for a nice an efficient visual site builder.
…if only Wappler could manage the visual design part in a similar way :slight_smile:
hopes, hopes…
:rouler des yeux::clin d’œil:

2019: The Year in Review
#2

Please take a look on this post:

2 Likes
#3

This interface is super easy to use - if wappler worked like Blocs I would be very happy, I tried the demo and it is so easy to use and intuitive - check it out and please consider something like this for Wappler.

5 Likes
#4

Okay that Blocs looks really interesting. I guess a combination of about 80% percent of that way as blocs goes with a mix of my previous posts could solve thesese layout/design struggles.

:warning: I really want t clearify that we „Users“ are whining on a high level :warning:

1 Like
#5

Not all users. I’m sure Wappler has some great design features coming up, but I expect some users are more concerned about key features which are missing - particularly those which cannot be implemented in Wappler at all, and which some might consider ‘deal breakers’.

I imagine that anything developed in the design applications above can be created in Wappler too, but as far as I know it’s not possible to implement friendly URLs for dynamic pages for example. On a scale of 1-10, I would give friendly URLs 1 and drag/drop design features 11 (1 being the highest score).

4 Likes
#6

Don’t worry we are working simultaneously on both areas :slight_smile:

3 Likes
#7

totally agree… thats the kind of visual Designing I´d like to have at hand, who knows if +50% of website´s project only requires that much of a design tools quick features…

2 Likes
#8

I love you, @TomD :heart_eyes::heart_eyes::heart_eyes::heart_eyes:

1 Like
#9

Please. let’s give priority to routes.

1 Like
#10

Had a look at Blocs and yes it looks really nice overall. Found these in their documentation …

https://help.blocsapp.com/knowledge-base/freehand/
https://help.blocsapp.com/knowledge-base/column-control/

Outputs clean code too.

2 Likes
#11

Looks like they just recently implemented something.

clean%20Page%20URL%20export%20structure

#12

I meant user-friendly/clean URLs are not possible in Wappler - which is why I think it’s more important that this be given priority.

I imagine you could use the code from Blocs in Wappler if you wanted to - ie there’s no limit or limitation in Wappler from that point of view.

1 Like
#13

Does that come with a money back guarantee - just kidding Tom, I did try to test this but the demo does not allow you to export code so no way to verify your theory or really understand how hard it would be to import and have Wappler fully integrate with code created outside of the Wappler interface. Would be interesting to know :slight_smile:

#14

Has anyone tried with other sources Bootstrap successfully ? Looking at the Blocs site it looks like pretty clean code. I also found this site of sites built with Blocs:

https://builtwithblocs.com

:astonished: :heart_eyes:

#15

Given it uses the current version of Bootstrap, in principal it should be possible to use whatever you create in Blocs in Wappler.

1 Like
#16

This is just a hobby for me so you guys would know better than me but I have added code into Wappler (from code view) and it did no fully integrate into / within the App structure (best I can remember).

#17

Hi @norcoscia, was your last comment w.r.t integrating blocs-exported code into wappler? I’m have been spending numerous days with designing my page in wappler, tables, rows, columns, and then nesting it, further nesting it…

I’m interesting in experimenting with blocs to design my page layouts, and then use the blocs output in wappler to develop the dynamic contents within the page… But scared of going that path, just want to make sure it’s worth the time & effort, any luck at your end? @TomD @Gabriel @bibi

#18

We already have Blocks integrated in Wappler for a lot of predefined bootstrap 4 layouts. So you can use those

1 Like
#19

Thanks @George! Like most of the non-tech UI designers with only basic html/css knowledge, I was struggling.

I just realised that “bootstrap” is the real gap and upskilling on the bootstrap fundamentals is a key! I just spent a full day on a udemy video course on bootstrap and I feel more confident now.

I strongly recommend you to re-draft the top para in this wappler docs page Bootstrap 4 Integration emphasising the need to learn bootstrap to be more efficient in using wappler for UI design! I feel wappler can improve a lot to excel in the “design” space as well, taking inspirations from various design tools as discussed above!

On another topic, would be great if you can provide a “web socket” component to consume “delta” to update content in our page, really missing it :pensive: and an action scheduler pulling all data to “refresh” a data component (in a continuous loop) feels so primitive, doesn’t feel wapplerish!

1 Like
#20

Layouts have been the most difficult part of my Wappler experience so far. Are there any videos that go through common patterns?

Also, is there any documentation or videos explaining the design panel options? As someone new to CSS, it would be awesome to have an explanation of what design panel option corresponds to each css attribute and possibly even an explanation to how the option affects the design/functionality. I realize this is probably elementary for most users, but as I’m finding out, the design panel can be a great way to learn CSS, it’s just a lot of trial and error that could be sped up with some explainers.