Docs

Welcome to Wappler documentation. Here you can find everything you need to know about the app, its features and how to use them. Please refer to this guide for downloading, installing, and using Wappl…

When it comes to Mobile App development, Wappler has all the built in tools to get you started quickly, so lets start with a System Check! To ensure the smoothest operation when publishing your great …

Wappler places unlimited Mobile App building platforms at your fingertips, including the most popular iOS and Android. With Apache Cordova Builder you can select what platform to build your app for, w…

All the features of Framework 7 directly accessed through you favourite visual app design tool, Done the Wappler way! To begin creating amazing mobile apps visually in Wappler using Framework 7 compo…

Wappler makes it easy to begin your new Mobile Project by offering you an easy setup option to help you on your way to an exciting new Mobile App. Follow the steps outlined below and you will have yo…

Using the Alerts, Notifications component for page visitor event feedback We will show you how to display a notification when a form added on your page is completed and submitted successfully and tri…

Check the data in your Database before inserting possible duplicate data Using server-side data validation from server connect you can check if a record already exists in the database. This is useful …

You can validate your forms on the server-side if you need stronger security. First create a server action, which will use your form and click Globals: In the linked page field browse to your page…

Form validation options to offer client side user feedback on your form inputs You can validate your form fields using the validation options available in the properties panel, as well as add multiple…

Personalise your clients browsing experience by knowing who they are. You can get the logged in user details by filtering the user table in your database, by the logged user ID. This gives you access…

Wappler makes Logging out users a simple step by step process In order to log users out you need to create a server action and link it to a Log Out button, when your button is clicked it performs all…

Wappler knows how important and sensitive server data can be and provides simple setup to ensure it can not be accessed by unauthorised users Using the security provider tools you can secure your ser…

Wappler helps you easily restrict access to your pages and redirect users with insufficient privileges After you created your login page, now you will learn how to restrict access to your pages. If …

Wappler makes creating a Login page with a Login form simple and secure. Having a Login page is an important part of any website, we strive to make the process completely secure using the most robus…

Using the Security Provider you can define the security settings for the whole project and reuse them on all of your pages. We will go through each of the available options - from single user to dat…

You can easily debug issues related to server-side processing such as - form not sending email, record not inserting or updating, query not showing data etc. The first thing you need to do is to open…

You can send form data to email thanks to the mailer component integrated in Wappler. This is useful for contact forms, inquiry forms, reservation forms or any other form which data needs to be sent t…

You can use JSON files on your server as a data source for your pages. First in app structure select App and add new component: Open Data: And select JSON Data Source: In the properties pane…

You can delete database records using the built in Delete Database step in server connect. We will add a delete button to an existing repeat region, which shows the records on our page - so when click…

There are some cases where you need to get the inserted record ID, for example - use it in another insert step, filter a query, update some data in another table etc. In our example we will show you …

Creating an insert record form with Wappler is an easy task as Wappler generates the form for you. The first thing you need to do is to create a server action, so open the Server Connect panel: Th…

It is very common in web development that you reuse a component on different pages, so that when you change something it is being updated everywhere. In Wappler you can create and re-use server side i…

With Wappler you can create responsive, sortable data tables. First, you need to create a server action which contains a database query which will be used as a data source. In App connect panel add n…

You can add paging to your dynamic data, using the paging generator included in Wappler. First, you need to create a server action: And add a name for it. We call it - records_paged: Right clic…

Creating a dynamic select menu is really easy with Wappler. First you just need to create a server action, which pulls the dynamic action from your database. After you create the query open the App …

If you don’t know how to define an URL parameter on your page, please check this tutorial as you will need this later. First, we need to create a server action. Open the server connect panel and clic…

You can create a real-time search with Wappler - so the results will be filtered as you type! We created a database query and displayed the results on our page. You already know how to create a datab…

There are different data format options, which you can use to format different data types on your page. The format options depend on the data type - text, numbers, dates etc. In order to format a dyn…

Sometimes you need to do a completely clean install of Wappler. You won’t be losing anything as Wappler is fully self containing and also your project preferences are stored in the project folders. Y…

After you created your database query let’s bind the data on your page. First you need to add the server action containing your database query to your page. Select App in the App Structure and click …

After you created your Database Connection, now it's time to setup a Database Query. The first thing we need to do is to create a new API Action (also known as Server Action). The API Actions are l…

Wappler’s powerful visual server-side tools allow you to easily connect to your Database in a few clicks. Before you create your databse connection, make sure to setup the target(s) for your projec…

You know it can be a real problem to create a layout based on columns when you are using elements with different heights in each row. You can see that the elements are not properly aligned. This is w…

You can add a preloader to your page while the page content is still loading. It can be used on both static sites and sites using dynamic data. For example it is really useful for large data sets: …

With Wappler you can apply different animation effects to any of the elements on the page. There are two types of anymations included - inview (or onscroll) animations, and enter/leave animations. T…

You can show images and videos hosted on your server in a Lightbox. We added App Connect and Bootstrap 4 on our page, so let’s add the lightbox component on the page as well: Click the add new compon…

App Connect Slideshow includes two sets of transitions, which can be applied to your images - 2D transitions and 3D transitions. they can be applied to the whole slideshow or you can set specific tran…

We included App Connect and Bootstrap 4 on our page. Then we created a really simple page layout and we are going to insert it inside a Bootstrap 4 column. The App Connect Slideshow is a responsive sl…

The first thing you need to do is to create the modal on your page. Right click App in the App Structure tree and open the modals category: Then select Modal: In order to be able to see the moda…

You can quickly design your forms using Bootstrap 4 tools integrated in Wappler. In order to create a form first select where to insert it, in our example this is inside a Bootstrap 4 column: Open …

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. We will show…

There are two ways of setting up a Bootstrap 4 Navbar on your page. Using the predefined navbar templates. Click the add button in Design View: Open the Headers category: You will find the dif…

Open your HTML file, and add App Connect and Bootstrap 4 frameworks to your page. Please check the How To Guide of the documentation to see how to include them. First, let’s add a container. Containe…

As your Wappler project list grows, you may have the need to remove older projects. Please keep in mind that it is very easy to open a removed project from Wappler should you have the need to work on …

Once you are working with multiple projects within Wappler you may have the need to quickly switch from one project to another. Just click the project name at the top of Wappler window and the projec…

Wappler has a powerful project manager allowing you to get started with designing your new website as quickly as possible, from either a blank page to an existing template that might suit your needs. …

In order to insert common HTML Tags, such as div, span, article, aside etc. you need to switch to DOM Tree panel as App Structure panel is used to display only components. We will show you how add a s…

You can drag any of the elements inside App Structure. Just select the element you want to move and start dragging it in the tree: When the element which you are dragging cannot to be placed at spe…

Dynamic attributes in Wappler give you powerful option for dynamically binding attributes like - image sources, href attributes, names, input values etc., as well as show/hide or disable elements on t…

Intro With Wappler you can access the values of your URL Parameters. For example you can access and use the value of myparam from the following URL: https://mysite.com/page.html?myparam=123 Definin…

Adding responsive images in your Bootstrap 4 layout is another easy thing to do with Wappler. First, select the element you want to insert image into, and click the add inside button (1): Click th…

You can add margin or padding to any element in your Bootstrap 4 pages. Start by selecting the element (1) and scroll in the properties inspector to the Spacing options: Add the required margin or…

You can add classes or IDs to your elements, using the properties inspector. Just select your element either in Design View (1) or in App Structure (2) and add the ID (3) and Classes (4) you need in t…

Deleting an element is really easy. Select the element in Design View and click the delete icon (1):    

In order to duplicate an existing element on the page, just select it and click the duplicate icon (1): This duplicates the element immediately and you customize it as needed. You can see the dupli…

Learn how to add, delete or duplicate elements on your page Add Elements to the Page Adding elements to your pages is a matter of couple of clicks. Starting with a blank new page, just click the blu…

Adding the Bootstrap 4 framework to all your pages. The Bootstrap 4 framework was created with rapid development and ease in mind, Wappler takes this concept to the next level by giving you the full B…

App Connect Introduction App Connect is a high performance front-end framework just as powerful as React, Angular and VueJS. App Connect however is much easier to use due to it’s custom component str…

In this short Wappler tutorial we will show you how to export all your site definitions from Dreamweaver so they can be imported directly into Wappler. Your imported Dreamweaver site definitions will …

Unlimited power to users that might need access to additional attributes and properties Use the DOM Tree to explore the full structure of your pages. Selecting an item in the DOM structure will allow …

CSS Styles visual editor with instant preview functionality for rapid design. Wappler has multiple ways to style your pages. From the App Structure properties panel using the built in pre-configured B…

Wappler's full potential is realised when we begin using Dynamic Data, Events, and Attributes. For this tutorial we have a form, where users enter their details. We'd like to apply dynamic attributes …

Dynamically show/hide HTML and Bootstrap 4 elements based on Events We'd like to hide the personal details container when the user has not agreed to the terms and conditions by selecting the checkbox.…

In this tutorial, we will toggle a class when a field value is not valid, and we will also show a message to the user. First, select the email field (1). This field type is set to email (2). This way…

In this tutorial, we’re going to look at how to bind dynamic values to your form inputs using App Connect with Wappler. On our form, we have three inputs: An input field (1), a text area (2), and a …

List of shortcut keys used in Wappler As we develop our weekly updates we will continue to keep this list updated, so check back regularly. General Action Windows MacOS Linux New File CTRL N …

When you setup a log in system, a session is being created by the log in script and it contains the logged user identity. This session and its value can be accessed by any other script by calling it (…

In Server Connect you can define, use and re-use Session Variables. Once you define your session variables, they become available to choose in the dynamic data picker. Defining a session variable is …

This was implemented in DW version but the same goes for Wappler. We insert user in the database (when he subscribes). We get current user’s data. We create a repeat using the query created in step …

If you are using radio buttons or checkboxes in an update record form, or a details page you can easily check the active ones depending on a dynamic value. This is done thanks to the radio group and c…

In this tutorial we will show you the basics of API Data Source. We are going to connect to the popular Unsplash API to retrieve the latest photos in a nice masonry layout. This API requires an api k…

Sometimes data APIs have restrictions like limits for requests per IP or hourly request limits. In cases like these, it’s useful to have data cached for your user. You can do this by using the state m…

When you have a rich data to bind, specially one retrieved from complex APIs with the API Data Source, it is good to understand the structure of the data. Your Data Structure When you call the Data …

The Swiper component in Wappler is a modern, touch-friendly slider which can be used with any content. It includes different options like 2D and 3D transitions, parallax effects, touch interactions, d…

Wappler offers support for Font Awesome 4 and Font Awesome 5. In this tutorial you will learn how to add and use Font Awesome on your pages. Adding the Font Awesome framework Font Awesome is availab…

If you purchased a license for Font Awesome 5 Pro, there are two ways of using it. Font Awesome 5 Pro from CDN First you need to authorize your domain to use the purchased Pro license. You can do thi…

With the API Connector in Wappler, you have gained a lot of power to directly connect to API’s and fetch data or call their actions. The API Connector is based on three components: API Data Source A…

If you want to show modal only on first load, or only once then cookies are the way to go. We added App Connect and Bootstrap 4 frameworks on our page. First let’s setup the cookies. Right click App(…

You can use multiple checkboxes in order to filter your database queries. In our example we already created a server action with database query which shows the products in a dynamic table. It shows a…

In this tutorial we will show you how to check multiple checkboxes, based on a database value. This is useful if you are using an update record form, or some details page which show multiple checkboxe…

In some cases your query may return no results so it is useful to be able to show a message, telling the users no results are returned. In Wappler this can be done using the dynamic show/hide attribut…

We created a page, which returns records from a database query. We want to show the total number of records in a paragraph below the table: Double click inside the paragraph, to activate the edit m…

You can customize the Swiper component to show different number of slides on different screen sizes. Also you can customize the spacing between slides. We added a Swiper with slides containing images…

With Wappler you can assign different Keyboard Keys as shortcuts for different dynamic events, like: controlling a slideshow, run server action, refresh data, update record, show modal etc. We will s…

You can upload files to your server using the server side file upload tools available in Wappler. Let’s start with the upload form. We created a simple Bootstrap 4 Layout and it contains a column, so…

Storing the uploaded file name in your database is an easy task in Server Connect. You already know HOW TO UPLOAD A FILE so this will be just an addition to it, showing how to store the uploaded file…

You already know HOW TO CREATE AN UPLOAD FORM and upload files to your server. Sometimes, for large files it is useful to have some kind of indication, that the file is uploading. The progress bar co…

Lazy Load Component offers the so called “lazy loading” for the images on your page. This means, that when your page contains many images, you don’t have to wait for the page load them initially. The …

You can use the Lazy Load Component with dynamic data. We have a dynamic masonry layout on our page, created from a database query. You can use any dynamic source of course - database, API data sourc…

In some cases, where your images are huge in size it can be useful to use an image placeholder, while the original image is loading. In this tutorial we will show you how to use a low-quality version…

You can upload multiple files to your server using the server side file upload tools available in Wappler. Let’s start with the upload form. We created a simple Bootstrap 4 Layout and it contains a c…

You already know HOW TO UPLOAD MULTIPLE FILES TO YOUR SERVER so now we are going to show you how to insert their names or URLs to a database. Open the Server Connect panel: Select your server acti…

When uploading images you can display a small preview thumbnail of the selected image. You can use this in two cases: 1. For single image upload You already know how to UPLOAD SINGLE IMAGE TO YOUR SE…

You already know HOW TO CREATE A NAVBAR and in this tutorial we will take a look at the align options for the navbar items. This also applies to the Nav element (in case you are not using a navbar, bu…

In this tutorial we will show you how to create a vertical Navigation for your site, which for example, you can place in your sidebar. We have a really simple layout - two columns, one has a width of…

In this tutorial we will show you how create a “sticky” Navbar for your site. What is a Sticky Menu? Sticky, navigation is basically a website menu that is not initially fixed on the top of the page …

You already know how to Upload an image to your server. Now we are going to extend the upload action with an image resize and crop functionality. First let’s add a validation to our file field, so it…

You can use a list of files as a data source on your page, so you can create dynamic lists and tables as well as dynamic slideshows and galleries without complicated database connections. First, open…

You can easily format the data in your dynamic tables created using the Bootstrap 4 Dynamic Table Generator. We’ve generated a table on our page: The Price column values are not formatted as curre…

You can change the table row background color, depending on a dynamic value from your database thanks to the dynamic attributes available in Wappler. In this tutorial we will show you how to use the d…

You already know how to delete database records. There are cases where you want to show users a confirmation dialog, asking them to confirm deletion. This can easily be done using Wappler static even…

In this tutorial we will show you how to create a fullscreen Swiper, similar to the one we created in THIS SHOWCASE. This will require us to add 4 lines of CSS through the Styles panel, but everythin…

In Part 1 of Password Reset Functionality we will cover the following: Creating the request new password page User email validation Generating and sending the unique password reset link to user’s em…

In Wappler there is a component called Date and Time. As its name suggests, it returns the current date and time. In this tutorial we will show you how to access it, configure and use it on your pages…

Intro Next generation front-end framework for reactive, data-driven web sites and apps App Connect is a high performance front-end framework just as powerful as React, Angular and VueJS. App Connect …

In Part 1 of Password Reset Functionality tutorial you learned how to: Create the request new password page Add user email validation Generate and send the unique password reset link to user’s email …

In this tutorial we will show you how to nest database queries. This is useful when you have two separate tables, one containing your categories and another one containing your products. You can nest …

You can create sequential animations using the delay option of the Animate component in Wappler. We added 3 images in a row on our page and we want to animate them sequentially when they enter the vi…

You can set Min and Max years for your datepicker as static values, but you can also use dynamic value relative to current year. In our example we will set the Min year to be 5 years before current y…

It’s useful to disable the submit button of your form and show a spinner inside it, to indicate the form is being submitted. This way you can prevent duplicate submissions, if a user clicks the button…

You can easily build multi-column form layout with Wappler, using the built-in Bootstrap 4 form tools. First, let’s insert the form. We add the form inside a Bootstrap 4 column. Click the Add Inside …

Sometimes you need to pass values between different pages of your site. You can easily do this in Wappler using the State Management Component. There are several ways of doing this - for example usin…

Wappler includes advanced FTP manager, which supports FTP, SFTP and FTPS. It allows you to easily connect to your FTP server and publish your files there. NOTE: If you are working locally, on a local…

As I am going through the documentation, am always receiving an Upload Failed message. Any reasoning as to why or what action is causing?

You can overlay any text over your images, using the Design Panel in Wappler. We added a Bootstrap 4 Container on our page and it contains a Row with a Column. We’d like to insert our image inside th…

Maybe this is a weird question, but is it possible to enable flashlight via Framework7 for iOS? Maybe also then Android?

Sometimes the available Bootstrap 4 button styles may not suit your page design, so you need to customize them. That can easily be done using the Design panel in Wappler. We created our page layout a…

URL Rewriting (also known as Routing) can greatly improve the usability and SEO of your site. It’s really easy to setup URL Rewriting in Wappler visually, without dealing with complicated .htaccess r…

Step 1: Create a Content Page: Step 2: Add Framework 7 to it: Step 3: Add F7 Page to it: Step 4: Page Content element is added, add more content under it as needed:

A single page application (SPA) is a website that re-renders its content in response to navigation actions like clicking a link, without reloading the whole page. It consists of main template and diff…

Design panel provides you with visual tools to style your page content. You can design for different screen sizes, which creates the required styles and media queries for the selected device. Addin…

Hi, I have added a reCaptcha v2 to my form, however, even when I have NOT clicked the reCaptcha my form still submits without showing an error. Am I supposed to add some validation also and if so,…

Creating a project with Bootstrap source files Update: Although the following will work, this video will show a much easier way to do the same: https://www.youtube.com/watch?v=85tt7KwUMLo We will as…

Here is my first part in Stripe Integration These will be a bare bones implementation and I will make the assumption that the user has basic skills in creating forms, using server connect etc I real…

The process of retreiving customers from Stripe is a relatively simple process Let us start with the server Action, list_customers The process is very simple Create an API action as below, URL is: h…

Following on from Part 2. I have made a modification to the table listing customers featured in Part 2 and made the ID field a link as below showcustomer.php?cus=cus_EirxWeBc14NKy6 Where the str…

This is a longer tutorial so i have split it into 2 parts dealing with the App connect and server Connect sides separately Most of the required code is available from the stripe APi documentation the…

Introduction We have covered the creation of the APP connect based payment page and this tutorial follows on from that to deal with the server connect and API parts of the process Before we start, i…

The Array component in Wappler allows you to store items in arrays and manage them. Here we will show you a simple example of how to use an array in order to create a tags input, where you enter tags…

Dropzone provides you with drag and drop file uploads with image previews. Adding Dropzone on your page We created a basic Bootstrap 4 Layout with a column, where we want to add the Dropzone compone…

You can convert any file field (single AND multi) in a Bootstrap 4 Form to a Dropzone. Open the page containing your Bootsrap 4 Form with a File Field: Select the file input, then click the Make D…

Introduction In Parts 4a and 4b we learned about the basics of sending an order to out checkout and collecting a Stripe Payment. This module will take this further and add shipping details to the pa…

No e-commerce tutorial can be complete without a shopping basket routine I have therefore developed a custom shopping basket based around a single Server Connect action This can be modified or used …

Welcome to Part 2 of the Custom Basket Series. The basket (empty) and product tables (few sample items) are attached as zipped .sql files at the end of this page as is the server action as a .zip f…

Introduction At last the long promised method of mass geocoding the wappler way no scripts involved. As this is basically a reply to a post from @mimuk i will base this tutorial around his data tab…

Loving the routing system, specifically the idea of a SPA, I had a go at being able to dynamically show the page Title and Meta Description tags. This is extremely important for SEO. Firstly, the rea…

This example is based on a shopping cart application using Wappler Session Storage. When the add to cart button is pressed the items are added to the storage. When the trash can is clicked, it will re…

We start with a very simple data table containing an primary key (imageid) and and image name (imagename) Each image is stored in a folder called “images1” We wish to move these images into a new …

You can apply a parallax effect to the images on your page. The parallax effect applied to each of your images can be different and there are 8 different effects you can choose from. Select your imag…

You can easily add a responsive background video to a section/container of your page. It will auto scale to fill the available space and looks nice on any device. First, select the container you want…

You can add an animated typing effect to your pages (just as on the Wappler Homepage), using the Typed Component in Wappler. It can be added as a prefix or suffix in your headings, links or paragraphs…

You can build standalone Desktop Apps with Wappler, thanks to the Electron integration. Building Desktop Apps is as easy as building a website in Wappler. Electron is a framework for creating native …

You can select default frameworks to be included on every new page you create in your project. This can be used for Web, Mobile and Desktop Projects. Selecting Default Frameworks Click on the projec…

You can use the Custom Query component in Server Connect in order to manually add a custom SQL query. You can define your own parameters, edit the schema and metadata and preview the results. Creati…

Got a long form on your website? Break it up into smaller logical sections and convert it into a multi-step form easily. In this tutorial we will show you a very basic form, but you can extend it as p…

You can add a time picker in the date picker component, so the users can select the time along with the date. Enable Time Picker First select the date/date range picker on your page: Scroll down …

I need advice on the steps how to: Load API data Auto insert the data into database Load the database I don’t want to directly use the API data as output instead I want to use my database which get…

In some cases you don’t need to show all the details of your dynamic records on the page. For example you just want to show the product name, and then when the users click the product - more informa…

Sometimes you need to redirect users on log in, based on their roles. For example admins go to one page, while regular users go to another one. This can easily be done with a condition in the Browse…

Using the Data Iterator component you can display one record at time on your page and loop through all records, using previous, next, first, last, random, or go to specific record dynamic actions. T…

The Set Value step in Server Connect can be useful in many cases. You can think of it as a variable where you can store any kind of static or dynamic values. These values can then be accessed in any o…

You can use the Date Range Picker component with insert or update record forms, and store the start and end dates of the selected range in separate database field. We added a date range picker in a …

With the Date Range Picker you can display date ranges, coming from a dynamic data source, such as a database query. This is useful for Detail Pages or Update Record pages, where you want to edit a re…

Having recently gone through the process I thought I would share my experience of how to gain a bearer token for the Amadeus API The Amadeus API generally is easy to use with primarily GET requests b…

Overview Using the OAuth2 Connector in Wappler you can add a “social login” option to your website, so the users can directly login using their Facebook account. In this tutorial we will show you h…

We will guide you trough the main UI components of Wappler. Wappler’s UI is minimal, intuitive and easy to use. It consists of several main panels, needed in your workflow. The panels can be opened …

With the File Manager integrated in Wappler you can easily explore and manage your project files and folder, located in the local project folder or on the selected target. File Manager Overview To …

With the version control options in Wappler you can create a Git repository for every Wappler project you wish to keep track on. Having a repository is great way to have a good backup of all your pr…

Branches are multiple different contexts where work happens. Each feature, bugfix, experiment. Having them separately and easily switchable will make your workflow flexible and still very controlla…

With remote Repositories you can publish your work to remotes site like GitHub, GitLab, BitBucket or Microsoft Azure DevOps Also you can use Remote Git repositories not only for version control but…

How to download Wappler? We will explain to you how to download Wappler from your profile. After you made your purchase, you can download Wappler from your account page . Navigate to the Downloa…

You can create a file download action in Server Connect, which allows you to download files from your server. You can use static or dynamic file names for the download action, so it can easily be use…

You can create a database query which returns a single record. That’s really useful in cases where you filter your data and expect a single result to be returned, like retrieving the logged in user in…

With this example, I will show how to create a footer which stays at the bottom of the viewport unless the page content pushes it further. We start with a page that contains the normal ingredients: …

With this example, I want to show a copyright notice with the year automatically adjusted. Although this is a follow on from the Push Footer to bottom of viewport tutorial, you can apply this techniqu…

You can add your own downloaders with custom controls and progress bars on your pages, using the App Connect Download Component. We created a simple page layout, containing a regular button. We wil…

The autocomplete component provides auto suggestion when entering text into a text input. This is useful when you have a dynamic list of products, countries, options etc., so you can offer your users…

What is Docker? You must have heard of Docker. This brand new technology allows you to run any application quickly and easy without any installation hustle. Docker empowers developers to quickly ru…

Hello guys i am testing out Wappler and can’t figure out the mobile app part. I created new project with blank template ,installed git & node and then waited at the screen showing Cordova Connectin…

I wanted a show/hide password field on my registration form to use up a little less space and improve user experience. We basically just change the input type from password to text when clicking on an…

If you have not read Part 1, please go here and read it first. We have included more Docker power in the latest Wappler update. Awesome single click Database backup and range of terminals and shel…

With the latest update of Wappler, we have polished our git integration based on your feedback. Now you can more easily go back in time by resetting history or just get an old version by doing che…

Welcome to this tutorial in which I will show you how to create a shopping cart using Wappler. Although I have touched on some styling features, most of the effort has gone into using Wappler’s State …

For the wCart example we will need a database with tables for Products, Users, Orders and Order Details. To make it easier for you, you can copy the following SQL for your database. I used it to cr…

A. Introduction For our example we need to create pages for Products, Cart, Checkout and Checkout Success. It is assumed that you have created a new site, which I have called wapplercart , but can be…

A. Introduction For our Server Actions we need to prepare for Users, Products and Orders. The first two are very straight forward although for our project we will not be creating the full CRUD to kee…

Introduction This is what the Products page will look like when finished. Create Products page from the Template Load the _template.html page (1), click the Menu button (2) and select Save As (…

A. Introduction This is where the fun starts. If you have not read the Introduction to this Tutorial, please do so now so that you can be acquainted with Sessions and Arrays. Continuing with our temp…

Here we will bind values to 5 hidden text inputs (pid, product, price, qty and subtotal) so that we can update our Arrays and Session when the Add to Cart button is clicked. We will put these hidden f…

If you have not read Part 2, please go here and read it first. In the latest Wappler update we have added the final piece in the Docker integration - Docker Remote Deploy! Now you can not only ful…

This is what our page will look like when we have finished: Load the _template.html page (1), click the Menu button (2) and select Save As (3) In the pop-up, give the new file a name (1), w…

With cart.html open toggle App Connect Mode (1) , select the cell containing the quantity (2) and remove any text (3) inside the cell With the Cell (1) still selected, remove the Inner Text (2…

For this part of the Tutorial, we need to be able to post the following variables to our database. For the Orders table we need ** OrderUserID ** OrderAmount ** OrderShipping For the OrderDetails…

The aim of this part of the wCart Tutorial is to finish up with a PDF/printable invoice such as Load the _template.html page (1), click the Menu button (2) and select Save As (3) In the pop…

Hi Wappler-ions, I have been struggling with this, any help would be greatly appreciated. I have attached a gif for easy reference (click on the gif to see clearly). Here is what I’m doing: Create…

If you have not read Part 3, please go here and read it first. So you have built your amazing dynamic site and you need to put it live on the internet? With Docker Machines you create your live se…

For this part of the wCart Tutorial, we will create a page that will look like Load the _template.html page (1), click the Menu button (2) and select Save As (3) In the pop-up, give the new…

Usually we store users dates of birth in our database table, in a DATE field type. You can easily calculate the age of your users, using the App Connect Data Formatter component on your page. We cre…

Scroll (or Reading) Progress Bar is a nice way to show your users how far have they scrolled on your page. In this tutorial we will create a horizontal progress bar which width changes as we scroll do…

I wanted to know whenever anyone logs into a site I’ve built as a security feature (much like Wordfence does for Wordpress sites) and it’s incredibly easy with Wappler so I thought I’d give a bit back…

I am fairly new with Wappler and am having problems implementing the stripe create customer API step from your documents step 1 eCommerce. I have created several attempts following the steps exactly …

I have followed the steps from this doc: Stripe customer integration part 1 and received this in the error log: POST /v1/customer 12/3/19, 2:01:15 PM Summary ID req_osUhhYYGb82pMs Time 12/3/19, …

In some cases it's required to read a JavaScript variable or object values and use them in App Connect. In other cases it's required to use a dynamic App Connect expression in your own custom JavaSc…

How to install and setup container with Docker and Portainer.io UI on CentOS 7. STEP 1- we update list of all package updates from repositories. sudo yum check-update STEP 2- Download script fro…

The following video was made for the user just starting out, who may need help setting up their initial WHM or cPanel account. Creating an FTP user on the server Creating an initial Database and Dat…

What was meant to be a quick video as usual was not, but this should give you a good idea of the entire creation of a user login system, encompassing Login server action - login form - unauthorised e…

Ok, just looking for a bit of direction here. I have setup the wCart from @ben on a site that didn’t require credit card authorization. It worked very well for what I needed. Now I am adding ecommm…

The Data Store component allows you to store and edit local data in a simple local storage driven database. You can use this component to create a shopping cart, favorite products list, task lists e…

What is Google Firebase Hosting We always got many questions about hosting of your web site or app. Specially for new users hosting can be scary in the beginning. There are so many options with diff…

What is App Connect Flow With App Connect Flow you can create client side workflows with actions to be executed, data to be retrieved and much more! All actions nicely executed one after another. U…

In this tutorial, I will show you how to create a Video Gallery using YouTube videos. When the Play button is clicked, the video will automatically run in a Bootstrap modal and when the modal is close…

Background When building a web app, the server side code and the front end code can easily be kept in sync by simply pushing both sets of code into production. However, with mobile apps, the front en…

I decided for my newly created Africa Collection site that I would rather get the meta tags and other SEO tags filled with my own PDO connection because certain social media platforms and schema provi…

I was receiving spam messages, which is quite an issue for my site as the email addresses from the forms get saved into the database and newsletters are sent to subscribers, so all the spam will filli…

I am getting the following error after following the password reset functionality: part 1 set_time_limit() has been disabled for security reasons Is there a work around? Regards, Dave

You can easily add a “We use cookies” notification to your website using the Cookie Manager and Alerts Component in Wappler. We will create a basic informational notification which tells your users th…

Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. You can use the Toasts component in order to show so…

Intro Using the Argon2 hashing algorithm requires a little different workflow for creating and validating the users using Security Provider. In this tutorial we will show you what’s different and ho…

You can add a Bootstrap 4 styled confirm dialog when submitting a form, using the Flow Component and Bootbox Dialogs integrated in it. This is useful in cases like for example forms with many inputs, …

You can add a Bootstrap 4 styled confirm dialog when deleting a database record, using the Flow Component and Bootbox Dialogs integrated in it. This way you can avoid accidentally deleting records. O…

App Connect Event Calendar is a full-sized event calendar with drag & drop support and lots of customization options. It allows you to add static events or use different data sources for dynamic eve…

There are multiple dynamic events available in the App Connect Calendar such as - on date click, on event click, on event drop/move and on event resize. Each of the dynamic events returns specific d…

As you know the Mobile and Desktop apps cannot run PHP/ASP/ASP.NET files, which are required to create a database connection and get data from your database. You are only allowed to use HTML files i…

Today I managed to find time to start a tutorial based on the repository The first video titled “Introduction” has now been published I will try to create each of the next parts at a rate of one …

Intro With the help of the Theme Manager you can fully customize Bootstrap 4 and 5 design as per to your needs. We have integrated a high speed Sass compiler in Wappler so fully theme compilation an…

Code Formatting When pasting code in your posts, please use the following formatting options, in order to be sure your code is readable and well formatted for the rest of the users. Inline code forma…

Summernote is a simple to configure and easy to use WYSIWYG Editor available in Wappler. You can use it to format text/content and send it to the server side for example insert/update record. Inser…

You already know how to customize the basic styles and appearance of your Bootstrap 4 theme, using the Theme Manager. This week we integrated an Advanced Mode, which allows you to customize every si…

HI guys, hope you can help me out with that connection problem. Using the same settings for API Datasource and API Action. API Datasource works great but API Action shows: Server returned code: 401 …

Hi Guys, I´ve watched all tutorials about Wappler (I think) but could not find any where is shown how to work with server side API Action to create a record in a database. Could someone help me out …

So I finally finished my i18next integration. It’s not a native integration, but you can basically copy and paste my code and it will work for you. All my i18n needs are now covered within Wappler an…

With the new Database Manager you can easily setup relations between tables. You can create a reference field and select which other table it references - the relation and foreign keys between the t…

A lot of new power comes with the new Database Manager in Wappler. You can quickly connect your project to all kind of databases you want to use in it. There is a wide range of databases that you …

Hello, I have a complex action that will trigger different server side results that I’d like to capture and display on the app connect side, to the user. If I set a value in Is it possible to capture…

Recently a Wappler user was trying to use the Amadeus API for their job and asked a few questions, here is a full guide on how I use the Amadeus API for anyone else in the travel / bookings sector tha…

One of the most anticipated features is already here! Say hello to Node.js in Wappler! Getting Started To get started we need to create a project and select Node.js as a server technology. Creata …

I have pages secured by a Security Provider Enforcer, but I’ve noticed that a session can expire (no longer technically logged in) but the page remains open and appears normal to the user. If they do …

NodeJS requires a specific setup on your hosting, which is different than the standard Linux or Windows server where you most likely upload everything in the public_html or www folder. Set Up Site …

With the new Wappler 3.0 support for NodeJS projects it is realy easy to develop and deploy them with Docker. In this guide we will show you how easy is to setup a NodeJS project with Docker in Wapp…

I thought I would just add a few little tips and tricks I have found whist working with APIs Fetch Schema: If your API provider has a million security parts you need to jump through first, or if the…

With Wappler you can easily deploy your web site and apps to Heroku with a single click. What is Heroku? Heroku is a cloud platform as a service supporting several programming languages. One of the…

When creating a website usually you want to include common elements like header/menu and a footer on all you pages. This was possible until now using SSI (server side includes) but this technique re…

I was answering a user question and it turned out more informative than planned, so I have made it a doc as I have seen many people including myself initially confused by it. This is one that has caug…

In this tutorial we will create our own Platform as a Service, similar to Heroku, but on a DigitalOcean $5/month droplet. This should be the same for most VPS providers. We will use CapRover to creat…

This is part two of the Roll your own PaaS tutorial. Part 1 - Create a Droplet (VPS) Part 2 - Install & Configure CapRover 1. Setup CapRover Now that most of the hard work is done and we have…

The easiest way to integrate with Stripe is to use their hosted Checkout. It’s SCA compliant and regularly update with new features. It supports Apple and Google pay for compatible browsers. 1. Crea…

In this update you can use full Server Side data rendering for NodeJS! Your NodeJS template based web sites can fully empower now Server Connect for dynamic Server Side Data Rendering! What is Ser…

You can apply security to your pages and redirect users who are not logged in or have no permissions to view a specific page. Security Protection with NodeJS Security Provider setup with NodeJS is …

The new Database Manager in Wappler just got more great powers! Now you can edit directly your live table data! You can choose between saving the data directly in the database or as a "change" that …

What are Partials Wappler allows you to create and reuse partials in your NodeJS Projects. Partials are useful when you want to create reusable components and include them in some of your pages. Unl…

Mapping of Server Connect Dynamic Events with HTTP Status codes Dynamic Event Description Start when the SA starts executing. Use case: show a modal or a spinner on the Start event. Done wh…

I was playing with the new database manager and when I try to view my data within the tool I get the following error: “Error executing query: connect ETIMEDOUT” Also, I get the following when after …

Often, when using custom Bootstrap 4 templates purchased or downloaded from a template provider you need to use custom include paths for the Bootstrap 4 css and js files. Local and CDN options availab…

What is AWS S3 Amazon Simple Storage Service (Amazon S3) is an object storage service that offers industry-leading scalability, data availability, security, and performance. This means customers of …

What is S3 Connector S3 Connector allows you to connect to AWS and Digital Ocean cloud storage services, create buckets, list/put/get/delete files, create signed URLs and more. Now as you know how …

What is Digital Ocean Spaces Spaces is an S3-compatible object storage service that lets you store and serve large amounts of data. Each Space is a bucket for you to store and serve files. The free,…

Intro App Connect S3 Upload component allows you to do client side uploads to S3 cloud storage. Unlike the Server Connect S3 Upload workflow, where it’s required to first upload the files on your se…

You can easily create a new server for your hosting on Amazon AWS with just a few clicks. In order to use Docker with AWS you need to have an AWS account. Creating an AWS account If you don’t have…

About Transitions Transitions are used to create a smooth animation between different states of an element. You can customize the duration, delay and the easing for your transitions. In this tutori…

About Elastic IP Addresses An Elastic IP address is a reserved public IP address that you can assign to your Amazon AWS Docker Machine (EC2 instance) until you choose to release it. Assigning Ela…

About Google Places Autocomplete The Place Autocomplete service is a web service that is used to provide autocomplete functionality for text-based geographic searches, by returning places such as bu…

About Google Places Search Google Places Search lets you search for place information using a variety of categories, including establishments, prominent points of interest, and geographic locations.…

You already know how to setup your pages to use Sever Side Rendering with NodeJS. In this tutorial we will show you how to use Server Connect data in your page meta tags, such as page title and desc…

A single page application (SPA) is a web site/app that re-renders its content in response to navigation actions like clicking a link, without reloading the whole page. It consists of main template a…

I have been trying to supplement the native formatters in Wappler and found that most things can be added by using custom formatters. What I found, though was the technique for this was hidden in answ…

In this tutorial we will show you how to create dynamic pages using Framework 7. This is useful when you have a page listing your records and you want to display the record details in a details page…

Can someone help me and tell me what am I doing wrong? I am trying to create a very simple relation field with the Wappler DB Manager using this doc - https://docs.wappler.io/t/creating-database-relat…

With Wappler you can connect seamlessly your Wappler project to Github, Gitlab or BitBucket repositories. You can push and pull your local project to the selected remote repository. Creating a loca…

Thanks to Wappler integration with GitHub, Gitlab or BitBucket, now It’s really easy to share Wappler projects between multiple computers or when working in a team. You already know how to Create R…

Writing your own Formatters Location All formatters are being placed in the extensions/server_connect/formatters folder. A single file can contain multiple formatters and you can have multiple fil…

Hey everyone, I’m just writing this short tutorial to show you that you can use a third-party wysiwyg editor in your projects. Depending on your projects, as it’s not officially integrated into Wapp…

Wappler opens up its extensibility powers! Now you can define your own custom modules and formatters for Server Connect. You can write your own custom code but also provide a UI definition of your …

Sometimes you want to format or transform your data in a way that is not supported with the supplied formatters included with Wappler. This topic will explain you how you can write your own modules …

Sometimes you want to format or transform your data in a way that is not supported with the supplied formatters included with Wappler. This topic will explain you how you can write your own modules …

Extending express You want to add extra middleware to express or define your own route endpoints? Here we will explain you how you can do this. Location All custom code extending express are placed…

For those who are interested in an easy and secure solution for working with Stipe that is similar to Stripe checkout, but looks much better and works with multiple products and quantities. There is a…

Some of the Google API libraries require authorization using a Service Account. Thanks to the JWT authorization options added to Oauth2 Provider in Wappler now you can use your Google Service Accoun…

Overview We added new Global options in the Server Connect panel. The Globals allow you to define and re-use Database Connections and other Settings (1), Variables / Input Parameters (2) and API Ac…

Overview Server Connect Library allows you to create reusable actions, which can be included in any of your API Actions: This way you can define some complex actions once, use input parameters fo…

I’m trying to get the query string parameter for a Node JS page. I set up my route: I set up a parameter: When I try to select my query string - the query string option isn’t available like it …

Intro When working on different targets, for example development and production, they usually have different addresses, database names, usernames and passwords. With Wappler you can easily define di…

Intro The Schedule options allow you to create actions that run at scheduled times. The scheduled actions run without the need of your page to be loaded in your browser. This is useful if you want t…

Head over to DataTables.net to pick which options you want for your data table. They have a number of configurable options including exporting, responsive tables and more. Select if you want to do…

Ever wondered how to create a card similar to I have just finished a video where I created the card in about 2 minutes. Please have a look at Even if you do not have use for the car…

Intro Realtime Data Updates are here! Thanks to the NodeJS and Socket.IO integration in Wappler now you can build realtime apps! WebSockets is an advanced technology that makes it possible to open …

Intro Now you can empower Redis caching service with Docker and select which Node.js pages and API Actions to be cached. Then instead of processing them fully on each request, they will be cached in…

With the new integration of Bootstrap 5 (beta 1) in Wappler we also created a converter, which you can use to convert your existing Bootstrap 4 pages to Bootstrap 5. What’s changed in Bootstrap 5 B…

Intro You already know how to use the Theme Manager to customize your Bootstrap 4 sites. With the integration of Bootstrap 5 in Wappler, we also updated the Theme Manager to support Bootstrap 5 as …

Intro You can use the Server API Connector to connect to and pull data from Airtable. We will use this data to populate a Bootstrap table on our page. Airtable Setup There are a couple of steps you…

On rare occasions old video card drivers or old video cards can cause Wappler to show black screen or not start at all. To fix this, you can start Wappler without GPU usage. On MAC Quit Wappler compl…

Intro Thanks to the NodeJS and Socket.IO integration in Wappler now you can build apps which use real-time messaging, so you can send messages to all users, or only to specific users. Messaging Ba…

Intro Thanks to the NodeJS and Socket.IO integration in Wappler now you can show the realtime progress of your server actions to the users. This is really useful for server actions which are doing s…

I’m looking for clarity on the difference, if any, between the DB Connection in DB Manager and DB Connection in Target Database section. I am using Docker hosting and NodeJS server type. In both Devel…

Intro Thanks to the WebSockets and NodeJS integration in Wappler you can build real-time apps. One example of what you can build is a real-time chat app. Sockets provide a real-time bi-directional …

Intro In this tutorial we will show you how to create a mobile project in Wappler and some of the basics of Framework 7 - the framework used in Wappler to build your Mobile App Layout. Creating a M…

Intro You can easily create a login screen for your mobile app and log users in, using Framework 7 and its components. As you know from our docs, in order to use dynamic data for your mobile apps y…

Hello, now having the ability to use Views within Wappler (at least in Postgres) I’m wondering if adding support for Materialized Views is a viable option… It would help a lot with complex apps. (Cus…

Intro Stripe is one of the top payment processing providers which allows you to create full e-commerce solutions. Thanks to the client and server-side Stripe integration in Wappler it’s now easier t…

Webhooks Intro Thanks to webhooks you can listen for events on your Stripe account so you can automatically trigger reactions. Webhooks run on the server-side, so you can run any of the available se…

Intro With Stripe you can setup subscriptions and checkout pages, where your users can subscribe for your services or products. Subscriptions and Prices The first step is to setup your subscription…

Intro Sometimes you have your own products database which doesn’t use products and prices defined in Stripe. You already know how to create a shopping cart using the Data Store Component and you ca…

Intro You can create your own custom checkout forms for Stripe. Custom forms allow you to fully customize your checkout, branding and style of the page, while the whole payment is securely handled b…

Intro Using the Data Transformations options you can easily join the results of two different data sources such as - a database query and an API response, the results of 2 database queries from 2 di…

Data Transformations Data Transformation options are available in Server Connect. Using them you can easily combine different data sources, add, rename or remove columns from an existing data set. …

Intro Thanks to the App Connect Client Side Routing it’s possible to use routing for your mobile apps built with Bootstrap. Now you can define a single index.html file and load all your content page…

Intro You can add hidden sidebars for your web sites and apps for navigation, shopping carts, and more which appear from the left, right, or bottom edge of the viewport. You can show and hide them u…

Bootstrap Icons Bootstrap Icons is a free, high quality, open source icon library with over 1,300 icons. You can use them in any of your projects. Include Bootstrap Icons Framework In order to use …

Hi @George, I am moving some of my infrastructure and with that I’ve decided to merge two databases. Any special considerations I need to take regarding the content of: wappler_migrations and wap…

Following the Brian English’s Wappler Unwrapped - which appears to be for version 3 and BS4 - I was able to figure most of the differences of W3 & 4. As this is my first data connection, I figured …

Still a newbie with Node/Content/Partial/Layouts and have some questions… Where do I include items such as the local storage manager? Currently I have them in the layout page but when I try to clear…

Intro You don’t need to install and configure any local servers to run your dynamic Wappler web app or site. You can use the powers of the integrated in Wappler NodeJS server in combination with a S…

Intro You can show or hide elements on your page conditionally, i.e. when a specific condition is met. There are two ways of doing in Wappler - using a conditional region and using the dynamic show …

Intro In many cases you need to use checkboxes in the forms used to insert or update data in the database. Due to the nature of the checkboxes and how they work, when a checkbox is not checked it wo…

Intro The тoggle component is a simple, but quite handy component. It can be used to toggle visibility, styling, classes of the elements on your pages. In this tutorial we will show you a couple of…

Intro Empower full client side reusable workflows - with App Flows! Now you can define App Flows, just as you are used to do on the Server Side with Server Connect and enjoy the same powers but on c…

Hello there Here is a little tutorial to show you how you can easily change the charset of your database and your tables by using the terminal available in Wappler. Actually you can use the same me…

Intro You can quickly generate an unique UUID identifier in Server Connect and use it in your API Action (Server Action) steps, where required. Generating UUID The UUID is available in the global v…

Visual testing with CodeceptJS About visual testing How does one test if the UI being rendered appears correctly to the users or how to test if each UI element appears in the right position and siz…

Building Real-Time Private Messaging Service In this post, we are going to create a real-time messaging feature. So, a user can communicate and send a message to other users on the platform. Below i…

Intro When using Docker you can view the web and database servers logs in real time. These are useful for finding problems in your app. Accessing Web and Database Servers Logs You can find the real…

Overview Using the OAuth2 Connector in Wappler you can add a “social login” option to your website, so the users can directly log in using their Google account. In this tutorial, we will show you h…

Overview In this post, we will connect our web application with Google Sheets. So, you can actually use the Sheets as a database replacement, and pull the data written on them. We will use this data…

Intro In this tutorial we will show you how to build a Bootstrap 5 Navbar from scratch. We will build a basic navbar with a logo and the navigation links aligned right. We will also apply a dark the…

Bootstrap and Wappler’s visual integration Bootstrap does not need an introduction, being the world’s most popular front-end open source toolkit, featuring a responsive grid system and extensive preb…

Intro One of the most requested features in our community has been integrated in Wappler - a project files updater. On project open it checks for updated files for all the used frameworks. You can …

Hi, This is the 2nd time it happens (in a month), images are a dead end. Your server answers the following while fetching an image: Cannot GET /uploads/default/original/3X/1/2/12e4ee1e57a7ba40d9808f…

Intro Wappler provides an easy way to update your existing mobile Cordova based projects to Capacitor. Updating Projects First open your existing Cordova based project: Click the Project Setting…

Intro Capacitor is an open source project that runs modern Web Apps natively on iOS, Android, Electron, and Web while providing a powerful and easy-to-use interface for accessing native SDKs and nat…

Intro Placeholders can be used to enhance the experience of your application. You can display an animated placeholder, having a similar layout to your content, while your data is still loading. The…

Introduction It is very convenient to add new production servers in Wappler for deploying your web apps directly to major hosting providers like Digital Ocean, AWS, Hetzner, Linode and Vultr - all w…

Intro You can manage your files and folders - upload, download, remove files from a remote Docker target. This is useful when you want to just upload a single file/several files or a folder with fil…

With Oracle Cloud you can easily get absolutely free server that can pretty much run everything you need for a basic NodeJS web site with a Database. It can be easily connected with Wappler for ful…

Intro In Wappler Project Updater you can choose between stable and beta extensions channels. This means that by selecting the beta channel you can test Wappler extensions updates, without breaking y…

Intro In some cases you may need to reset your project to the default frameworks - due to old files left in your project or just to make sure your project is using the latest versions of the framewo…

Intro The Tagify component transforms an input field into a Tags component , in an easy, customizable way, with great performance and many customizable options. Tagify provides auto suggestions when…

Intro You can add images to the Tagify select lists and tags, also you can add secondary text to the results in the select list. You can specify the images size and customize the secondary text. Cu…

Intro You can insert the value of the Tagify component into a database. In our example we will show you how to store it in a json field. Database Setup We have a products table and each product can…

Intro NOTE: This option is currently available for NodeJS server model only. Support for other server models is coming next weeks. The sub tables in Wappler provide an easy way to create and access…

Intro You can access the nested data created with the help of sub tables using a single database query in your API Action. This way you don’t need complicated workflows such as using repeats and nes…

Intro Thanks to multi references in the Database Manager you can define many-to-many relationship between items in two database tables. With many-to-many relations an item from one collections can …

Intro Thanks to the multi reference support in Wappler you can easily insert and update your data based on many-to-many relations. In our example we created two tables and connected them with multi…

Intro You already know how to create nested database queries in the database query builder in order to access nested data in a single database query. In this tutorial we will show you a more advanc…

Intro Sometimes, when using Tagify you want to be able to allow users to create new tags in addition to the ones already created and listed in Tagify. That’s useful when adding a new article or prod…

Intro App Connect Form repeat makes it easy to insert or update nested data in your database tables using a single insert or update action. This way you can easily insert data in your main table as …

Intro Form repeater can be used in update record forms in order to easily update nested data to your database table. Similar to our Insert Data tutorial - we will show you how to update a user and…

Intro Environment variables are variables which values change depending on the selected environment - development, staging, production. These are useful as they are defined globally per target and t…

Just a quick one, code only! To change the file input to something like this: Copy and paste the following codes: HTML: <div class="input-file-button-wrap"> <label for="input1" class="input-f…

Intro We’ve made it easier to share your local projects with a single click and debug requests by integrating the ngrok service in Wappler. Ngrok is a service that enables you to give external acce…

Intro Resource Manager lets you organize all your project related resource in a single place, from cloud servers, database servers, storage solutions, to local services*. In this tutorial we will s…

Intro Wappler includes several working modes - Components Edit, Text Edit, Inspect, Accessibility and Preview. In this article we will briefly explain how the different modes work and what you can d…

Intro Managed Databases are a fully managed, high performance database cluster service. Using managed databases is a powerful alternative to installing, configuring, maintaining, and securing databa…

Intro When you deploy your site you want it to be accessible under your own domain name and also secured with certificate, so that you see the lock icon in your browser and the site is accessible wi…

Intro You can manage your SSH Keys in the Resource Manager. You can create and manage keys per cloud provider or import existing keys from the provider. Creating SSH Keys You can find all your ssh …

Purchasing a Wappler license We will explain to you how to purchase a Wappler license of the website. Know that Wappler offers a fully functional 14 days trial for free, which includes all of the f…

Intro The Wappler Wallet functionality allows you to add money to your account, which can be used for future purchases and upcoming invoices. Using Wappler Wallet You can add money once and not wor…

Intro In this tutorial we will explain the different date and time settings available for NodeJS and how to handle time zone options. Server Time Zone You can set the server time zone settings depe…

Intro You can use local SQLite database for your mobile and desktop apps. The database will be created locally on the users device initially on app start. The database will be created as defined in …

Intro The Camera Plugin provides the ability to take a photo with the camera or choose an existing one from the photo album for your mobile and desktop apps. In this tutorial we will show you how to…

Hey guys, it’s been a while since I last wrote in this amazing community, I’ve been pretty busy with family stuff and developing some complex projects, with and without Wappler. But I’ve been reading…

About A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. Ca…

Core Concept Bootstrap is a mobile first responsive design framework. This means that any styling - like setting the number of columns - in mobile view, will also apply to larger screens. This can …

Global Settings Bootstrap sets basic global display, typography, and link styles as follows. 1. body text colour 2. link colour 3. body colour 4. native font stack that selects the best font-fam…

URL rewriting and accessing the query parameters I’m going to strip away Wappler’s UI first, so you can clearly see what’s happening. Create this route: /:country/:language/product/:product_id Ho…

Intro The Server Connect Array List component allows you create and manipulate Array Lists easily with Server Connect actions. You can add items to an array, join multiple sources, remove and set ar…

Intro Pull to refresh is a special component that can be used to run different actions, for example - refreshing the data on the page. In this tutorial we will show you how to refresh dynamic data c…

Introduction Writing your own formatters can be easily done if you have common knowledge about JavaScript. We will explain how you register your own formatters and give some samples. Formatters are r…

Introduction Components in App Connect are elements that are placed in the html dom and can be used for different tasks. The following tasks are possible with components: Acts as a data source Rend…

Intro Framework7 comes with a set of ready to use UI components like dialogs, popup, action sheet, popover, list views, tabs, side panels, layout grid, form elements, cards and many more. You can us…

Intro This Guide This will be about getting started with Wappler when coming from a non-coding background. This isn’t a tutorial on how to make a site or anything (although those are linked), more …

The next level of Wappler extensibility - App Connect for our front-end framework is here! Building custom App Connect custom components with their own dynamic attributes, events and data sources i…

There are many attributes for the properties that specify how to display and where to store the chosen value. For each group of UI input options you can have multiple variables with the following s…

Introduction Custom attributes are used to use expressions to interact with the DOM element. The following attributes are included in the core: dmx-bind: bind a dynamic value dmx-class: toggle class…

Intro In most cases using the “Responsive” option for images with Bootstrap works perfectly fine. However, there are some cases where you need to serve different images for different devices - one f…