How-to Guides — Original guides

Wappler documentation

How-to Guides — Original guides

Illustrated how-to guides 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 (32)

Adding App Connect on Your PagesApp 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 struView guide→Adding Class or IDYou 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 tView guide→Adding Project Default FrameworksYou 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 project View guide→Applying Margin and PaddingYou 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 padView guide→Applying Responsive ImagesAdding 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 BaView guide→Debugging Made Easy: Understanding Web and Database Server OutputsIntro You can easily explore the web and database server logs in Wappler using its built-in debugging tools. These tools let you view server responses and errors in real time, making it simple to pinpView guide→Debugging Server-side Errors and Inspecting App Connect Components DataIntro Wappler just got even better with two new tools: the Network Panel and the Live Data Panel . The Network Panel helps you check network requests and spot errors, just like browser developer toolsView guide→Defining and Using URL ParametersIntro 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 Defining UView guide→Drag & Drop ElementsYou 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 specifView guide→Dynamic AttributesDynamic 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 tView guide→Formatting Dynamic Data for Client Side DisplayThere 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 dynaView guide→Inserting Common HTML TagsIn 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 sView guide→Display nested categories and productsA worked parent-and-child example: return nested records, repeat the categories, and bind each category’s products.View guide→Overlaying Text on ImageYou 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 thiView guide→Push Footer to bottom of viewportWe start with a page with the usuals, a Navbar, a Main section and a Footer. As you can see, the Footer clings to the bottom of the Main section. To push the Footer to the bottom of the page when therView guide→Responsive Images with srcsetIntro 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 forView guide→Set dynamic mix and max years in Date PickerIntro You can set Min and Max years for your datepicker as static values, but you can also use dynamic value relative to current year. Dynamic Min and Max Years In our example we will set the Min yearView guide→Set Table Row Background Color with Dynamic ValueYou 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 dView guide→Show a Message when Query Returns No ResultsIn 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 attributView guide→Show Confirmation Popup when Deleting RecordsYou 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 evenView guide→Show or Hide Elements ConditionallyIntro 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 anView guide→Show Total Number of Records from a QueryWe 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 modeView guide→Sticky Navigation on ScrollIn 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 sView guide→Styling Bootstrap 4 ButtonsSometimes 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 anView guide→Using App Connect with JavaScript FunctionsIn 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 JavaScriView guide→Using Font AwesomeWappler 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 availableView guide→Using Font Awesome 5 ProIf 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 thisView guide→Using Shortcut Keys for Dynamic EventsWith 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 shView guide→Using the New Visual Expression BuilderThe new Expression Builder in Wappler offers a great visual way to create complex expressions for filtering data, conditionals, class toggles and dynamic attributes.View guide→Vertical NavigationIn 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 View guide→Working with Current Date and TimeIn 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 pagesView guide→Working with Elements on your pagesLearn 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 blue View guide→