Calculating Age from Date of Birth
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…
Inserting Tagify Values into a Database
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…
Using Google Places Autocomplete
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…
Getting Started with App Connect Event Calendar
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…
Tagify - Creating New Tags and Storing them in the Database
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…
Getting Started with App Flows
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…
Using Tagify with Multi References
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…
Using the Tagify Component
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…
Custom Content for Tagify Lists
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…
Using the Toggle Component
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…
Creating Offcanvas Sidebar with Bootstrap 5
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…
Using Summernote WYSIWYG Editor
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…
Using Date Range Picker with Dynamic Values
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…
Deleting Database Records with Confirmation
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…
Introduction to App Connect Flow
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…
Using Google Places Search
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.…
Using Time Picker with Date Picker Component
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 …
App Connect Calendar Dynamic Events
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…
Capuring status of serverconnect steps and displaying them through app connect
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…
Displaying a Confirmation Dialog on Form Submit
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, …
Creating a Scroll Progress Indicator
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…
Using the Autocomplete Component
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…
Using the Date Range Picker with Insert and Update Record
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 …