Step-by-step tutorials for common Wappler tasks - from adding elements and styling pages to working with responsive images, dynamic data, and navigation.
Project Setup & Frameworks
- App Connect: Adding App Connect on Your Pages
- Default Frameworks: Adding Project Default Frameworks
Visual Tooling
- Expression Builder: Using the New Visual Expression Builder
Working with Elements
- Working with Elements: Working with Elements on your pages
- Class & ID: Adding Class or ID
- Spacing (Margin & Padding): Applying Margin and Padding
- HTML Tags: Inserting Common HTML Tags
- Responsive Images: Applying Responsive Images
- Lazy Load Images: Responsive Images with srcset
- Drag & Drop: Drag & Drop Elements
- Image Text Overlay: Overlaying Text on Image
- Button Styling: Styling Bootstrap 4 Buttons
- Vertical Navigation: Vertical Navigation
- Sticky Navigation: Sticky Navigation on Scroll
- Sticky Footer: Push Footer to bottom of viewport
Dynamic Data & Attributes
- Dynamic Attributes: Dynamic Attributes
- URL Parameters: Defining and Using URL Parameters
- Format Dynamic Data: Formatting Dynamic Data for Client Side Display
- Table Data Formatting: Formatting Data in Dynamic Tables
- Dynamic Row Styling: Set Table Row Background Color with Dynamic Value
- Nested Repeats: Nested Repeat Regions
- Date & Time: Working with Current Date and Time
- Year Limits: Set dynamic mix and max years in Date Picker
Conditional Display & Events
- Conditional Visibility: Show or Hide Elements Conditionally
- Empty Query Message: Show a Message when Query Returns No Results
- Record Count: Show Total Number of Records from a Query
- Delete Confirmation: Show Confirmation Popup when Deleting Records
- Dynamic Shortcut Keys: Using Shortcut Keys for Dynamic Events
- Submit Spinner: Show Disabled Button with Spinner on Form Submit
Icons & Styling
- Font Awesome: Using Font Awesome
- Font Awesome Pro: Using Font Awesome 5 Pro
Advanced
- App Connect + JS: Using App Connect with JavaScript Functions
- Web and Database Server Outputs: Debugging Made Easy: Understanding Web and Database Server Outputs
- Network & Live Data Panels: Debugging Server-side Errors and Inspecting App Connect Components Data