Features Pricing Docs Community Blog Account

Introduction to Wappler

Wappler's User Interface

Getting Started

Purchasing a Wappler License
Download and Install Wappler
Wappler Shortcut Keys
App Connect Introduction
Bootstrap Integration
Using the File Manager
Using the Design Panel
Using the CSS Styles Panel
Accessing the DOM Tree
Migrating Dreamweaver Site Definitions into Wappler
Setting Up a Lightweight Dev Environment with NodeJS and SQLite

Project Manager

Creating a New Local Project
Switching between Projects
Removing Projects
Setting up FTP Connection
Creating a Wappler project based on existing Git Repository
Using Wappler Extensions Channels for Beta Testing
How to Reset Your Project Default Frameworks

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
Defining and Using URL Parameters
Formatting Dynamic Data for Client Side Display
Using Font Awesome
Using Font Awesome 5 Pro
Show or Hide Elements Conditionally
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 App Connect with JavaScript Functions

Bootstrap 4 Visual Designer

https://community.wappler.io/t/bootstrap-4-layout-basics/2905
https://community.wappler.io/t/creating-a-navbar/2904
https://community.wappler.io/t/bootstrap-4-cards/2903
https://community.wappler.io/t/bootstrap-4-forms/2902
https://community.wappler.io/t/bootstrap-4-modals/2901
https://community.wappler.io/t/using-bootstrap-source-files/7582
https://community.wappler.io/t/navigation-align-options/4523
https://community.wappler.io/t/theme-manager/19557
https://community.wappler.io/t/theme-manager-advanced-options/20111
https://community.wappler.io/t/using-bootstrap-4-with-custom-paths/23611
https://community.wappler.io/t/converting-bootstrap-4-pages-to-bootstrap-5/28896
https://community.wappler.io/t/using-the-theme-manager-with-bootstrap-5/28897
https://community.wappler.io/t/creating-a-bootstrap-5-navbar/38163
https://community.wappler.io/t/using-bootstrap-5-placeholders/39764

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
App Connect Calendar Dynamic Events
Using Summernote WYSIWYG Editor
Introduction to App Connect Flow
Creating Offcanvas Sidebar with Bootstrap 5
Using the Toggle Component
Using the Tagify Component
Custom Content for Tagify Lists
Inserting Tagify Values into a Database
Using Tagify with Multi Reference

Server-side Components

Connecting to a Database
Creating Database Queries
Creating Custom SQL Queries
Database Single Query
Using Nested Queries with the Database Query Builder
Advanced Multi Level Nested Queries with the Database Query Builder
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 Detail Component
Loop Through Database Records with the Data Iterator Component
Insert Database Record
Get Inserted Record ID
Sending a Value for Unchecked Checkbox on Database Insert / Update
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
Generating an unique UUID identifier
Using Set Value in Server Connect
Creating Reusable Actions with Server Connect Library
Using Globals in Server Connect
Join Results of 2 Data Collections
Using Data Transformations 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
Using OAuth2 Connector with Facebook

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
Creating a Shopping Cart with the Data Store Component

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
Mobile Apps: Routing with Bootstrap

Routing and URL Rewrite

URL Rewriting with Wappler
Creating Single Page Apps (SPA)

Ecommerce

Getting Started with Stripe Integration in Wappler
Getting Started with Stripe Webhooks
Stripe Checkout with Custom Products
Stripe Subscriptions
Stripe Custom Checkout Forms
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
Git Powers - Going back in time
Connecting to GitHub, Gitlab or BitBucket
Creating a Wappler project based on existing Git Repository

NodeJS

Node.js Integration in Wappler
Creating template based pages and layout in Wappler with NodeJS
Building SPA pages with NodeJS
Using Partials with NodeJS
Sever Side Rendering with NodeJS
Using Server Connect Data for Server Side Rendering in NodeJS
Applying Security to your NodeJS pages
Creating a NodeJS project with Docker
NodeJS FTP deploy on shared hosting with Plesk and cPanel
Realtime Data Update with NodeJS and WebSockets
WebSockets - Realtime Messaging
Building a Real Time Chat Application

Database Manager

Creating Database Connections with the Database Manager
Creating Database Relations with the Database Manager
Editing Database Data with the new Database Manager
Creating Sub Tables with Database Manager
Using Multi References in the 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
Setup AWS hosting with Docker
Setup S3 on AWS
Setup S3 on Digital Ocean Spaces
Using S3 Connector
Roll your own PaaS - Heroku alternative (Part 1)
Roll your own PaaS - Heroku alternative (Part 2)
Setup AWS hosting with Docker
Using App Connect S3 Upload

Bootstrap 4 Docs

Discuss

Bootstrap 4 & 5 Visual Designer

Get started with Bootstrap, the world’s most popular front-end framework for building responsive, mobile-first sites.

Bootstrap 4 Docs

https://community.wappler.io/t/bootstrap-4-layout-basics/2905
https://community.wappler.io/t/creating-a-navbar/2904
https://community.wappler.io/t/bootstrap-4-cards/2903
https://community.wappler.io/t/bootstrap-4-forms/2902
https://community.wappler.io/t/bootstrap-4-modals/2901
https://community.wappler.io/t/using-bootstrap-source-files/7582
https://community.wappler.io/t/navigation-align-options/4523
https://community.wappler.io/t/theme-manager/19557
https://community.wappler.io/t/theme-manager-advanced-options/20111
https://community.wappler.io/t/using-bootstrap-4-with-custom-paths/23611
https://community.wappler.io/t/converting-bootstrap-4-pages-to-bootstrap-5/28896
https://community.wappler.io/t/using-the-theme-manager-with-bootstrap-5/28897
https://community.wappler.io/t/creating-a-bootstrap-5-navbar/38163
https://community.wappler.io/t/using-bootstrap-5-placeholders/39764