Features Pricing Docs Community Blog Account

Introduction to Wappler

Wappler's User Interface
Resources and Tips for Beginners to Wappler

Getting Started

Purchasing a Wappler License
Download and Install Wappler
Introducing Wappler Wallet
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 & 5 Visual Designer

Bootstrap Layout
Bootstrap Typography and Text
Creating a Navbar
Bootstrap Cards
Creating Offcanvas Sidebar with Bootstrap 5
Bootstrap 4 Forms
Bootstrap 4 Modals
Using Bootstrap Source Files
Navigation Align Options
Theme Manager
Theme Manager - Advanced Options
Using Bootstrap with Custom Paths
Converting Bootstrap 4 pages to Bootstrap 5
Using the Theme Manager with Bootstrap 5
Creating a Bootstrap 5 Navbar
Using Bootstrap 5 Placeholders
Bootstrap 4 Layout Basics
Bootstrap 4 Cards

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
Adding Transitions to page elements

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
Using the Toggle Component
Using the Tagify Component
Custom Content for Tagify Lists
Inserting Tagify Values into a Database
Using Tagify with Multi References
Tagify - Creating New Tags and Storing them in the Database

Server-side Components

Debugging Server Connect Errors
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
Working with Server Connect Array List

Form and Data Validation

Validation - Apply Client Side Form Validation with User Feedback
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
File Downloads with Server Connect
Custom File Downloader with Controls and Progress Bar

Security and Login

Setting up 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
Using OAuth2 Connector with Google

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

Setting Up a Mobile Project with Capacitor
Framework 7 - Including the Framework on your Mobile App
Creating Desktop Apps
Using Dynamic Data in Desktop and Mobile Apps
Mobile Apps: Routing with Bootstrap
Using Local Databases in Mobile and Desktop apps
Using Capacitor Camera Plugin

Routing and URL Rewrite

URL Rewriting with Wappler
Creating Single Page Apps (SPA)

Ecommerce

Getting Started with Stripe Integration in Wappler
Stripe Elements Overview
Creating a Stripe Buy Button
Creating Stripe Pricing Tables
Using Stripe Embedded Checkout
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

Managing Cloud Servers with Resource Manager
Using a Single Local Database Server for all Your Projects
Using Managed Databases with the Resource Manager
Managing SSH Keys with Resource Manager
Use SSH for Remote Docker Targets
Installing Shared Services on Remote Servers
Installing and Using Redis for Multiple Projects
Free Google Firebase Hosting in Wappler!
Deploying your Web Sites/Apps to Heroku
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
Using Elastic IP with Amazon AWS
Remote File Manager for Docker
Connecting existing servers in Wappler for docker deployments
Creating a Free Server with Oracle Cloud Always Free

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
App Connect Calendar Dynamic Events
Using Summernote WYSIWYG Editor
Introduction to App Connect Flow
Using the Toggle Component
Using the Tagify Component
Custom Content for Tagify Lists
Inserting Tagify Values into a Database
Using Tagify with Multi References
Tagify - Creating New Tags and Storing them in the Database