Extensions

App Connect 1.14.9

Next generation client side framework for data-driven web sites and apps

App Connect is the next generation client side framework and base ground for a handful of additional components, which allow you build dynamic web sites and apps, the most modern way possible. It comes with phenomenal rendering speed of dynamic data and you have visual and direct access to custom components, dynamic attributes and events and smart data form inputs. Last but not least App Connect is fully compatible with Server Connect and Bootstrap 4, which lets you build modern, fully responsive and dynamic data driven sites and apps.

Blazing Fast Runtime
Ultralight library of just 15kb gzipped for the best performance. No jQuery required!
Lightning Rendering Speed
Ultra-fast rendering of data compared to industry standard React and VueJS.
Extendable Client Side Framework
Boostable by additional components like data traversal, data view, record and more.
Visual App Data Structure
Clear workflow to have overview of your components, events, inputs and more.
Revolutional Sites & Apps Builder
No more jQuery for building dynamic sites and apps.
No Coding Required
The visual builder generates all the code for you. No need to hand-code anything.

Form
<dmx-form>

License: Basic
Group: Forms
groupIcon: fas fa-lg fa-file-alt comp-form
icon: fas fa-lg fa-file-alt comp-form 

<form id="@@id@@"></form>

Properties

Name Attribute Type Default Description
ID id text
Method method droplist
Action action file

File Upload
<dmx-input-file>

License: Basic
Group: Forms
groupIcon: fas fa-lg fa-file-alt comp-form
icon: fas fa-lg fa-file comp-form 

<input id="@@id@@" type="file">

Properties

Name Attribute Type Default Description
ID id text
Name name text
Static Value value text
Multiple multiple boolean false

Select
<dmx-select>

License: Basic
Group: Forms
groupIcon: fas fa-lg fa-file-alt comp-form
icon: fas fa-lg fa-caret-square-down comp-form 

<select id="@@id@@">

Properties

Name Attribute Type Default Description
ID id text
Name name text
Selected Value dmx-bind:value text
Multiple multiple boolean false
Disabled disabled boolean false
Read Only readonly boolean false
Options grid
Data Source dmx-bind:options text
Text Field optiontext text
Value Field optionvalue text

Button
<dmx-button>

License: Basic
Group: Forms
groupIcon: fas fa-lg fa-file-alt comp-form
icon: fas fa-lg fa-square comp-form 

<button id="@@id@@">Button</button>

Properties

Name Attribute Type Default Description
ID id text
Type type droplist

Input Group
<dmx-input-group>

License: Basic
Group: Forms
groupIcon: fas fa-lg fa-file-alt comp-form
icon: fas fa-lg fa-pencil-alt comp-form 

<dmx-input-group id="@@id@@"></dmx-input-group>

Properties

Name Attribute Type Default Description
ID id text

Text Input
<dmx-input>

License: Basic
Group: Forms
groupIcon: fas fa-lg fa-file-alt comp-form
icon: fas fa-lg fa-pencil-alt comp-form 

<input id="@@id@@" type="text">

Properties

Name Attribute Type Default Description
ID id text
Name name text
Type type droplist text
Placeholder placeholder text
Static Value value text

Textarea
<dmx-textarea>

License: Basic
Group: Forms
groupIcon: fas fa-lg fa-file-alt comp-form
icon: fas fa-lg fa-pen-square comp-form 

<textarea id="@@id@@"></textarea>

Properties

Name Attribute Type Default Description
ID id text
Name name text
Static Value value text
Enable Medium Editor button

Checkbox
<dmx-checkbox>

License: Basic
Group: Forms
groupIcon: fas fa-lg fa-file-alt comp-form
icon: fas fa-lg fa-check-square comp-form 

<input id="@@id@@" type="checkbox">

Properties

Name Attribute Type Default Description
ID id text
Name name text
Static Value value text

Checkbox Group
<dmx-checkbox-group>

License: Basic
Group: Forms
groupIcon: fas fa-lg fa-file-alt comp-form
icon: fas fa-lg fa-cube comp-form 

<div is="dmx-checkbox-group" id="@@id@@" class="checkbox-group"></div>

Properties

Name Attribute Type Default Description
ID id text
Value dmx-bind:value text

Radio
<dmx-radio>

License: Basic
Group: Forms
groupIcon: fas fa-lg fa-file-alt comp-form
icon: fas fa-lg fa-dot-circle comp-form 

<input id="@@id@@" type="radio">

Properties

Name Attribute Type Default Description
ID id text
Name name text
Static Value value text

Radio Group
<dmx-radio-group>

License: Basic
Group: Forms
groupIcon: fas fa-lg fa-file-alt comp-form
icon: fas fa-lg fa-cube comp-form 

<div is="dmx-radio-group" id="@@id@@" class="radio-group"></div>

Properties

Name Attribute Type Default Description
ID id text
Value dmx-bind:value text

Repeat Children
<dmx-repeat-children>

License: Basic
Group: Data
groupIcon: fas fa-lg fa-database comp-data
icon: fas fa-lg fa-retweet comp-data 

<div id="@@id@@" is="dmx-repeat"></div>

Properties

Name Attribute Type Default Description
ID id text
Expression dmx-bind:repeat text
Unique Key key text Choose the unique key field to identify the repeater's record. Only needed when you want to use animations or need to identify repeater's rows in DOM. Do not use if not needed as it will slow down the repeater.

Repeat
<dmx-repeat>

License: Basic
Group: Data
groupIcon: fas fa-lg fa-database comp-data
icon: fas fa-lg fa-retweet comp-data 

<div dmx-repeat:@@id@@=""></div>

Properties

Name Attribute Type Default Description
ID hidden
Expression hidden

Conditional Region
<dmx-if>

License: Basic
Group: Data
groupIcon: fas fa-lg fa-database comp-data
icon: fas fa-lg fa-question comp-data 

<div id="@@id@@" is="dmx-if"></div>

Properties

Name Attribute Type Default Description
ID id text
Condition dmx-bind:condition text

Date and Time
<dmx-datetime>

License: Basic
Group: Data
groupIcon: fas fa-lg fa-database comp-data
icon: fas fa-lg fa-calendar-alt comp-data 

<dmx-datetime id="@@id@@"></dmx-datetime>

Properties

Name Attribute Type Default Description
ID id text
Interval interval droplist
UTC Time utc boolean

Variable
<dmx-value>

License: Basic
Group: Data
groupIcon: fas fa-lg fa-database comp-data
icon: fas fa-lg fa-cube comp-data 

<dmx-value id="@@id@@"></dmx-value>

Properties

Name Attribute Type Default Description
ID id text
Value dmx-bind:value text

Array
<dmx-array>

License: Basic
Group: Data
groupIcon: fas fa-lg fa-database comp-data
icon: fas fa-lg fa-bars comp-data 

<dmx-array id="@@id@@"></dmx-array>

Properties

Name Attribute Type Default Description
ID id text
Items dmx-bind:items text

Body
<dmx-body>

License: Basic
Group: Data
groupIcon: fas fa-lg fa-database comp-data
icon: fas fa-lg fa-cube comp-data 

<body></body>

Properties

Name Attribute Type Default Description
Title text

App
<dmx-app>

License: Basic
Group: Data
groupIcon: fas fa-lg fa-database comp-data
icon: fas fa-lg fa-cube comp-data 

<div id="@@id@@" is="dmx-app"></div>

Properties

Name Attribute Type Default Description
App ID id text
App Root droplist body
Define Global Data button
Define Query Params button
Define Template Data button
Title text

Moment
<dmx-moment>

License: Basic
Group:
groupIcon:
icon: fas fa-lg fa-clock comp-content 

<dmx-moment id="@@id@@"></dmx-moment>

Properties

Name Attribute Type Default Description
ID id text
Locale locale droplist en

Toggle
<dmx-toggle>

License: Basic
Group: Data
groupIcon: fas fa-lg fa-database comp-data
icon: fas fa-lg fa-toggle-on comp-data 

<dmx-toggle id="@@id@@"></dmx-toggle>

Properties

Name Attribute Type Default Description
ID id text
Checked checked boolean false

App Connect Data Traversal PRO 1.1.4

Enable data view, data detail and data iterator in App Connect

App Connect Data Traversal is an amazing addition to App Connect framework and allows you to get access to three additional components. Data View, which is awesome when it comes to client side paging and filtering, Data Detail to selects a specific detail records from data source by key and Data Iterator to iterates through a data source one item at the time, for example, when navigating sliders or paged details.

Automatically display detail info regions on demand
Select a specific detail record from data source to be displayed by key.
Real time client side filtering and sorting of data tables and views
Dynamically sort and filter any table data, directly from the visual builder.
Rich paging and navigation options
Offer powerful data toggles, navigation actions, looping and random choice.
Build amazing sliders and lists yourself
Let users navigate through you page content or sliders smoothly.

Data View
<dmx-data-view>

License: Basic
Group: Data
groupIcon: fas fa-lg fa-database comp-data
icon: fas fa-lg fa-filter comp-data 

<dmx-data-view id="@@id@@"></dmx-data-view>

Properties

Name Attribute Type Default Description
ID id text
Data Source dmx-bind:data text
Filter filter text
Sort On sortOn text
Sort Direction sortDir droplist
Page page text
Page Size pageSize text

Data Detail
<dmx-data-detail>

License: Basic
Group: Data
groupIcon: fas fa-lg fa-database comp-data
icon: fas fa-lg fa-hand-point-right comp-data 

<dmx-data-detail id="@@id@@"></dmx-data-detail>

Properties

Name Attribute Type Default Description
ID id text
Data Source dmx-bind:data text
Key key text
Value dmx-bind:value text

Data Iterator
<dmx-data-iterator>

License: Basic
Group: Data
groupIcon: fas fa-lg fa-database comp-data
icon: fas fa-lg fa-filter comp-data 

<dmx-data-iterator id="@@id@@"></dmx-data-iterator>

Properties

Name Attribute Type Default Description
ID id text
Data Source dmx-bind:data text
Start Index dmx-bind:index text
Loop loop boolean false

App Connect Medium Editor PRO 1.1.4

Trendiest next generation content editor

Get ready to enter the world of What You See Is What You Get (WYSIWYG) text editing recent trends! Styling and formatting are always important for your website, but it is really hard to find and implement a simple, easy-to-use and powerful editor. Times are changing with our Medium Editor! Turn every field – from a message on your contact form to a whole article on the back-end, into a professional styled text paragraphs, containing hyperlinks, quote blocks, headings or just highlighted words. You can use the extension to convert any textarea to visual HTML inline editor area or make your pages editable with Medium Editor regions, and save them on the fly with App Connect AJAX-driven technology.

Simple and Powerful Functions
New wave web WYSIWYG text editor with simple formatting functions like bold, italic, underline, titles, quote, etc.
Light, no Requirements
There are no requirements to use Medium Editor in every text field — no JS frameworks, only App Connect.
26 Formatting Options, 7 Themes
You can add up to 26 formatting options to the tool.
Focused on User Experience
The trendiest solution for improving UX performance in text editing — inline or media region.
Trendy Technology
Used by many popular websites and on its way to replace the traditional HTML WYSIWYG editor.
Server Connect Compatible
Easy connection with Server Connect.

Medium Editor Textarea
<dmx-medium-editor-textarea>

License: Basic
Group: Forms
groupIcon: fas fa-lg fa-code comp-form
icon: fas fa-lg fa-pen-square comp-form 

<textarea id="@@id@@" is="dmx-medium-editor"></textarea>

Properties

Name Attribute Type Default Description
ID id text
Name name text
Static Value value text
Placeholder placeholder text Type your text
Theme droplist
Align align droplist
Buttons buttons enum Choose the toolbar buttons
Use FontAwesome fontawesome boolean false
Disable Return disable-return boolean false
Disable Double Return disable-double-return boolean false
Disable Extra Spaces disable-extra-spaces boolean false
Disable Spellcheck disable-spellcheck boolean false
Target Blank target-blank boolean false
Auto Link auto-link boolean false
Auto List auto-list boolean false

Medium Editor Region
<dmx-medium-editor>

License: Basic
Group: Forms
groupIcon: fas fa-lg fa-code comp-form
icon: fas fa-lg fa-pen-square comp-form 

<div id="@@id@@" is="dmx-medium-editor"></div>

Properties

Name Attribute Type Default Description
ID id text
Name name text
Static Value value text
Placeholder placeholder text Type your text
Editable editable boolean false
Theme droplist
Align align droplist
Buttons buttons enum Choose the toolbar buttons
Use FontAwesome fontawesome boolean false
Disable Return disable-return boolean false
Disable Double Return disable-double-return boolean false
Disable Extra Spaces disable-extra-spaces boolean false
Disable Spellcheck disable-spellcheck boolean false
Target Blank target-blank boolean false
Auto Link auto-link boolean false
Auto List auto-list boolean false

App Connect Slideshow 1.0.6

Stunning slideshows for your web project

Improve the user interface of your website by mind-blowing slideshows! Get together your stunning photos or just create amazing presentations with App Connect Slideshow. This slideshow gallery has no jQuery dependence, it is written in pure JavaScript, CSS-based and uses HTML5 W3C standard elements for the highest animation quality. Choose amazing effects and fully customize them by changing all the parameters. The slideshow has not just awesome navigation controls and bullets paging, but supports swiping, so it fits your website perfectly. You can even use App Connect in combination with Server Connect to create your dynamic-data-driven slideshows with ease!

Fully Responsive
Mobile friendly and running perfectly on any mobile device.
Stunning Customizable Animations
Change parameters of every animation.
Dynamic Data Sources
Supporting all type of dynamic data sources available in App Connect.
High Performance Image Resizer Built-in
Super performance image resizer and thumbnail generator integrated.
Awesome Animated Captions
Insert titles and description to every picture, any HTML code allowed.
User Friendly Navigation
Great looking navigation controls and bullets paging, accessible in any browser.
Simple to Create But Highly Customizable
No coding required, create fully visual in Wappler.

Slideshow
<dmx-slideshow>

License: Basic
Group: Components
groupIcon: fas fa-lg fa-cube comp-components
icon: fas fa-lg fa-forward comp-components 

<dmx-slideshow id="@@id@@"></dmx-slideshow>

Properties

Name Attribute Type Default Description
ID id text
Theme droplist
Delay delay text 4000
Start Random start-random boolean
No Auto Start no-autostart boolean
Show Next/Prev show-nav boolean
Show Paging show-paging boolean
Pause On Hover pause-on-hover boolean
Dynamic Slides slides boolean false
static Static Slides
Use Image Resizer boolean
Auto Generate Image Titles boolean
Add Images Folder button
Delete Slides button

Slide
<dmx-slide>

License: Basic
Group:
groupIcon:
icon: fas fa-lg fa-file-image comp-content 

<dmx-slide id="@@id@@"></dmx-slide>

Properties

Name Attribute Type Default Description
ID id text
Image url file
Thumb thumb file
Title title text
Description description textarea
Link link text
Replace Image button

App Connect Slideshow 2D Transitions 1.0.1

Add cool 2D transitions to your slides

With this add-on you will receive a bunch of fascinating transitions to improve your slideshows in a UX-performed way. All the transitions are fully customizable: choose direction, duration, methods, bars on your own! Of course, looking great on any device and very simple to use. Give more UX power to your images!

Awesome 2D Animated Transitions
Choose from 8 of the most popular and great looking transitions.
Perfect on Mobile
Fully responsive and same outlook on every mobile device or desktop.
Many Transition Settings
Customize direction, duration, methods or bars when available.
CSS Based, Hardware-Accelerated Transitions
Accesing the device’s graphical processing unit for much better performance.
UX Optimized
Why adding transitions? It's the best way to impress your users.
Simple To Create
It’s all done, fully visual, no coding required. All you need is App Connect and App Connect Slideshow.

App Connect Slideshow 3D Transitions 1.0.0

Great 3D experience in your website

With this add-on you will receive a bunch of awesome real 3D transitions to improve your slideshows in a UX-performed way. All the transitions are fully customizable! And looking great on any device, as well as very simple to use. Give even more UX power to your images! You will find the most popular and trendy 3D transitions available on the web, ready to use without coding skills. Blinds, cube, flip, fold, tiles, turn, unfold, it's all possible with our App Connect Sideshow 3D Transitions add-on.

Stunning 3D Animated Transitions
Choose from 8 of the most popular and great looking 3D transitions.
Many Customization Options Available
Customize direction, duration, perspective, bars, cols, rows, thickness or delay.
Perfect on Mobile
Same layout on every mobile device or desktop, fully responsive.
Focused on User Experience
That's the best way to impress your users.
Simple To Create
It’s all done, fully visual, no coding required. All you need is App Connect and App Connect Slideshow.

App Connect Medium Editor Image Upload Addon PRO 1.0.0

Enrich your content with images

The recent trend in the world of What You See Is What You Get (WYSIWYG) text editing definitely is Medium editor – a really great, simple, easy-to-use and powerful solution. With the Image Upload add-on you can enrich your professional styled text paragraphs, containing all types of formatting or blocks, and now – images! It's all you need for a mind-blowing text editing: drag&drop multiple upload, editable titles, resizing, compressing and predefined alignment options.

Add Images to Any Text
Simple and powerful embedding of pictures in any media region using App Connect Medium Editor.
Direct Image Upload and Edit
Upload images directly in the field using HTML5 File Upload and resize, crop or add watermark with Image Processor.
Multiple Drag&amp;Drop Upload
It's easier than ever to add your images to any Medium region - just open a folder and drag the files to the textfield!
Stylish Titles
Add custom styling to every image caption.
Great Formatting Options
Choose predefined or custom size and alignment of the image.
Mobile Friendly
No matter web or mobile, it's all about your creativity!
Full Server Connect Integration
Use Server Connect for direct server-side images upload.

App Connect Lightbox 1.1.0

Show your images and videos in a brand new way

Let's take your audience to the next level! App Connect Lightbox is the best solution for gathering pictures or videos in a common gallery. Remember, it's not just a regular modal stylish popup - you can get the best experience in visualizing images ever! Customizable from top to bottom, that product is the right tool for your web project! Choose animated loading spinners, add titles, allow looping videos or just fell the swiping experience on mobile. Even more, the extension is fully integrated with App Connect and Server Connect, so that you can use dynamic data sources. Do you want to show a single picture? No problem! Doesn't matter single image or gallery, add custom thumbnails to improve the user interface!

New Wave of Lightbox Window
Light and powerful, that's the sprit of the trendiest Lightbox in the web! Full screen and titles available.
Collect Images in Galleries
Combine your images or videos in a gallery. Real estate gallery, photography portfolio, corporate page? It's all appropriate!
MP4 Video Support
Yes, you can add not just images but .mp4 video files. Give your pages additional interactivity!
Arrow Navigation and Loading Animations
Choose from 8 loading animations and feel the stylish arrow navigation.
Dynamic Data Sources
Use dynamic data sources to create your data-driven Lightbox galleries.
Swipe on Mobile
Not just running perfectly on mobile, but even more - swipe left or right to skip the image.
Linked Thumbnails
Link a custom thumbnail to every image.
Many Customization Options
Customize from top to bottom, even videos auto play or loop. App Connect and Server Connect are fully compatible.

Lightbox Options
<dmx-lightbox>

License: Basic
Group: Animation
groupIcon: fas fa-lg fa-code comp-general
icon: fas fa-lg fa-expand-arrows-alt comp-general 

<dmx-lightbox id="@@id@@"></dmx-lightbox>

Properties

Name Attribute Type Default Description
ID id text
Full Screen fullscreen boolean
No Scroll Bars noscrollbars boolean
Auto Play Videos autoplay boolean
Loop Videos loopvideo boolean
Buttons: buttons droplist Choose how nav buttons are displayed.
Animation: animation droplist Choose the animation for image transitions.
Spinner: spinner droplist Choose the spinner for image loading.

App Connect Masonry 1.0.2

Arrange elements in a grid based on the available vertical space

Stop facing problems with different-sized items on your website! App Connect Masonry will place every item in a grid based on the available vertical space. It's made for running on any device - desktop, tablet or mobile. The script will not slow down your website, even if you're using animated loading. Of course, it's fully customizable: you can choose number of columns, spacing between elements, turn on/off animations, etc.

Collect Items in Grid
Display a bunch of elements in optimal position, based on available vertical space.
Display Images in Galleries
It's perfect to gather your images in a stylish gallery!
Responsive Layout
Absolutely responsive: script will rearrange the grid when the display size is changing.
Dynamic Data Sources
Connect a database and display dynamic data in the grid! Compatible with Server Connect.
Lightweight and Fast
The script will not slow down your website!
Customizable Grid
Many options available - custom number of columns, spacing between elements, animations...

Masonry
<dmx-masonry>

License: Basic
Group: Components
groupIcon: fas fa-lg fa-cube comp-components
icon: fas fa-lg fa-th comp-components 

<div id="@@id@@" is="dmx-masonry"></div>

Properties

Name Attribute Type Default Description
ID id text
Expression dmx-bind:repeat text
Unique Key key text Choose the unique key field to identify the Masonry repeater's record. Only needed when you want to use animations or need to identify repeater's rows in DOM. Do not use if not needed as it will slow down the repeater.
Preserve Order preserve-order boolean Default order the items from left to right into the columns and optimize the layout by equalizing the height of each column, turn this off to preserve the exact order
Animated animated boolean
Duration animation-duration text 400 The duration of the animation in milliseconds
Default columns text 4 The number of columns to create
Small columns-sm text The number of columns for small devices with width >= 480px
Medium columns-md text The number of columns for medium devices with width >= 768px
Large columns-lg text The number of columns for large devices with width >= 992px
XLarge columns-xl text The number of columns for extra large devices with width >= 1200px
Default gutter text 15 The number of gutter to create
Small gutter-sm text The number of gutter for small devices with width >= 480px
Medium gutter-md text The number of gutter for medium devices with width >= 768px
Large gutter-lg text The number of gutter for large devices with width >= 992px
XLarge gutter-xl text The number of gutter for extra large devices with width >= 1200px

App Connect Data Formatter 1.3.2

Format your client side data any way you want

With almost 100 included formatters, App Connect Data Formatter is the must have Wappler extension if you want to format your client side data any way you want. It's greatly integrated with App Connect and all formats are available within the app connect panel. Among others you have access to vast collections of highly useful formats for conversion, operation, date and time, general, conditional, transform, manipulation and analise, which can be applied on any value, array or object.

Table data manipulations, sorting and filtering
A hand-full collections for various client side data handling
Super fast search in text
Allow your users great end results with fuzzy search
Extended date & time formatting and calculations
Combine date and time formatters with advanced estimation
Advanced calculations with your data
Arithmetic calculations for all your running totals

App Connect Animate CSS 2.1.2

Animate any page element and add stunning transitions

Bring life an interactivity and add an extra layer of great user-experience to your website, by adding awesome CSS animations. It's the most powerful way to draw users' attention to your content and it's easily done if you have the proper tool. App Connect Animate CSS does exactly that and lets you visually animate any page element. You can animate dynamic data regions, div containers, repeat and repeat children regions, and even on static elements. It's fully integrated within the App Connect so you have access to all animations, directly from the visual app panel.

Choose among over 50 animations
All visually available within App Connect panel
Animate repeat children regions
Combine enter and leave animations for greater user experience
In view and out view animations
Add amazing animations on page scroll so the elements appear in style
Delay and Duration
Precisely adjust the delay and duration for the inview and outview animations
Animate the appearance of an element
Use move animations to rearrange element's order
Combine with Lazy Load
The animations will be triggered when the element is loaded with Lazy Load

Animated Region
<dmx-animate>

License: Basic
Group: Animation
groupIcon: fas fa-lg fa-code comp-general
icon: fas fa-lg fa-cube comp-general 

<div is="dmx-animate" id="@@id@@"></div>

Properties

Name Attribute Type Default Description
ID id text
Show Effect: showEffect droplist Choose the Show Animation.
Hide Effect: hideEffect droplist Choose the Hide Animation.
Initially Visible visible boolean

App Connect State Management PRO 1.5.1

Empower HTML5 Web Storage for Your App State and User Data

When your App Connect driven dynamic web sites and apps get more complicated, you really want to store the state of many data components to achieve the best user experience. This is where the App Connect State Management Add-on comes in. It offers rich choice of HTML5 Web Storage managers to fully suit your needs

Save and preserve app state
Save and restore the state of your app for optimal user experience
Store User State in desired stores
Choose the right store for your needs, included: Query, Cookies, Session and Local Storage
Full browser history support
With Query Parameters Manager, the browser history is fully used for natural navigation
Integrated Schema editor
Define your own data schema and edit it through the supplied App Connect actions
Full client side Data Caching
Integrate with Server Connect data sources for caching of any data fetched through Server Connect
State Retention Management
Supply how long the state should be valid by giving a time to live period

Query Manager
<dmx-query-manager>

License: Basic
Group: State Management
groupIcon: fas fa-lg fa-database comp-data
icon: fas fa-lg fa-database comp-data 

<dmx-query-manager id="@@id@@"></dmx-query-manager>

Properties

Name Attribute Type Default Description
ID id text
Define Query Params button

Cookie Manager
<dmx-cookie-manager>

License: Basic
Group: State Management
groupIcon: fas fa-lg fa-database comp-data
icon: fas fa-lg fa-database comp-data 

<dmx-cookie-manager id="@@id@@"></dmx-cookie-manager>

Properties

Name Attribute Type Default Description
ID id text
Define Cookies button

Session Storage Manager
<dmx-session-manager>

License: Basic
Group: State Management
groupIcon: fas fa-lg fa-database comp-data
icon: fas fa-lg fa-database comp-data 

<dmx-session-manager id="@@id@@"></dmx-session-manager>

Properties

Name Attribute Type Default Description
ID id text
Define Session Storage Items button

Local Storage Manager
<dmx-local-manager>

License: Basic
Group: State Management
groupIcon: fas fa-lg fa-database comp-data
icon: fas fa-lg fa-database comp-data 

<dmx-local-manager id="@@id@@"></dmx-local-manager>

Properties

Name Attribute Type Default Description
ID id text
Define Local Storage Items button

App Connect Action Scheduler PRO 1.1.0

Instant Data Refresh and Population

As you put more dynamic data on your App Connect based sites, you want to make sure that even without page refresh the data gets updated regularly. Finally build those fancy admin dashboards that require automatic inline data refreshing! Now all made possible with the help of the App Connect Action Scheduler.

Amazing Live Data Presentations
Fetch and show directly new live data instantly
Get new data from any Database
Integrate with Server Connect and Database Connector to get you data from any database source
Scheduled dynamic dashboards
Refresh the contents of your tables without page reload.
Timely triggered custom functions
Not only actions but also custom functions can be scheduled for execution.
Auto partially refreshed pages
Refresh automatically just a fraction of your single page apps.
Show fancy progress bars
You can even track the time to next refresh with fancy custom progress bars!

Action Scheduler
<dmx-scheduler>

License: Basic
Group: Components
groupIcon: fas fa-lg fa-cube comp-components
icon: fas fa-lg fa-clock comp-components 

<dmx-scheduler id="@@id@@" dmx-on:tick=""></dmx-scheduler>

Properties

Name Attribute Type Default Description
ID id text
Delay delay text
Unit unit droplist
No Progress noprogress boolean
No Repeat norepeat boolean
No Auto Run noload boolean

App Connect Form Validator 1.7.5

The most powerful HTML5 client and server side validation

Get ready for the most advanced HTML5 Form Validation ever! Now fully integrated with App Connect, you can finally validate those html forms fully client and server side The extension is supplied with 39 validation rules to cover everything from simple e-mail, URL, dates, credit card numbers and ranges to more complicated such as multiple rules for a single input. You can even use your own regular expression rules! App Connect Form Validator works like a charm with all our server extension! In addition, an iron strong server side validation is automatically done with the tight integration with the Server Connect. So there is no escape even if people bypass the browser client side validation, data on the server is always validated!

Fully customizable input validation
If you don't like the default error styling and you don't use Bootstrap 4, then you can choose to use your own custom CSS styling
Use on any App Connect driven form
You can use the form validation on any HTML5 Form, but also integrate it with dynamic App Connect and Server Connect bound forms
Includes 39 extended validations
all the HTML5 standard validations are available, extended with many more to serve all your needs
Perform Server Side Validation
Even when the form is submitted an additional server side validation is done by Server Connect against the same rules - so your form data is always validated

validator_validate
<validator_validate>

App Connect Form Validator Unicode 1.0.1

Full Unicode Validation in your forms

Validating language specific characters in user form inputs can be a bit of a pain but we have a great solution for you. It's called App Connect Form Validator Unicode Add-on and is the next addition to the powerful App Connect Form Validator extension. Supplied with 131 scripts, you can choose any writing system from around the world or a combination of systems to be validated in your forms. Also, you can allow your users to use Unicode properties such as marks, numbers, punctuation, symbols and separators.

Unicode Form Validation
Add Unicode validation to App Connect Form Validator
Allow Unicode Characters
Form inputs will be validated in any writing system
131 Scripts to choose from
Allow one or combine multiple writing systems
Allow Unicode Properties
The input may contain marks, numbers, punctuation, symbols and separators

App Connect reCAPTCHA 1.1.0

Advanced protection for your website from spam and automated abuse

App Connect reCAPTCHA offers both client and server side validation and is the ultimate abuse protector from spam bots, fake users and automatically generated program attacks.App Connect reCAPTCHA is based on the Google CAPTCHA 2 API and therefore a smart analysis engine determines if you're human. No more required to fill annoying distorted texts! With just a single click your users can verify their human nature. It takes also full advantage of App Connect for easier integration in dynamic sites. The extension is fully Server Connect compatible! You can add a powerful server-side validation as well. Secure your login and registration forms, posts, emails or any other input field from spam bots and worms.

Improved Security
Advanced spam and abuse protection for your website on desktop or mobile
Purposefully Designed, User-friendly
Easy to use, clear, instant validation, no page reload required, accessibility option included (audio CAPTCHA)
Verified Users, Correct Data
Using Google reCAPTCHA 2 API to verify users and protect from abusive activities on your site
Client-side and Server-side Validation
Server Connect compatible! You can easily add a server-side validation, as well as use it with App Connect.
Most Popular CAPTCHA Solution
reCAPTCHA is the most widely used CAPTCHA provider in the world

reCaptcha
<dmx-recaptcha>

License: Basic
Group: Forms
groupIcon: fas fa-lg fa-code comp-form
icon: fas fa-lg fa-file-alt comp-form 

<div id="@@id@@" class="g-recaptcha"></div>

Properties

Name Attribute Type Default Description
ID id text
Site Key data-sitekey text
Theme data-theme droplist
Type data-type droplist
Size data-size droplist
Tab Index data-tabindex text

recaptcha_validate
<recaptcha_validate>

Server Connect 2.8.4

Next generation server side visual programming

Imagine full visual programming without any coding. It is now possible with the next generation server side framework Server Connect. It will provide you with a full visual workflow builder for server side workflows and many ready to go server actions at your disposal. Use Server Connect as a ground base for our other server side components and extend its functionality even further!

Powerful Extendable Framework
A ground base for additional components such as Database Connector, Updater, File Upload, Validator and more.
Ajax Driven Sites and Apps
Build Next Generation ajax driven sites and single page apps for optimal UX.
All Visually, Without Coding
Work with a visual builder that generates all the code for you.
A Clear Workflow of Your Business Logic
Choose your actions, their order and data to use for your workflow.
Works On Any Server
Built-in server models for ASP and PHP, so it runs on any web server available.

Comment
<comment>

Include Action
<lib_include>

Exec Action
<lib_exec>

Try/Catch
<core_trycatch>

Condition
<core_conditional>

While
<core_while>

Repeat
<core_repeat>

Set Value
<core_setvalue>

Set Session
<core_setsession>

Remove Session
<core_removesession>

Response
<core_response>

Redirect
<core_redirect>

dmx-serverconnect
<dmx-serverconnect>

License: Basic
Group: Data
groupIcon: fas fa-lg fa-database comp-data
icon: fas fa-lg fa-database comp-data 

<dmx-serverconnect id="@@id@@"></dmx-serverconnect>

Properties

Name Attribute Type Default Description
ID id text
Url url text
Site site text
Action text
Select Server Action button
No Auto Load boolean
Credentials boolean
State Manager cache droplist Choose the State Manager to use. make sure you Session or Local Storage Manager on the page first!
Cache for ttl text Choose the time in seconds to keep the data cached

dmx-serverconnect-form
<dmx-serverconnect-form>

License: Basic
Group: Data
groupIcon: fas fa-lg fa-database comp-data
icon: fas fa-lg fa-database comp-data 

<form is="dmx-serverconnect-form" id="@@id@@" method="post"></form>

Properties

Name Attribute Type Default Description
ID id text
Method method droplist
Url action text
Site site text
Action text
Select Server Action button
Auto Submit autosubmit boolean
Credentials boolean

HTML5 File Upload 1.3.0

Next generation file upload

The HTML5 File Upload offers advanced file upload through Ajax, multiple file upload, storing file info and client side image preview. It also allows you to upload single or multiple files. To make sure you can use the extension in the best way possible, we made it fully compatible with the Database Connector PHP/ASP and Database Updater PHP/ASP. Thanks to this compatibility you can store your file names, type and size directly in your database. To top it all off, the HTML5 File Upload now comes with a fantastic integration within the Server Connect. And you can even create your own fancy progress bars.

Advanced File Upload
Allow users to upload a single or multiple files to your server.
Custom progress bar
Follow up your upload progress with a fancy progress bar.
Client side image preview
Live image preview before submitting.
Collect files’ data and store it
File names, file size and other data values can be stored in your database.

File Upload
<upload_upload>

File System Connector 1.1.3

Powerful data sources and server side file management

It's super easy to list the contents of a folder if you have the right tool to do it. It's called File System Connector and allows you to use any folder on your server as a datasource and list the files on your website right away! Display the files properties, sort folder lists by size and restrict certain file types if needed. You can even add, move, remove and copy files, overwrite or rename them .

Create Dynamic Galleries and Data Sources
Create powerful dynamic galleries and data sources as content on your page.
Advanced File Management
Move, rename, duplicate and even erase files on the server.
Integrate with Upload and Database Actions
Perform file actions after upload or database updates.
Secure your File Operations
File operations and paths are strongly checked and limited to files in your current site only.
Rich Folder Information
Calculate folder sizes with files only or full recursive with all nested sub folders.
Powered by Server Connect
Next Generation Server Side Visual Programming without coding

If File Exists
<fs_exists>

File Move
<fs_move>

File Rename
<fs_rename>

File Copy
<fs_copy>

File Remove
<fs_remove>

File Download
<fs_download>

If Folder Exists
<fs_direxists>

Create Folder
<fs_createdir>

Remove Folder
<fs_removedir>

Empty Folder
<fs_emptydir>

File/Folder Statistics
<fs_stat>

Folder List
<fs_dir>

Image Processor 1.3.1

Enhance and manipulate your images with ease

Image Processor is the answer when it comes to processing raw images to a substantial level, where they look most professional. With this extension, you can perform a large number of manipulations and offer your users the best result possible. From resizing, watermarking and adding fantastic visual effects to adding different transformations, all can be done with just a few mouse clicks. You will never have to worry again about processing individual images, it can be done fully automatically.

Manipulate & Process Your Images
Crop, resize and invert are just a few of the actions you can apply on your images
Enhance Your Images
Choose between a number of beautiful effects like sharpen, gray scale and more.
Operate with Multiple Images
Manipulate as many images as you want in an instant and create different variations.
Brand Your Images
Grace and protect your images with watermark and rich texts and captions.

Load Image
<image_load>

Resize Image
<image_resize>

Save Image
<image_save>

Crop Image
<image_crop>

Watermark Image
<image_watermark>

Tiled Image
<image_tiled>

Text to Image
<image_text>

Flip Image
<image_flip>

Rotate Image Left
<image_rotateLeft>

Rotate Image Right
<image_rotateRight>

Smooth Effect
<image_smooth>

Blur Effect
<image_blur>

Sharpen Effect
<image_sharpen>

Mean Removal Effect
<image_meanRemoval>

Emboss Effect
<image_emboss>

Edge Detect Effect
<image_edgeDetect>

Grayscale Effect
<image_grayscale>

Sepia Effect
<image_sepia>

Invert Effect
<image_invert>

Get Image Size
<image_getImageSize>

Mailer 1.6.0

The most advanced mailing service

Mailer is the most advanced and easiest to use mailing service there is! It allows you to send personalized as well as emails to a large number of recipients in minutes. From simple text emails to HTML ones or even from a dynamic source, it’s all possible. The extension comes with a great code and design preview of your email and you can even add attachments for the best user experience.

Embed Images and add attachments
Embed images within the email and add any file
Plaintext or HTML Emails
Send rich HTML content as well as plain text alternative
Emails from Dynamic Source
Generate your email from Server Connect Data Bindings
Integrated SMTP Protocol & SSL Authentication
Based on internet standards for transmitting emails
Single or Multiple Recipients
Send personalized emails or to a larger audience
Great Live Preview
Awesome visual overview of your email

Setup Mailer
<mail_setup>

Send Mail
<mail_send>

Zip Processor PRO 1.1.2

Pack and unpack files and folders quickly

Zip Processor is an amazing Server Connect add-on to use for packing and unpacking files, with the industry standard ZIP compression, without writing a single line of code on your page. You can even compress folders, for the quickest backup, optionally with their subfolders. Additionally, use form fields to allow the users to select their own files to be compressed in a new zip file for direct download. Thanks to the great integration with HTML5 File Upload, allow your users to upload zip files and auto unzip them on your server, or zip the other uploaded files to a single zip archive.

Zip and unzip files and folders
Pack and unpack files without a line of code, and also zip any file folder.
Integration with HTML5 File Upload
After upload you can zip your files or unzipped them if they are already packed.
Add any file to the zip
Add additional files such as readme file or instructions.
List zip files content
List the contents of any zip file and use the list as data in Server Connect.

Files To Zip
<zip_zip>

Folder To Zip
<zip_zipdir>

UnZip Files
<zip_unzip>

Zip List
<zip_dir>

Get Zip Comment
<zip_comment>

Data Importer PRO 1.1.2

Import data from CSV and XML files

If you wish to import CSV or XML files with data so that you can update it in bulk in your database, there's one really fast way to do that. It's called Data Importer and it's an awesome extension, which lets you move vast amounts of data from one place to the other in an instant. It's highly useful if you want to update the data, for example, in a table with multiple records, or simply update your products on an e-commerce site, without any effort. If you need to export data, please get Data Exporter.

Migrate data instantly
Move data from one instance to another
Support for XML and CSV files
Import your data from an XML or CSV file
Import one or multiple records
Import your data for bulk updates
Support for other extensions
Extra integration with Database Connector, File Upload, Validator and Updater

Import CSV File
<import_csv>

Import XML File
<import_xml>

Data Exporter PRO 1.1.2

Export data to CSV and XML files

The struggle is real when it comes to migrating data from one instance to another. It's often used for backing up data and lets you view it in a spreadsheet form. Do you want to have your data as an XML or CSV file that you'd like to work with later? Then we have a solution and it's called Data Exporter. It is the extension you need to export one or multiple records, directly from your Wappler and use the data however you want, instantly. The process is done in a blink of an eye so you don't have to worry about hand-coding. If you need to import data, please get Data Importer.

Migrate data instantly
Move data from one instance to another
Support for CSV and XML files
Export your data to CSV or XML file
Export one or multiple records
Export your data for future use or backup
Support for other extensions
Extra integration with Database Connector, Mailer and other

Export CSV File
<export_csv>

Export XML File
<export_xml>

Server Data Formatter PRO 1.1.4

Format your server data any way you want

Server Data Formatter is the extensions, which you need in order to apply filters to your server data. It's supplied with 55 text, numeric, date and time and conditional formatters that you can use to display your server data any way you want. It's all done fully visually within Server Connect so you don't have to write a single line of code. You can do various basic numeric transformations as well as advanced calculations, text transformations and conversions, and even filter or sort your collections. Note: This is the server side formatter to be used in expressions for Server Connect. If you wish to perform client side formatting, please use HTML5 Data Bindings Formatter.

55 supplied formatters
Text, numeric, date and time, conditional and collections filters.
Integration with Server Connect
All formatters are available within the Server Connect
Easy server data formatting
Format and display your server data any way you want
No coding required
Integrated visual tools and server code generation in Server Connect.

Server Data Formatter Crypto PRO 1.1.2

Secure your server data

Security and data integrity are crucial parts of any secure system. That's why you need to generate cryptographic hashes for secure password validation. This is where Server Data Formatter Crypto comes in place and does that with various algorithms, strongly encrypt and decrypt texts with password and more. The extension is an add-on for the Server Data Formatter so make sure to have it installed in Wappler, along with Server Connect.

Encode and decode
Use Base64 to encode and decode your server data
Generate cryptographic hashes
Choose between MD5, SHA1, SHA256 and SHA512 hash
Encrypt and decrypt
Use a password to encrypt and decrypt your server data
Server Data Formatter Integration
All options are within the Server Data Formatter extension

App Connect JSON Data Source 1.0.1

Use every .json file as a data source

App Connect JSON Data Source will enrich your projects by allowing you to bind .json data easier than ever! Actually, JSON format is just a simple text and that's a huge advantage, so you can expect fast performance and great loading speed. It's perfect for dynamic-driven web projects: you can feed them with self-hosted JSON, containing all sorts of information like weather services, currency exchange, fuel prices or similar. Using Repeat and Repeat Children will help you to build complicated systems by the clear interface of App Connect panel.

Use .json file as a data source
Every .json file can become your data source, just like a regular database
Hosted files
You can link a file hosted on your server or link
Repeat and Repeat Children
Use it to feed your data-driven systems
Simple and clear interface
Integrated visual tools and server code generation
Best performance
JSON is just a light text format, so the parsing speed is great

JSON Data Source
<dmx-json-datasource>

License: Basic
Group: Data
groupIcon: fas fa-lg fa-database comp-data
icon: fas fa-lg fa-database comp-data 

<dmx-json-datasource id="@@id@@" is="dmx-serverconnect"></dmx-json-datasource>

Properties

Name Attribute Type Default Description
ID id text
Url url file
No Auto Load boolean

App Connect Charts PRO 1.1.6

Powerful data visualization

There is a brand new and powerful way to visualize data in a couple of minutes with awesome types of charts! It’s called App Connect Charts. Line, bar, radar, pie, polar area, horizontal bar, doughnut or area graphics are available for best experience and clear data presentation. That will make every data dashboard, a simple illustrated article or just an interactive application really beautiful and greatly UX optimized! Try mixing several types of charts and the extension will provide a visual distinction between different datasets. Use every database of JSON to import data, set your preferences from the App Connect Panel and you’re ready – App Connect will even update your data live with animations if changes have been made. The extension will scale the charts perfectly to any device or display size and will not slow down your website! From professionally looking presentations to business and scientific reports – it’s all possible. Bring awesome visual value to your raw data with App Connect Charts!

Dynamic Data Sources
Feed your charts with live data using databases or JSON.
8 Awesome Types of Charts
Choose from line, bar, radar, pie, polar area, horizontal bar, doughnut or area.
HTML5 Animation Rendering
You can animate charts out of the box - a bunch of transitions, updating colors, etc.
Mixed Datasets
Mix several types of charts and provide a visual distinction between different datasets.
Any Device Compatibility
Perfect scale on desktop, tablet or mobile.
Light and Fast
It's rendering fast and will not slow down your website.
Fully Customizable Charts Layout
Define all by yourself - titles, animations, colors...

Chart
<dmx-chart>

License: Basic
Group: Components
groupIcon: fas fa-lg fa-cube comp-components
icon: fas fa-lg fa-chart-bar comp-components 

<dmx-chart id="@@id@@" dataset-1=""></dmx-chart>

Properties

Name Attribute Type Default Description
ID id text
Width width text 800
Height height text 600
Responsive responsive boolean
Type type droplist
Color Theme colors droplist
Legend legend droplist
No Grid nogrid boolean
No Animations noanimation boolean
Stacked stacked boolean
Multicolor multicolor boolean
Full size bars fullbar boolean
Points points boolean
Point Style point-style droplist
Point Size point-size text 3
Line Thickness thickness text 2
Smooth Lines smooth boolean
Dashed Lines dashed boolean
Doughnut Cutout cutout text 50
Data Source data text
Axis Labels labels text
Label X label-x text
Label Y label-y text

App Connect Google Maps 1.1.2

Enrich your content with awesome maps

That App Connect extension is the easiest way to integrate awesome interactive maps in your website using Google Maps API v3, as well as include markers to cities, addresses, businesses or events with info balloons! You can even select your own custom pin icon and add bouncing animation. It is so powerful, that you can use every database or JSON as a dynamic data source! Focused on user experience: choose from 6 cool themes to perfectly fit your website design, language selection available too. You can integrate all the well-known Google Maps functions, like marker clustering. Of course, fully responsive!

Featured Google Maps
Experience a fully functional map on your site, even markers clustering, custom pins and more
Dynamic Addresses and Locations Support
Use databases or JSON to feed your maps with data
6 Great Themes Included
Choose from Standard, Silver, Retro, Dark, Night or Aubergine
Responsive Maps
Yes, your maps will run perfectly on any device
Fully Customizable
Language, tooltips, pan to location and even more
App Connect Native
The extension is App Connect native, so you can integrate additional features

Google Maps
<dmx-google-maps>

License: Basic
Group: Components
groupIcon: fas fa-lg fa-cube comp-components
icon: fas fa-lg fa-map comp-components 

<dmx-google-maps id="@@id@@"></dmx-google-maps>

Properties

Name Attribute Type Default Description
static Warning heavy pricing may apply.
See Google Maps Pricing
ID id text
API Key text
Language droplist
Theme droplist
Width width text 100%
Height height text 400
Map Type maptype droplist
Zoom zoom text 10
Traffic Layer traffic-layer boolean
Transit Layer transit-layer boolean
Bicycling Layer bicycling-layer boolean
Enable Clusters enable-clusters boolean
Cluster Grid Size cluster-grid-size text 60
Cluster Max Zoom cluster-max-zoom text
Min Cluster Size min-cluster-size text 2
Scroll Wheel scrollwheel boolean
Tilt tilt boolean
Rotate Control rotate-control boolean
Scale Control scale-control boolean
Full Screen Control fullscreen-control boolean
Zoom Control zoom-control boolean
Street View Control streetview-control boolean
Map Type Control maptype-control boolean
Address address textarea
Latitude latitude text
Longitude longitude text
Dynamic Markers markers boolean false

Marker
<dmx-google-maps-marker>

License: Basic
Group: Display
groupIcon: fas fa-lg fa-eye comp-layout
icon: fas fa-lg fa-map-marker-alt comp-layout 

<dmx-google-maps-marker id="@@id@@"></dmx-google-maps-marker>

Properties

Name Attribute Type Default Description
ID id text
API Key text
Address address textarea
Latitude latitude text
Longitude longitude text
Label label text
Title title text
Info info textarea
Marker Type type droplist
Image image file
Animation animation droplist
Draggable draggable boolean

App Connect Google Directions 1.0.2

Get the best route to every location

Your users will always be in the right direction with App Connect Google Maps Directions Add-on. It allows you to navigate people to every location on the map - offices, stores, streets, places, squares or just any other address! That's not the only thing: the add-on will display you alternative routes with full directions' steps list and let you choose the best one. Get the most correct directions and select mode from Driving, Transit, Walking or Cycling! You can drag and drop the route map to change the direction - directly on the map! The extension supports any dynamic data source - databases or JSON files, which you can use to feed with real-time data the most important parameters like Origin, Destination, Waypoints, Departure Time and Arrival Time. Feel the native Google Maps user experience on mobile - App Connect Google Maps Directions Add-on is working perfectly on any device!

Full Google Maps Capacity
Integrate directions to any location using App Connect Google Maps engine.
Correct Directions and Directions List
Select from Driving, Transit, Walking or Cycling modes and check the directions list!
Route Alternatives
You can choose an alternative route! The add-on will display all the available routes.
Draggable Markers
Drag and drop the marker on a location and get the route immediately.
Any Dynamic Data Source Support
Use any dynamic data source to feed Origin, Destination, Waypoints, Departure Time and Arrival Time.
Running Perfectly on Any Device
Of course, it's made for desktop and mobile devices!

Google Directions
<dmx-google-directions>

License: Basic
Group: Components
groupIcon: fas fa-lg fa-cube comp-components
icon: fas fa-lg fa-route comp-components 

<dmx-google-directions id="@@id@@"></dmx-google-directions>

Properties

Name Attribute Type Default Description
static Warning heavy pricing may apply.
See Google Maps Directions Pricing
ID id text
Map map droplist
Origin origin text
Destination destination text
Waypoints waypoints textarea Separate your addresses with |
Departure Time departure-time datetime
Arrival Time arrival-time datetime
Show Directions show-directions boolean
Travel Mode travel-mode droplist
Modes transit-modes enum
Preference transit-preference enum
Unit System unit-system droplist
Provide Alternatives provide-alternatives boolean
Avoid Ferries avoid-ferries boolean
Avoid Highways avoid-highways boolean
Avoid Tolls avoid-tolls boolean
Optimize Waypoints optimize-waypoints boolean
Draggable draggable boolean
Dynamic Update dynamic-update boolean

App Connect Smooth Scroll 1.0.0

Better scrolling to any page element

Focus on details and make the user experience of your web project even better! Scrolling to every element on your page plays an important part of that. Now - smoothly! App Connect Smooth Scroll is using only pure JavaScript to let users scroll up or down to any element on the page. And even more: if you're using a sticky menu, it will be fixed and not covering the content when it lets you scroll down to a section on the same page. There are 13 scrolling combinations - select from 4 easing options and 4 animations - linear, ease-in, ease-in-out, ease-out and select your quad, cubic, quart or quint animation! Lightweight, powerful and running perfectly on any device - that is App Connect Smooth Scroll!

Bеtter smooth scrolling to any page element
Make your UX even better: you can link every element on your page and scroll there smoothly - apply to links or other HTML elements. Create Scroll to Top button!
4 easing options, 4 animations included
Choose from linear, ease-in, ease-in-out, ease-out and select your quad, cubic, quart or quint animation.
Fixed headers
The extension will automatically offset scroll distances by the header height, for example sticky menu.
Lightweight and fast
No libraries required, it's pure JS - and it's blazing fast!
Any devices supported
No matter what device, it's fully available.

Smooth Scroll
<dmx-smooth-scroll>

License: Basic
Group: Animation
groupIcon: fas fa-lg fa-code comp-general
icon: fas fa-lg fa-long-arrow-alt-down comp-general 

<dmx-smooth-scroll id="@@id@@"></dmx-smooth-scroll>

Properties

Name Attribute Type Default Description
ID id text
Selector selector text a[href*="#"]
Ignore ignore text [data-scroll-ignore]
Header header text
Offset offset text
Speed speed text 500
Easing easing droplist

App Connect Geo Location 1.0.0

Unleash the power of geo location services

Start collecting accurate location information about your users! App Connect Geo Location is the best way to figure out where your users are located and let them share that information with your server. Get directions, show places nearby, or just collect geo information about your customers - it's all possible with App Connect Geo Location. The extension contains different properties to specify if geo location is supported, collect information about latitude, longitude, heading, speed, timestamp and other. Even make the tracking continuous: get current position of the user and continue to receive updated position as the user moves! Dynamic events are also available: show the correct error when something is missing, e.g. location services are turned off. React on various events! It is fully compatible with App Connect and App Connect Google Maps - expand your knowledge about users on your website and make your services even more accessible!

Accurate Geo Location
Let your users share highly accurate location information with you! No easier way to get your users directions to every place on the map.
Use What You Need
Use more than 10 different properties to specify and get information about latitude, longitude, heading, speed, timestamp, etc.
Continuous Tracking
The extension returns the current position of the user and continues to return updated position as the user moves!
Feed Google Maps With Data
Use App Connect Geo Location to use users' location as a dynamic data source for Google Maps functions, e. g. markers.

Geo Location
<dmx-geolocation>

License: Basic
Group: Data
groupIcon: fas fa-lg fa-database comp-data
icon: fas fa-lg fa-map-marker-alt comp-data 

<dmx-geolocation id="@@id@@"></dmx-geolocation>

Properties

Name Attribute Type Default Description
ID id text
Tracking tracking boolean
Enable High Accuracy enable-high-accuracy boolean
Max Age max-age text 30000
Timeout timeout text 27000

App Connect Preloader 1.0.0

Awesome loading spinners or just a custom preloader for your page

Let your users know that your page isn't broken but it's just loading all the images and stuff inside! App Connect Preloader allows you to select from 12 loading spinners and display it as an awesome preloader on any page! But that's not everything: you can create your own preloading text or image (e.g. logo) and use it as a custom preloader. Select color and background - that's it! The extension is CSS-based, there are no old-fashioned GIFs. The preloader will remain displayed until the whole content is fully loaded. That includes images, texts, HTML elements, etc. App Connect Preloader is the best solution for websites targeted to mobile users - websites are loading slower due to slow 3G/4G connection. It works perfectly with any App Connect extension, so you can use App Connect Preloader in combination with other interactivity extensions like galleries, masonry grid or simple slideshows.

12 Loading Spinners Available
Select from 12 CSS-based loading spinners to perfectly match your project's layout!
Custom Preloader
Create your own preloader - choose text or logo to show your users during page loading.
Hiding When Content is Fully Loaded
Preloader will remain on screen until the whole content is fully loaded - texts, images, animations...
Many Customization Options
Select size of loading spinner or custom preloader, as well as color and background color.
Running On Any Device
Don't worry - App Connect Preloader is running perfectly on desktop, mobile or tablet!
App Connect Native
Works in a native combination with all App Connect extensions - galleries, slideshows, masonry...

Preloader
<dmx-preloader>

License: Basic
Group: Animation
groupIcon: fas fa-lg fa-code comp-general
icon: fas fa-lg fa-spinner comp-general 

<dmx-preloader id="@@id@@"></dmx-preloader>

Properties

Name Attribute Type Default Description
ID id text
Color color color #333333
Back Color bgcolor color #ffffff
Size size text 60
Spinner: spinner droplist Choose the spinner for page loading.
Preview preview boolean

Database Connector 2 PRO 2.8.7

Connect to your database and build database queries visually

Access any well known database without any SQL and PHP knowledge in Wappler! This is what the Database Connector 2 is all about! Fully integrated visual tools and server code generation are available at your disposal! The extension features a built-in connection wizard where you can define and manage your connections to all well known databases. Choose from ready to go connections for MySQL, Microsoft SQL Server and many others! Database Connector 2 comes with a totally revamped UI, new database connection wizard, improved query builder and speed improvements. It will allow you to create really advanced queries, use the long anticipated visual nested query conditions builder and much more, all of this thanks to the development we've done with Wappler and its amazing community! Database Connector 2 supports PHP, ASP and ASP.NET and all the major database types, like - MySQL, MS SQL Server, PostgreSQL, SQLite and more.

No coding required
Integrated visual tools and server code generation
Database connection wizard
The Database Connection Wizard supports all the major database types, like - MySQL, MS SQL Server, PostgreSQL, SQLite and more
Visual database query builder
Build advanced queries fully visually using the integrated query builder
Support for PHP, ASP and ASP.NET
A single extension which offers support for PHP, ASP and ASP.NET server technologies
Complex Conditions
Build advanced complex conditions such as nested group of rules
Server-side paging
Native paging techniques, specific for each database
SQL Aggregate Functions
The following functions are available: COUNT, AVG, MIN, MAX, SUM so you can perform calculations on your sets of values
Server Connect integration
Database Connector 2 integrates fully in Server Connect

Database Connection
<dbconnector_connect>

Database Query
<dbconnector_select>

Database Single Query
<dbconnector_single>

Database Paged Query
<dbconnector_paged_select>

Database Updater 2 PRO 2.8.3

Create your database update actions visually

Database Updater 2 allows you to perform database update actions on any well-known database without any SQL knowledge! The Database Updater 2 extension for Wappler gives you the power to manage the data in your databases in a whole new way through Ajax technology! You are submitting, saving and reloading your data without any page refresh! Perfect for building dynamic web sites and apps. The new Database Updater 2 comes with a totally revamped UI, new database actions builder, advanced filtering options and speed improvements. It will allow you to visually create insert, update and delete queries. Database Updater 2 even supports advanced filtering and for multiple insert, update and delete actions! Database Updater 2 supports PHP, ASP and ASP.NET and all the major database types, like - MySQL, MS SQL Server, PostgreSQL, SQLite and more.

No coding required
Integrated visual tools and server code generation
Insert, update, delete records
Perform database actions on any well-known database
Visual database actions builder
Insert, Update or Delete data fully visually using the integrated actions builder
Multi Insert, Update and Delete Actions
Create advanced dynamic multi insert or update record forms for your users
Support for PHP, ASP and ASP.NET
A single extension which offers support for PHP, ASP and ASP.NET server technologies
Complex Conditions
Build advanced complex conditions to select just the records you need to update
No page refresh
Submit, save and reload data without refresh
Server Connect integration
Database Connector 2 integrates fully in Server Connect

Database Update
<dbupdater_update>

Database Insert
<dbupdater_insert>

Database Delete
<dbupdater_delete>

Database Multi Update
<dbupdater_template_multiupdate>

Database Multi Insert
<dbupdater_template_multiinsert>

Security Provider 2 PRO 2.6.0

Secure your web sites and apps

The new Security Provider 2 comes with a totally revamped UI, new advanced permissions options and great speed improvements. It helps you to easily apply advanced security restrictions to your website or app. Secure the access to your Server Actions build with Database Connector 2 and Database Updater 2! Decide who has access to what resources on your website or app. Choose from single static logins or validate users from an existing database, having different permissions. Security Provider 2 supports PHP, ASP and ASP.NET, so you no longer need 3 different versions for your different projects!

Secure Your Web Sites and Apps
Easily apply advanced security restrictions to your website or app
User Permissions
Give permissions to different users or user groups
Restrict Pages
Do an automatic redirect to a login page or access denied page
Secure Your Data
Secure the access to your data, thanks to the security restrict options in Server Connect
Show or Hide Regions On Your Page
Show/hide areas on your page, depending on user permissions
Redirect Users on Log In and Out
Redirect users after successful log in or log out
Cookie Options
You have full control over the cookie options - domain, path and expiration date
Easy Configuration
Setup is easy, thanks to the user friendly UI

Security Provider
<auth_provider>

Security Identify
<auth_identify>

Security Login
<auth_login>

Security Logout
<auth_logout>

Security Restrict
<auth_restrict>

auth_validate
<auth_validate>

App Connect Bootswatch 4 4.6.0

21 amazing Bootstrap 4 themes

Give your Bootstrap 4 site a fresh look with App Connect Bootswatch 4! Based on the great open source themes by Thomas Park from Bootswatch.com, this awesome Wappler extension offers 21 different designs to enhance your Bootstrap 4 components, navigation and layout appearance with minimal effort for maximum user experience and impact.

Easy To Use
Just select one of the included themes and apply it with a single click!
Built for Bootstrap 4
The themes are designed right for the latest version of the great Bootstrap 4 framework.
21 Different Themes Included
Choose one of the 21 themes included in the extension.
Great Wappler Integration
You can preview the changes immediately in Wappler Live View!

App Connect Framework 7 PRO 1.6.4

The future of building mobile apps is here

Create amazing HTML5 and CSS based mobile apps fully visually in Wappler with Visual App Designer! Use the ready to go Mobile UI Components and manage the app logical structure in the dedicated floating panel. Build your app with context aware drag & drop and enter the components properties in the smart property inspector. Empower the great looking Framework7 mobile framework for awesome native looking designs. Make dynamic apps together with the HTML5 Data Bindings and connect them to databases with the Database Connector PHP/ASP and Updater PHP/ASP. When you are done with the app you can build, test and package it directly in Cordova Builder for any platform.

App Connect Notifications 1.0.1

Amazing rich notifications and user alerts

App Connect Notifications offers you rich notifications and user alerts, completed with amazing CSS styling, icons, easy positioning of the boxes, and fully responsive appearance and mobile integration, and much more! Really customizable - select fading, duration, colors, margins, opacity... all by yourself!

Rich notifications and users alerts
Fully supplied with title, description, icons, HTML styling
Real-time feedback to your users
Notifications give your users feedback about actions or status
Dynamic notifications
Retrieve your notifications from a database-driven source
Great notification layouts and easy notify positioning
Warning, error, info - choose from pre-defined layouts and
Awesome animation
Fade In/Out animations available! Set timeous, duration directly from Properties panel
Use App Connect Animate CSS animations on show/hide
Choose among over 50 animations
Perfect responsive experience
Any screen size - same best user experience
Fully customizable
Select colors, margins, visibility duration, opacity, type notifications

Notifications
<dmx-notifications>

License: Basic
Group: Components
groupIcon: fas fa-lg fa-cube comp-components
icon: fas fa-lg fa-info comp-components 

<dmx-notifications id="@@id@@"></dmx-notifications>

Properties

Name Attribute Type Default Description
ID id text
Position position droplist
Align align droplist
Offset X offset-x text 15
Offset Y offset-y text 15
Spacing spacing text 10
Opacity opacity text 0.8
Timeout timeout text 5000
After Pause extended-timeout text 1000
Newest On Top newest-on-top boolean false
Closable closable boolean false
Close Icon close-icon text fa fa-times
Color info-color text #fff
Background info-background text #2f96b4
Icon info-icon text fa fa-info
Color success-color text #fff
Background success-background text #51a351
Icon success-icon text fa fa-check
Color warning-color text #fff
Background warning-background text #f89406
Icon warning-icon text fa fa-exclamation
Color danger-color text #fff
Background danger-background text #bd362f
Icon danger-icon text fa fa-warning

App Connect Browser Control 2.2.1

Detect visitors' browser properties and use them to customize and style your page content dynamically.

Discover your visitors' browser properties and adjust your pages dynamically. Style and customize elements, apply custom styles, attributes or animations depending on scrolling direction, position or offset. Show different content based on browser resolution and language, serve special retina ready HD images or low resolution images for small devices. Redirect users to a referrer page, after log in or show a browser alert on different events.

Detect page scrolling
Get all the data related to scrolling - direction, position, offset and length
Customize elements
Apply custom styles, attributes or animations to page elements depending on page scrolling
Get page and viewport data
Get all page, viewport and device sizes as well as pixel ratio and orientation
Get URL data
Hostname, href, port and hash are just a few of the properties you can get
Detect user tracking and cookies preferences
Check if user cookies are enabled or disabled
Show hi-def images only when needed
Serve retina images only to high-pixel ratio devices
Redirect users after logging in
Redirect users back to the referrer page, once they logging in
Perform URL navigation and Show Alerts
Send users to a specific URL or show Alert on any dynamic event

Browser
<dmx-browser>

License: Basic
Group: Components
groupIcon: fas fa-lg fa-cube comp-components
icon: fas fa-lg fa-browser comp-components 

<div is="dmx-browser" id="@@id@@"></div>

Properties

Name Attribute Type Default Description
ID id text

App Connect Video Player PRO 1.0.2

Add responsive video player to your website

Add interactivity to your website with App Connect Video Player. Offering full cross-browser and cross-platform compatibility, you can be sure your videos will look great on any device. It's lightweight and easy to setup - enable or disable controls, add custom poster or show info about the video played. Its advanced options and great App Connect integration allow you to use dynamic data for the video source.

Great video player
Add great looking video player on your pages
Custom controls
Control your video player using custom controls and dynamic events
Fullscreen playback
Play your video in fullscreen when needed
Playlists
Create your own custom-styled playlists for your video series
Play on any device
Play your videos on computer, tablet or phone thanks to full browser compatibility
Dynamic sources
Use dynamic data sources for your videos
Show info
Display playback info on your page
Add custom poster
Show a custom picture, while the video is loading
Auto pause
Pause your video when the video is out of viewport

Video
<dmx-video>

License: Basic
Group: Components
groupIcon: fas fa-lg fa-cube comp-components
icon: fas fa-lg fa-play-circle comp-components 

<video is="dmx-video" id="@@id@@"></video>

Properties

Name Attribute Type Default Description
ID id text
Auto Play autoplay boolean Directly Play the video when page is loaded. Might need also the Muted option otherwise browser will block it.
Play In View playinview boolean Automatically Play the video when it comes in view
Auto Pause autopause boolean Automatically Pause the video when it goes out of view
Controls controls boolean
Loop loop boolean
Muted muted boolean
Width width text
Height height text
Src src file
Poster poster file
Preload preload droplist

App Connect API Data Source PRO 1.0.2

Connect to any data API and populate data on your pages

App Connect API Data Source allows you to connect to any data API, visually setup the parameters and headers and use it to populate data on your pages! Fetch the output of the remote API in a couple of clicks and use it as API schema. Easily access and use the data from popular APIs like Unsplash, Behance, Coinbase, Fixer.io or any other custom API. Add real-time data to your charts, create dynamic galleries or just use the schema as a repeat region source. All of this and much more is available through an easy to use UI directly in App Connect panel!

Data API as a data source
Use any data API as a data source, just like a regular database
Parameters and Headers
Visually setup the required parameters or headers
API Schema Generation
Fetch the output of the remote API in a couple of clicks and use it as API schema
Response headers
Response headers are retrieved and available at your disposal
Repeat and Repeat Children
Use the data to create repeat regions
Real-time charts
Feed your dynamic charts with real-time data
Data Caching
Enable caching to avoid API call limits
Paging support
Add paging and limit the records displayed per page, when needed
Dynamic data binding
Use the data on any element on your page: dynamic attributes, text, image sources
Simple and clear interface
Simple, yet powerful visual tools to connect and fetch data from your API
Best performance
Data APIs use JSON format, so the parsing speed is great

API Data Source
<dmx-api-datasource>

License: Basic
Group: Data
groupIcon: fas fa-lg fa-database comp-data
icon: fas fa-lg fa-database comp-data 

<dmx-api-datasource id="@@id@@" is="dmx-fetch"></dmx-api-datasource>

Properties

Name Attribute Type Default Description
ID id text
Url url text
No Auto Load boolean
Credentials boolean
Define API Schema button
State Manager cache droplist Choose the State Manager to use. make sure you Session or Local Storage Manager on the page first!
Cache for ttl text Choose the time in seconds to keep the data cached

Bootstrap 4 Dynamic Paging Generator PRO 4.6.0

Auto generate awesome dynamic Bootstrap 4 paging in seconds

Use App Connect Bootstrap 4 Dynamic Paging Generator to create amazing Bootstrap 4 dynamic paging from any data source and greatly improve the user experience on your website! So yes... that's the best way to divide your large content into single pages with great navigation, fully automatically, with a great structure! You can select any data source for the paging generation, as well as fully customize the style! Use various sizes and designs to make it match your site perfectly. And even apply Bootswatch themes!

Generate Dynamic Paging
Automatically separate your content in single pages
Great Bootstrap 4 styled Paging
The pagination is just perfect on any device
Save Paging State as URL
Save paging state as URL for bookmarking and restore of page load using State Management
Fast Loading
Your data will load very fast, doesn't matter how many records you have
Different Paging Style with Every Bootswatch Theme
Use in combination with 's free extension Bootswatch and apply different paging styling
Fully Customizable
Select size and customize the buttons to fit your design

Bootstrap 4 Paging Generator
<dmx-bs4-paging-generator>

License: Basic
Group: Generators
groupIcon: fas fa-lg fa-retweet comp-dialogs
icon: fas fa-lg fa-ellipsis-h comp-dialogs

App Connect Swiper 1.1.4

The most advanced mobile-friendly touch slider for Wappler

The most advanced mobile-friendly touch slider for Wappler! Lightweight and fast, App Connect Swiper doesn't require any JavaScript libraries like jQuery. It's powered by top notch features like hardware accelerated transitions, 3D effects, parallax transitions, touch interactions, flex based layout and many more! You can use dynamic data for your slides, thanks to the great App Connect integration.

Mobile Friendly
Touch interactions provide amazing experience on any mobile device
3D Transitions
Beautiful and smooth 3D transitions available
Parallax slides
Full support for amazing parallax transition effects for your slides
Navigation Options
Add navigation and/or pagination to your slider
Custom Content
You can use any content inside the slides - text or images, it's your choise
Continuous Loop Mode
Loop through the slides infinitely
Hardware Acceleration
Increase your site performance with hardware accelerated transitions
Flexbox Layout
Take advantage of the modern flexbox based layout for the slides
Lightweight and Fast
App Connect Swiper is blazing fast and not jQuery dependent
Dynamic Slides
Use any dynamic data for your slides - database, data API, JSON file

Swiper
<dmx-swiper>

License: Basic
Group: Components
groupIcon: fas fa-lg fa-cube comp-components
icon: fas fa-lg fa-hand-pointer comp-components 

<div is="dmx-swiper" id="@@id@@"></div>

Properties

Name Attribute Type Default Description
ID id text
Theme droplist
Effect effect droplist
Slides Source slides text
Initial Slide initial-slide text
Vertical vertical boolean
Auto Height auto-height boolean
Centered Slides centered-slides boolean false
Speed speed number 300
Auto Play autoplay boolean false
Grab Cursor grab-cursor boolean false
Keyboard keyboard boolean false
Mousewheel mousewheel boolean false
Observer observer boolean false
Free Mode free-mode boolean false
Free Mode Sticky free-mode-sticky boolean false
Loop loop boolean false
Loop Fill loop-fill boolean false
Offset Before slides-offset-before number 0
Offset After slides-offset-after number 0
Space Between space-between number 0
Per View slides-per-view numberorstring 1
Per Group slides-per-group numberorstring 1
Space Between space-between-sm number 0
Per View slides-per-view-sm numberorstring 1
Per Group slides-per-group-sm numberorstring 1
Space Between space-between-md number 0
Per View slides-per-view-md numberorstring 1
Per Group slides-per-group-md numberorstring 1
Space Between space-between-lg number 0
Per View slides-per-view-lg numberorstring 1
Per Group slides-per-group-lg numberorstring 1
Space Between space-between-xl number 0
Per View slides-per-view-xl numberorstring 1
Per Group slides-per-group-xl numberorstring 1
Pagination pagination droplist
Navigation navigation boolean false
Scrollbar scrollbar boolean false
Parallax parallax boolean false

Slide
<dmx-swiper-slide>

License: Basic
Group:
groupIcon:
icon: fas fa-lg fa-file-image comp-content 

<div class="swiper-slide"></div>

Properties

Name Attribute Type Default Description

App Connect Lazy Load PRO 1.0.0

The ultimate lazy load component for Wappler

App Connect Lazy Load is a fast, SEO-friendly lazy loader for images. It allows you to load pages, containing hundreds of images in just the blink of an eye! App Connect Lazy Load offers support for responsive images using srcset attribute, so you can serve different images depending on visitors' devices viewport sizes. The device will only load the image that fits its size, which is really efficient in saving bandwidth and optimizing load times. Also you can set a preloader image or a low quality image preview to be displayed while your image is being loaded. It can be combined with App Connect Animate CSS in order to create stunning inview/reveal animations.

Fast Performance
The component uses high-efficient code which can be used with hundreds of images
Intelligent Resource Prioritization
In-view images are loaded fast and near-view images are preloaded lazily before they come into view
Responsive Images
Standard responsive image support via the srcset attribute
Device Size Detection
Only load the image needed for visitor's device viewport size
Image Placeholder
Use a low quality image placeholder for the first impression, while your image is being loaded
Dynamic Data
Use any dynamic data - database, json data source or api data source
Animation Options
Use in combination with App connect Animate CSS for great in view/reveal animations
SEO Friendly
Lazy Load does not hide your images from Google. It auto detects the user agent and serves the content as required.
Lightweight
Small in size and without jQuery or any other dependencies

Server API Connector PRO 1.5.1

Connect securely to any data API

Server API Connector allows you to securely connect to any data API, visually setup the parameters and headers and use it to populate data on your pages or use the data securely on the server-side. Fetch the output of the remote API in a couple of clicks and use it as API schema.

Data API as a data source
Use any data API as a data source, just like a regular database
Parameters and Headers
Visually setup the required parameters or headers
API Schema Generation
Fetch the output of the remote API in a couple of clicks and use it as API schema
Response headers
Response headers are retrieved and available at your disposal
Repeat and Repeat Children
Use the data to create repeat regions
Dynamic charts
Feed your dynamic charts with real-time data
Dynamic data binding
Use the data on any element on your page: dynamic attributes, text, image sources
Simple and clear interface
Simple, yet powerful visual tools to connect and fetch data from your API
Best performance
Data APIs use JSON format, so the parsing speed is great

API Action
<dmx-api-connector>

Server OAuth2 Connector PRO 1.5.0

Social login with Facebook, Google and many more

Using the OAuth2 Connector you can get users info or add a "social login" option to your website, so the users can directly log in using their accounts on one of the supported services. The OAuth2 Connector offers support for Google, Facebook, Instagram, LinkedIn, Amazon, Github and many more!

Get Users Data
Using the OAuth2 Connector, you can get users account data from the services you choose.
Social Login
Add social login buttons to your site, instead of making your users register.
Many Supported Services
Google, Facebook, LinkedIn, Amazon, Instagram and GitHub are just a small part of the supported OAuth2 services.

OAuth2 Provider
<oauth_provider>

OAuth2 Authorize
<oauth_authorize>

App Connect Routing PRO 2.0.4

Routing component for SPA pages

App Connect Routing allows you to create page routing for your Single Page Apps. It loads the content you select per each route, without full page reloading. It's also really for your Node.js pages as it allows you to do partial page reloads.

Partial Refresh
Reload just the content of your page, which needs to be refreshed without doing a full page reload.
SPA Routing
Load different content for your different Single Page App routes.
Speed Improvements
Using Single Page Apps with routing provides a speed and performance boost.

View
<dmx-view>

License: Basic
Group: Components
groupIcon: fas fa-lg fa-eye comp-components
icon: fas fa-lg fa-random comp-components 

<div is="dmx-view" id="@@id@@"></div>

Properties

Name Attribute Type Default Description
ID id text

Route
<dmx-route>

License: Basic
Group: Components
groupIcon: fas fa-lg fa-cube comp-components
icon: fas fa-lg fa-random comp-components 

<div is="dmx-route" id="@@id@@"></div>

Properties

Name Attribute Type Default Description
ID id text
Path path text Enter the path to be used. Example: /some/path

Parameters:
 Named Parameters:
  Named parameters are defined by prefixing a colon to the parameter name (:foo).
  Example: /path/:id

 Parameter Modifiers:
  Optional: Parameters can be suffixed with a question mark (?) to
    make the parameter optional. Example: /:foo/:bar?

  Zero or more: Parameters can be suffixed with an asterisk (*) to denote a zero or
    more parameter matches. Example: /:foo*

  One or more: Parameters can be suffixed with a plus sign (+) to denote a one or
    more parameter matches. Example: /:foo+

  Unnamed Parameters: It is possible to write an unnamed parameter that only consists of
     a matching group. It works the same as a named parameter, except it will be
     numerically indexed. Example: /:foo/(.*)

  Custom Matching Parameters: All parameters can have a custom regexp, which overrides the
     default match of /. For example, you can match numeric id: /path/:id(\d+)
     or match words like either "user" or just "u": /path/(user|u)
Url url file Choose optional content file to include when the route matches
Exact exact boolean false Match the route exactly, so no additional routes with same path prefix will match after it

App Connect Bootstrap 4 V2 4.6.0

The easiest way to build responsive website layouts in Wappler

Bootstrap 4 Version 2 comes with a totally redesigned UI and revamped UI controls! The new version is the easiest way to build responsive, Bootstrap 4 based websites in Wappler, thanks to Wappler and its awesome community! App Connect Bootstrap 4 V2 takes the world's leading CSS framework to the next level! The typical mobile-first grid that appropriately scales up to 12 columns to build layouts of all shapes and sizes is now under your control: manage all the details directly from the user interface of Wappler. Bootstrap’s layout in version 3 has been powered by float-based styles. But Bootstrap 4 uses a full suite of responsive flexbox utilities by default - that means you can define one column and have its siblings automatically resize around it! Excepting the major changes, there's a number of minor fixes in Bootstrap 4 too. That's not everything: you can easily migrate your old Bootstrap 3 websites to the newest version by the integrated convertor. App Connect Bootstrap 4 is the most powerful tool for building mobile-first site layouts you can imagine!

The All-New Bootstrap 4 Features
Latest version of the world's most popular CSS framework included (v4.3.1), better than ever!
Bootstrap 3 to Bootstrap 4 Conversion Included
Yes - you can easily convert your old Bootstrap 3 websites to the newest version!
Many Predefined Elements Included
Use dozens of predefined classes - awesome ready-to-use elements!
Smart Elements Insertion
Elements’ insertion is context-sensitive - it suggested you components based on the current context!
Customize Each Element Directly in the UI
Many customization options are available for each element in the user interface of Wappler!
12-column Responsive Grid
Powerful mobile-first flexbox grid that appropriately scales up to 12 columns to build layouts of all shapes and sizes.
Advanced Flexbox Integration
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities
Content Templates
Add, edit and reuse the included pre-built, responsive content templates
Advanced Grid Layouts and Nested Columns
Intuitively add as many rows as you wish within a column!
Mobile-First Design From Scratch
That's something standard - it's designed to look best on mobile devices.
Include Bootstrap CDN or a Local File
Choose to include directly Bootstrap CDN or upload CSS files of the framework locally.

Jumbotron
<bs4-jumbotron>

Header
<bs4-header>

Main
<bs4-main>

Section
<bs4-section>

Footer
<bs4-footer>

Container
<bs4-container>

Row
<bs4-row>

Column
<bs4-col>

Column Break
<bs4-col-break>

Heading
<bs4-title>

Paragraph
<bs4-paragraph>

Anchor Image
<bs4-anchor-img>

Image
<bs4-img>

Secondary Text
<bs4-text-muted>

Badge
<bs4-badge>

Link Badge
<bs4-link-badge>

Button
<bs4-btn>

Anchor Button
<bs4-anchor-btn>

Button Group
<bs4-btn-group>

Button Toolbar
<bs4-btn-toolbar>

Tab Content
<bs4-tab-content>

Tab Pane
<bs4-tab-pane>

Dropdown Item
<bs4-dropdown-item>

Dropdown Text
<bs4-dropdown-item-text>

Dropdown Header
<bs4-dropdown-header>

Dropdown Divider
<bs4-dropdown-divider>

Dropdown Toggle Button
<bs4-btn-dropdown-toggle>

Dropdown Toggle Link
<bs4-link-dropdown-toggle>

Dropdown Menu
<bs4-dropdown-menu>

Dropdown
<bs4-dropdown>

List Item
<bs4-list-group-item>

Action List Item
<bs4-list-group-item-action>

Flush List Group
<bs4-list-group-flush>

List Group
<bs4-list-group>

Action List Group
<bs4-list-group-action>

Description List
<bs4-desc-list>

Term
<bs4-desc-list-term>

Description
<bs4-desc-list-desc>

Flex Container
<bs4-flex-container>

Display Block
<bs4-display-block>

Responsive Table
<bs4-responsive-table>

Table
<bs4-table>

Table Head
<bs4-table-head>

Table Body
<bs4-table-body>

Row
<bs4-table-row>

Header
<bs4-table-header>

Cell
<bs4-table-cell>

Progress
<bs4-progress>

Progress Bar
<bs4-progress-bar>

Border Spinner
<bs4-spinner-border>

Growing Spinner
<bs4-spinner-grow>

Inline Border Spinner
<bs4-inline-spinner-border>

Inline Growing Spinner
<bs4-inline-spinner-grow>

Link
<bs4-a>

App Connect Bootstrap 4 Navigation V2 4.6.0

Stylish and trendy navigation for your website or mobile project

Bootstrap 4 Navigation V2 comes with fully redesigned controls, making it the easiest tool to visually insert and edit Bootstrap 4 Navigation in Wappler ever! Complete your Bootstrap 4 website or mobile projects from top to bottom with the all-new App Connect Bootstrap 4 Navigation V2. It allows you to add an awesome customizable navbars without any coding skills. You got power to fully manage the navigation properties, align and direction options, add dropdowns and many more. Easy styling, customization, show/hide elements, or even add forms! Take the control in your hands and manage all the details - colors, main style, aligns, directions, etc. It's up to you to specify the visibility of each navigation item, depending on the device that's been viewed on! That means you can select which screens (e.g. mobile over 480px) to show mobile menu or just hide the whole navbar. Many predefined header and navigation templates are included - select from over 20 options!

Stylish Navigation
Stylish and trendy navigation for your website or mobile project
App Connect Bootstrap 4 Native
The extension is App Connect Bootstrap 4 native, so they are synced in an awesome way!
Easy Elements Insertion
Just click, add elements to the menu and set them the properties you want.
Active Link Highlighting
Automated highlighting of current page link in the navigation.
Great Custom Styling
Style every single visual element by yourself, edit properties, colors, fonts, alignments or even add icons!
Different Navigation Types
Add Nav, Navbar or vertical sidebar Navigation, select a style - Pills or Tabs.
Set Mobile Menu Width
Set the minimal width of the device's screen to turning the navbar into a mobile menu!
Pixel Perfection on Any Device
It's made for desktop, tablet, mobile or any other device. Looks perfect! Show/hide menu items on certain screens.
Add Forms Into Navbar
It's simple to add a subscription form or a search field in the navigation.

Nav Link
<bs4-nav-link>

Dropdown Toggle Link
<bs4-nav-link-dropdown-toggle>

Navbar
<bs4-navbar>

Navbar Brand
<bs4-navbar-brand>

Navbar Toggler
<bs4-navbar-toggler>

Navbar Collapse
<bs4-navbar-collapse>

Navbar Text
<bs4-navbar-text>

Breadcrumb Link
<bs4-breadcrumb-link>

Page Link
<bs4-page-link>

Full List Pagination
<bs4-tmpl-list-pagination>

Full List Pagination with Icons
<bs4-tmpl-list-pagination-icons>

bs4-tmpl-text-pagination
<bs4-tmpl-text-pagination>

Tabs with Nav
<bs4-tmpl-list-nav-tabs>

Full Navbar
<bs4-tmpl-full-navbar>

bs4-tmpl-right-navbar-dark
<bs4-tmpl-right-navbar-dark>

App Connect Dropzone PRO 1.0.11

Easily upload files with drag and drop

Imagine being able to simply drag files from your desktop and drop them in your browser. App Connect Dropzone will help you do this easily! Uploading one or more files at the same time? It's up to you! App Connect Dropzone offers client side image preview, for the selected images. You can add your own custom text message, if you need to translate it in your language. Limit the file types, which your users are allowed to upload on your website with just a few clicks, thanks to the great App Connect Validator integration. The Dropzone component integrates with Server Connect Forms, so the files are processed server-side by Server Connect and its powerful upload and processing tools!

Drag &amp; Drop Area
App Connect Dropzone allows you to just drop your files on your page
Thumbnail Previews
Customizable preview thumbnails are available, so you can see the files you dragged into the Dropzone
Single or Multiple Files
Allow multiple file uploads, so that your users can drop all the files at once
Easy File Upload
Upload files easily thanks to HTML5 File Upload integration
Upload Progress Tracking
Get the upload progress stats, thanks to Server Connect Form integration
Easy to Configure
App Connect Dropzone comes with modern and easy to use UI
File Type Validation
Limit the accepted file types that can be dropped in the Dropzone
Dynamic Events
Control App Connect Dropzone with the available dynamic events
Multi Language Support
Translate the Dropzone texts in your own language

Dropzone
<dmx-dropzone>

License: Basic
Group: Forms
groupIcon: fas fa-lg fa-file-alt comp-form
icon: fas fa-lg fa-copy comp-form 

<input is="dmx-dropzone" id="@@id@@" type="file" name="@@id@@[]" multiple>

Properties

Name Attribute Type Default Description
ID id text
Name name text
Multiple multiple boolean false
Message message text Drop files here or click to upload.
Thumbs thumbs boolean true
Width thumb-width text 100
Height thumb-height text 100

App Connect Bootstrap 4 Modals V2 4.6.0

Modern dialog boxes and popup windows for your website

Bootstrap 4 Modals Version 2 comes with totally revamped UI Controls and many new options like more modal sizes, scrollable body and static backdrop option. Modals are initial part of Bootstrap 4 framework and they're the easiest way to tell your users something important, let them like your Facebook page, subscribe for updates... any content you need! You can even put Forms, Video Player, Swiper, Google Maps or Medium Editor inside! Modals are fully compatible with App Connect dynamic events so you can show, hide or toggle them when needed. Also you can run actions when the modal is shown or after it is hidden. Thanks to Bootstrap 4, modals are fully compatible with any device and screen size. You got the controls in your hands - change colors, size, fade animation, align, auto show, backdrop, etc.

Any Content Inside
Modals are suitable for alerts, login or signup form, user notifications or other custom content - videos, maps, swiper gallery etc.
Great Way to Communicate With Users
Facebook like box, Follow Us on Twitter? Modals is the easiest way to tell your users something important or just let them agree with some Terms and Conditions...
Fully Customizable
You got the controls in your hands - wide variety of options available, e. g. colors, size, fade, align, auto show, backdrop, and more!
Great Bootstrap 4 UI Components
You can use modals on any website - it's trendy and very stylish!
Different Sizes
There are 4 modal sizes available - default, small, large and extra large. Just elect the one that suits your page design!
Mobile-first and Fully Responsive
Thanks to the great Bootstrap 4 framework, all the modals fit perfectly to any device!
Control with App Connect Dynamic Events
Set dynamic events using App Connect, e. g. close the modal on submit, open modal with certain action, etc.
Scrollable Modals
You can create scrollable modals that allows users to scroll the modal body, when the modal content is long.
Awesome Wappler Live View Integration
It's awesome how Modals is integrated into Live View of Wappler. Just try it!

Modal
<bs4-modal>

Dynamic Modal
<dmx-bs4-modal>

License: Basic
Group: Components
groupIcon: fas fa-lg fa-cube comp-components
icon: fas fa-lg fa-window-restore comp-components 

<div class="modal" id="@@id@@" is="dmx-bs4-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Properties

Name Attribute Type Default Description
ID id text
Class class text
Size droplist
Centered boolean false
Fade boolean false
Scrollable boolean false
Auto Show show boolean false
No Backdrop nobackdrop boolean false
No Close On Click nocloseonclick boolean false
No Keyboard nokeyboard boolean false
No Focus nofocus boolean false
Advanced css_toggle
Color color_group
Align button_group
Font Weight button_group
Font Style button_group
Transform button_group
Overflow button_group
Back Color color_group
Width range
Height range
Border enum
Rounded droplist
Size droplist
Border Color colorlist
Margin<br>&<br>Padding spacing
Hide on button_group
Print button_group

Modal Header
<bs4-modal-header>

Close Button
<bs4-button-close>

Modal Title
<bs4-modal-title>

Modal Body
<bs4-modal-body>

Modal Footer
<bs4-modal-footer>

App Connect Bootstrap 4 Collapse V2 4.6.0

Organize content in show/hide containers with amazing effects

Split your web content into accordion-like fields with the all-new App Connect Bootstrap 4 Collapse V2, which helps you to implement collapsing sections anywhere on your site. Enrich content with HTML, arrange your text, images, videos and even whole pages and style them to create an intuitive and user-friendly layouts, which will fit perfectly any window or monitor size. Grab your users' attention with stunning animation effects that will be played when toggling the content of your sections and present your products or ideas more effectively!

Show/hide content
Use single, multiple or group collapsible items
Include rich HTML and images
Enrich container content with HTML or include images/video, iframes, additional scripts
Combine with Cards
Using the card component, you can extend the default collapse behavior to create an accordion
Use dynamic data
Create collapsible data-driven content
Lightweight script
Only pure JavaScript and Bootstrap 4 includes
Fully Customizable
Edit and set up every part of the UI - colors, auto show/hide, animations

Collapse
<bs4-collapse>

Dynamic Collapse
<dmx-bs4-collapse>

License: Basic
Group:
groupIcon:
icon: fas fa-lg fa-expand-arrows-alt comp-content 

<div class="collapse" id="@@id@@" is="dmx-bs4-collapse">
  <p>Collapse body text goes here.</p>
</div>

Properties

Name Attribute Type Default Description
ID id text
Class class text
Show show boolean false
Parent data-parent droplist
Advanced css_toggle
Color color_group
Align button_group
Font Weight button_group
Font Style button_group
Transform button_group
Overflow button_group
Back Color color_group
Width range
Height range
Border enum
Rounded droplist
Size droplist
Border Color colorlist
Margin<br>&<br>Padding spacing
Hide on button_group
Print button_group

App Connect Bootstrap 4 Tooltips V2 4.6.0

Guide your users through the content with useful info tooltips

Add stylish animated tooltips easily, anywhere on your page. Adjust the settings through the great new easy to use UI controls. You can put them on any element, button or text and show useful information - just select the tooltip position, animation options and when to trigger it. Bootstrap 4 Tooltips Version 2 can be used with dynamic data, thanks to the great App Connect integration.

Add info tooltips
Add stylish tooltips to your page elements
Easy to use
Adjust tootips' settings using the great UI
Use dynamic data
Populate with any dynamic data
Select position
Choose where to show the tooltip - top, bottom, left, right
Different trigger options
Select whether to show the tooltip on hover, click or focus.
Include rich HTML
Style the tooltips content with HTML
Great on any device
Tooltips work and look great on all devices

App Connect Image Parallax 1.0.0

Captivate your site visitors with cool parallax scrolling!

Add an extra layer of dimension to your website and attract more attention with your images using App Connect Image Parallax. Easily select one of the 8 predefined parallax effects and adjust the delay and speed options. App Connect Image Parallax is fully compatible with Bootstrap 4, so you can directly apply it to any of your existing websites. It works flawlessly on desktop and mobile devices. You can even combine it with the Lazy Load and App Connect Animate extensions for optimal performance.

Light and Fast
App Connect Image Parallax is lightweight and fast Vanilla JS component.
Easy Configuration
App Connect Image Parallax UI provides easy to use controls
Different Parallax Effects
Select one of the 8 predefined parallax options
Modern and Trendy
Parallax scrolling is a great way to bring your images to life and attract visitors' attention
Works on Any Device
App Connect Image Parallax works flawlessly on both desktop and mobile devices
Dynamic Data
You can apply parallax effect on static or dynamic images
Combine With Other Extensions
You can combine App Connect Image Parallax with other extensions like App Connect Lazy Load and App Connect Animate

App Connect Background Video 1.0.2

Spice up your site by adding a background video to your page!

App Connect Background Video is the easiest way to add a responsive, mobile friendly video as a background to any container element in Wappler. With just two clicks your video will be playing in the background. Full-screen container, hero section or just a regular text container? It's your choice! The background video will automatically fit the available space, no matter of the screen size and will auto play.

Add Background Videos
Add background videos to any container element in Wappler
Easy to Use
Simply click the Make Background Video button and select your video. No over-complicated options!
Great Performance
The script is lightweight and fast - optimized for best performance
Any Device Support
The background videos are responsive and play nicely on any device or screen size
Custom Styling
You can add your own CSS styling to the video container, such a s background color and others
Great Wappler Integration
You can directly preview the results in Wappler Live View

Background Video
<dmx-background-video>

License: Basic
Group: Components
groupIcon: fas fa-lg fa-cube comp-components
icon: fas fa-lg fa-play-circle comp-components 

<div is="dmx-background-video" id="@@id@@"></div>

Properties

Name Attribute Type Default Description
ID id text
Src src file

App Connect Typed 1.0.0

Add animated typing effect on your pages

This handy extension allows you to easily add a welcome message or any other text which simulates text typing. The customization options allow you to set the position, typing speed, type pausing, show/hide cursor and backspace what's been typed. App Connect Typed is the easiest way to add animated typing effect in Wappler, allowing you to insert it exactly where you need it.

Animated Typing
Add animated typing effect to any text element on your page
Lightweight and Fast
The script is lightweight and fast, so it doesn't slow your pages down
Easy to Use
App Connect Typed includes great UI controls, which allow you to easily adjust its settings
Text Loop
Add as many strings as you need and the component will loop through them
Text Shuffle
Shuffle the strings randomly, or show them one after another
Different Animation Options
Choose between showing the cursor or using a fade animation
Works on Any Device
The animation runs smoothly on any device
Great Wappler Integration
Preview the typing effect directly in Wappler Live View

Typed
<dmx-typed>

License: Basic
Group: Components
groupIcon: fas fa-lg fa-cube comp-components
icon: fas fa-lg fa-terminal comp-components 

<span is="dmx-typed"></span>

Properties

Name Attribute Type Default Description
Position droplist
Strings strings grid
Speed speed text 0
Delay delay text 0
Back Speed back-speed text 0
Back Delay back-delay text 700
Smart Backspace boolean
Shuffle boolean
Fade boolean
Loop boolean
Hide Cursor boolean

App Connect Date Picker 2 PRO 2.1.1

The most advanced date/date range picker with time picker

When creating advanced booking forms you need full control of the date and time selection, ranges and validation. With App Connect Date Picker 2 you can allow the user to pick from single date to a full range, complying to your wishes. Choose from the many custom styles and possibilities to fully suit your site design.

Add a date picker
Enhance your website with stylish calendar
Select date ranges
Popup two calendars for easy range selection
Enable time picker
Allow your users to easily pick time along with the dates
Customization with themes
Choose the theme that match your site
International and custom date formats
The calendar is fully customizable for any user location
Build complex dynamic forms
Build advanced reservation forms just like on Booking.com and Airbnb.com
Use dynamic data
Populate with any dynamic data or database
Responsive design
Look great on all devices, touch friendly

Date Picker
<dmx-date-picker>

License: Basic
Group: Forms
groupIcon: fas fa-lg fa-file-alt comp-form
icon: fas fa-lg fa-calendar-alt comp-form 

<input id="@@id@@" name="@@id@@" is="dmx-date-picker">

Properties

Name Attribute Type Default Description
ID id text
Name name text
Static Value value date
Theme droplist
Highlight droplist
Min Date mindate date
Max Date maxdate date
Format format text

Use the following masks:

Year: YYYY 4 digits YY 2 digits Y full year  
Month: MMMM full MMM short MM 2 digits M month num
Month Day: DD 2 digits Do 1st 2nd ... 31st D day num
Week Day: dddd long ddd short daydd 2 letter dayd day num
Hour: HH 2 digit 24h H 24 hour hh 2 digit 12h h 12h
Minute: mm 2 digit m minutes ss 2 digit secss secs
A AM/PM a am/pm    
Localized: LT HH:mm LTS HH:mm:ss L DD/MM/YYYY  
LL D MMMM
YYYY 		LLL D MMMM
YYYY HH:mm		 LLLL dddd D
MMMM YYYY
HH:mm
Opens opens droplist
Direction direction droplist
Drops Up dropsup boolean
Disable Weekends disableweekends boolean
Show Week Numbers showweeknumbers boolean
Show Dropdowns showdropdowns boolean
Min Year minyear number
Max Year maxyear number
Time Picker timepicker boolean false
Data Source dmx-bind:invaliddates text
Start Date Field invaliddates-start text
End Date Field invaliddates-end text
Data Source dmx-bind:customdates text
Start Date Field customdates-start text
End Date Field customdates-end text
Class Field customdates-class text
Week Label weeklabel text W
Apply Label applylabel text Apply
Cancel Label cancellabel text Cancel

Date Range Picker
<dmx-date-range-picker>

License: Basic
Group: Forms
groupIcon: fas fa-lg fa-file-alt comp-form
icon: fas fa-lg fa-calendar-alt comp-form 

<input id="@@id@@" name="@@id@@" is="dmx-date-range-picker">

Properties

Name Attribute Type Default Description
ID id text
Name name text
Theme droplist
Highlight droplist
Start Date startdate date
End Date enddate date
Min Date mindate date
Max Date maxdate date
Format format text

Use the following masks:

Year: YYYY 4 digits YY 2 digits Y full year  
Month: MMMM full MMM short MM 2 digits M month num
Month Day: DD 2 digits Do 1st 2nd ... 31st D day num
Week Day: dddd long ddd short daydd 2 letter dayd day num
Hour: HH 2 digit 24h H 24 hour hh 2 digit 12h h 12h
Minute: mm 2 digit m minutes ss 2 digit secss secs
A AM/PM a am/pm    
Localized: LT HH:mm LTS HH:mm:ss L DD/MM/YYYY  
LL D MMMM
YYYY 		LLL D MMMM
YYYY HH:mm		 LLLL dddd D
MMMM YYYY
HH:mm
Opens opens droplist
Direction direction droplist
Auto Apply autoapply boolean
Separator separator text -
Drops Up dropsup boolean
Unlinked unlinked boolean
Disable Weekends disableweekends boolean
Show Week Numbers showweeknumbers boolean
Show Dropdowns showdropdowns boolean
Min Year minyear number
Max Year maxyear number
Years maxspan-years number
Months maxspan-months number
Weeks maxspan-weeks number
Days maxspan-days number
Data Source dmx-bind:invaliddates text
Start Date Field invaliddates-start text
End Date Field invaliddates-end text
Data Source dmx-bind:customdates text
Start Date Field customdates-start text
End Date Field customdates-end text
Class Field customdates-class text
Time Picker timepicker boolean false
Week Label weeklabel text W
Apply Label applylabel text Apply
Cancel Label cancellabel text Cancel

App Connect Bootstrap 4 Popovers V2 PRO 4.6.0

Add stylish popovers like those found in iOS to any element on your site

Similar to tooltips, this great component allows you to add even more content. This is an elegant and modern way to provide your users with info popovers like those found in iOS, to any element on your site. It also gives you the opportunity to have a title and a header for your content. Bootstrap 4 Popovers V2 can be used with dynamic data, thanks to the great App Connect integration.

Enrich your content with Popovers
Add stylish popovers like those found in iOS, to any element on your site.
Title and content options
Include custom title and content for the popovers
Use dynamic data
Populate with any dynamic data
Different trigger options
Select whether to show the popover on hover, click or focus
Select position
Choose where to show the popover - top, bottom, left, right
Different dismiss options
Dismiss on next click or use the toggle element
Include rich HTML
Style the popover content with HTML
Great on any device
Popovers work and look great on all devices

App Connect File Downloader PRO 1.0.2

Custom file downloader with controls and a progress bar

Using App Connect File Downloader you can create your own downloaders with custom controls and progress bars on your pages. The available custom controls - Download and Abort Download allow your users to control the process and the integrated progressbar shows the download progress. You can use App Connect File Downloader with both static and dynamic file paths.

File Downloader
Create your own file downloader for a better user experience.
Custom Controls
Add your own custom buttons for your users to control the download.
Progress Bar
Add a progress bar to the page, so that you can track the download progress.

Download
<dmx-download>

License: Basic
Group: Components
groupIcon: fas fa-lg fa-cube comp-components
icon: fas fa-lg fa-download comp-components 

<dmx-download id="@@id@@"></dmx-download>

Properties

Name Attribute Type Default Description
ID id text
Url url file
Timeout timeout number 0
Filename filename text

App Connect Autocomplete PRO 1.0.11

Give your users the power of simple selection and fast filtering in one input control

App Connect Autocomplete provides auto suggestion when entering text into a text input. This is useful when you have a dynamic list of products, countries, options etc., so you can offer your users quick and easy search and selection without having to enter long text. You can use any dynamic data source for with this handy extension - a database query, a JSON data source, an API data source or an array with items. It is extremely lightweight and blazing fast!

Simple Selection and Fast Filtering
App Connect Autocomplete provides auto suggestion directly under your text input.
Convert Text Input to Autocomplete
Easily convert any Bootstrap 4 Text Input to Autocomplete.
Use with any Data Source
Use Autocomplete with any data source - a database query, a JSON data source, an API data source or an array.
Easy Configuration
Customize the Autocomplete options easily, using the user friendly UI.
Lightweight and Fast
App Connect Autocomplete is extremely lightweight and blazing fast!
Use on any Screen Size
You can use this extension on any device!

Auto Complete
<dmx-autocomplete>

License: Basic
Group: Forms
groupIcon: fas fa-lg fa-file-alt comp-form
icon: fas fa-lg fa-list comp-form 

<input id="@@id@@" name="@@id@@" is="dmx-autocomplete">

Properties

Name Attribute Type Default Description
ID id text
Name name text
Static Value value text
Match Case matchcase boolean
Match Accent matchaccent boolean
Match Start matchstart boolean
No Clear noclear boolean
No Results Label noresultslabel text No Results...
Data Source dmx-bind:data text
Text Field optiontext text
Value Field optionvalue text
Search Field optionsearch text

Database Custom Query PRO 1.5.1

Create advanced, complex custom SQL queries with ease

Database Custom Query will give your the powers to write and run complex database queries in Wappler! With this extension you can write custom SQL queries, define your own parameters, edit the schema and metadata and preview the results. The SQL Editor available in the UI includes SQL code highlight, tables and columns autocomplete. You can run your queries with test values added to the parameters, which you defined and more. It's a great addition to the Server Connect database tools, extending the powers of the visual database query builder available in Database Connector 2.

Write Custom SQL Queries
The SQL Editor includes code highlight, tables and columns autocomplete
Query Parameters
Use custom query parameters and test your query with test values
Database Tables List
You can see your database tables and columns in a nice tree
Instant Preview
Run your query and preview the results directly in the Query Results tab
Error Reporting
Any errors found in your custom SQL code will be reported instantly when you run your query
Easy Edit
Easily edit the generated code, after saving it
Server Connect Integration
Database Custom Query is part of the powerful Server Connect database extensions family

Database Custom Query
<dbcustom_query>

App Connect Data Store 1.1.2

Simple local storage driven database

The Data Store component allows you to store and edit local data in a simple local storage driven database. You can use this component to create a shopping cart, favorite products list, task lists or store any data you need to store in your local or session storage. Easily define your Data Store schema and then populate it with the data you need.

Local Storage Driven Database
Use to store and edit data in a simple local storage driven database.
Define Schema
You can easily define your Data Store schema fully visually.
Different Actions Available
You can use different actions to store, edit, delete or update the data in the Data Store.
Shopping Carts Made Easy
App Connect Data Store is the perfect solution for building shopping carts or favorite lists.
Lightweight and Fast
The data is retrieved ultra fast, as it's stored in the browser local or session storage.

Data Store
<dmx-datastore>

License: Basic
Group: Data
groupIcon: fas fa-lg fa-database comp-data
icon: fas fa-lg fa-database comp-data 

<dmx-datastore id="@@id@@"></dmx-datastore>

Properties

Name Attribute Type Default Description
ID id text
Use Session Storage session boolean
Define Data Store Scheme button

App Connect Flow 1.0.3

Complex client-side workflows made easy

App Connect Flow allows you to define advanced and complex client side workflows, fully visually. You can setup conditions, set variables and many more. Using App Connect Flow you can execute different actions, retrieve data, show confirmation dialogs and much more! All actions are nicely executed one after another.

Client-side Workflows
Easily setup complex client-side workflows, which are executed step by step.
Easy to Configure
App Connect Flow has an easy to use UI and you can define your flows fully visually.
Dynamic Data
Retrieve and process dynamic data, from any dynamic data source.
Add Delays
Easily add a delay in milliseconds after any of your flow steps.
Confirmation Dialogs and Alerts
Show alerts or confirmation dialogs to your users with just a couple of clicks.
Conditions
Check for different conditions based on the previous steps and execute specific action based on the results.
App Connect Components
Call any App Connect component in the flow, when needed.

Page Flow
<dmx-flow>

License: Basic
Group: Workflows
groupIcon: fas fa-lg fa-project-diagram comp-flows
icon: fas fa-lg fa-project-diagram comp-flows 

<script is="dmx-flow" id="@@id@@" type="text/dmx-flow"></script>

Properties

Name Attribute Type Default Description
ID id text
Auto Run boolean
Edit Flow button

App Flow
<dmx-app-flow>

License: Basic
Group: Workflows
groupIcon: fas fa-lg fa-project-diagram comp-flows
icon: fas fa-lg fa-project-diagram comp-flows 

<script is="dmx-flow" id="@@id@@" type="text/dmx-flow" src=""></script>

Properties

Name Attribute Type Default Description
ID id text
Auto Run boolean
Src src text
Action text
Select Flow Action button

App Connect Bootstrap 4 Toasts 4.6.0

Push notifications to your visitors with a lightweight and easily customizable alert message

Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re easy to configure and use, offering a great way to show notifications to your users.

Show push notifications to your users
Toasts mimic the native push notifications of mobile and desktop operating systems
Real-time feedback to your users
Toasts give your users feedback about actions or status
Use with dynamic data
Retrieve your toasts content from a dynamic data source
Easy customization options
Select position, align, offset, min/max width or delay
Great CSS animations
You can apply nice CSS fade in/out animation to your messages
Lightweight and fast
Bootstrap 4 Toasts are powerful, but lightweight and fast
Perfect responsive experience
Use Toasts on any screen size - same best user experience

Toasts
<dmx-bs4-toasts>

License: Basic
Group: Components
groupIcon: fas fa-lg fa-cube comp-components
icon: fas fa-lg fa-comment comp-components 

<div is="dmx-bs4-toasts" id="@@id@@"></div>

Properties

Name Attribute Type Default Description
ID id text
Position position droplist
Align align droplist
Offset X offset-x text 15
Offset Y offset-y text 15
Min Width min-width text 240
Max Width max-width text 350
Delay delay text 5000

App Connect Flow Bootbox 5.1.1

Flexible and modern Bootstrap dialogs for App Connect Flow

App Connect Flow Bootbox allow you to show Bootstrap styled dialogs in your client-side workflows. With the available Alert, Confirm and Prompt actions you can let the users know if there is some action they need to perform to run the flow in a modern and stylish way.

Bootstrap Styled Dialogs
Show a stylish Bootstrap styled Alert, Prompt or Confirm dialog to your users.
User Interaction
Wait for the users to interact with the dialogs if needed, before the client-side flow continues.
Easy to Customize
Bootbox dialogs offer many customization options and an easy to use UI.

App Connect Event Calendar PRO 1.1.4

The most powerful full-sized event calendar for Wappler

App Connect Event Calendar is a powerful full-sized, lightweight event calendar with drag & drop support and lots of customization options. It allows you to add static events or use different data sources for dynamic events. The Event Calendar can be fully customized - from selecting different to setting different colors for different events. It supports different data sources such as a Database Query, an API Data Source or JSON Data Source and combines perfectly with Server Connect. You can customize its theme, so it matches the selected Bootswatch theme. You can also choose different localization options such as buttons text, days, months and days of week, date formatting and many more. App Connect Event Calendar includes advanced options like highlight multiple days or time slots by clicking and dragging and editing events - by dragging and resizing them. You can use the data returned by the drag/resize events to update data in your database, using an update record action.

Full-sized Event Calendar for Wappler
App Connect Event Calendar is the most advanced event calendar for Wappler
Easy to Configure
The Event Calendar offers advanced yet easy to configure options
Different Themes
Choose between two themes - Default and Bootstrap with Bootswatch Themes Support
Different Views Available
App Connect Event Calendar provides options for setting up different views - day, week, month or more advanced list views
Responsive Layout
App Connect Event Calendar is fully responsive and looks great on any device.
Localization Options
You can localize the calendar options such as buttons text, days, months and days of week, date formatting etc.
Dynamic Data Sources
Use the calendar with different data sources - a database, an API data source or a JSON data source
Selectable Dates
Allow users to select multiple dates by click and drag over the dates
Editable Events
Make your events editable allowing your users to drag and resize them in the Calendar
Lightweight and Fast
The calendar script, despite being powerful, is lightweight and fast

Calendar
<dmx-calendar>

License: Basic
Group: Components
groupIcon: fas fa-lg fa-cube comp-components
icon: fas fa-lg fa-calendar-alt comp-components 

<dmx-calendar id="@@id@@" views="dayGridMonth,dayGridWeek,dayGridDay"></dmx-calendar>

Properties

Name Attribute Type Default Description
ID id text
Timezone timezone droplist
Date date custom_datetime
Locale locale droplist
Theme theme droplist
Height height text
Aspect Ratio aspect-ratio range 1.35
Views views enum
Default View view droplist
Business Hours business-hours boolean false
Hide Non Current Dates hide-non-current-dates boolean false
No Event Overlap no-event-overlap boolean false
No Fixed Week Count no-fixed-week-count boolean false
Selectable selectable boolean false
Editable editable boolean false
Now Indicator now-indicator boolean false
Event Order event-order text start,-duration,allDay,title
Event Limit event-limit text
Use Constraint boolean false

Source
<dmx-calendar-source>

License: Basic
Group: Components
groupIcon: fas fa-lg fa-cube comp-components
icon: fas fa-lg fa-calendar-plus comp-components 

<dmx-calendar-source id="@@id@@"></dmx-calendar-source>

Properties

Name Attribute Type Default Description
ID id text
Class class text
Color color css_color
Back Color background-color css_color
Border Color border-color css_color
Text Color text-color css_color
Editable editable boolean false
Overlap overlap boolean false
Dynamic Events events boolean false

Google Calendar Source
<dmx-calendar-source-google>

License: Basic
Group: Components
groupIcon: fas fa-lg fa-cube comp-components
icon: fas fa-lg fa-calendar-star comp-components 

<dmx-calendar-source-google id="@@id@@"></dmx-calendar-source-google>

Properties

Name Attribute Type Default Description
ID id text
Class class text
API Key google-calendar-api-key text
Calendar ID google-calendar-id text
Color color css_color
Back Color background-color css_color
Border Color border-color css_color
Text Color text-color css_color

Event
<dmx-calendar-event>

License: Basic
Group: Components
groupIcon: fas fa-lg fa-cube comp-components
icon: fas fa-lg fa-calendar-plus comp-components 

<dmx-calendar-event id="@@id@@"></dmx-calendar-event>

Properties

Name Attribute Type Default Description
ID id text
Class class text
Title title text
Url url text
Start start custom_datetime
End end custom_datetime
All Day all-day boolean false
Group ID group-id text
Rendering rendering droplist
Back Color background-color css_color
Border Color border-color css_color
Text Color text-color css_color
Editable editable boolean false
Start Recurring start-recur custom_date
End Recurring end-recur custom_date
Start Time start-time time
End time end-time time
Days days-of-week enum
Use Constraint boolean false

App Connect Summernote PRO 1.0.5

Simple, yet powerful and modern WYSIWYG Editor

App Connect Summernote is a simple to configure and easy to use WYSIWYG Editor, compatible with Bootstrap 4. App Connect Summernote allows you to easily edit text, images, tables, fonts and other content visually - just like in Microsoft Word. You can use it to apply styling to any content - from a message on your contact form to a whole article on the back-end. The Extension's UI allows you to easily customize the toolbars and options. You can create your own toolbars, give them custom names and select the buttons displayed inside them. This way you can visually group the buttons as you like. You can also convert any existing textarea in your forms to visual Summernote Editor.

Simple and user-friendly content editing
Easily apply the styling you need to your content
Easy configuration
You can configure the Summernote options easily, using the user-friendly UI in Wappler
Custom toolbars
With Summernote you can create your own toolbars, give them custom names and select the buttons displayed inside them
Air mode
Air Mode provides a floating/inline toolbar when you select part of the text
Light and fast
App Connect Summernote is lightweight and fast and supports all major browsers
Bootstrap 4 integration
Summernote works great with Bootstrap 4 layouts and all the Bootswatch themes
Embed media
Easily embed images or videos from your YouTube or Vimeo
Server Connect integration
Using Summernote to insert formatted content into your database is just as easy as using a standard Textarea

Summernote Lite Textarea
<dmx-summernote-lite-textarea>

License: Basic
Group: Forms
groupIcon: fas fa-lg fa-code comp-form
icon: fas fa-lg fa-pen-square comp-form 

<textarea id="@@id@@" name="@@id@@" is="dmx-summernote" dmx-bind:toolbar="[['style',['style']],['font',['bold','underline','clear']],['fontname',['fontname']],['color',['color']],['para',['ul','ol','paragraph']],['table',['table']],['insert',['link','picture','video']],['view',['fullscreen','codeview','help']]]"></textarea>

Properties

Name Attribute Type Default Description
ID id text
Name name text
Static Value value text
Placeholder placeholder text
Theme theme droplist lite
Language lang droplist
Height height text
Min Height min-height text
Max Height max-height text
Autofocus autofocus boolean false
Air Mode air-mode boolean false
Use In Modal dialogs-in-body boolean false
Dialogs Fade dialogs-fade boolean false
Disable Drop disable-drop boolean false
Disable Shortcuts disable-shortcuts boolean false
Disable Tab disable-tab boolean false
Disable Spellcheck disable-spellcheck boolean false
Disable Grammar disable-grammar boolean false

Summernote Textarea
<dmx-bs4-summernote-textarea>

License: Basic
Group: Forms
groupIcon: fas fa-lg fa-code comp-form
icon: fas fa-lg fa-pen-square comp-form 

<textarea id="@@id@@" name="@@id@@" is="dmx-summernote" dmx-bind:toolbar="[['style',['style']],['font',['bold','underline','clear']],['fontname',['fontname']],['color',['color']],['para',['ul','ol','paragraph']],['table',['table']],['insert',['link','picture','video']],['view',['fullscreen','codeview','help']]]"></textarea>

Properties

Name Attribute Type Default Description
ID id text
Name name text
Static Value value text
Placeholder placeholder text
Theme theme droplist bootstrap4
Language lang droplist
Height height text
Min Height min-height text
Max Height max-height text
Autofocus autofocus boolean false
Air Mode air-mode boolean false
Use In Modal dialogs-in-body boolean false
Dialogs Fade dialogs-fade boolean false
Disable Drop disable-drop boolean false
Disable Shortcuts disable-shortcuts boolean false
Disable Tab disable-tab boolean false
Disable Spellcheck disable-spellcheck boolean false
Disable Grammar disable-grammar boolean false

Summernote Lite Region
<dmx-summernote-lite>

License: Basic
Group: Forms
groupIcon: fas fa-lg fa-code comp-form
icon: fas fa-lg fa-pen-square comp-form 

<div id="@@id@@" is="dmx-summernote" dmx-bind:toolbar="[['style',['style']],['font',['bold','underline','clear']],['fontname',['fontname']],['color',['color']],['para',['ul','ol','paragraph']],['table',['table']],['insert',['link','picture','video']],['view',['fullscreen','codeview','help']]]"></div>

Properties

Name Attribute Type Default Description
ID id text
Name name text
Static Value value text
Placeholder placeholder text
Theme theme droplist lite
Language lang droplist
Height height text
Min Height min-height text
Max Height max-height text
Autofocus autofocus boolean false
Air Mode air-mode boolean false
Use In Modal dialogs-in-body boolean false
Dialogs Fade dialogs-fade boolean false
Disable Drop disable-drop boolean false
Disable Shortcuts disable-shortcuts boolean false
Disable Tab disable-tab boolean false
Disable Spellcheck disable-spellcheck boolean false
Disable Grammar disable-grammar boolean false

Summernote Region
<dmx-bs4-summernote>

License: Basic
Group: Forms
groupIcon: fas fa-lg fa-code comp-form
icon: fas fa-lg fa-pen-square comp-form 

<div id="@@id@@" is="dmx-summernote" dmx-bind:toolbar="[['style',['style']],['font',['bold','underline','clear']],['fontname',['fontname']],['color',['color']],['para',['ul','ol','paragraph']],['table',['table']],['insert',['link','picture','video']],['view',['fullscreen','codeview','help']]]"></div>

Properties

Name Attribute Type Default Description
ID id text
Name name text
Static Value value text
Placeholder placeholder text
Theme theme droplist bootstrap4
Language lang droplist
Height height text
Min Height min-height text
Max Height max-height text
Autofocus autofocus boolean false
Air Mode air-mode boolean false
Use In Modal dialogs-in-body boolean false
Dialogs Fade dialogs-fade boolean false
Disable Drop disable-drop boolean false
Disable Shortcuts disable-shortcuts boolean false
Disable Tab disable-tab boolean false
Disable Spellcheck disable-spellcheck boolean false
Disable Grammar disable-grammar boolean false

dmx-bs5-summernote-textarea
<dmx-bs5-summernote-textarea>

dmx-bs5-summernote
<dmx-bs5-summernote>

App Connect Summernote File Upload PRO 1.0.0

Upload different files in Summernote Editor

App Connect Summernote File Upload allows you to upload different files such as images, audio, video and others in the Summernote Editor. You can setup each of these file categories to upload files in different folders or have different properties. Now it's easy to upload, resize and/or manipulate an image using the server-side image processing tools and save it in a folder on your server with a single click.

Upload Files in Summernote
This handy add-on allows you to upload images, videos, audio files or any other file type in the Summernote Editor.
Image Processing
Easy Image processing thanks to the Summernote Image Upload template in Server Connect.
Server Connect Integration
The available file upload templates in Server Connect allow you to setup different upload options per different file types.

summernote_template_imageupload
<summernote_template_imageupload>

summernote_template_fileupload
<summernote_template_fileupload>

S3 Connector PRO 1.5.3

Connect to AWS, Digital Ocean and other cloud storage services

S3 Connector allows you to easily connect to AWS, Digital Ocean, Linode, Vultr or any other custom cloud storage services, create buckets, list/put/get/delete files, create signed URLs and more.

Connect to different S3 Cloud Providers
Connect to different S3 Cloud Storage Providers such as AWS, Digital Ocean and others.
Different Bucket Actions Available
You can create buckets, list files from a bucket or delete existing buckets.
Easy Upload/Download URL Sign
Sign your upload or download URLs easily using the predefined sign options.
Put, Get, Delete Files
You can Put, Get or Delete files from your S3 Storage.

S3 Provider
<s3_provider>

S3 Create Bucket
<s3_createBucket>

S3 List Buckets
<s3_listBuckets>

S3 Delete Bucket
<s3_deleteBucket>

S3 List Files
<s3_listFiles>

Put File
<s3_putFile>

Get File
<s3_getFile>

Delete File
<s3_deleteFile>

Sign Download Url
<s3_signDownloadUrl>

Sign Upload Url
<s3_signUploadUrl>

S3 Sign Upload Template
<s3_template_signupload>

App Connect S3 Upload PRO 1.1.2

Easy client-side uploads directly to S3 cloud Storage

App Connect S3 Upload component allows you to create client side upload pages for direct upload to S3 cloud Storage. It’s fully customizable and with great Bootstrap 5 styling and custom progress tracking.

Upload to S3
Upload single or multiple files directly to your S3 Cloud Storage.
Easy Upload Sign
Sign your uploads easily using the predefined S3 Sign Upload Server Action.
Fully Customizable
App Connect S3 Upload is fully customizable and uses a custom progress tracking.
Lightweight and fast
The S3 Upload is lightweight and fast, which improves the user experience.

S3 Upload Control
<dmx-s3-upload>

License: Basic
Group: Forms
groupIcon: fas fa-lg fa-file-alt comp-form
icon: fas fa-lg fa-cloud-upload-alt comp-form 

<div id="@@id@@" is="dmx-s3-upload" url="" accept="image/*" class="text-center border">
  <p dmx-show="!file">Select file</p>
  <p dmx-show="file">{{file.name}}</p>
  <p dmx-hide="state.uploading">
    <button class="btn btn-primary" dmx-on:click.stop="@@id@@.select()" dmx-show="state.idle">Browse</button>
    <button class="btn btn-primary" dmx-on:click.stop="@@id@@.upload()" dmx-show="state.ready">Upload</button>
    <button class="btn btn-danger" dmx-on:click.stop="@@id@@.reset()" dmx-show="state.done">Reset</button>
  </p>
  <p dmx-show="state.uploading">
    Uploading {{uploadProgress.percent}}%
    <button class="btn btn-danger" dmx-on:click.stop="@@id@@.abort()">Abort</button>
  </p>
</div>

Properties

Name Attribute Type Default Description
ID id text
Class class text
Type is droplist
Url url text
Site site text
Server Action text
Select Server Action button
Accept accept text image/* Enter a comma separated list
of allowed file extensions or file types
Example: .png,.jpg,.gif or image/*
Auto Upload boolean false

S3 Multi Upload Control
<dmx-s3-upload-multi>

License: Basic
Group: Forms
groupIcon: fas fa-lg fa-file-alt comp-form
icon: fas fa-lg fa-cloud-upload-alt comp-form 

<div id="@@id@@" is="dmx-s3-upload-multi" url="" accept="image/*" class="text-center border">
  <table class="table table-bordered">
	  <tr dmx-hide="files.length">
			<td>
				No files selected
			</td>
	  </tr>
		<tr dmx-show="files.length" dmx-repeat="files">
			<td width="50">
				<img width="50" dmx-bind:src="dataUrl" dmx-show="ready">
			</td>
			<td>
				<div>{{ name }}</div>
				<small dmx-show="!uploading && !error">Ready to Upload</small>
				<small dmx-show="!uploading && error" class="text-danger">{{ error }}</small>
				<div class="progress" dmx-show="uploading">
					<div class="progress-bar" dmx-style:width="percent+'%'"></div>
				</div>
			</td>
	  </tr>
	 </table>
  <p dmx-hide="state.uploading">
    <button class="btn btn-primary" dmx-on:click.stop="@@id@@.select()" dmx-show="state.idle">Browse</button>
    <button class="btn btn-primary" dmx-on:click.stop="@@id@@.upload()" dmx-show="state.ready">Upload</button>
    <button class="btn btn-danger" dmx-on:click.stop="@@id@@.reset()" dmx-show="state.done">Reset</button>
  </p>
  <p dmx-show="state.uploading">
    <button class="btn btn-danger" dmx-on:click.stop="@@id@@.abort()">Abort</button>
  </p>
</div>

Properties

Name Attribute Type Default Description
ID id text
Class class text
Type is droplist
Url url text
Site site text
Server Action text
Select Server Action button
Accept accept text image/* Enter a comma separated list
of allowed file extensions or file types
Example: .png,.jpg,.gif or image/*
Auto Upload boolean false
Thumbnails boolean false
Width thumb-width text 100
Height thumb-height text 100

App Connect Google Places PRO 1.1.3

Search for places or provide autocomplete functionality for your users

Use the services provided by Google Places API - Places Search and Places Autocomplete. Google Places Search lets you search for place information using a variety of categories, including establishments, prominent points of interest, and geographic locations. You can search for places either by proximity or a text string. The Place Autocomplete service is a web service that is used to provide autocomplete functionality for text-based geographic searches, by returning places such as businesses, addresses and points of interest as a user types.

Search for nearby places
Search for places near your location in a variety of categories.
Show places info
Show detailed information about the places on Google Maps.
Autocomplete Addresses
Use placed Autocomplete in a registration form or any other form which requires users address info.
Works on any device
Google Places Search and Autocomplete work great on any device - from mobile phones to computers.

Google Places Auto Complete
<dmx-google-autocomplete>

License: Basic
Group: Forms
groupIcon: fas fa-lg fa-file-alt comp-form
icon: fas fa-lg fa-search-location comp-form 

<input id="@@id@@" name="@@id@@" is="dmx-google-autocomplete">

Properties

Name Attribute Type Default Description
static Warning heavy pricing may apply.
See Google Places Pricing
ID id text
Name name text
Static Value value text
API Key text
Map map droplist
Country country enum restrict to country (ISO 3166-1 Alpha-2 country code) (up to 5 max, separate with comma)
Types types enum
Strict Bounds strict-bounds boolean false
Move Map move-map boolean false

Google Places Search
<dmx-google-places-search>

License: Basic
Group: Data
groupIcon: fas fa-lg fa-database comp-data
icon: fas fa-lg fa-location-circle comp-data 

<dmx-google-places-search id="@@id@@"></dmx-google-places-search>

Properties

Name Attribute Type Default Description
static Warning heavy pricing may apply.
See Google Places Pricing
ID id text
Map map droplist
Show On Map show-on-map boolean false

JWT PRO 1.7.1

Easy Google Service Account Authorization with JWT

Some of the Google API libraries require authorization using a Service Account. Thanks to the JWT authorization options available in the Oauth2 Provider now you can use your Google Service Account to connect to different APIs.

Google Service Account
Import your existing Google Service Account in JWT Properties.
Oauth2 Provider Integration
JWT integrates with the Oauth2 Provider, so you can authorize your users easily.

JWT Sign
<jwt_sign>

App Connect Sockets PRO 1.0.3

Realtime Data Update with Node.js

Realtime Data Updates are here! Thanks to the NodeJS and Socket.IO 8 integration in Wappler now you can build realtime apps! WebSockets is an advanced technology that makes it possible to open a two-way interactive communication session between the user’s browser and a server. If you want to get updates in real-time, WebSockets allows a persistent connection between your browser and the server. The server is constantly waiting (listening) for new data/information and whenever received, it automatically sends it to the client through the socket - which allows the data in your browser to be updated automatically! There are many example use cases - real time feeds, data visualization, charts, location apps, chats, sport or other events updates etc.

Real-time Data
Thanks to App Connect Sockets you can do real-time data reload.
Update All Clients
All clients connected to your site will see the data changes immediately.
Use Cases
There are many use cases, such as real time feeds, data visualization, charts, location apps, chats, sport or other events update.
Speed Boost
Sockets being an advanced techmology provide speed and performance boost for your web sites and apps!

sockets_refresh
<sockets_refresh>

Socket
<dmx-socket>

License: Basic
Group: Sockets
groupIcon: fas fa-lg fa-plug comp-data
icon: fas fa-lg fa-plug comp-data 

<dmx-socket id="@@id@@"></dmx-socket>

Properties

Name Attribute Type Default Description
ID id text
Namespace namespace droplist
Remote URL text

sockets_emit
<sockets_emit>

sockets_message
<sockets_message>

sockets_broadcast
<sockets_broadcast>

sockets_join
<sockets_join>

sockets_leave
<sockets_leave>

sockets_identify
<sockets_identify>

sockets_rooms
<sockets_rooms>

sockets_allRooms
<sockets_allRooms>

App Connect Bootstrap 5 Alerts 5.1.3

Awesome static or dynamic alerts for your website

Enhance users' experience by integrating alerts on your site! Thanks to the world's most popular CSS framework, alerts are fully responsive and will significantly help you in communicating with your users! Choose static or dynamic alerts: show alert on success, on error, on validation or authorization problem, show changes in your working hours and display info messages on your pages. You can use the predefined standard Bootstrap 5 visual classes for success, info, warning, danger and more types!

Communicate with Users
Alerts will improve the user experience on your page - no more redirecting, show everything on the same page!
Static Alerts Available
You can display static alerts too - maintenance, changed working hours, promotions...
Dynamic Events Integration
Show alert when a certain dynamic event occurs on page - on success, on error, on validation or authorization problem and others.
Predefined Bootstrap 5 Styles
Use 8 standard visual types of alerts for success, info, warning, danger, etc.
User-Centric Design
Bootstrap 5 Alerts are made to improve the UX. You can even add more info - headings, paragraphs to show helpful tips.
Fully Customizable
Customize colors, animation or content of the alerts.

Alert
<dmx-bs5-alert>

License: Basic
Group: Components
groupIcon: fas fa-lg fa-cube comp-components
icon: fas fa-lg fa-exclamation-circle comp-components 

<div class="alert" id="@@id@@" is="dmx-bs5-alert" role="alert">
  <p>This is a nice alert!</p>
</div>

Properties

Name Attribute Type Default Description
ID id text
Class class text
Fade boolean false
Auto Show show boolean false
Closable closable boolean false
Type type colorlist
Advanced css_toggle
Color color_group
Align button_group
Font Weight button_group
Line Height button_group
Font Style button_group
Transform button_group
Overflow button_group
Back Color color_group
Back Opacity range
Width range
Height range
Opacity range
Shadow droplist
Placeholder droplist
Border enum
Width range
Rounded droplist
Radius droplist
Border Color colorlist
Margin<br>&<br>Padding spacing
X Gutter range
Y Gutter range
Hide on button_group
Print button_group
Visually Hidden boolean false
Focusable boolean false

App Connect Bootstrap 5 Cards 5.1.3

Flexible and extensible content containers with multiple variants and options

App Connect Bootstrap 5 Cards allows you to add stylish and beautiful content containers including titles, paragraphs, images, image overlays, lists, backgrounds, borders on your pages. Bootstrap 5 Cards can be used in variety of cases: author boxes, blog posts, albums, featured images or other content, pricing tables, testimonials and many more. So it's really powerful and useful for any kind of website!

Stylish Bootstrap 5 Card Elements
Cards provide a flexible and extensible content container with multiple variants and options
Built with Flexbox
It's greatly using flexbox for easy alignment and awesome mixing with all the Bootstrap 5 components
Predefined Elements Included
Add, edit and reuse the pre-built templates packed in the extension
Fully Customizable
Bootstrap 5 Cards includes options for headers and footers, a wide variety of content, contextual background colors, and other display options
Dynamic Data
Use cards with dynamic data, for example in repeat regions
Combine With Other Components
Combine cards with other extensions like Swiper, List Groups, Masonry or Slideshow.

Card
<bs5-card>

Card Top Image
<bs5-card-img-top>

Card Image
<bs5-card-img>

Card Bottom Image
<bs5-card-img-bottom>

Card Header
<bs5-card-header>

Card Body
<bs5-card-body>

Card Image Overlay
<bs5-card-img-overlay>

Card Title
<bs5-card-title>

Card Text
<bs5-card-text>

Card Footer
<bs5-card-footer>

Card Link
<bs5-card-link>

Card Group
<bs5-card-group>

Card Deck
<bs5-card-deck>

Card Columns
<bs5-card-columns>

Accordion Cards
<bs5-accordion-cards>

Accordion Card
<bs5-card-accordion>

Feature Text Card
<bs5-templ-card-featured-text>

Feature Text Card Centered
<bs5-templ-card-featured-text-center>

Quote Card
<bs5-templ-card-quote>

Top Image Card
<bs5-templ-card-image-top>

Bottom Image Card
<bs5-templ-card-image-bottom>

Top Image Card With Header
<bs5-templ-card-image-top-header>

Bottom Image Card With Header
<bs5-templ-card-image-bottom-header>

Card With Image Overlay
<bs5-templ-card-image-overlay>

Property Card
<bs5-templ-card-properties>

App Connect Bootstrap 5 Collapse 5.1.3

Organize content in show/hide containers with amazing effects

Split your web content into accordion-like fields with the all-new App Connect Bootstrap 5 Collaps, which helps you to implement collapsing sections anywhere on your site. Enrich content with HTML, arrange your text, images, videos and even whole pages and style them to create an intuitive and user-friendly layouts, which will fit perfectly any window or monitor size. Grab your users' attention with stunning animation effects that will be played when toggling the content of your sections and present your products or ideas more effectively!

Show/hide content
Use single, multiple or group collapsible items
Include rich HTML and images
Enrich container content with HTML or include images/video, iframes, additional scripts
Combine with Cards
Using the card component, you can extend the default collapse behavior to create an accordion
Use dynamic data
Create collapsible data-driven content
Lightweight script
Only pure JavaScript and Bootstrap 5 includes
Fully Customizable
Edit and set up every part of the UI - colors, auto show/hide, animations

Collapse
<bs5-collapse>

Dynamic Collapse
<dmx-bs5-collapse>

License: Basic
Group:
groupIcon:
icon: fas fa-lg fa-expand-arrows-alt comp-content 

<div class="collapse" id="@@id@@" is="dmx-bs5-collapse">
  <p>Collapse body text goes here.</p>
</div>

Properties

Name Attribute Type Default Description
ID id text
Class class text
Show show boolean false
Parent data-parent droplist
Advanced css_toggle
Color color_group
Align button_group
Font Weight button_group
Line Height button_group
Font Style button_group
Transform button_group
Overflow button_group
Back Color color_group
Back Opacity range
Width range
Height range
Opacity range
Shadow droplist
Placeholder droplist
Border enum
Width range
Rounded droplist
Radius droplist
Border Color colorlist
Margin<br>&<br>Padding spacing
X Gutter range
Y Gutter range
Hide on button_group
Print button_group
Visually Hidden boolean false
Focusable boolean false

App Connect Bootstrap 5 Forms 5.1.3

Amazing forms and prebuilt form templates for your website

Forms? Nothing better than App Connect Bootstrap 5 Forms. The extension contains many form elements - input groups, dropdowns, checkboxes, radios, select forms, file inputs... That's not everything - use many ready-to-go form templates, e.g. sign up form, subscribe form, login and more! App Connect Bootstrap 5 Forms helps you to create awesome forms for your website and it's easy to customize thanks to the easy to use UI controls. You can even set dynamic values to your form inputs! Of course, you got access to all of the form settings: colors, values, position, alignment, padding! So powerful, that everything is up to you!

Based on the All-New Bootstrap 5
Unleash the power of adding Bootstrap 5 forms to your website!
Many Prebuilt Advanced Components
Over a dozen components providing you input groups, dropdowns, checkboxes, radios, select forms, file inputs, and much more!
Multi Column Forms
Build layouts that require multiple columns, varied widths, and additional alignment options
Ready-To-Go Form Templates
Use directly many prebuilt form templates for email subscription, registration, login, etc.
Custom Toggle Switches
You are now able to create and add your own custom iOS style toggle switch controls on your page, for turning different options on or off.
Fully Customizable
Of course - define colors, space, margins and many other settings of each field.
Mobile-First, Looking Perfectly on Any Device
Your forms run amazing on any browser and device! Bootstrap 5 is mobile-first framework, so it's the perfect to work with.
Server Connect Integration
Easily convert to server connect form and process your form data serverside.
Form Validation
Combine with App Connect Form Validator in order to add validation to your form inputs.

bs5-form-row
<bs5-form-row>

Form
<bs5-form>

Vertical Form Group
<bs5-form-group>

Horizontal Form Group
<bs5-form-group-row>

Form Label
<bs5-form-group-label>

Form Legend
<bs5-form-group-legend>

Text Input
<bs5-input>

Textarea
<bs5-textarea>

dmx-bs5-summernote-textarea
<dmx-bs5-summernote-textarea>

File Upload
<bs5-input-file>

Select
<bs5-select>

Help Text
<bs5-form-group-help>

Label
<bs5-check-label>

Checkbox Input
<bs5-checkbox>

Checkbox Control
<bs5-form-check-checkbox>

Switch Control
<bs5-form-control-switch>

Radio Input
<bs5-radio>

Radio Control
<bs5-form-check-radio>

Input Form Group
<bs5-tmpl-form-group-input>

File Input Form Group
<bs5-tmpl-form-group-file-input>

Multi File Input Form Group
<bs5-tmpl-form-group-multi-file-input>

Textarea Form Group
<bs5-tmpl-form-group-textarea>

Select Form Group
<bs5-tmpl-form-group-select>

Checkbox Form Group
<bs5-tmpl-form-group-checkbox>

Multi Checkbox Form Group
<bs5-tmpl-form-group-multi-checkbox>

Radio Form Group
<bs5-tmpl-form-group-radio>

Multi Radio Form Group
<bs5-tmpl-form-group-multi-radio>

Horizontal Input Form Group
<bs5-tmpl-horz-form-group-input>

Horizontal File Input Form Group
<bs5-tmpl-horz-form-group-file-input>

Horizontal Multi File Input Form Group
<bs5-tmpl-horz-form-group-multi-file-input>

Horizontal Textarea Form Group
<bs5-tmpl-horz-form-group-textarea>

Horizontal Select Form Group
<bs5-tmpl-horz-form-group-select>

Horizontal Checkbox Form Group
<bs5-tmpl-horz-form-group-checkbox>

Horizontal Multi Checkbox Form Group
<bs5-tmpl-horz-form-group-multi-checkbox>

Horizontal Radio Form Group
<bs5-tmpl-horz-form-group-radio>

Horizontal Multi Radio Form Group
<bs5-tmpl-horz-form-group-multi-radio>

Horizontal Submit Button Form Group
<bs5-tmpl-horz-form-group-submit-button>

Horizontal Submit Button and Reset Form Group
<bs5-tmpl-horz-form-group-submit-reset-button>

Register Email Form
<bs5-tmpl-register-email-form>

Register Name and Email Form
<bs5-tmpl-register-name-email-form>

Register Extended Form
<bs5-tmpl-register-extended-form>

Sign Up Form
<bs5-tmpl-signup-form>

Login Form
<bs5-tmpl-login-form>

Subscribe Form
<bs5-tmpl-subscribe-form>

Custom Switch Form Group
<bs5-tmpl-form-group-switch>

Custom Multi Switch Form Group
<bs5-tmpl-form-group-multi-switch>

Horizontal Switch Form Group
<bs5-tmpl-horz-form-group-switch>

Horizontal Multi Switch Form Group
<bs5-tmpl-horz-form-group-multi-switch>

App Connect Bootstrap 5 Modals 5.1.3

Modern dialog boxes and popup windows for your website

Modals are a part of Bootstrap 5 framework and they're the easiest way to tell your users something important, let them like your Facebook page, subscribe for updates... any content you need! You can even put Forms, Video Player, Swiper, Google Maps or Summernote Editor inside! Modals are fully compatible with App Connect dynamic events so you can show, hide or toggle them when needed. Also you can run actions when the modal is shown or after it is hidden. Thanks to Bootstrap 5, modals are fully compatible with any device and screen size. You got the controls in your hands - change colors, size, fade animation, align, auto show, backdrop, etc.

Any Content Inside
Modals are suitable for alerts, login or signup form, user notifications or other custom content - videos, maps, swiper gallery etc.
Great Way to Communicate With Users
Facebook like box, Follow Us on Twitter? Modals is the easiest way to tell your users something important or just let them agree with some Terms and Conditions...
Fully Customizable
You got the controls in your hands - wide variety of options available, e. g. colors, size, fade, align, auto show, backdrop, and more!
Different Sizes
There are different modal sizes available - just elect the one that suits your page design!
Mobile-first and Fully Responsive
Thanks to the great Bootstrap 5 framework, all the modals fit perfectly to any device!
Control with App Connect Dynamic Events
Set dynamic events using App Connect, e. g. close the modal on submit, open modal with certain action, etc.
Scrollable Modals
You can create scrollable modals that allows users to scroll the modal body, when the modal content is long.

Modal
<bs5-modal>

Dynamic Modal
<dmx-bs5-modal>

License: Basic
Group: Components
groupIcon: fas fa-lg fa-cube comp-components
icon: fas fa-lg fa-window-restore comp-components 

<div class="modal" id="@@id@@" is="dmx-bs5-modal" tabindex="-1">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Properties

Name Attribute Type Default Description
ID id text
Class class text
Size droplist
Fullscreen droplist
Centered boolean false
Fade boolean false
Scrollable boolean false
Auto Show show boolean false
No Backdrop nobackdrop boolean false
No Close On Click nocloseonclick boolean false
No Keyboard nokeyboard boolean false
No Focus nofocus boolean false
Advanced css_toggle
Color color_group
Align button_group
Font Weight button_group
Line Height button_group
Font Style button_group
Transform button_group
Overflow button_group
Back Color color_group
Back Opacity range
Width range
Height range
Opacity range
Shadow droplist
Placeholder droplist
Border enum
Width range
Rounded droplist
Radius droplist
Border Color colorlist
Margin<br>&<br>Padding spacing
X Gutter range
Y Gutter range
Hide on button_group
Print button_group
Visually Hidden boolean false
Focusable boolean false

Modal Header
<bs5-modal-header>

Close Button
<bs5-button-close>

Modal Title
<bs5-modal-title>

Modal Body
<bs5-modal-body>

Modal Footer
<bs5-modal-footer>

App Connect Bootstrap 5 Navigation 5.1.4

Stylish and trendy navigation for your website or mobile project

Complete your Bootstrap 5 website or mobile projects with App Connect Bootstrap 5 Navigation. It allows you to add an awesome customizable navbars without any coding skills. You got power to fully manage the navigation properties, align and direction options, add dropdowns and many more. Easy styling, customization, show/hide elements, or even add forms inside! Take the control in your hands and manage all the details - colors, main style, aligns, directions, etc. It's up to you to specify the visibility of each navigation item, depending on the device that's been viewed on.

Stylish Navigation
Stylish and trendy navigation for your website or mobile project
Easy Elements Insertion
Just click, add elements to the menu and set them the properties you want.
Active Link Highlighting
Automated highlighting of current page link in the navigation.
Great Custom Styling
Style every single visual element by yourself, edit properties, colors, fonts, alignments or even add icons!
Different Navigation Types
Add Nav, Navbar or vertical sidebar Navigation, select a style - Pills or Tabs.
Set Mobile Menu Width
Set the minimal width of the device's screen to turning the navbar into a mobile menu!
Pixel Perfection on Any Device
It's made for desktop, tablet, mobile or any other device. Looks perfect! Show/hide menu items on certain screens.
Add Forms Into Navbar
It's simple to add a subscription form or a search field in the navigation.

Nav Link
<bs5-nav-link>

Dropdown Toggle Link
<bs5-nav-link-dropdown-toggle>

Navbar
<bs5-navbar>

Navbar Brand
<bs5-navbar-brand>

Navbar Toggler
<bs5-navbar-toggler>

Navbar Collapse
<bs5-navbar-collapse>

Navbar Text
<bs5-navbar-text>

Breadcrumb Link
<bs5-breadcrumb-link>

Page Link
<bs5-page-link>

Full List Pagination
<bs5-tmpl-list-pagination>

Full List Pagination with Icons
<bs5-tmpl-list-pagination-icons>

bs5-tmpl-text-pagination
<bs5-tmpl-text-pagination>

Tabs with Nav
<bs5-tmpl-list-nav-tabs>

Full Navbar
<bs5-tmpl-full-navbar>

bs5-tmpl-right-navbar-dark
<bs5-tmpl-right-navbar-dark>

App Connect Bootstrap 5 Popovers 5.1.5

Add stylish popovers like those found in iOS to any element on your site

Similar to tooltips, this great component allows you to add even more content. This is an elegant and modern way to provide your users with info popovers like those found in iOS, to any element on your site. It also gives you the opportunity to have a title and a header for your content. Bootstrap 5 Popovers can also be used with dynamic data.

Enrich your content with Popovers
Add stylish popovers like those found in iOS, to any element on your site.
Title and content options
Include custom title and content for the popovers
Use dynamic data
Populate with any dynamic data
Different trigger options
Select whether to show the popover on hover, click or focus
Select position
Choose where to show the popover - top, bottom, left, right
Different dismiss options
Dismiss on next click or use the toggle element
Include rich HTML
Style the popover content with HTML
Great on any device
Popovers work and look great on all devices

App Connect Bootstrap 5 Toasts 5.1.3

Push notifications to your visitors with a lightweight and easily customizable alert message

Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re easy to configure and use, offering a great way to show notifications to your users.

Show push notifications to your users
Toasts mimic the native push notifications of mobile and desktop operating systems
Real-time feedback to your users
Toasts give your users feedback about actions or status
Use with dynamic data
Retrieve your toasts content from a dynamic data source
Easy customization options
Select position, align, offset, min/max width or delay
Great CSS animations
You can apply nice CSS fade in/out animation to your messages
Lightweight and fast
Bootstrap 5 Toasts are powerful, but lightweight and fast
Perfect responsive experience
Use Toasts on any screen size - same best user experience

Toasts
<dmx-bs4-toasts>

License: Basic
Group: Components
groupIcon: fas fa-lg fa-cube comp-components
icon: fas fa-lg fa-comment comp-components 

<div is="dmx-bs4-toasts" id="@@id@@"></div>

Properties

Name Attribute Type Default Description
ID id text
Position position droplist
Align align droplist
Offset X offset-x text 15
Offset Y offset-y text 15
Min Width min-width text 240
Max Width max-width text 350
Delay delay text 5000

Toasts
<dmx-bs5-toasts>

License: Basic
Group: Components
groupIcon: fas fa-lg fa-cube comp-components
icon: fas fa-lg fa-comment comp-components 

<div is="dmx-bs5-toasts" id="@@id@@"></div>

Properties

Name Attribute Type Default Description
ID id text
Position position droplist
Align align droplist
Offset X offset-x text 15
Offset Y offset-y text 15
Min Width min-width text 240
Max Width max-width text 350
Delay delay text 5000

App Connect Bootstrap 5 Tooltips 5.1.5

Guide your users through the content with useful info tooltips

Add stylish animated tooltips easily, anywhere on your page. Adjust the settings through the easy to use UI controls. You can put them on any element, button or text and show useful information - just select the tooltip position, animation options and when to trigger it. Bootstrap 5 Tooltips can also be used with dynamic data.

Add info tooltips
Add stylish tooltips to your page elements
Easy to use
Adjust tootips' settings using the great UI
Use dynamic data
Populate with any dynamic data
Select position
Choose where to show the tooltip - top, bottom, left, right
Different trigger options
Select whether to show the tooltip on hover, click or focus.
Include rich HTML
Style the tooltips content with HTML
Great on any device
Tooltips work and look great on all devices

App Connect Bootstrap 4 Alerts V2 4.6.0

Awesome static or dynamic alerts for your website

With a great new UI, this awesome extension allows you to enhance user experience by integrating alerts on your site! Thanks to the world's most popular CSS framework, alerts are fully responsive and will significantly help you in communicating with your users! Choose static or dynamic alerts: show alert on success, on error, on validation or authorization problem, show changes in your working hours and display info messages on your pages. You can use the predefined standard Bootstrap 4 visual classes for success, info, warning, danger and more types!

Communicate with Users
Alerts will improve the user experience on your page - no more redirecting, show everything on the same page!
Static Alerts Available
You can display static alerts too - maintenance, changed working hours, promotions...
Dynamic Events Integration
Show alert when a certain dynamic event occurs on page - on success, on error, on validation or authorization problem and others.
Predefined Bootstrap 4 Styles
Use 8 standard visual types of alerts for success, info, warning, danger, etc.
User-Centric Design
The Bootstrap alerts are made to improve the UX. You can even add more info - headings, paragraphs to show helpful tips.
Fully Customizable
Customize colors, animation or content of the alert thanks to the great visual integration within Wappler.

Alert
<dmx-bs4-alert>

License: Basic
Group: Components
groupIcon: fas fa-lg fa-cube comp-components
icon: fas fa-lg fa-exclamation-circle comp-components 

<div class="alert" id="@@id@@" is="dmx-bs4-alert" role="alert">
  <p>This is a nice alert!</p>
</div>

Properties

Name Attribute Type Default Description
ID id text
Class class text
Fade boolean false
Auto Show show boolean false
Closable closable boolean false
Type type colorlist
Advanced css_toggle
Color color_group
Align button_group
Font Weight button_group
Font Style button_group
Transform button_group
Overflow button_group
Back Color color_group
Width range
Height range
Border enum
Rounded droplist
Size droplist
Border Color colorlist
Margin<br>&<br>Padding spacing
Hide on button_group
Print button_group

App Connect Bootswatch 5 5.1.3

25 Amazing Bootstrap 5 Themes

Give your Bootstrap 5 site a fresh look with App Connect Bootswatch 5! Based on the great open source themes by Thomas Park from Bootswatch.com, this awesome extension offers 25 different designs to enhance your Bootstrap 5 components, navigation and layout appearance with minimal effort for maximum user experience and impact.

Easy To Use
Just select one of the included themes and apply it with a single click!
Built for Bootstrap 5
The themes are designed right for the latest version of the great Bootstrap 5 framework.
25 Different Themes Included
Choose one of the 25 themes included in the extension.
Great Integration
You can preview the changes immediately in Design View!

App Connect Bootstrap 5 Offcanvas 5.1.3

Add hidden sidebars for your website or app

Add hidden sidebars for your web sites and apps for navigation, shopping carts, and more which appear from the left, right, or bottom edge of the viewport. You can show and hide them using buttons, links or other elements on your page.

Hidden Sidebar
Create a hidden sidebar for your site or app, which you can toggle using a button or link


Offcanvas
<bs5-offcanvas>

Dynamic Offcanvas
<dmx-bs5-offcanvas>

License: Basic
Group: Components
groupIcon: fas fa-lg fa-cube comp-components
icon: fas fa-lg fa-window-maximize fa-rotate-270 comp-components 

<div class="offcanvas offcanvas-start" id="@@id@@" is="dmx-bs5-offcanvas" tabindex="-1">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Offcanvas title</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Offcanvas body text goes here.</p>
  </div>
</div>

Properties

Name Attribute Type Default Description
ID id text
Class class text
Placement droplist
Scroll scroll boolean false
Auto Show show boolean false
No Backdrop nobackdrop boolean false
No Keyboard nokeyboard boolean false
Advanced css_toggle
Color color_group
Align button_group
Font Weight button_group
Line Height button_group
Font Style button_group
Transform button_group
Overflow button_group
Back Color color_group
Back Opacity range
Width range
Height range
Opacity range
Shadow droplist
Placeholder droplist
Border enum
Width range
Rounded droplist
Radius droplist
Border Color colorlist
Margin<br>&<br>Padding spacing
X Gutter range
Y Gutter range
Hide on button_group
Print button_group
Visually Hidden boolean false
Focusable boolean false

Offcanvas Header
<bs5-offcanvas-header>

Offcanvas Title
<bs5-offcanvas-title>

Offcanvas Body
<bs5-offcanvas-body>

Bootstrap 5 Dynamic Table Generator 2 PRO 5.1.3

Auto generate awesome data-driven tables in seconds

Stop wasting valuable time for creating and populating tables manually and focus on your creativity! Bootstrap 5 Dynamic Table Generator will generate and populate awesome tables from any data source, doesn't matter if it's a Database, an API Data Source or just a JSON file. That's not everything: we added a special function for automatic column data sorting. So now your desired tables are fully automated and based on the Bootstrap 5 framework.

Generate Dynamic Tables
Generate and populate Bootstrap 5 tables from any dynamic source
Turn Any Data Into a Table
Quickly produce your tables from a database or JSON file
Customize Your Tables
Customize from top to bottom - add borders, zebra-stripes, or make tables more compact
Auto Sortable Columns
You can add sorting function to columns automatically using App Connect State Management
Fully Customizable, Easy Inspect and Regeneration
After initial generation, you can just inspect, make changes and regenerate your table
Perfect on Any Device Thanks to Bootstrap 5
Make your tables look great on any device

Bootstrap 5 Table Generator
<dmx-bs5-table-generator>

License: Basic
Group: Generators
groupIcon: fas fa-lg fa-retweet comp-dialogs
icon: fas fa-lg fa-table comp-dialogs

Bootstrap 5 Dynamic Form Generator PRO 5.1.3

Auto generate perfect Bootstrap 5 dynamic forms in a few clicks

Generate Dynamic Bootstrap 5 Forms
Auto generate forms for your database insert and update actions
Easy Inspect and Regeneration
After the initial generation, you can just inspect, make changes and regenerate your forms
Turn Any Data Into a Form
Quickly produce your forms from App Connect or Server Connect data source
Great Server Connect Integration
Choose any existing insert or update database actions to generate your form
Smart Input Generation
Generated forms fields match automatically the required database field types
Multi Column Forms
Create multi column forms, by enabling the form rows option
Responsive Forms
The generated forms are responsive, thanks to the Bootstrap 5 framework

Bootstrap 5 Form Generator
<dmx-bs5-form-generator>

License: Basic
Group: Generators
groupIcon: fas fa-lg fa-retweet comp-dialogs
icon: fas fa-lg fa-retweet comp-dialogs

Bootstrap 5 Dynamic Paging Generator PRO 5.1.3

Auto generate dynamic Bootstrap 5 paging in seconds

Use Bootstrap 5 Dynamic Paging Generator to create amazing Bootstrap 5 dynamic paging from any data source and greatly improve the user experience on your website! So yes... that's the best way to divide your large content into single pages with great navigation, fully automatically, with a great structure! You can select any data source for the paging generation, as well as fully customize the style! Use various sizes and designs to make it match your site perfectly. And even apply Bootswatch themes!

Generate Dynamic Paging
Automatically separate your content in single pages
Great Bootstrap 5 styled Paging
The pagination is just perfect on any device
Save Paging State as URL
Save paging state as URL for bookmarking and restore of page load using State Management
Fast Loading
Your data will load very fast, doesn't matter how many records you have
Different Paging Style with Every Bootswatch Theme
Use in combination with the Bootswatch themes and apply different paging styling
Fully Customizable
Select size and customize the buttons to fit your design

Bootstrap 5 Paging Generator
<dmx-bs5-paging-generator>

License: Basic
Group: Generators
groupIcon: fas fa-lg fa-retweet comp-dialogs
icon: fas fa-lg fa-ellipsis-h comp-dialogs

App Connect Tagify 1.0.5

Transform your text input into a tags inputs in an easy, customizable way

The Tagify component transforms an input field into a Tags component, in an easy, customizable way, with great performance and many customizable options. Tagify provides auto suggestions when entering text into the input - really useful dynamic list of products, countries, options etc., so you can offer your users quick search and selection without having to enter long text.

Convert Text Inputs
Easily convert an input field into a Tags component
Use any Data Source
Use any dynamic data source for the Tagify component - a database query, a JSON data source, an API data source or an array with items
Display Modes
Use as a multi value tags input, as a single value dropdown-like input or in mixed mode
Easy to Customize
You can easily customize the whole look and feel of the component, using the options available

Tagify
<dmx-tagify>

License: Basic
Group: Forms
groupIcon: fas fa-lg fa-file-alt comp-form
icon: fad fa-lg fa-ballot-check color-yellow 

<input is="dmx-tagify" id="@@id@@" name="@@id@@">

Properties

Name Attribute Type Default Description
ID id text
Name name text
Disabled disabled boolean false
Read Only readonly boolean false
Dropdown Position dropdown-position droplist
Mode mode droplist
Data Source dmx-bind:data text
Text Field tag-text text
Secondary Field tag-secondary text
Value Field tag-value text
Image Field tag-image text
Class Field tag-class text
Count Field tag-count text
Readonly Field tag-readonly text
Duplicates duplicates boolean false
No Trim notrim boolean false
No Autocomplete noautocomplete boolean false
Keep Invalid keep-invalid boolean false
Skip Invalid skip-invalid boolean false
Case Sensitive case-sensitive boolean false
No Close On Select no-close-on-select boolean false
No Fuzzy Search no-fuzzy-search boolean false
No Accented Search no-accented-search boolean false
Highlight First highlight-first boolean false
No Input noinput boolean false
No Custom nocustom boolean false
Delimiters delimiters text ,
Max Tags max-tags text
Min Chars min-chars text 2
Max Items max-items text 10
Pattern pattern text
Disabled Bg css_color #f1f1f1
Border Color css_color #3595f6
Hover Border Color css_color #ccc
Focus Border Color css_color #3595f6
Background css_color #e5e5e5
Hover Color css_color #d3e2e2
Text Color css_color #000000
Text Color Edit css_color #000000
Image Size css_text 1em
Pad css_text .3em .5em
Min Width css_text 1ch
Max Width css_text auto
Inset Shadow Size css_text 1.1em
Invalid Color css_color #d39494
Invalid Bg css_color rgba(211, 148, 148, .5)
Text Color css_color
Secondary Color css_color
Secondary Font Size css_text .75em
Count Color css_color
Image Size css_text 1em
Gap Size css_text .3em
Background Color css_color rgba(211, 148, 148, .3)
Button Color css_color #bd5e5e
Button Background css_color #ffffff
Button Hover Bg css_color
Input Color css_color
Hide Transition css_text .3s
Placeholder Color css_color rgba(0, 0, 0, .4)
Placeholder Color Focus css_color rgba(0, 0, 0, .25)
Loader Size css_text .8em
Read Only Striped boolean 1

App Connect Form Repeat 1.0.2

Easily insert or update nested data in your database tables

App Connect Form repeat allows you to easily insert or update nested data in your database tables using a single insert or update action. This way you can insert data in your main table as well as in its sub tables.

Insert and Update Nested Data
Easily insert or update nested data in your database tables
Min and Max Items
Setup the min and/or max number of items allowed in your form
Sortable Items
You can sort the form repeat items by dragging and rearranging them

Form Repeat
<dmx-form-repeat>

License: Basic
Group: Forms
groupIcon: fas fa-lg fa-file-alt comp-form
icon: fad fa-lg fa-repeat color-orange 

<div is="dmx-form-repeat" id="@@id@@" dmx-bind:items="1"></div>

Properties

Name Attribute Type Default Description
ID id text
Items dmx-bind:items text
Min min text 0
Max max text
Sortable sortable boolean false
Handle handle text Enter a CSS Selector to use as drag handle
Animation animation text 0 Enter the Animation duration in Milliseconds to be used during the drag

App Connect Bootstrap 5 5.1.3

Quickly design and customize responsive mobile-first web sites and apps

Bootstrap 5 is the world’s most popular front-end open source toolkit, featuring responsive grid system, extensive prebuilt components, and powerful JavaScript plugins. It allows you to build fast, responsive web sites and apps using the available UI controls.

The All-New Bootstrap 5 Features
Latest version of the world's most popular CSS framework included, better than ever!
Bootstrap 4 to Bootstrap 5 Conversion Included
Yes - you can easily convert your old Bootstrap 4 websites to Bootstrap 5!
Many Predefined Elements Included
Use dozens of predefined classes - awesome ready-to-use elements!
Smart Elements Insertion
Elements’ insertion is context-sensitive - it suggested you components based on the current context!
Customize Each Element Directly in the UI
Many customization options are available for each element in the user interface.
12-column Responsive Grid
Powerful mobile-first flexbox grid that appropriately scales up to 12 columns to build layouts of all shapes and sizes.
Advanced Flexbox Integration
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities
Content Templates
Add, edit and reuse the included pre-built, responsive content templates
Advanced Grid Layouts and Nested Columns
Intuitively add as many rows as you wish within a column!
Mobile-First Design From Scratch
That's something standard - it's designed to look best on mobile devices.
Include Bootstrap CDN or a Local File
Choose to include directly Bootstrap CDN or upload CSS files of the framework locally.

Jumbotron
<bs5-jumbotron>

Header
<bs5-header>

Main
<bs5-main>

Section
<bs5-section>

Footer
<bs5-footer>

Container
<bs5-container>

Row
<bs5-row>

Column
<bs5-col>

Column Break
<bs5-col-break>

Heading
<bs5-title>

Paragraph
<bs5-paragraph>

Anchor Image
<bs5-anchor-img>

Image
<bs5-img>

Secondary Text
<bs5-text-muted>

Badge
<bs5-badge>

Link Badge
<bs5-link-badge>

Button
<bs5-btn>

Anchor Button
<bs5-anchor-btn>

Button Group
<bs5-btn-group>

Button Toolbar
<bs5-btn-toolbar>

Tab Content
<bs5-tab-content>

Tab Pane
<bs5-tab-pane>

Dropdown Item
<bs5-dropdown-item>

Dropdown Text
<bs5-dropdown-item-text>

Dropdown Header
<bs5-dropdown-header>

Dropdown Divider
<bs5-dropdown-divider>

Dropdown Toggle Button
<bs5-btn-dropdown-toggle>

Dropdown Toggle Link
<bs5-link-dropdown-toggle>

Dropdown Menu
<bs5-dropdown-menu>

Dropdown
<bs5-dropdown>

List Item
<bs5-list-group-item>

Custom List Item
<bs5-tmpl-list-group-item-custom>

List Item with Checkbox
<bs5-list-group-item-form-check>

List Item with Radio
<bs5-list-group-item-form-radio>

Action List Item
<bs5-list-group-item-action>

Action Custom List Item
<bs5-tmpl-list-group-item-action-custom>

Flush List Group
<bs5-list-group-flush>

List Group
<bs5-list-group>

Action List Group
<bs5-list-group-action>

Description List
<bs5-desc-list>

Term
<bs5-desc-list-term>

Description
<bs5-desc-list-desc>

Flex Container
<bs5-flex-container>

Display Block
<bs5-display-block>

Responsive Table
<bs5-responsive-table>

Table
<bs5-table>

Table Head
<bs5-table-head>

Table Body
<bs5-table-body>

Row
<bs5-table-row>

Header
<bs5-table-header>

Cell
<bs5-table-cell>

Progress
<bs5-progress>

Progress Bar
<bs5-progress-bar>

Border Spinner
<bs5-spinner-border>

Growing Spinner
<bs5-spinner-grow>

Inline Border Spinner
<bs5-inline-spinner-border>

Inline Growing Spinner
<bs5-inline-spinner-grow>

Link
<bs5-a>

App Connect Bootstrap 4 Cards V2 4.6.0

Flexible and extensible content containers with multiple variants and options

With a greatly improved UI, now it's more powerful than ever! Bootstrap 4 Cards V2 allows you to add stylish and beautiful content containers including titles, paragraphs, images, image overlays, lists, backgrounds, borders directly from the Wappler's UI. Great native organization of the cards in groups, decks or columns. You can use Bootstrap 4 Cards V2 in variety of cases: author boxes, blog posts, albums, featured images or other content, pricing tables, testimonials and many more. So it's really powerful and useful for any kind of website! Cards are flexbox-based, so they're perfectly mixing with all the Bootstrap elements - it's made for Bootstrap 4 V2! Fully customizable, mobile-first - that's your solution for eye-catching user interface design!

Stylish Bootstrap 4 Card Elements
Cards provide a flexible and extensible content container with multiple variants and options
Built with Flexbox
It's greatly using flexbox for easy alignment and awesome mixing with all the Bootstrap 4 components
Predefined Elements Included
Add, edit and reuse the pre-built templates packed in the extension
Easy Organization
It's easy to organize cards in decks or columns thanks to the great Bootstrap 4 grid
Made For App Connect Bootstrap 4 V2
Use all the options in combination with all the Bootstrap 4 V2 extensions released on
Fully Customizable
Bootstrap 4 Cards V2 includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options
Dynamic Data
Use cards with dynamic data, for example in repeat regions
Combine With Other Components
Combine cards with other extensions like Swiper, List Groups, Masonry or Slideshow.

Card
<bs4-card>

Card Top Image
<bs4-card-img-top>

Card Image
<bs4-card-img>

Card Bottom Image
<bs4-card-img-bottom>

Card Header
<bs4-card-header>

Card Body
<bs4-card-body>

Card Image Overlay
<bs4-card-img-overlay>

Card Title
<bs4-card-title>

Card Text
<bs4-card-text>

Card Footer
<bs4-card-footer>

Card Link
<bs4-card-link>

Card Group
<bs4-card-group>

Card Deck
<bs4-card-deck>

Card Columns
<bs4-card-columns>

Accordion Cards
<bs4-accordion-cards>

Accordion Card
<bs4-card-accordion>

Feature Text Card
<bs4-templ-card-featured-text>

Feature Text Card Centered
<bs4-templ-card-featured-text-center>

Quote Card
<bs4-templ-card-quote>

Top Image Card
<bs4-templ-card-image-top>

Bottom Image Card
<bs4-templ-card-image-bottom>

Top Image Card With Header
<bs4-templ-card-image-top-header>

Bottom Image Card With Header
<bs4-templ-card-image-bottom-header>

Card With Image Overlay
<bs4-templ-card-image-overlay>

Property Card
<bs4-templ-card-properties>

Bootstrap 4 Dynamic Form Generator 2 PRO 4.6.0

Auto generate perfect Bootstrap 4 dynamic forms in seconds

Bootstrap 4 Dynamic Form Generator 2 creates advanced insert and update record forms in just a couple of clicks. Bootstrap 4 Dynamic Form Generator 2 is fully compatible with Database Updater 2, so you can create insert or update record forms in seconds. Creating multi record insert or update forms has never been easier! The new version allows more customization options and new layout options, such as multi-column form layout. The extension is an essential part of the whole Bootstrap 4 extensions stack and you can use it in a perfect combination with any of them! After the initial generation, you can inspect elements, make changes and even regenerate your form.

Generate Dynamic Bootstrap 4 Forms
Auto generate forms for your database insert and update actions
Easy Inspect and Regeneration
After the initial generation, you can just inspect, make changes and regenerate your forms
Turn Any Data Into a Form
Quickly produce your forms from App Connect or Server Connect data source
Great Server Connect Integration
Choose any existing insert or update database actions to generate your form
Smart Input Generation
Generated forms fields match automatically the required database field types
Multi Column Forms
Create multi column forms, by enabling the form rows option
Responsive Forms
The generated forms are responsive, thanks to the Bootstrap 4 framework
Great Wappler Integration
You can preview and inspect your forms directly in Wappler Live View

Bootstrap 4 Form Generator
<dmx-bs4-form-generator>

License: Basic
Group: Generators
groupIcon: fas fa-lg fa-retweet comp-dialogs
icon: fas fa-lg fa-retweet comp-dialogs

App Connect Bootstrap 4 Forms V2 4.6.0

Amazing forms and prebuilt form templates for your website

Forms? Nothing better than App Connect Bootstrap 4 Forms Version 2. The extension contains many form elements - input groups, dropdowns, checkboxes, radios, select forms, file inputs... That's not everything - use many ready-to-go form templates, e.g. sign up form, subscribe form, login and more! App Connect Bootstrap 4 Forms V2 helps you to create awesome forms for your website and it's easy to customize thanks to the great Wappler integration. You can even set dynamic values to your form inputs! Of course, you got access to all of the form settings: colors, values, position, alignment, padding! So powerful, that everything is up to you! All the forms are mobile-first and use the latest Bootstrap 4 framework! Combine with some Cards, Bootswatch and Navigation components for best experience and great website design!

Based on the All-New Bootstrap 4
Unleash the power of adding Bootstrap 4 forms to your website!
Many Prebuilt Advanced Components
Over a dozen components providing you input groups, dropdowns, checkboxes, radios, select forms, file inputs, and much more!
Multi Column Forms
Build layouts that require multiple columns, varied widths, and additional alignment options
Ready-To-Go Form Templates
Use directly many prebuilt form templates for email subscription, registration, login, etc.
Custom Toggle Switches
You are now able to create and add your own custom iOS style toggle switch controls on your page, for turning different options on or off.
Fully Customizable
Of course - define colors, space, margins and many other settings of each field.
Mobile-First, Looking Perfectly on Any Device
Your forms run amazing on any browser and device! Bootstrap 4 is mobile-first framework, so it's the perfect to work with.
Fully Visual Form Creation in Wappler
Integrated with Wappler in a great way: just select what type of element you want to add to the form.
Server Connect Integration
Easily convert to server connect form and process your form data serverside.
Form Validation
Combine with Bootstrap 4 Form Validator in order to add validation to your form inputs.

Form Row
<bs4-form-row>

Form
<bs4-form>

Vertical Form Group
<bs4-form-group>

Horizontal Form Group
<bs4-form-group-row>

Label
<bs4-form-group-label>

Legend
<bs4-form-group-legend>

Text Input
<bs4-input>

Textarea
<bs4-textarea>

Summernote Textarea
<dmx-bs4-summernote-textarea>

License: Basic
Group: Forms
groupIcon: fas fa-lg fa-code comp-form
icon: fas fa-lg fa-pen-square comp-form 

<textarea id="@@id@@" name="@@id@@" is="dmx-summernote" dmx-bind:toolbar="[['style',['style']],['font',['bold','underline','clear']],['fontname',['fontname']],['color',['color']],['para',['ul','ol','paragraph']],['table',['table']],['insert',['link','picture','video']],['view',['fullscreen','codeview','help']]]"></textarea>

Properties

Name Attribute Type Default Description
ID id text
Name name text
Static Value value text
Placeholder placeholder text
Theme theme droplist bootstrap4
Language lang droplist
Height height text
Min Height min-height text
Max Height max-height text
Autofocus autofocus boolean false
Air Mode air-mode boolean false
Use In Modal dialogs-in-body boolean false
Dialogs Fade dialogs-fade boolean false
Disable Drop disable-drop boolean false
Disable Shortcuts disable-shortcuts boolean false
Disable Tab disable-tab boolean false
Disable Spellcheck disable-spellcheck boolean false
Disable Grammar disable-grammar boolean false

File Upload
<bs4-input-file>

Custom File Upload
<bs4-custom-file>

Custom File Label
<bs4-custom-file-label>

Custom File
<bs4-custom-control-file>

Select
<bs4-select>

Custom Select
<bs4-custom-select>

Help Text
<bs4-form-group-help>

Label
<bs4-check-label>

Custom Control Label
<bs4-custom-control-label>

Checkbox Input
<bs4-checkbox>

Custom Checkbox
<bs4-custom-checkbox>

Checkbox Control
<bs4-form-check-checkbox>

Custom Checkbox
<bs4-custom-control-checkbox>

Custom Switch
<bs4-custom-control-switch>

Radio Input
<bs4-radio>

Custom Radio
<bs4-custom-radio>

Radio Control
<bs4-form-check-radio>

Custom Radio
<bs4-custom-control-radio>

Input Form Group
<bs4-tmpl-form-group-input>

File Input Form Group
<bs4-tmpl-form-group-file-input>

Multi File Input Form Group
<bs4-tmpl-form-group-multi-file-input>

Custom File Input Form Group
<bs4-tmpl-form-group-custom-file-input>

Custom Multi File Input Form Group
<bs4-tmpl-form-group-multi-custom-file-input>

Textarea Form Group
<bs4-tmpl-form-group-textarea>

Select Form Group
<bs4-tmpl-form-group-select>

Custom Select Form Group
<bs4-tmpl-form-group-custom-select>

Checkbox Form Group
<bs4-tmpl-form-group-checkbox>

Custom Checkbox Form Group
<bs4-tmpl-form-group-custom-checkbox>

Multi Checkbox Form Group
<bs4-tmpl-form-group-multi-checkbox>

Custom Multi Checkbox Form Group
<bs4-tmpl-form-group-multi-custom-checkbox>

Radio Form Group
<bs4-tmpl-form-group-radio>

Multi Radio Form Group
<bs4-tmpl-form-group-multi-radio>

Custom Radio Form Group
<bs4-tmpl-form-group-custom-radio>

Custom Multi Radio Form Group
<bs4-tmpl-form-group-multi-custom-radio>

Custom Switch Form Group
<bs4-tmpl-form-group-custom-switch>

Custom Multi Switch Form Group
<bs4-tmpl-form-group-multi-custom-switch>

Horizontal Input Form Group
<bs4-tmpl-horz-form-group-input>

Horizontal File Input Form Group
<bs4-tmpl-horz-form-group-file-input>

Horizontal Multi File Input Form Group
<bs4-tmpl-horz-form-group-multi-file-input>

Horizontal Custom File Input Form Group
<bs4-tmpl-horz-form-group-custom-file-input>

Horizontal Custom Multi File Input Form Group
<bs4-tmpl-horz-form-group-multi-custom-file-input>

Horizontal Textarea Form Group
<bs4-tmpl-horz-form-group-textarea>

Horizontal Select Form Group
<bs4-tmpl-horz-form-group-select>

Horizontal Custom Select Form Group
<bs4-tmpl-horz-form-group-custom-select>

Horizontal Checkbox Form Group
<bs4-tmpl-horz-form-group-checkbox>

Horizontal Custom Checkbox Form Group
<bs4-tmpl-horz-form-group-custom-checkbox>

Horizontal Multi Checkbox Form Group
<bs4-tmpl-horz-form-group-multi-checkbox>

Horizontal Custom Multi Checkbox Form Group
<bs4-tmpl-horz-form-group-multi-custom-checkbox>

Horizontal Radio Form Group
<bs4-tmpl-horz-form-group-radio>

Horizontal Multi Radio Form Group
<bs4-tmpl-horz-form-group-multi-radio>

Horizontal Custom Radio Form Group
<bs4-tmpl-horz-form-group-custom-radio>

Horizontal Custom Multi Radio Form Group
<bs4-tmpl-horz-form-group-multi-custom-radio>

Horizontal Custom Switch Form Group
<bs4-tmpl-horz-form-group-custom-switch>

Horizontal Custom Multi Switch Form Group
<bs4-tmpl-horz-form-group-multi-custom-switch>

Horizontal Submit Button Form Group
<bs4-tmpl-horz-form-group-submit-button>

Horizontal Submit Button and Reset Form Group
<bs4-tmpl-horz-form-group-submit-reset-button>

Register Email Form
<bs4-tmpl-register-email-form>

Register Name and Email Form
<bs4-tmpl-register-name-email-form>

Register Extended Form
<bs4-tmpl-register-extended-form>

Sign Up Form
<bs4-tmpl-signup-form>

Login Form
<bs4-tmpl-login-form>

Subscribe Form
<bs4-tmpl-subscribe-form>

Bootstrap 4 Dynamic TableGenerator 2 PRO 4.6.0

Automatically generate dynamic data tables

Don't waste valuable time for creating and populating tables manually! The brand new, upgraded Bootstrap 4 Dynamic Table Generator 2 will generate and populate awesome responsive tables from any data source, doesn't matter if it's a database, API or a JSON file. The Dynamic Table Generator 2 also includes a special function for automatic column data sorting. So you are now able to create sortable data tables in Wappler, fully automatic and based on the latest Bootstrap 4 version. Bootstrap 4 Dynamic Table Generator 2 is fully compatible with the Database Connector 2, so you can take advantage of the advanced options it offers.

Automatically generate dynamic data tables
Create your dynamic tables in a few clicks
Easy configuration
The Table Generator offers and easy to use UI, which allows you to style your table, as you need it
Any data source
Select a server action, API data source or a JSON data source
Sortable table headers
Create advanced data tables, allowing your users to sort by different columns
Responsive tables
Make your tables look great on any device thanks to Bootstrap 4
Database Connector 2 support
Bootstrap 4 Dynamic Table Generator 2 is fully compatible with the Database Connector 2, so you can take advantage of the advanced options it offers

Bootstrap 4 Table Generator
<dmx-bs4-table-generator>

License: Basic
Group: Generators
groupIcon: fas fa-lg fa-retweet comp-dialogs
icon: fas fa-lg fa-table comp-dialogs

App Connect Framework 7 V2 PRO 7.1.14

Awesome extension!

Some description

Show/hide content
Use single, multiple or group collapsible items
Include rich HTML and images
Enrich container content with HTML or include images/video, iframes, additional scripts
Combine with Cards
Using the card component, you can extend the default collapse behavior to create an accordion
Use dynamic data
Create collapsible data-driven content
Lightweight script
Only pure JavaScript and Bootstrap 4 includes
Fully Customizable
Edit and set up every part of the UI - colors, auto show/hide, animations

Badge
<f7-1-simple-badge>

Switch Field
<f7-1-form-field-switch>

Button
<f7-1-simple-button>

Buttons Row
<f7-1-buttons-row>

Image
<f7-1-simple-image>

Image
<f7-1-inline-image>

Paragraph
<f7-1-simple-paragraph>

Sub Navbar
<f7-1-subnavbar>

Navbar Content
<f7-1-navbar-inner>

Navbar
<f7-1-navbar>

Toolbar
<f7-1-toolbar>

Text
<f7-1-item-after-text>

Label
<f7-1-item-after-label>

Title
<f7-1-item-title>

After
<f7-1-item-after>

Title Row
<f7-1-item-title-row>

Sub Title
<f7-1-item-subtitle>

Text
<f7-1-item-text>

Media
<f7-1-item-media>

<f7-1-item-inner>

List Item Divider
<f7-1-list-item-divider>

Media List Link Item
<f7-1-media-list-item-link>

Media List Item
<f7-1-media-list-item-content>

List Link Item
<f7-1-list-item-link>

List Button Item
<f7-1-list-item-button>

List Item
<f7-1-list-item-content>

Form Input
<f7-1-form-item-input>

Form Select
<f7-1-form-item-select>

Form Switch
<f7-1-form-item-checkbox>

Form Slider
<f7-1-form-item-range>

Form Textarea
<f7-1-form-item-textarea>

List Elements
<f7-1-list-block-elements>

Media List Elements
<f7-1-media-list-block-elements>

List Group
<f7-1-list-group>

List Block Label
<f7-1-list-block-label>

Form
<f7-1-form>

List Block
<f7-1-list-block>

Media List Group
<f7-1-media-list-group>

Media List Block Label
<f7-1-media-list-block-label>

Media List Block
<f7-1-media-list-block>

Card Content Inner
<f7-1-card-content-inner>

Card Header
<f7-1-card-header>

Card Content
<f7-1-card-content>

Card Footer
<f7-1-card-footer>

Card
<f7-1-card>

Cards List Elements
<f7-1-cards-list-block-elements>

Cards List Block
<f7-1-cards-list-block>

Text Card
<f7-1-tmpl-cards-text>

Text Card With Block Title
<f7-1-tmpl-cards-text-title>

Text Card With Header and Footer
<f7-1-tmpl-cards-text-header-footer>

Image Card
<f7-1-tmpl-cards-image>

Facebook Card
<f7-1-tmpl-cards-facebook-card>

Facebook Card Extended
<f7-1-tmpl-cards-facebook-card-ext>

Content Block Title
<f7-1-content-block-title>

Content Block
<f7-1-content-block>

Highlighted Content Block
<f7-1-content-block-hi>

Row
<f7-1-row>

Column
<f7-1-col>

Page Content
<f7-1-page-content>

Page
<f7-1-page>

Pages
<f7-1-pages>

View
<f7-1-view>

Panel Left
<f7-1-panel-left>

Panel Right
<f7-1-panel-right>

Views
<f7-1-views>

Popup
<f7-1-popup>

Popover
<f7-1-popover>

Sub View
<f7-1-sub-view>

Main Layout
<f7-1-main-layout>

Application
<f7-1-root>

Login Screen
<f7-1-login-screen>

Page Content
<f7-1-page-content-login-screen>

Login Screen Title
<f7-1-login-screen-title>

Badge
<f7-2-simple-badge>

Clear Button
<f7-2-clear-button>

Item Info
<f7-2-item-input-info>

Toggle Field
<f7-2-form-field-toggle>

Button
<f7-2-simple-button>

Segmented Control
<f7-2-segmented>

Image
<f7-2-simple-image>

Image
<f7-2-inline-image>

Paragraph
<f7-2-simple-paragraph>

Sub Navbar
<f7-2-subnavbar>

Navbar Content
<f7-2-navbar-inner>

Navbar
<f7-2-navbar>

Toolbar
<f7-2-toolbar>

Tabbar
<f7-2-tabbar>

Text
<f7-2-item-after-text>

Label
<f7-2-item-after-label>

Title Header
<f7-2-item-title-header>

Title Footer
<f7-2-item-title-footer>

Title
<f7-2-item-title>

After
<f7-2-item-after>

Title Row
<f7-2-item-title-row>

Sub Title
<f7-2-item-subtitle>

Text
<f7-2-item-text>

Media
<f7-2-item-media>

<f7-2-item-inner>

List Item Divider
<f7-2-list-item-divider>

Media List Link Item
<f7-2-media-list-item-link>

Media List Item
<f7-2-media-list-item-content>

f7-2-media-list-item-checkbox
<f7-2-media-list-item-checkbox>

List Link Item
<f7-2-list-item-link>

List Button Item
<f7-2-list-item-button>

List Item
<f7-2-list-item-content>

Input
<f7-2-item-input-wrap>

Text Input
<f7-2-input>

Select
<f7-2-select>

Textarea
<f7-2-textarea>

Form Input
<f7-2-form-item-input>

f7-2-form-item-select
<f7-2-form-item-select>

Form Checkbox
<f7-2-form-item-checkbox>

Form Slider
<f7-2-form-item-range>

f7-2-form-item-textarea
<f7-2-form-item-textarea>

List Elements
<f7-2-list-elements>

Media List Elements
<f7-2-media-list-elements>

List Group
<f7-2-list-group>

List Label
<f7-2-list-label>

Form
<f7-2-form>

List
<f7-2-list>

Block Header
<f7-2-block-header>

Block Footer
<f7-2-block-footer>

Block Title
<f7-2-block-title>

Block
<f7-2-block>

Media List Group
<f7-2-media-list-group>

Media List Label
<f7-2-media-list-label>

Media List
<f7-2-media-list>

Accordion List
<f7-2-accordion-list>

Card Content Inner
<f7-2-card-content-inner>

Card Header
<f7-2-card-header>

Card Content
<f7-2-card-content>

Card Footer
<f7-2-card-footer>

Card
<f7-2-card>

Cards List Elements
<f7-2-cards-list-elements>

Cards List
<f7-2-cards-list>

Text Card
<f7-2-tmpl-cards-text>

Text Card With Block Title
<f7-2-tmpl-cards-text-title>

Text Card With Header and Footer
<f7-2-tmpl-cards-text-header-footer>

Image Card
<f7-2-tmpl-cards-image>

Facebook Card
<f7-2-tmpl-cards-facebook-card>

Facebook Card Extended
<f7-2-tmpl-cards-facebook-card-ext>

Row
<f7-2-row>

Column
<f7-2-col>

Page Content
<f7-2-page-content>

Page
<f7-2-page>

View
<f7-2-view>

Panel Left
<f7-2-panel-left>

Panel Right
<f7-2-panel-right>

Views
<f7-2-views>

Popup
<f7-2-popup>

Popover
<f7-2-popover>

Template
<f7-2-content-page-template>

Content Page
<f7-2-content-page>

Main Layout
<f7-2-main-layout>

App Root
<f7-2-root>

Pages with Navbar and Toolbar
<f7-2-root-with-main>

Login Screen
<f7-2-login-screen>

Page Content
<f7-2-page-content-login-screen>

Login Screen Title
<f7-2-login-screen-title>

Badge
<f7-5-simple-badge>

Clear Button
<f7-5-clear-button>

Item Info
<f7-5-item-input-info>

Toggle Field
<f7-5-form-field-toggle>

Button
<f7-5-simple-button>

Progressbar
<f7-5-progressbar>

Segmented Control
<f7-5-segmented>

Image
<f7-5-simple-image>

Image
<f7-5-inline-image>

Paragraph
<f7-5-simple-paragraph>

Sub Navbar
<f7-5-subnavbar>

Navbar Content
<f7-5-navbar-inner>

Navbar
<f7-5-navbar>

Toolbar
<f7-5-toolbar>

Tabbar
<f7-5-tabbar>

Tabbar with Labels
<f7-5-tabbar-with-labels>

Text
<f7-5-item-after-text>

Item Label
<f7-5-item-after-label>

Item Title Header
<f7-5-item-title-header>

Item Title Footer
<f7-5-item-title-footer>

Item Title
<f7-5-item-title>

After
<f7-5-item-after>

Title Row
<f7-5-item-title-row>

Sub Title
<f7-5-item-subtitle>

Text
<f7-5-item-text>

Media
<f7-5-item-media>

<f7-5-item-inner>

List Item Divider
<f7-5-list-item-divider>

Media List Link Item
<f7-5-media-list-item-link>

Media List Item
<f7-5-media-list-item-content>

f7-5-media-list-item-checkbox
<f7-5-media-list-item-checkbox>

List Link Item
<f7-5-list-item-link>

List Button Item
<f7-5-list-item-button>

List Item
<f7-5-list-item-content>

Input
<f7-5-item-input-wrap>

Text Input
<f7-5-input>

Select
<f7-5-select>

Textarea
<f7-5-textarea>

Form Input
<f7-5-form-item-input>

Form Checkbox
<f7-5-form-item-checkbox>

Form Slider
<f7-5-form-item-range>

List Elements
<f7-5-list-elements>

Media List Elements
<f7-5-media-list-elements>

List Group
<f7-5-list-group>

List Label
<f7-5-list-label>

Form
<f7-5-form>

List
<f7-5-list>

Block Header
<f7-5-block-header>

Block Footer
<f7-5-block-footer>

Block Title
<f7-5-block-title>

Block
<f7-5-block>

Media List Group
<f7-5-media-list-group>

Media List Label
<f7-5-media-list-label>

Media List
<f7-5-media-list>

Accordion List
<f7-5-accordion-list>

Card Content Inner
<f7-5-card-content-inner>

Card Header
<f7-5-card-header>

Card Footer
<f7-5-card-footer>

Card Content
<f7-5-card-content>

Card
<f7-5-card>

Expandable Card
<f7-5-card-expandable>

Cards List Elements
<f7-5-cards-list-elements>

Cards List
<f7-5-cards-list>

Text Card
<f7-5-tmpl-cards-text>

Text Card With Block Title
<f7-5-tmpl-cards-text-title>

Text Card With Header and Footer
<f7-5-tmpl-cards-text-header-footer>

Image Card
<f7-5-tmpl-cards-image>

Facebook Card
<f7-5-tmpl-cards-facebook-card>

Facebook Card Extended
<f7-5-tmpl-cards-facebook-card-ext>

Row
<f7-5-row>

Column
<f7-5-col>

Page Content
<f7-5-page-content>

Page
<dmx-f7-5-page>

License: Basic
Group: Framework 7
groupIcon: fas fa-lg fa-mobile comp-layout
icon: fas fa-lg fa-file-alt comp-layout 

<div class="page@@if_not_first( stacked)@@" id="@@id@@" data-name="@@id@@">
  <div class="page-content"></div>
</div>

Properties

Name Attribute Type Default Description
ID id text
Name data-name text Enter the Page name used for identification and linking
Path path text Enter the Page path to be used in routing
Stacked boolean false Check when using Stacked Pages. This means that the page will be stacked and hidden initially
With Sub Navbar boolean false Check if you want to show the Sub Navbar on this page
No Navbar boolean false
No Toolbar boolean false
No Swipe Back boolean false
Theme Colors colorlist
Layout colorlist

View
<dmx-f7-5-view>

License: Basic
Group: Framework 7
groupIcon: fas fa-lg fa-mobile comp-layout
icon: fas fa-lg fa-eye comp-layout 

<div id="@@id@@" class="view@@if_first( view-main)@@">
  <div class="page">
    <div class="page-content"></div>
  </div>
</div>

Properties

Name Attribute Type Default Description
ID id text
Main View boolean false

Panel Left
<f7-5-panel-left>

Panel Right
<f7-5-panel-right>

Views
<f7-5-views>

Popup
<dmx-f7-5-popup>

License: Basic
Group: Framework 7
groupIcon: fas fa-lg fa-mobile comp-layout
icon: fas fa-lg fa-window-restore comp-layout 

<div id="@@id@@" class="popup">
  <div class="view navbar-fixed">
    <div class="pages navbar-through toolbar-through">
      <div class="page">
        <div class="navbar">
          <div class="navbar-bg"></div>
          <div class="navbar-inner">
            <div class="center">Popup Title</div>
            <div class="right"><a href="#" class="link popup-close">Done</a></div>
          </div>
        </div>
        <div class="page-content">
          <div class="block"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Properties

Name Attribute Type Default Description
ID id text
Close On Escape close-on-escape boolean false
Swipe To Close swipe-to-close boolean false
Opened opened boolean false
Tablet Fullscreen boolean false

Popover
<f7-5-popover>

Template
<f7-5-content-page-template>

Content Page
<f7-5-content-page>

Single View
<f7-5-single-view>

Tabbed Views
<f7-5-tabbed-views>

Appbar
<f7-5-appbar>

App Root
<dmx-f7-5-root>

License: Basic
Group: Framework 7
groupIcon: fas fa-lg fa-mobile comp-layout
icon: fas fa-lg fa-cube comp-layout 

<div id="app" is="dmx-f7-app"></div>

Properties

Name Attribute Type Default Description
ID id text
Name name text
Version version text
Theme theme droplist
Theme Colors colorlist
Layout colorlist
Auto Dark Theme auto-dark-theme boolean false

Pages with Navbar and Toolbar
<f7-5-root-with-main>

Login Screen Page
<f7-5-login-screen-page>

Login Screen
<dmx-f7-5-login-screen>

License: Basic
Group: Framework 7
groupIcon: fas fa-lg fa-mobile comp-layout
icon: fas fa-lg fa-sign-in-alt comp-layout 

<div class="login-screen" id="@@id@@">
  <div id="@@id@@_page" data-name="@@id@@_page" class="page login-screen-page">
    <div class="page-content login-screen-content">
      <div class="login-screen-title">My App</div>
      <form>
        <div class="list">
          <ul>
            <li class="item-content item-input">
              <div class="item-inner">
                <div class="item-title item-label">Username</div>
                <div class="item-input">
                  <input type="text" name="username" placeholder="Username">
                </div>
              </div>
            </li>
            <li class="item-content item-input">
              <div class="item-inner">
                <div class="item-title item-label">Password</div>
                <div class="item-input">
                  <input type="password" name="password" placeholder="Password">
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="list">
          <ul>
            <li><a href="#" class="item-link list-button">Sign In</a></li>
          </ul>
          <div class="block-footer">
            <p>Some text about login information.</p>
            <p><a href="#" class="login-screen-close">Close Login Screen</a></p>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

Properties

Name Attribute Type Default Description
ID id text
Start with App boolean false

Page Content
<f7-5-page-content-login-screen>

Login Screen Title
<f7-5-login-screen-title>

List View - Full Layout
<f7-1-tmpl-list-view-full>

Simple List
<f7-2-tmpl-simple-list>

Links List
<f7-2-tmpl-links-list>

List With Icons
<f7-2-tmpl-list-with-icons>

Links List With Icons
<f7-2-tmpl-links-list-with-icons>

Links List With Header and Footer
<f7-2-tmpl-links-list-with-header-footer>

Links List Without Icons
<f7-2-tmpl-links-list-without-icons>

Grouped List With Sticky Titles
<f7-2-tmpl-list-grouped-sticky>

Links List With Icons
<f7-5-tmpl-links-list-with-icons>

List With Icons
<f7-5-tmpl-list-with-icons>

Links List With Header and Footer
<f7-5-tmpl-links-list-with-header-footer>

Links List Without Icons
<f7-5-tmpl-links-list-without-icons>

Grouped List With Sticky Titles
<f7-5-tmpl-list-grouped-sticky>

Simple List
<f7-5-tmpl-simple-list>

Links List
<f7-5-tmpl-links-list>

Framework 7 Actions Modal
<dmx-f7-5-actions-modal>

License: Basic
Group: Framework 7
groupIcon: fas fa-lg fa-mobile comp-layout
icon: fad fa-lg fa-window-restore color-yellow 

<div is="dmx-f7-actions-modal" id="@@id@@"></div>

Properties

Name Attribute Type Default Description
ID id text
Close By Outside Click close-by-outside-click boolean false
Close On Escape close-on-escape boolean false
Opened opened boolean false

Framework 7 Area Chart
<dmx-f7-5-area-chart>

License: Basic
Group: Framework 7
groupIcon: fas fa-lg fa-mobile comp-layout
icon: fad fa-lg fa-chart-area color-yellow 

<div is="dmx-f7-area-chart" id="@@id@@"></div>

Properties

Name Attribute Type Default Description
ID id text
Width width text 640
Height height text 320
Line Chart line-chart boolean false
Axis axis boolean false
Tooltip tooltip boolean false
Legend legend boolean false
Toggle Datasets toggle-datasets boolean false
Max Axis Labels max-axis-labels text 8
Data Source datasets text
Values datasets:values text
Color datasets:color text
Label datasets:label text

Framework 7 Gauge
<dmx-f7-5-gauge>

License: Basic
Group: Framework 7
groupIcon: fas fa-lg fa-mobile comp-layout
icon: fad fa-lg fa-tachometer-alt color-yellow 

<div is="dmx-f7-gauge" id="@@id@@"></div>

Properties

Name Attribute Type Default Description
ID id text
Type type droplist
Value value text 0
Size size text 200
Bg Color bg-color css_color transparent
Bg color border-bg-color css_color
Color border-color css_color
Width border-width text
Text value-text text
Text color value-text-color css_color
Font size value-font-size text
Font weight value-font-weight text
Text label-text text
Text color label-text-color css_color
Font size label-font-size text
Font weight label-font-weight text

Framework 7 Messages
<dmx-f7-5-messages>

License: Basic
Group: Framework 7
groupIcon: fas fa-lg fa-mobile comp-layout
icon: fad fa-lg fa-comment-alt-lines color-yellow 

<div is="dmx-f7-messages" id="@@id@@"></div>

Properties

Name Attribute Type Default Description
ID id text
New Messages First new-messages-first boolean false

Framework 7 Notification
<dmx-f7-5-notification>

License: Basic
Group: Framework 7
groupIcon: fas fa-lg fa-mobile comp-layout
icon: fad fa-lg fa-comment-alt-exclamation color-yellow 

<div is="dmx-f7-notification" id="@@id@@"></div>

Properties

Name Attribute Type Default Description
ID id text
Icon icon text
Title title text
Title Right Text title-right-text text
Subtitle subtitle text
Text text text
Close Button close-button boolean false
Close Timeout close-timeout text
Close On Click close-on-click boolean false
Swipe To Close swipe-to-close boolean true
Css Class css-class text
Opened opened boolean false

Framework 7 Photo Browser
<dmx-f7-5-photo-browser>

License: Basic
Group: Framework 7
groupIcon: fas fa-lg fa-mobile comp-layout
icon: fad fa-lg fa-images color-yellow 

<div is="dmx-f7-photo-browser" id="@@id@@"></div>

Properties

Name Attribute Type Default Description
ID id text
Exposition exposition boolean true
Exposition Hide Captions exposition-hide-captions boolean false
Swipe To Close swipe-to-close boolean true
Popup Push popup-push boolean false
Routable Modals routable-modals boolean false
Url url text photos/
Type type droplist
Theme theme droplist
Captions Theme captions-theme text
Navbar navbar boolean true
Toolbar toolbar boolean true
Page Back Link Text page-back-link-text text Back
Page Close Link Text page-close-link-text text Close
Navbar Show Count navbar-show-count boolean
Navbar Of Text navbar-of-text text of
Icons Color icons-color css_color

Framework 7 Pie Chart
<dmx-f7-5-pie-chart>

License: Basic
Group: Framework 7
groupIcon: fas fa-lg fa-mobile comp-layout
icon: fad fa-lg fa-chart-pie color-yellow 

<div is="dmx-f7-pie-chart" id="@@id@@"></div>

Properties

Name Attribute Type Default Description
ID id text
Size size text 320
Tooltip tooltip boolean false
Data Source datasets text
Value datasets:value text
Color datasets:color text
Label datasets:label text

Framework 7 Progressbar
<dmx-f7-5-progressbar>

License: Basic
Group: Framework 7
groupIcon: fas fa-lg fa-mobile comp-layout
icon: fad fa-lg fa-spinner color-yellow 

<div is="dmx-f7-progressbar" id="@@id@@"></div>

Properties

Name Attribute Type Default Description
ID id text
Progress progress text
Color color droplist
Hidden hidden boolean false

Framework 7 Range
<dmx-f7-5-range>

License: Basic
Group: Framework 7
groupIcon: fas fa-lg fa-mobile comp-layout
icon: fad fa-lg fa-sliders-h-square color-yellow 

<div is="dmx-f7-range" id="@@id@@"></div>

Properties

Name Attribute Type Default Description
ID id text
Value value text
Min min text 0
Max max text 100
Step step text 1
Label label boolean false
No Draggable Bar no-draggable-bar boolean false
Vertical vertical boolean false
Vertical Reversed vertical-reversed boolean false
Scale scale boolean false
Scale Steps scale-steps text 5
Scale Sub Steps scale-sub-steps text 0

Framework 7 Range Dual
<dmx-f7-5-range-dual>

License: Basic
Group: Framework 7
groupIcon: fas fa-lg fa-mobile comp-layout
icon: fad fa-lg fa-sliders-h-square color-yellow 

<div is="dmx-f7-range-dual" id="@@id@@"></div>

Properties

Name Attribute Type Default Description
ID id text
Start value-start text
End value-end text

Framework 7 Toggle
<dmx-f7-5-toggle>

License: Basic
Group: Framework 7
groupIcon: fas fa-lg fa-mobile comp-layout
icon: fad fa-lg fa-toggle-on color-yellow 

<div is="dmx-f7-toggle" id="@@id@@"></div>

Properties

Name Attribute Type Default Description
ID id text
Checked checked boolean false