Features Download Pricing Docs Community Blog

Account

Getting Started

Purchasing a Wappler License
Wappler's User Interface
Wappler Shortcut Keys
App Connect Introduction
Bootstrap 4 Integration
Accessing the DOM Tree
Using the Design Panel
Using the CSS Styles Panel
Migrating Dreamweaver Site Definitions into Wappler
Using Dynamic Attributes - Part 1: Disabling Confirm Password Field
Using Dynamic Attributes - Part 2: Showing Elements Based on Condition
Using Dynamic Attributes - Part 3: Toggling Class Based on Condition

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

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

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

Server-side Components

Connecting to a Database
Creating Database Queries
Creating Custom SQL Queries
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 Problems

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

Security and Login

Setting Site Security Settings
Login - Create a Working User Login Page
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

Cookies, Sessions and Local Storage

Using Cookie to Show Modal Once
Passing Values Between your Pages
Working with Arrays

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

Routing and URL Rewrite

URL Rewriting with Wappler
Creating Single Page Apps (SPA)

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

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

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