Skip to content

Wappler documentation

Front-End Components — Original guides

Illustrated front-end components guides, with the original steps and examples preserved.

Open in Wappler

Choose a guide. Version notes identify original instructions that use an earlier interface or framework.

Guides (17)

App Connect Calendar Dynamic EventsIntro 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 specifView guide Custom Content for Tagify ListsIntro 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. CustoView guide Deleting Database Records with ConfirmationYou 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. OnView guide Confirm a form submission with a Page FlowA confirmation dialog that submits only from its confirm branch and cancels without sending a request.View guide Getting Started with App Connect Event CalendarApp 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 eView guide Handle Global Server Connect Events on the PageYou can now easily handle Server Connect results globally — directly from the page element such as <body> — without adding separate dynamic events to every Server Connect component.View guide Inserting Tagify Values into a DatabaseIntro 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 beView guide Introduction to App Connect FlowWhat 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. Use View guide Tagify - Creating New Tags and Storing them in the DatabaseIntro 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 producView guide Using Date Range Picker with Dynamic ValuesWith 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 reView guide Using Summernote WYSIWYG EditorSummernote 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. InsertinView guide Using Tagify with Multi ReferencesIntro 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 reView guide Using the Autocomplete ComponentThe 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 View guide Using the Date Range Picker with Insert and Update RecordYou 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 foView guide Using the Tagify ComponentIntro 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 eView guide Using the Toggle ComponentIntro 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 exView guide Using Time Picker with Date Picker ComponentYou 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 the pView guide