Wappler UI improvements


#8

But both with a field called ID. Not intuitive IMO. Plus DOM has an ID field too.
And then further fields relative to CSS under DOM too? BTW, haven’t even got round to what DOM is lol!


#9

Don’t get me wrong, of course we are happy to hear feedback from users like you (coming from other software products) and believe me we’ve explored and evaluated pros and cons of many products out there.

Yes I cannot disagree with that :slight_smile:

We are constantly improving the UI based on users feedback. That’s one of the best things with Wappler - it’s community driven.


#10

Yes and what an amazing piece of software you have created so far. Just giving feedback as requested. Please don’t feel that Webflow is the panacea, there was a learning curve for me there too, more about best practices though; the interface I ‘just got’.

I also use most Adobe products too and is also quite intuitive although they can miss the mark (gave up on DW years ago), but I can really give PS, Illustrator, InDesign, Premiere, Dimensions, XD a good work out.

Ableton Live (audio software) has a great tooltip box positioned bot right of screen which changes dynmically on rollover - see screenshot.


#11

Wow I was thinking the same, I also use ableton and I really enjoy the quick info tool. This should definitely be implemented.


#12

As long as it can be turned off. Screen real estate is already at a premium in Wappler.


#13

I think the main drawback of wappler is the lack of documentation, videos and other learning tools. The UI is a matter of getting used to, once you understand it you’re good to go. But you really need proper learning tools otherwise it’s just not intuitive enough.

Videos are key in this by the way, for most people it’s the preferred way of learning i suppose.


#14

Hi again Teodor! I was reading Pachamama impressions about Wappler and I do understand how he feel using Wappler from a “Webflow” or similar visual builder perspective.

Many of them don’t know that Wappler is a compilation of dynamics php extensions put together in one tool and that at is base, is a tool for building dynamic sites (databases and queries etc.)

Now many new comers to Wappler are attracted by the “ALL VISUAL’ DESIGN” promise, but in fact what is the first goal of Wappler is that you can build “dynamic” sites" the visual way instead of coding.

The reality is that Wappler is not yet as visual builder as are Webflow, Wix, FlexiLayout etc.
Wappler is very powerful and that comes with some complexity level and need some time to understand as for the terminologies (needing some explanations in the UI). As Pachamama mentioned, visual tools like Weblow do offer some explanations right in the UI so users don’t always have to search and look for videos. One good example is the difference between Wappler APP panel and the DESIGN panel, for a new comer that itself need some explanation, and that goes for many other things in the Wappler UI.

But Wappler has already improved a lot in very short period of time and the dev team is awesome and listening to users feedback and suggestions.

So if you are new to Wappler and and come from Webflow or similar, just be patient and explore the possibilities of Wappler and I thank you will do like me: Love and stay with Wappler!


#15

Thanks to all of you for the comments and suggestions :slight_smile:

Just wanted to clarify this a bit:

It is true that with Wappler you have advanced back-end framework (Server Connect) which allows you to build server-side/dynamic workflows visually BUT it’s not true Wappler does not offer visual tools for designing your page.
That’s why the world’s most popular front-end component library Bootstrap 4 is included in Wappler. And as you mentioned the App Structure panel offers you all the customization options available for all the Bootstrap 4 components, but visually with options, sliders and buttons!

Maybe the problem is with people who have zero or minimal experience with web design/development as our docs are referring to terms like framework, class, ID, repeat region, component which such users might not be familiar with.

You can check some great examples in our showcase section showing what the design tools in Wappler are capable of:






#16

Yes that is exactly what I mean! From there perspective it is asking for some efforts and they do expect some level of explanation in order to know what to do.


#17

The question here is then - should we start documenting then general HTML/CSS/Bootstrap 4 topics? :slight_smile:

I believe there are great resources like https://www.w3schools.com/ which exlplain really nice what class or ID is, what’s the difference between them etc.

And discussing the help texts in Webflow (screenshots provided above) look at their explanation about <section>:

Screenshot_38

The only right thing in this text is that the section is a block element.

The <section> is actually a semantic element used to define sections in a document, such as chapters, headers, footers, or any other sections of the document.
It is not related to usage of background images or videos … you can apply background image to any element, it doesn’t have to be a section :slight_smile:

So people have to be careful what sources they use to learn about HTML/CSS/Semantics.


#18

for me the issue with the UI is that its not great when you want to focus on one side (interface- server side actions)
for example i find myself wanting to compare two server actions but i cant do it since i have to keep switching between them and if i click on any element in the server action then try to switch i get the “do you want to save the changes” message.
i know that wappler want to have everything on one screen. but in practice the screen is not enough to jam everything. you get left with too much scrolling to reach what you want.
and pull to expand panel is not useful at all. check the screenshot of my project.


and here after i try to get more width to the panel.

why does the panel get to become two column? that is unusable now. so you must go full width or stay in the 30% screen space


#19

@mrbdrm
Please for specific requests please use the feature request category in the community.


#20

im pointing to the design difficulties in having.
i dont know how to improve it.


#21

The issues you describe must be related to some really small screen.
On a 27" screen with 2560x1440px resolution the panel looks perfectly fine in a two columns layout:

And still you have more than 1200px of working space in Design View with the Right Panel open.


#22

Are you sure this isn’t because you’ve made a change - in which case the message should appear? I switch between server actions a lot and haven’t noticed the message appearing unless it should.

I agree a lot of scrolling is required and though I really like the interface and layout generally, it does leave a lot to be desired in some respects (eg not being able to view much of the text in many of the fields - for classes and conditions etc - really slows things down). It helps having a large monitor but Wappler doesn’t make the best use of it (I have a 43" monitor).

Do you not use the full screen option - ‘Expand Server Connect’ button? I think this is a very useful option. Eg I have some queries with 50 conditions, but the conditions tab only shows 6 or 7 by default. Having this panel full screen makes a big difference. It might be worth exploring this option more.


#23

im working from my laptop with 1920x1080


#24

i don’t want to take the whole space. just to have more room to fully see the action tree without horizontal scrolling.


#25

You certainly wouldn’t want to have Server Connect taking up the whole screen most of the time. However while you’re working on SC files, it can be very useful and of course you probably won’t be needing App Connect etc. during this time.

I agree with you that the panel management generally is not very flexible and can be frustrating. Eg I would like to have the dates displayed next to files in File Manager while working in App Connect - but the panel organisation doesn’t make this possible. even if you have plenty of screen space.


#26

@Teodor instead of pointing out how wrong webflow is, you should listen what is being said as feedback. The general point is that we want to be educated by wappler.

As far as I can read between the lines it seems like you’re not that fond about educating people (but I might be wrong). But it should be an integral part of wappler, unless you only want to cater to experienced developers. Which is fine of course, but then just say that out loud.


#27

when i started using webflow, i had 0 html/css knowledge. was a total noob.
what i learnt on webflow, is most definitly helped me to navigate around wappler, which has lot to improve on the ‘visual design’ part of front end development.
i did not find webflow overwhelming at all.
rarely did i encounter that an option was being displayed which could not be used. and in such cases, a simple nudge comes from the ui saying ‘this is not possible’.

it may not seem logical to you from a highly experienced developer point of view - but from a noob’s point of view, it worked beatuifully and rather it taught me about the tech.

PS: keep up the incredible work with wappler. absolutely love it. have even given up on my webflow license now. but will still rant about stuff that we don’t like about wappler :sweat_smile: - coz we really really want wappler to be the very best web design+dev tool in the world.