How-to Guides

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…

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…

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…

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…

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…

In most cases using the “Responsive” option in Bootstrap 4 works perfectly fine. However, there are some cases where you need to serve different images for different devices - one for desktop, a diffe…

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 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 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…

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 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 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…

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…

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…

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…

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…

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…

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…

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…

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…

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 …

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…

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…

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…

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…

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…

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…

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…

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 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 …

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…

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…

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 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…

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…

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…