Getting Started

Getting started with Wappler is really easy and it won’t take long to learn the basics.

Minimum Requirements

In order to use the latest version of Wappler, you must be running so Windows 7 64bit or newer, Mac OSX 10.10 64bit or newer, or Linux 64bit.

Downloading Wappler

Wappler can be downloaded for free from Wappler Download Page.

Registration

In order to purchase Wappler or get support you just need to register on community.wappler.io. Then use the same account when asked to log in when Wappler starts.

Support

Need further help getting started with Wappler? If you ever come across any issue related to Wappler, then just use our Community to get help.

Bug Reporting

No app is perfect, but just let us know and we will squash all the bugs out! Please use the Bug report option in Wappler for the best results! It is available at File / Submit error report menu or Alt+ctrl+P on Windows or Alt+cmd+P on Mac. Post your bugs in the Wappler General Bugs category

We hope you enjoy using Wappler!

The Interface

Wappler's interface is minimal and easy to navigate and use.


The toolbar on the left contains buttons which allow you to open/close the File Manager, Server Connect and Find & Replace panels located at the top and Project Manager, Options and Your Account details at the bottom:


The top toolbar contains tools and options for changing between Design and Code view, changing screen size options and Undo/Redo buttons:


The right panel allows you to select an element and edit its properties using the dedicated smart properties inspector or the Visual CSS Editor. Also you can add, delete, duplicate or remove elements here using the App Structure tree or DOM tree:


At the bottom of the screen you will find the publish panel and the console. Here you can define your project settings, targets, server model settings and publish it to multiple targets:


The most important part of Wappler screen is in the middle, where you see your design rendered. Here you can see how your website or mobile app looks, you can visually add elements (inside, before or after) the selected element, duplicate whole blocks of content or delete anything from the page or app layout.

App Connect Introduction

App Connect is a high performance front-end framework powerful just as React, Angular and VueJS but much easier to use due to its custom component structure and HTML5 Attributes binding. It comes with many custom components like: slideshows, galleries, dynamic charts, maps, animations and many more, which you can insert on your page and customize as you like. Also it is fully visual, thanks to the Wappler integration – so no coding is required!

Bootstrap 4 Integration

Bootstrap 4 doesn't need an introduction, so we'll skip this part and show you how it is integrated in Wappler.

No more searching the correct Bootstrap 4 class in the Bootstrap documentation - Wappler includes everything you need to create fully functional Bootstrap 4 websites. Build your layouts visually using the smart context panel which suggest only the suitable elements for your current selection.


Style the selected element using the properties inspector, which shows all the properties for your selection. Change colors, borders, margins and padding in a few clicks.

Smart CSS Designer

In order to use the visual CSS Designer integrated in Wappler you just need to open it by clicking Styles (1) and then select the element you'd like to style (2):

You can add new style property, edit existing style or remove a property from the selected element. Choose whether to add the style inline directly in the element.style {} rule, in an existing CSS file or choose whether to attach or create a new CSS file and set the rule there:

You can add an inline style by either using the color pickers for color/background color:

Where a nice color picker appears:

Or you can directly click in the rule and enter your property and value. Autocomplete popup appears when you start typing so you can use it to speed up your work:

You can see the changes immediately in Design View. Disable or remove rules by clicking the checkbox (1) or the remove button (2) for the selected rule:

In Wappler general settings you can setup the options for the CSS editor. You can enable the CSS autoprefixer and select the browser versions you want to support. On save the required prefixes will be added automatically. Also you can enable CSS prettify on save:

DOM Tree

Use the DOM Tree to explore the structure of your pages. You can access it by clicking the DOM button:

You can select an element on your page and then it is automatically highlighted in the DOM Tree:

You can explore its attributes and properties and setup them as you need in the properties inspector. They are different for different elements on your page, so the content of the properties inspector changes according to the selected element:

Right clicking an element allows you to insert any other element before, after or inside it:

DOM Tree toolbar allows you to add, duplicate and delete (1) elements in the tree or search for a specific element (2):

Import DW site definitions

In Wappler you can import your Dreamweaver site definitions with all the targets, usernames and passwords.

The first step is to export your site definition from within Dreamweaver. Open Dreamweaver and go to files panel:

Then open the sites drop-down:

And select Manage Sites:

In the Manage Sites menu select which site(s) you want to export(1) and then click the export site button (2):

Select - Back up my settings option. It will export the logins, passwords and local paths:

Then in Wappler - open the Projects panel and drag & drop the exported site definition file:

It automatically creates a new project, so you can directly open it and work on it:

Let's open the project settings:

You can see all of your targets, paths and login details imported here:

How-to Guides

Find step-by-step guides on how to accomplish common tasks in Wappler. You will learn how to quickly add any HTML element on you page, add margin or padding, duplicate elements and work with responsive images.

Including App Connect

In order to add App Connect on your page, select the Frameworks menu (1) and click App Connect (2). You will see a confirmation message, as soon as it is added on your page.

Including Bootstrap 4

In order to add Bootstrap 4 on your page, select the Frameworks menu (1) and click Bootstrap 4 (2). You will see a confirmation message, once it is added on your page.

Then, select whether to include it from a CDN (3) or include it locally (4). Also you can use any of the Bootswatch style themes for Bootstrap 4 included in Wappler.

Inserting Elements

Adding elements to your pages is a matter of couple of clicks. Starting with a blank new page, just click the blue plus add inside button (1) in Design View:

Then select the element, which you want to add (2) or explore the different element categories offered and add an element from there. Depending on which framework is added and what element is selected, the options displayed in the insert dialog will be different:

Then you can see your element added on the page and also in the App Tree (3):

You can continue adding elements the same way, selecting whether to add before, after or inside the element you just inserted.

Duplicating Elements

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 duplicated element in Design view and in App Structure:

Deleting Elements

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

Adding Class or Id

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 the properties inspector:

Margin and Padding

You can add margin or padding to any element in your Bootstrap 4 pages. Just select the element (1) and then in the properties inspector scroll to the Spacing options:

Add the required margin or padding. Select one of the available options: top, bottom, left, right or horizontal and vertical. Selecting horizontal or vertical margin or padding values adds margin or padding left and right or top and bottom:

Responsive Images

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 the Basic category (2):

Select the image element (3):

Then, in the src field browse to your image (4):

When you select your image, just check the responsive checkbox under image properties:

You can see your responsive image in Design View immediately:

Using Animations

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.

The inview animation is applied to your elements so that when you scroll, they get animated when they enter the viewport. The enter/leave animations can be applied to your repeat regions, so that the repeat elements get animated when rendered on the page or when the data is filtered.

Inview/Outview Onscroll Animations

First we will show you how to use the inview animations. Open your page and select the element, which you want to animate:

You can also select it in the App Structure:

Then add new dynamic attribute:

Open the Animation menu:

And add inview animation:

Open the Name dropdown in order to select the animation type:

There are many different animation options available. Just select the one you need:

Then select when to start the animation. 100% visible means, that the animation will start when the element is fully visible in the viewport, while 10% visible means that the animation starts when 10% of the element is in the viewport:

Just select the right amount for your needs:

The same way as you added an inview animation you can add an outview animation. It runs when the element leaves the viewport. Add new dynamic attribute:

Open Animation:

Select outview animation:

And select the type of the outview animation:

We select Zoom Out:

And you are done. Your element will fade in on scroll, when it enters the veiwport and then it will zoom out when leaving the viewport:


Enter/Leave and Move Animations

The other type of animations available in Wappler are the ones applied to your repeat regions.

First, create a repeat children region which repeats some elements on the page. Make sure you've selected a value in the unique key field, usually this is the ID field of your data source:

Then select the child element, which you are repeating:

Add new dynamic attribute:

Open Animation:

And select Enter Animation. This animation is applied when the elements are rendered on the page:

Select the animation type:

Then set the animation duration (in milliseconds):

Set a delay if you want the elements to be animated one after another and not all at once. 100 milliseconds allows a nice smooth delay:

You can enable the Random option if you want to animate the elements randomly instead of one after another:

Now add another dynamic attribute:

Open Animation:

And add Leave Animation:

The Leave Animation is applied when filtering the records or when changing the current page, i.e. when there is an event making some of the records disappear from your page. Setup the Leave Animation settings as you wish:

We are going to add one more animation attribute to our repeat region elements. Add new dynamic attribute:

Open Animation:

And add Move Animation:

The Move Animation makes the elements, left on the page after filtering the data source, move smoothly next to each other. Setup this animation settings as you need:

And you are done!

Define URL Parameters

If you want to use URL parameters on the page - for example to filter a database query or to show/hide specific page elements depending on URL parameter value you first need to define them in App Connect. Select App in the App Structure (1), make sure your App has an ID (2) and click the Define Query Params button:

In the query parameters dialog click the add new button:

And select add variable:

Add the name of your URL parameter:

Click Save:

The defined URL Parameter will now appear in the dynamic data pickers and you can use it for your dynamic expressions.

Dynamic Attributes

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 the page, based on specific dynamic condition.

Binding dynamic image source

In order to bind a dynamic image source, first you need to add an image on your page. We have a repeat region, which we created from a database query. We right click the element we are repeating:

Open Basic:

And add an image:

Then select the image and in the properties panel add new dynamic attribute:

Open Images:

Select Image Source:

And then click the dynamic data picker button for the image source:

If in your database you store the path to your image, just select Field(1) and click the binding, which returns your image path(2):

If in your database you store only the image name and you have to manually enter the path to the image location - select Template and manually enter the path to your images:

Then click after the path you entered, and select the binding which returns your image name:

Click select and you are done. You can see your images rendered in Design View:

In order to add a dynamic link value you need to select your link/anchor button first, either in design view or in the App Structure:

Then add new dynamic attribute:

Open Links:

And select Link:

Click the dynamic data picker button for the dynamic link value:

If your dynamic binding returns the whole link, then from the drop-down make sure Field is selected(1) and select your binding:

If you need to mix static and dynamic data for the link, i.e. point to a page and pass an URL variable then select Template from the drop-down and enter the static part of your link manually:

Then click after the static link and select your binding:

Click the select button:

And you are done. Now your links in the repeat region are dynamic, and point to the selected record ID:

Show/Hide Elements with Dynamic Expressions

You can show or hide different elements on the page depending different on dynamic expressions. In our case, we want to show the State drop-down only if the selected country is United States:

Select the element you want to show/hide(1) and add new dynamic attribute(2):

Open Display:

And select Show:

Click the dynamic data picker button, to select when to show the element:

We want the state drop-down to depend on the country drop-down value, so we select value(1) under the country select and then we click the format data button(2):

Right click the country.value expression and click Operation:

Open the operation drop-down(1) and select == (2):

Click the equals to field:

And enter the value, when the state drop-down should be displayed. In our case the value should be - us:

Click Select and you are done:

Now the state drop-down will only be displayed, when the country is set to United States:

The same way you can show/hide different elements, defining different expressions.

Dynamic CSS Class

You can apply different dynamic CSS Classes to your elements, depending on different conditions. In our example we will apply a custom class if a value returned by our database query is less than 5000.

We have a dynamic table, listing our products:

We want to add a custom class to the table row. Select the row:

Add new dynamic attribute:

Open Styling:

And select Class Toggle:

Enter the class name that should be applied:

Then click the dynamic data picker button, to setup the condition:

We select the binding which returns the quantity from our database(1) and then we click the format data button (2):

Right click the expression and select operation:

Open the Operation drop-down and select less than <

Enter a value to compare with, in our case we want to check if the quantity is less than 5000:

Click Select and you are done:

You can see our custom class applied to the table rows based on the condition we set. This way you can apply multiple classes based on multiple conditions.

Drag & Drop Elements

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 specific locations, you will see a X - this means you can't drop it here as it is not allowed to move it here:

When the element can be placed at the selected location you will see a red arrow. You can drop the element there:

Inserting Common HTML Tags

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 span inside a button, then add some text and assign a class to it. First, select the button in design view, and click the DOM Tree button:

You will see your element highlighted in the tree:

Right click it, select Insert inside (1) and open the Styles and Semantics category (2):

Select span:

In the DOM Tree click on the span tag and in the Properties Inspector, in the Text field enter the content you want to show inside it:

Then add a class if you need to style it further. You can see your changes immediately in Design View:

This way you can add any common HTML Element directly in the DOM Tree.

Project Manager

Setting up a new project and managing existing projects in Wappler is really easy. Learn how to use the Project Manager and its options.

Creating New Project

Navigate to the Project Manager panel. If this is the first time you run Wappler then Project Manager will be automatically loaded.

You will see 2 demo projects which are included in Wappler and also options to open an existing project or create a new one:

Select Create New Project:

You can choose whether to use some of the included Bootstrap 4 starter pages and templates or create a blank project:

Let's start with a blank project:

Enter the project name (1), select a folder on your hard drive, where to store the project and its files (2) and select the project type (3). In this case we setup a website. Then click the Create button (4) in order to create the project:

Your project is now loaded in Wappler, so let's create a file. Open the File Manager:

And create a new HTML file. We will call it index.html:

Now you can open your file and start working on it:

Switching Projects

There are two ways of changing the project you are working on in Wappler.

  1. You can open the Project Manager and select the project you want to open:

  1. You can use the select menu, located in the bottom toolbar:

Removing Projects

You can remove the projects from the Project Manager by clicking the remove button which appears on hover:

A confirmation window will appear, just confirm that you want to remove this project from Wappler:

Bootstrap 4 Visual Designer

Build responsive, mobile-first projects on the web with the world's most popular front-end component library.

Layout Basics

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. Containers are the most basic layout element in Bootstrap and are required when using its grid system. Click on the add element button on your page:

Select Container:

Then, click the insert inside button:

The smart insert element dialog suggests you the most suitable elements to add inside the container. In order to create a multi-column layout using the Bootstrap grid, we should add a row inside the container:

Then, inside the row we should nest the columns. Click the add inside button:

And select column:

And now we have the column inserted in the row, on our page. You can see the column bot on the page, and in the App Structure Tree. Select it by clicking it either in Design view or in the App Structure tree:

In order to change the default column size check the properties inspector and under Column Properties (1) you will see the Column Sizing options (2). Here you can assign different column sizes for all device sizes or define a specific size for each of them:

We set the default size to 12. This means that if no specific size is defined for any of the screen sizes the column will always take 100% of the row width:

However if you wan want to have the column width to change on different devices, click on the device icons (1) and set specific column sizes (2) for each of them:

You can nest your content inside the columns. Let's add something simple inside. Click the add inside button:

Open the basic elements category:

And select paragraph:

Double click and edit the paragraph - just add whatever text you like inside.

You can add more columns, inside the row either by selecting the Insert After button (1) or by duplicating the current column, its properties and its contents using the Duplicate button (2):

We just duplicate the current column and you can see the new column in Design View and in the App Structure tree:

This way you can add as many containers with rows and columns, as you need for your page layout.

Creating Navbar

There are two ways of setting up a Bootstrap 4 Navbar on your page.

  1. You can use the predefined navbar templates.

Click the add button in Design View:

Open the Headers category:

You will find the different navbar templates here. Just select any of them and it will be added on the page. Then you can customize its options:

  1. Create one from scratch.

Click the add button in Design View:

Open the Navbars category:

Add Navbar:

Click the add inside button in order to add content inside the Navbar:

And add Navbar Brand:

Double click it to edit its default content and enter your brand name there:

After the brand we need to add the Navbar Toggler element and the collapse region which it toggles. While the brand element is selected, click the Add After button:

Select Navbar Toggler:

The toggler element also adds the collapse, which holds our navigation links. Click the add inside collapse element button:

Open the lists category:

Add Navbar Nav:

And then inside the Navbar Nav you can nest your links. You can do this in design view:

You can add more links in the App Structure tree as well:

Just click a link, select insert after and add a new link:

Style your Navbar by setting up the theme:

Choose on which device size it should be expanded. Just click on the device icon, and check the expand checkbox:

Select the Navbar position - choose from default, fixed top, fixed bottom or sticky top:

You can align the links in the Navbar, by selecting the Navbar Collapse element (1) and then adjusting the Justify property (2), so this allows you to align them left, right or center:

Using Cards

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 you how to insert cards in your layout.

We have an empty column, so we select insert inside:

Open the Cards category:

You can find different Card layout templates here. Just select the one you need:

You can see the card added in on the page, and you can also explore its features in the App Structure, where you can also add content to it, remove elements and style it:

Let's select an image for the card. Click the card image element and browse to an image source:

Then, you can double click the Card header and change the default text:

You can add a footer to the Card, by selecting its body and clicking the add after button:

You can see that the most suitable elements are suggested in the insert dialog. Select card footer:

You can add some content in the footer, just click the add inside button:

Editing a card and its elements' properties is easy. Just select the card (or any of its elements) and you will see all of the available properties in the properties inspector:

Working with Forms

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 the Forms category and select whether to use any of the predefined form templates, or create a new one from scratch. We select to create one from scratch, so click Form:

You can see the form added on our page. Click add inside in order to add form elements:

Open the Forms category:

And then inside it, select the element you want to add. In our example this is a text input group:

You can explore its structure in the App Structure panel:

Select any of the elements, like the input label and its properties will appear in the properties inspector. You can change the ID, Class, Size or Text here:

When you select the input its properties appear. Customize its type, name, placeholder text here. Setup its size and the rest of the properties:

You can delete a form element either in design view (1) or using the App Structure toolbar (2):

In order to add another element just select the current one, and click the insert before or insert after:

Open the forms group, and select the next element to be added:

You can find it in Design View and App Structure:

That's how to add a form and add different elements inside it. You can add unlimited elements inside the form - just customize the element properties as you need.

Using Modals

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 modal in Design view and add content in it, just select in the App Structure (1). You can see the modal properties in the properties inspector (2). Setup the settings as you like, then you see the changes directly in Live view:

Add elements in the modal body, by clicking the add inside button:

You will see the components you can add inside, suggested in the context popup. Just add whatever you need inside the modal, customize its settings and you are ready to go:

In order to open the modal you need either a link, a button or an anchor button. Select the button (or link) which should trigger the modal (1) and open the action toggle menu (2):

Select Modal:

And then select the modal, which you want to open by clicking the button:

Server-side Components

Wappler includes Server Connect - a powerful back-end framework which offers full visual programming without any coding. It includes many server-side workflow components. Connect to your databases, create advanced database queries, send emails, manage files and folders, process images or create login systems fully visual!

Connecting to a Database

It is really easy to connect to your database, using Wappler. The first thing you need to do is to open the Server Connect panel:

If you have not selected your server model when defining your project, then you will see a message saying that you need to specify one. Click the project options button:

Open the server model drop-down and select one - PHP, ASP.NET or Classic ASP:

In order to connect to a database, we also need to setup a target. You can do this by clicking the Targets menu (1) and then the Add new target button (2):

Enter the target name and URL:

Then select the Target Type. This can be a local folder on your computer, where you are running some server (WAMP, MAMP or IIS) or a remote server which you connect to using the required FTP details:

If you select FTP, then you need to enter the address, port, username, password and the remote directory (if this is required). You can test the FTP connection by clicking the Test Connection button:

In our case, we are using a local folder and a WAMP server, so we just selected Local Folder and setup the paths:

When you select a server model server connect shows you the toolbar and panels. The first thing you need to do, is to create a Server Action. Server Actions store your workflows, and execute the steps you visually set up. The toolbar allows you to create a server action, create a folder or delete a server action/folder. For a better structuring especially on large sites, using many server actions we recommend to group your server actions in folders. We create a new folder:

We call it "data". Inside it we create a new server action:

We add a name for it: "records"

When you create the server action you will see the action steps panel, with its options. Right click steps in order to add a new step:

We open the database actions menu:

Then we Add Database Connection:

Before clicking the database connection options, we need to make sure we selected the right target. This is the target we've already setup earlier:

Click the Connection Options button:

The Database Connection options window appears. Select your database type:

Then the database options will be displayed. Enter the sever address, port, username, password and database name:

You can test the connection by clicking the Test Connection button. If everything is OK you will see the Connection OK notification:

Click the Save button, in order to apply the connection settings:

You can see your connection in the server action. The blue link button after the connection name means that this connection is linked to your current site and you can reuse it in all of your action files by just loading it using the folder button:

Click the Save button in order to save your server action:

You will see a notification saying that the server action has been successfully saved:

NEXT: Learn how to setup a database query using this database connection

Creating Database Queries

After you created your Database Connection, now it's time to setup a Database Query. Right click the Database Connection step:

Open Database Actions:

Add Database Query:

Then click the Query Builder button, in order to setup your query:

Open the database tables drop-down and select a table:

If you want to add all the table columns to the query, you don't have to do anything else - the table is already added. If you want to add specific columns to the query, just select them and click the add button:

Then, click the Conditions tab:

Here you can setup your query conditions, just select a column:

Then select a condition:

And add a value for the condition:

You can add multiple conditions or groups of conditions to your queries:

Just select the operator for the new condition: AND or OR (1) and then setup your condition (2):

You can add sorting options to your query, select the Sorting tab:

Select the column you want to sort the query by (1) and add it to the sort list (2):

Then just select the sort order:

You can see the generated code for your database query, which you generated fully visual:

Click OK in order to apply the query options:

Do not forget to save your server action:

You can preview your query results by selecting the server action and then clicking the Open in Browser button:

The results will be loaded in your browser:

NEXT: Learn how to bind the data on your page

Binding Data on the Page

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 the add new component button:

Open the Data category:

And select Server Connect component:

Once you add it, select your server action:

The Server Action picker appears. It shows the server actions defined for your site. Click your server action containing the database query (1) and then click the select button (2):

Now when the page loads, the server action with the data will also be loaded. We need to bind the data on the page, so we can see it. We will create a simple data table, showing the query results. We click add component in a column on the page:

Open the Tables category:

And add a Table:

The table contains some dummy static data. You can see it both in design view and in the app structure.

We only need one table row, so we remove the rest of them. Then, we select Table Body (1) in App Structure and click the Make Repeat Children button (2). Repeat children will repeat the children in a parent>child structure as many times as records are returned by the query. A good example of a parent>child structures are lists (ul/ol), tables (body>row) or any other HTML structure having children elements inside a parent one:

Then, choose an expression for the repeater:

The expression should be the database query in your server action - the one we included on the page. So select the query and then click select.

You see the table rows are repeated as many times as records are returned. Table cells have static data, so let's bind the dynamic data instead. You can do this in two ways - one is to double click in the table cell and select the text:

And then click the dynamic data button:

Then under the repeat component select the binding which you want to insert in this cell:

You can see your data rendered immediately:

The other way is to select the cell in the App Structure, and then use the dynamic data picker for Text:

Then just select the binding you need here, and click Select:

Do this for all of your table cells. Once you finish binding the data, you will see it rendered in Design View:

NEXT: Learn how format dynamic data

Formatting Dynamic Data

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 dynamic value on your page, first select it either in design view or in App Structure:

Then, select the dynamic data picker:

And click the Data Formatter icon for the dynamic value:

When the Data Formats dialog appears, right click the value and you will see the available format options for this data type:

In our example we will use the Upper Case format, available under Conversion group:

You can see the formatting option applied, under the dynamic value. You can add more than one format options this way. Click select when you are done:

And then click select in order to apply the selected formatting options:

You can see the changes immediately in Design View:

Filter Data with Text Input

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 database query and how to bind dynamic data on your page.

Let's add a dynamic filter option now. First, select your Server Action in Server Connect panel:

Then under Globals right click $_GET:

And create a variable:

Let's call it "filter":

Select your database query (1) and click the query builder button (2) in order to open its options:

Go to Conditions tab:

Select the column which you want to search into / filter by:

Then select the condition. In this case the "Contains" suits best, so whatever is entered and it is contained in the productName column will be displayed:

Select the dynamic value picker:

And select the filter GET variable, which we created:

Click OK:

And save your server action:

Now back to our page. We inserted a simple text field on the page - it will be used to filter the data.

In app connect panel select the server connect component, used to bind data on the page (1) and you will see our GET variable "filter" (2) listed there under Input Parameters. Click the dynamic data picker:

When the data picker dialog appears, find the text input and select its value (1). Then click the select button (2):

Save your page and you are done:

Now you have a field which filters the data as you type:

Dynamic Select Menu

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 Connect panel and add new component:

Open Data:

Select Server Connect:

And then click the select server action button:

Select the server action containing your database query:

We have a form on our page - that's where we are going to insert our select menu. Right click the form:

Open Forms:

And add Select Form Group:

This adds a static select menu, with a few dummy options:

We remove the default dummy options, as we won't need them:

Then we need to select the data source for the dynamic select. Click the dynamic data button:

Under the server connect component > data select your database query:

Then, select the text to be displayed in the select:

Select the binding which you need to show here:

And finally we select the option value:

Click the binding and then the click the select button:

Save your page and you are done! Now you have a dynamic select menu, which lists the records from your database table:

Dynamic Sortable Table

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 new component:

Open the data menu:

And add server connect component:

Then select your server action, which contains the database query:

Select the server action and click the select button:

We will show you how to store the sort order and direction in URL parameters so that on page refresh they won't get lost. Add new component:

Open the state management menu:

And add query manager:

Then, define the query parameters:

Click the add new button:

And select add variable:

We call this query parameter - sort. It will be used to store the column we sort the table by:

Then we add another one:

We call it - dir. It will be used to store the sort order (ascending or descending):

Click save:

And then click the add button, where you want to insert the table:

Open the generators menu:

And select table generator:

Select your data source:

This is the database query from your server action:

Then, select the table styling options:

Enable the sortable headers option. This way your table headers become sortable on click:

Select the query manager instance, which we created a few steps back:

And set the sort query parameter in the Sort Parameter menu:

Then select the dir query parameter in the Order Parameter menu:

You can remove columns by selecting them and clicking the remove button. You can also double click the header fields, to edit the text. Click a column number and drag it up/down to rearrange columns:

Click Ok in order to insert the table on the page:

You can see your table, with sortable headers directly in design view:

Select the table in App Structure, then click the Run button if you need to edit it. This will bring the UI so you can edit the options.

Dynamic Paging

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 click steps:

Open Database Actions:

Add Database Connection:

Select your database connection or create a new one, if you have not defined one yet:

Then right click database connection step (1) and open the database actions menu (2):

Add Database Paged Query:

Then click the query options button:

Open the add table menu:

And select your database table:

Then select the tables you need and click the add button:

Click Ok when you are done:

Save your server action:

In app structure panel add new component:

Open Data:

And add server connect component:

Then click the select server action button:

Here we select the server action with the paged database query which we just created:

We add a dynamic table, displaying our records on the page. Make sure to select the data object, under database query as an expression for it:

Then, we add new component:

Open the state management menu:

And add query manager:

We are going to define a query parameter, which will store the current paging state. This way the current page won't be lost on page refresh:

Click the add new button:

Add variable:

Call it offset and click the save button:

Then select the server connect component (1) and click the dynamic data picker for the offset parameter (2):

Bind the query parameter called offset which we just created:

We right click the table, displaying our records:

Select insert after:

Open Generators:

And select paging generator:

Select the data source for the generator:

This is our paged query, located in the server connect component:

Setup the paging appearance options:

Then enable the state manager option:

Open the state manager drop-down and select the state management component which we created:

Then select the offset query parameter from the offset menu:

Click the Ok button:

You can see the paging in design view and in the app structure. It can be edited by clicking the Run button:

Server Side Includes (SSI)

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 includes (ssi) on different pages across your site.

This could be any element from your page - for example your header with the navbar:

The first thing you need to do is to select the component:

Then click the move to include file button:

A confirmation dialog appears. Select Yes:

Enter the include file name(1), which in our case is 'header.php' and then click the save button(2):

The include file has been successfully saved, and then it has been included on your page:

You can see its settings in the properties panel:

You can open the include file for editing, by clicking the open file button:

When the include file is loaded in wappler, you can make changes as on any other page and also it renders nicely in design view:

In order to add your SSI files on other pages, first open the page you want to include it on and click the add component button, where you need to put the include:

Select Server Side Include:

Then click the browse button:

Select your include file and open it:

Then you can select what type of SSI it should be:

And you are done, your header SSI has been included on the page:

Insert Database Records

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:

Then, create a new Server Action:

We call it "Insert":

Then right click steps under Action Steps:

Open Database Actions:

And add Database Connection:

Load your database connection, or setup a new one if you haven't done this yet:

Then right click the database connection step:

Open Database Actions:

Add Database Insert:

Click the Insert Options button, in order to setup your database insert action:

Select the database table, where you are going to insert records:

All of the database table columns are added. An input field will be generated for each of the column in the Insert Step. If you don't want to generate an input field for any of the columns, just select it and click the Delete icon in order to remove it from the list. Click Ok when you are done:

Save your server action!

The back-end part of the Database Insert is done. Now let's generate the form. We want to insert it in a Bootstrap 4 Column, so we select the Insert Inside button:

Open the Generators category:

Select Bootstrap 4 Form Generator:

In the Form Generator window click the select button:

And select your Insert Server Action, the one containing the Insert Step:

You can see a list of the form fields which will be included in the form. Select the form layout - horizontal, vertical or inline:

You can change the Name, Label and Type for each of the fields in your form by double clicking any of these properties:

The type drop-down holds all of the available form field types:

You can add a new form input, by clicking the Add button:

Customize the added input. In our example we add a Cancel button, which resets the form:

Click Ok in order to place the form on the page:

And here is the form in Design View:

You can customize each of the form groups and fields settings in the Properties Inspector. Edit or remove the labels, placeholders or help texts for each field:

We will show you how to clear the form fields, after the form has been successfully submitted. Select the form in App structure (1) and add new dynamic event (2):

Select Server Connect:

And then select the success event:

Click the dynamic event picker, in order to select what needs to be done on success:

Under your form select Reset and click the select button:

And you are done. As soon as the submit button is clicked and the data has been submitted to your database, your form fields will be cleared.

Security & Login

Create a complete login system for your site. Restrict all your pages and data APIs using the Security Provider tools, integrated in Wappler.

Setup Site Security

With the Security Provider you can define the security settings (single user, users list or database users) 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 database users and explain how to set them up.

The first thing you need to do is to navigate to Server Connect panel, and create a new server action:

We will place the server action inside a folder so it is easier to navigate later:

We call the folder - Security:

Create a new server action inside it:

Let's call it logIn. Right click steps:

Open the Security Provider group:

And add Security Provider:

We are going to use it everywhere in our site, so we call it siteSecurity:

Security provider step defines the user login options for your site. We start with the Single Security Provider type:

This is the simplest security option. Using it, you just define a single user for your site - so just enter the username and password here. This is very useful, when your site only has one user and you don't need database to store usernames and passwords:

The next option is Static Users list. Database is not required here as well. You define a list of users and permissions (optional) for them. Open the type menu, select Static (1) and click the Users and Permissions button (2):

First define a new user:

Enter the user's login details and click OK:

You can add as many users as you wish. Selecting a user from the list, allows you to edit his login details or to remove him from the list, using the buttons in the toolbar:

You can setup different permissions and assign users to them. Later you can use these permissions to restrict access to the pages, depending on the permission or show/hide data on the page. Click the Permissions tab:

Then create a new one:

Add a name for this permission (1) and then select which users to assign it to (2):

Click OK:

Add as many permissions as you need, assign users to them and click OK when you are done:

The last and most advanced Security Provider type is the Database one. Before adding it you need to setup a database connection and add a database connection step in the server action. Then add the security provider step and select Databse from the type dropdown:

Select your database connection in the Connection field:

And open the Users & Permission options:

In the users panel, select the database table which stores your users data:

Select the identity column of your table:

Then select the table column which stores the usernames - the ones you ask users to enter on the login screen:

Do the same for the password field:

And you are done. If you need, you can add permissions and conditions for them. Click the Add new permission button. Note that this step is not mandatory, so if you don't need different permissions for your site just skip it.:

Add a name for this permission (1), and select the database table which you will use to check permissions (2). That is really useful if you have 2 different database tables - one for logins, and another which stores just the user ids with the permissions assigned to them. And then select the identity column of this database table (3):

Add a condition for this permission i.e. when should this permission apply and for which users:

Select a column, condition and a value. In our case, we select - when the column role equals "editor". So the permission we created will affect all users which permissions are set to "editor":

You can setup as many permissions and conditions as you need. Click Ok when you are done:

When you are done setting up any of the available Security Provider types you should click the "Link" icon, so that the security provider will be linked to a separate file, which will be available for the whole project:

Select Yes when the notification appears:

And Save your action file. You are done, now you can use this security provide to log users in, protect your data APIs and protect your pages.

NEXT: Learn how to create a login page and redirect users after they log in successfully.

Create Log In Page

Now after you added the security provider in your server action let's add the login functionality. Right click the security provider step (doesn't matter which security provider type you are using):

Open the Security Provider group:

And add Security Login:

In the login properties you see the Username, Password and Remember fields. Their values contain predefined POST variables - these are just the names of the form fields which this step expects. Of course you can change them, but the easiest way is to create a form with fields using these names instead of changing them later:

Select your Security Provider instance:

Save your server action, as we are done with the server-side part.

Then let's go to the page. We included App Connect and Bootstrap 4 on our page already. Click the add button, where you'd like to create the login form:

Create a Form which contains 3 inputs - username, password and a checkbox. The first field has a Name and ID of "username" and Type "text":

The second field has a Name and ID of "password" and Type "password":

The third input is a checkbox with a Name and ID of "remember" it also has a Static Value 1:

We also created a button and its Type is "submit":

Now, select your form:

And change its method to POST:

Then, open the Handler menu (1) and select DMXzone Server Connect (2). This is where we connect the form with the back-end, which expects the values of our form fields:

Click the select server action button:

And select the login server action:

We are done with the login part. Let's setup the redirect on success and an alert message, when wrong user details are provided. Select App in the App Structure and add a new component:

Open the Browser category:

And select Browser:

Select your Server Connect Form (1) and add new Dynamic Event (2):

Open Server Connect category:

And select on Success event:

Click the dynamic action picker button, in order to assign an action on success:

Under the Browser component, select Go To and click the Add button:

Enter the page where the user should be redirected after a successful log in. If you are entering a static URL, make sure to wrap it inside single quotes like: 'your-page.php'. If you are using the dynamic data picker to retrieve the URL from a dynamic data source, then quotes should not be used:

With the form still selected add a new Dynamic Event:

Open the server connect category:

And select on Unauthorized. This event is being triggered, when wrong user details are provided:

Click the dynamic action picker button:

Under Browser select Alert(1) and click the Add button (2):

Enter the alert text wrapped in single quotes, like "Wrong login details!":

And you are done! If the user provides correct login details he will be redirected and if the login details are wrong the alert will be displayed.

NEXT: Learn how to protect your pages and redirect unauthorized or not logged in users.

Restrict Access To Pages

After you created your login page, now you will learn how to restrict access to your pages.

First create a PHP or ASP page (depending on your server model) and save it. Security restrict page does not work on plain HTML pages:

Select App in the App Structure (1) and click the Security Provider Enforcer button (2):

When the dialog appears enable Restrict Access:

And select your security provider from the dropdown. Only the security providers which are linked for the entire project will appear here:

If you need to restrict access and enable access only for users belonging to a certain access level, then select it:

We want to allow access for all the logged in users, so we don't select any permission here.

Select a page, where the not logged in users should be redirected to if they try to load this page:

Then select a page, where the unauthorized(with no access permissions) users should be redirected to if they try to load this page:

Click OK and you are done. Your page is now fully secured and cannot be accessed from not-authorized users.

NEXT: Learn how to secure your Server Actions.

Secure the Server Actions

Using the security provider tools you can secure your server actions so that no data will be shown to not-authorized users, if they somehow access the link to this server action.

Here's our server action, which contains a database query:

Right click the step before the query:

Open the security provider menu:

And add security provider:

Load the same security provider, which you defined for the login action:

Then right click the security provider step:

Open the security provider group:

And add Security Restrict:

Select your security provider from the dropdown:

And select if this server action requires any specific permissions. In our case it doesn't require any permissions so we select - All Logged In:

Save your server action:

And you are done. You won't be able to preview the server action results (using the preview in browser button) as you are not logged in.

NEXT: Learn how to log out users using a button.

Log Out Users

In order to log users out you need to create a server action and link it to a Log Out button, so that when clicked it logs users out.

First, create a new server action:

We call it logOut:

Right click its steps:

Open security provider group:

And add Security Provider:

Click the load icon (1) and select the security provider you linked for your site (2):

Then right click the security provider step:

Open the security provider group:

And add Security Log Out:

Save your server action and we are done with the server-side part:

On your page select App in the App Structure:

Add new component (1) and open the Data group (2):

Add server connect:

Then click the select server action button:

And select the logOut action we've just created:

This is really important - do not forget to turn the NO AUTO LOAD option on. This will prevent server action from auto executing when the page loads. You don't want to load the log out action, when the people load your page, right?

We want it to run only, when the log out button is clicked. So - select the log out button (1) and add dynamic event (2):

Select mouse:

And then on click:

Click the dynamic action picker button:

And under the logout server connect component, select Load (1) and click the Add button (2):

Click the select button, when you are done:

Now, as we are done setting up the log out action and button - let's add a redirect when the user logs out. Select App in the App structure:

Add new component (1) and open the Browser group:

Add Browser component:

And select your logOut server action:

Add new dynamic event:

Open the server connect group:

And select on Success:

Select a dynamic event to run on success:

Under the Browser component select Go To (1) and click the Add button (2):

Enter the page where users should be redirected on log out. If you are entering a static value, you must wrap it in single quotes like: 'page.html':

And you are done!

Get Logged User Details

You can get the logged in user details by filtering the user table, by the logged user ID. First you need to create a new server action:

We call it userDetails:

Right click steps:

Select Database Actions:

And add a Database Connection:

Load your database connection:

Then right click database connection step and open Security Provider:

Add security provider:

And load the security provider instance, which you are using for your site:

Right click the security provider step and open security provider:

Then add security restrict. This is to protect our data from unauthorized access:

Now as the protection is set up, let's add a database query. Right click the security restrict step:

Open Database Actions:

And add database query:

Then click the query builder button:

And add the table storing your users details:

Open the conditions tab:

And select the user ID column:

Select equal:

And select the dynamic data picker button, to select a dynamic value:

This dynamic value must be the identity returned by the security provider:

Click select:

And click ok in order to apply query settings:

Save your server action:

Now on your page, in app connect panel add new component:

Open Data:

And select Server Connect:

We call it userdetails (1) and then click the server action button (2):

Select the userDetails server action, and click Select:

Then, on the page - double click where you need to populate some of the users data and select the dynamic data picker:

Under the userdetails server connect, select the data you want to bind and click the select button:

Do the same for every binding you need to insert on the page:

Then, when the user logs in he will see his details:

Mobile Apps

Wappler allows you to build and publish amazing mobile apps directly to Apple App Store and Google Play Store with a single click. So simple and so powerful! Design your apps using the integrated Framework 7 tools and publish it thanks to Cordova builder.

Create Mobile App Project

Wappler offers you an option to setup a mobile project. All you need to do is to select Create New Project:

And change project type to Mobile:

You will see two options - Starter Projects and Templates. Here you can select whether to start from scratch or use any of the included templates:

Let's start with the included kitchen sink template:

Enter a project name:

Then select a project folder:

And click the create button:

A dialog asking you to perform a system check appears. It will check if all the required components are installed. Select yes in order to perform a system check:

The console will open, showing you the results:

Open the file manager, and under the www folder you will find the kitchen sink template. Open the index.html file to preview what's included there:

In design view, switch to phone or tablet mode in order to preview the app layout:

Use the iOS and Android buttons to preview your app layout on both platforms:

Then navigate to App Structure tree, where you can find all the components and their properties:

That's your first mobile app project. The kitchen sink template is a great place to get started, as it has a lot examples for all Framework7 components.

Including Framework 7

In order to be able to add Framework 7 components on your page you first need to include it on the page.

Create a blank html file, in the www folder of your mobile app project:

Add a name for it:

And then open it in the editor. Click the Add Framework button:

Open the Framework 7 menu:

And select the version you need. We include the latest one:

You will see a notification saying that Framework 7 has been successfully added:

Right clicking the body element will show you the App Root element:

Adding it, will allow you to add any component you need on your page:

Cordova Mobile Platforms

With Cordova Builder you can select what platform to build your app for. First open the console panel:

Then open the platform dropdown:

Select the paltform you want to use:

A confirmation dialog appears - select yes to add the selected platform to your project:

All the information related to adding this platform to your project will be provided in the console. If everything is fine - you will see a confirmation message. If there are any problems you will be notified there as well with help links pointing to how to fix them:

If you want to remove a platform from your project, just select it from the dropdown and click the remove button:

Again you will be notified about the progress and results in the console:

Cordova System Check

You can easily perform a system check to see if all the required components are installed. This will ensure Cordova Builder is working properly.

Open the console panel and click the system check button:

A system check will be performed. If there are any issues you will be notified. IF the system check runs fine you will see a success message: