Features Download Pricing Docs Community Blog

Account

Introduction to Wappler

Wappler's User Interface

Getting Started

Wappler Shortcut Keys
App Connect Introduction
Bootstrap 4 Integration
Using the File Manager
Using the Design Panel
Using the CSS Styles Panel
Accessing the DOM Tree
Migrating Dreamweaver Site Definitions into Wappler
Download and Install Wappler
Purchasing a Wappler License

Project Manager

Creating a New Local Project
Switching between Projects
Removing Projects
Setting up FTP Connection

How-To Guides

Adding App Connect
Adding Bootstrap 4
Adding Project Default Frameworks
Working with Elements on your pages
Adding Class or ID
Applying Margin and Padding
Inserting Common HTML Tags
Applying Responsive Images
Drag & Drop Elements
Dynamic Attributes
Define URL Parameters
Formatting Dynamic Data for Client Side Display
Using Font Awesome
Using Font Awesome 5 Pro
Toggle any Element Visibility
Show a Message when Query Returns No Results
Show Total Number of Records from a Query
Using Shortcut Keys for Dynamic Events
Responsive Images with Lazy Load and srcset
Vertical Navigation
Sticky Navigation on Scroll
Overlaying Text on Image
Styling Bootstrap 4 Buttons
Formatting Data in Dynamic Tables
Set Table Row Background Color with Dynamic Value
Show Confirmation Popup when Deleting Records
Working with Current Date and Time
Min/Max Years Relative to the Current Year
Nested Repeat Regions
Show Disabled Button with Spinner on Form Submit
Push Footer to bottom of viewport
Using JavaScript and App Connect

Bootstrap 4 Visual Designer

Bootstrap 4 Layout Basics
Creating a Navbar
Bootstrap 4 Cards
Bootstrap 4 Forms
Bootstrap 4 Modals
Using Bootstrap Source Files
Navigation Align Options
Theme Manager
Theme Manager - Advanced Options

Image Galleries and Animations

Applying a Masonry Grid
Applying a Page Preloader
Using Animations
Animation Delay Options
Using Lightbox
Responsive Slideshow
Slideshow Transitions
Swiper - Basic Options
Swiper - Responsive Options
Responsive Fullscreen Swiper
Using Lazy Load for Image on Your Page
Lazy Load with Dynamic Data
Using Placeholder Image with Lazy Load
Applying Parallax Effect to Images
Adding Background Videos
Adding Typing Animation

Front-end Components

Using the Date Range Picker with Insert and Update Record
Using Time Picker with Date Picker Component
Using Date Range Picker with Dynamic Values
Getting Started with App Connect Event Calendar
App Connect Calendar Dynamic Events
Using the Autocomplete Component
Displaying a Confirmation Dialog on Form Submit
Deleting Database Records with Confirmation
Getting Started with App Connect Event Calendar
App Connect Calendar Dynamic Events
Using Summernote WYSIWYG Editor
Introduction to App Connect Flow

Server-side Components

Connecting to a Database
Creating Database Queries
Creating Custom SQL Queries
Database Single Query
Displaying Dynamic Data on your Pages
Filtering Database Query with a Text Input
Filtering Database Query with an URL Parameter
Dynamic Select Menu
Applying Dynamic Paging
Dynamic Sortable Table
Displaying Record Details with the Data View Component
Loop Through Database Records with the Data Iterator Component
Insert Database Record
Get Inserted Record ID
Delete Database Records
Sending Form Data to Email
Filtering Database Query with Multiple Checkboxes
Dynamically Check Multiple Checkboxes
Server Side Includes (SSI)
Using Session Variables
Using Set Value in Server Connect
Debugging Server Connect Errors

Form and Data Validation

Validation - Apply Client Side Form Validation with User Feedback
Server Side Validation
Check if a Database Record Already Exists Before Inserting a New Entry
Building Multi-Column Forms
Creating Multi Steps Forms

File Management

Uploading Single File To Your Server
Adding Progress Bar to Upload Form
Inserting Uploaded File Names in a Database
Uploading Multiple Files To Your Server
Inserting Multiple File Names in a Database
Show Image Preview Before Upload
Listing Files From a Folder on Your Server
Resize Image and Create a Thumbnail on Upload
Using the Dropzone Component
Converting File Input to Dropzone
File Downloads with Server Connect
Custom File Downloader with Controls and Progress Bar

Security and Login

Setting Site Security Settings
Login - Create a Working User Login Page
Using Argon2 Secure Hashes
Security - Restricting Access to Your Page
Security - Secure your Server-Side data
Logout - Create a Working User Logout Button
Getting Details of the Logged In User and Binding them to your page
Logged User Session Name
Password Reset Functionality: Part 1
Password Reset Functionality: Part 2
Register New User and Auto Login on Success
Redirecting on Login Based on User Roles

Notifications and Alerts

Notifications - Adding and General Notifications Usage
Using Bootstrap 4 Toasts

Cookies, Sessions and Local Storage

Using Cookie to Show Modal Once
Passing Values Between your Pages
Working with Arrays
Creating a Cookie Consent Alert

API and JSON

Working with JSON Data
Using API Data Source
Data Types and Binding
Caching API Data
API Connector components, how to use and connect REST/Curl API's

Mobile Apps

Framework 7 - Setup a new Mobile Project
Framework 7 - Including the Framework on your Mobile App
Apache Cordova Builder - Add or Remove Mobile App Building Platforms
Apache Cordova Builder - System Checking Procedure
Creating Desktop Apps
Using Dynamic Data in Desktop and Mobile Apps

Routing and URL Rewrite

URL Rewriting with Wappler
Creating Single Page Apps (SPA)

Ecommerce

Stripe Integration Part 1 - Customer Creation
Stripe Integration Part 2 - Listing Customers
Stripe Integration Part 3 - retrieving a customer object
Stripe Integration Part 4a - The basic Payment Action - App Connect Page
Stripe Integration Part 4b - The Basic Payment Action - Server Connect Page
Stripe Integration Part 5 - Adding shipping Details to your checkout
Introduction to custom checkout module

Git and Version Control

Version Control with Git
Git Branches
Git Remote Repositories

NodeJS

Node.js Integration in Wappler
Creating template based pages and layout in Wappler with NodeJS
Using Partials with NodeJS
Sever Side Rendering with NodeJS
Applying Security to your NodeJS pages
Creating a NodeJS project with Docker
NodeJS FTP deploy on shared hosting with Plesk and cPanel

Database Manager

Creating Database Connections with the Database Manager
Creating Database Relations with the Database Manager
Editing Database Data with the new Database Manager

Hosting and Cloud Platforms

Free Google Firebase Hosting in Wappler!
Deploying your Web Sites/Apps to Heroku
Ultra fast web development with Docker in Wappler
Web Development with Docker Part 2, Databases and Terminals
Web Development with Docker part 3: Deploy to Remote Hosts
Docker Part 4 - Deploy in Seconds to the Cloud with Docker Machines

Front-End Components Docs

Discuss

About the Front-End Components category

Here you will find the documentation and tutorials for the Front-End components available in Wappler.

Front-End Components Docs

Using the Date Range Picker with Insert and Update Record
Using Time Picker with Date Picker Component
Using Date Range Picker with Dynamic Values
Getting Started with App Connect Event Calendar
App Connect Calendar Dynamic Events
Using the Autocomplete Component
Displaying a Confirmation Dialog on Form Submit
Deleting Database Records with Confirmation
Getting Started with App Connect Event Calendar
App Connect Calendar Dynamic Events
Using Summernote WYSIWYG Editor
Introduction to App Connect Flow