What’s New

It’s time for great design and usability improvements!

In this Wappler beta the design system has been completely overhauled. The design view actions buttons and selectors are greatly restyled, clearer and the way of adding elements is greatly improved.
Now when you click on the add before/after icons, you will be presented with a quick add menu of the most suitable element for this location, so you can quickly add related elements and build your design very fast.

We have also greatly restyled our property inspectors, now offering very visual color pickers for Bootstrap that fully reflect the current design theme used.
Also the slider controls has been greatly improved to be much more natural and clearly selected as well highlighting the selected value in their labels.

We have also greatly improved the Bootstrap design with the new quick insert in design view to show more related elements, specially with Bootstrap Navigation elements and Cards.
Now you can create a full Bootstrap based layout just with few clicks!

Furthermore we have greatly improved adding of components and their related assets and script includes. Now missing component includes and dependent frameworks are added automatically, even on your main layout page if you are working in a content page.

Special thanks goes to @nickneustroev for greatly participating with superb ideas in our redesign process.

Design View

• Greatly improved adding new items in design view.
• When clicked on the add icons, a shortcut menu with the suggested items for the context is shown first. If more items are available then a “More” menu is available to show all the rest of items.
• Improved editing of menubars in Bootstrap design - now adding new menu items is much easier with the new context menu.
• Improved switching between design view and preview mode. Now empty containers are only displayed in design view mode.
• Optimize the design view quick insert context menu to show all items if there aren’t many more to show as 'More…" option.
• Improved automatic refreshing of Bootstrap theme in content pages, when changed with the Theme Manager
• Synchronize automatically the Bootstrap colors with the property inspectors
• Automatically detect if elements can be inserted at the chosen position (before, after or inside) and then show the action icons
• Fully synchronize now all the bootstrap colors in the interfaces
• Updated design view, with new smart positioned icons, greatly improved styling
• Do not show placeholders when in preview mode
• Hide handlers when mouse is not over design view
• Smarter insert button positions
• Simpler selection labels
• Added the show sizes to options
• Apply options directly to design view on change
• Improved insert button (hide when when needed)
• Added Context Menu for Design View
• Improved selection title positioning
• Disable any keys when in design mode

Bootstrap 4 & 5

• Optimized Bootstrap 4 & 5 to give better suggestions for the quick insert context menu, specially when adding elements in columns or flex-containers
• Improved also the Bootstrap 4 & 5 card and form elements adding
• Offer adding form groups directly under form from the quick insert menu
• Improved Navs editing, specially with dropdowns in them. Now the dropdown is selected as whole so you can easily add more nav items
• Improve distinction between horizontal and vertical form group elements and improve icons.
• Use the colors from the current active theme in design view for the property inspectors
• Improved the bootstrap color pickers to be directly visible in the property inspectors and also reflect the current theme colors
• Greatly Improve building navbars, now with the new quick insert context menu
• Navbar Nav’s are now default 100% width, so that flex flow can be easily applied to align the nav items

Wappler Styling

• Improved sidebar icons alignment

Property Inspectors

• Greatly improved the adding dynamic attributes and events, as well validation, by showing the options in dropdowns instead of whole new popup window.
• Greatly improved the styling of the Property Inspectors
• Greatly improved sliders, now with value showing highlighted above, within the labels
• Redesigned Sliders with hover effects and better alignment
• Added more hover and color transitions for improved experience
• Improved hovers on the new color pickers for Bootstrap
• Redesigned color pickers for Bootstrap

App Connect Components & Frameworks

• Greatly improved the automatic linking of App Connect components in Main Layout pages
• Now all components updates are executed as one on save
• Missing component includes are automatically added
• Automatic dependency order of includes is improved
• Improved the automatic script includes in main page including
• Automatically add dependent frameworks to the main layout page as well
• Improved MomentJS configuration component to be available only when the framework is inserted