Front End Components

Discussions and bug reports about the front end components included in Wappler.

The horizontal swiper has changed to a vertical arrangement in all my websites

Wappler Version: 5.4.1 Operating System: Winddows 11 Framework: Bootstrap 5 Expected behavior <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"> <a cl…

Instead of conditionally shows element inside the Conditional Region, I want to conditionally remove the region entirely. What I want to achieve is the same as dynamic attribute > show/hide, but inste…

Hello all, I am having a hard time with making a row change background colors when it is hovered. This is just a basic row, not a table. I’ve tried following the example in the docs - nothing I’ve…

How can I use a custom version of Tagify or other JS scripts? Wappler adds: <script src="https://unpkg.com/@yaireo/tagify"></script> to the page when I use Tagify for example. If I change that to …

Steps to reproduce in Wappler v5.2.3: Add a server connect inside a conditional region. Open the Actions Editor. Selecting the server connect inside the conditional group inside there won’t add the…

Wappler Version: 3.3.6 Operating System: Mac OS Big Sur Expected behavior A Server-Side API request responds with JSON data. Part of the Response Data from the server-side request is then dynamical…

I have the following results returned from a database which I’d like to represent in a chart. Assigning a static array of strings dmx-bind:colors="[’#fff’,’#ddd’, etc…]" works fine but I want to use …

I added a modal to a layout page. When I want to trigger the modal with a button from a content page then it isn‘t selectable under the toggle UI. Are modals supposed to be selectable in a content pag…

In the tutorial on building multi column forms, reference is made to the Form Row. The tutorial says “And add Form Row - this is required in order to build multi-column layout:”. I have added a contai…

Was working on a new navigation and thought id share the design here so others can use it too. Please note this was more focused on function over the styles you can edit the css below to change any c…

How do I add a Stripe Element to my page? Just looking to attach a card to an already created customer in Stripe and have the element return the stripe card id.

V 5.1.4 (W10) I can’t take control of a tab with a button Also tried the “controlled by” property of the tab: Nothing happens Edit: found this on console:

Hello all, I have a chat window in my app. I built it using a responsive table. The problem is that when there are too many chats, the table gets way too long. How do I make my table a fixed height,…

Hello all, When I have text in a cell, how do I cut it off instead of it dropping down to the next line. Example: 123 Forum Example St Faketo… instead of 123 Forum Example St Faketown MO 12345 U…

Hello, Wappler newb here. I have some responsive tables inside cards that are populating with a query. I would like to show an image as a place holder when that table is empty. How would I go about …

Hello: First of all, I am completely new to Wappler, so please forgive my ignorance! I am trying to make an Airbnb-like carousel with swiper, exactly like this: I want to make sure that I am cho…

Hi! I have two websites, and one has a link to another. What I want is when the user goes from the first site to second, to see all the query params that were set in the first website. I was hoping…

Wappler Version: 4.9.1 Operating System: W10 Open a new content page in a NodeJS app. Select an existing binding. Use the wand icon in picker to add some formatter to it. Save. See that the formatt…

Wappler Version: 5.0.0 beta 1 released Operating System: Windows 10 Actual behavior When inserting a modal, a period is inserted instead of a quotation mark.

I’ve made a lot of forms that required Multi-steps over the past 10 years. I was always interested in how to make them intuitive and clear in what was required of the user for each input. Just the o…

How do you implement a switch for light or dark mode ui? What are the best practices to keep in mind when designing for light and dark mode via wappler?

Hi, it’s possible to use templates made with TailWind in wappler ?

Hi all, I’#m looking at using summernote or alternative editor, where I can inset text /html /image at the current cursor position - anyone know how or succeeded in doing this ? /thanks

Wappler Version: 4.6.3 Operating System: Windows 10 I think this is a bug, i am not sure In API Form if there is only one parameter then “=” is getting added to parameter value. If I have two or m…

I’m looking at using Framework7 in Wappler. Does Wappler now have built-in support for the latest Framework7 version (v6.3.9) and its Svelte version?

Seems like spinner only shown with static text. With dynamic inner text it doesn’t show. Like this: <button id="btnform1" class="btn btn-primary" dmx-bind:disabled="state.executing || !input1sum…

i added a container, then i added a row then select LAYOUT , Columns in the properties panel and choose 6 columns… i then changed the Row Columns in the properties panel to 1 within Mobile view… So it…

How does it work? Why are they there? I set up some values and then when I try and set a value for them I can’t. Is this supposed to be a Redux/Hooks clone thingy that didn’t work out?

You need to use the dynamic attributes > link for the link. You cannot use dynamic data in the static href attribute.

I have a repeat (a table) with a form I would like to be able to submit all one after another.… So when one ends the next one starts submitting. I thought the easiest way would be to build a flow f…

Hi @patrick, I have a database date “2021-10-19T12:08:35.000Z” which comes through to the browser unchanged. I then apply formatDate(‘dd-MMM-yyyy HH:mm’) to format the date and it appears on the page…

Hey everyone, I’m working with a calendar inside tabs and the events themselves are not showing up correctly. The calendar loads inside a tab (on page load) and looks like this: Notice the events …

Just a minor a ui issue. The condition for class toggle is not wrapping to next line in windows.

Would it be possible to allow the Calendar event text, and tooltip, to be interpreted as HTML? For example it could be used to: Add a link Add a FontAwesome icon Add a picture etc. Currently any…

Wappler - The Visual Web App Creator 2021-08-05 04-55-40 Doesn’t seem to mind moving navbar items but it will not let me reorder the dropdowns - only drag them out of the navbar - once t…

Hey, I am very thankful the Wappler team was able to get this feature into the application for those of us who use the calendar! So I am using the new feature: Event Calendar How to get the date ran…

Hi I guess it’s something super simple and easy to do but i can’t make it working. I tried with Dynamic attributes > display > show but does not work (i don’t see the card or column in the action) …

Hi, I try to follow this documentation for basic Column Sizing options, but I don’t see it in wappler. Do you know where I can find it or if it works differently now?

Wappler version 4 beta 13 Windows 10 Node Server Docker The preview in the Design windows,looks as expected with the selected Theme, but when printed in the browser it doesn’t take into considerati…

I’m starting to use NodeJS projects. And it requires to use separate files for layout and pages. That’s fine, but one thing seems inconvenient. Changes to class style in Design doesn’t always shows on…

Hi there fellow Wapplers, So what I’m trying to accomplish here is auto show info window of any marker in the google maps component. I did find a tutorial on how to set it up in DMXzone, but it seems…

I’ve downloaded a 7-day Wappler trial and am trying to confirm if Wappler will be the best tool to build websites with a concrete goal. Could you please help on answering following questions: [Q] If…

Hi there fellow Wapplers, Fairly simple question: is it possible to show a modal with a Data Detail on Google Maps Marker Click? If so, how? I did find this cool video that shows you how to show a d…

I am dynamically generating a menu from a database table. I’m trying to set an ‘active’ class based on if the route is found in the current location.href but the dmx data binding doesn’t appear to hav…

Hi, I’m trying to use the API action client side, to POST some data. I can post static data values, but no matter what I do the partial form data is not being populated when trying to pull the form …

Just recently when I compose a new web page there are two variables set Meta Name and Base href. When they are set; the page works fine on the development server but once the page is uploaded to th…

Hi, Trying to format the following sum {{panier.data.sum((ds_price * ds_qty))}} but I am getting an error in the property pannel: I want to use the following formating .formatNumber(2, ‘,’, ’…

Hello, I need your help, I can’t get any further at this point! I followed these instructions (https://docs.wappler.io/t/set-table-row-background-color-with-dynamic-value/4846) to improve my table gra…

Hi folks I’ve created website pages from a saved layout. Header meta data and scripts are included in the layout file. What’s the best practice to adding page-specific header meta data (and/or) scrip…

Wappler Version: 3.1.0 Operating System: mac Expected behavior Element focus should never change unless done so by the user Actual behavior Changing the type of a title moves focus to another eleme…

Hey, I am seeing inconsistent behavior on a select field when applying a value updated/value changed event. In this example on a bare test page I have the following logic on the select field: As …

These are select fields with no arrows anymore. Disappeared immediately after switching to BS5.

Hello I have an interesting phenomenon. When I create the logout it works in IE, Firefox and Chrome. I am logged out of the dashboard and i go to the login page. If I open the dashboard without loggin…

Hi, Not sure what’s going on but my preview is not matching the browser view. I have Bootstrap 4 installed and the page type is content. I also noticed there was no head or body in the code, but thi…

Wappler Version: All Operating System: All Expected behavior Flex Items are direct descendants of Flex Containers Actual behavior A card is a Flex Container, yet its properties show that it is a F…

I’m using DO spaces and the S3 server connect and trying to create a download button in a table. I’d like for the download to open in a new tab in the browser each time. The button runs the server co…

======== TEMPLATE BUG FORM ======== Wappler Version: 3.6.1 Operating System: Windows 10 Using node.js environment. Expected behavior I have two server connects (with paged querys) and two Query M…

Deal alll, I am trying to make a blog list , where the blog body will be displayed partially (2-3 lines) . Then when the user press a button will open the complete entry to a modal or a new page. I a…

I have a repeater that contains a form. I want to disable the button if the form is submitted in the repeater. I’ve tried a number of things but nothing is working. Tried passing this into a javas…

Hello, I am trying to set my calendar event text color to be dynamic based on dynamic values. Here is my logic: encounter_status == ‘rescheduled’ ? ‘#ff9b37’: encounter_status == ‘no show’ ? ‘#e828…

Just wondering if there was anyway to set for S3 signed url downloads to open in the browser by default, rather than download (regardless of browser settings). There are a few suggested options here: …

Hi I would like to change the pixel aspect ratio of the calendar based on screen width. I know that the calendar resize accordingly to the device screen, but I need a smaller height (so bigger aspect…

Hello, I have a calendar with 3 sources: Given that these sources are for different even types, when clicking on an event belonging to a respective calendar source I’d like to launch a distinct mo…

So I’m just revisiting whether to change my multi select function to select2 or bootstrap-select (or AN Other option). My solution uses the standard single select input adds/removes selections to an …

Hello, I have a select form field whose data source is the following: However, when I look at the select in the app, it does not return any results. The select menu populates perfectly when the…

Ok the problem was I think that Duration is a string instead of a number. I tried adding + in front of Duration but still didn’t work. I managed to get it working by adding Duration.toNumber() and n…

Hello, I have a weekly calendar that shows some scheduled events – say 20 total for example. This week for example, the start date is 10/11 to 10/17. I’d like to show a user a count of the number of…

Hello, I am trying to apply a “Class Toggle” if my query returns a null value. The reason for this is to alert the user of a certain condition having been/not been met. To be more specific, the quer…

Hey, This is probably a really simple question with a simpler answer. I want to submit a GET form along with some results from server connect queries already on my page. Form fields: user, service S…

Hello, I need to limit a date input field to specific days of the week and can’t seem to see a way to do this. It looks like the Custom/Invalid dates require a server connect so it looks like that w…

Hello, I’ve created a custom calendar with a database source which is working nicely. However, I need to apply a conditional class on certain events. To start, I created a class “event-danger” and …

Wappler Version:3.3.2, 3.3.3, 3.3.5 Operating System:Windows 10 Pro Expected behavior scheduler1.running -> false Actual behavior scheduler1.running -> true Server-Model PHP/ASP.NET How to reprod…

Hi guys, i have to adapt accessibility for visually impaired people on my wappler website; font size manipulation and other like this. Did somebody from here deals with this issue? I need an ideea to …

Hello Folks Wappler So, if when creating a new project and adding bootstrap via CDN, I “always” have the latest version? Thank you.

Hi, sorry of this is a silly question. I checked and did not find it answered yet on this forum. As many of you i’m sure know, Webflow allows you to export the code of the websites you build on their…

Is it “Legal Wappler” to put variables inside a repeat statement in HTML? I am doing this as described below, but I’m getting irratic results with regard to the variable values being updated correctl…

Good Day Fellow Wapplers, We were able to install and configure the Summernote text area to insert content into a database and then successfully display in a blog post along with a whole bunch of oth…

Hi All, As the title suggests, I have a Bootstrap table: What I want to do is bind the header checkbox to function like "select all " or “deselect all” for the row checkboxes. With no luck so far,…

Hi, I’m trying to use dmx-bind:checked in a toggle button group. On page load everything works fine. The page loads a table, you can click on any row to bring up a side panel update form. The update…

I got the background video to work, but when I go to a mobile setting, the video is simply cutoff and not scaled down. Is there something I need to do to make things happen? ex. www.tetlowbuildersc…

output_1.data.query_1.where('user_id', detail_output_1.data.user_status_by_id, '==').values('user_name') I used to able to select Where statement then Values graphically but just realised I couldn’t …

Hey everyone, happy Monday! I’ve been trying to get a sticky sidebar as we explore rebuilding our main app in Wappler - it’s naturally easy to assign this to a header or navbar element, when I assign…

Hi, I’m new to wappler, enjoying it so far. I am building a Dashboard page and am creating a vertical navigation bar. I have updated the flex flow direction to be vertically oriented and added multip…

Hi, How can I add multiple strings as conditions for a class toggle. For example: dmx-class:badge-danger="(status == (“No show”) || “Cancelled”)" This script is not working, it is applying the bad…

Hello guys, I am quite new to wappler so I am still struggling trying to get through some of the basic stuff, but I cant seem to find the solution as to why the table generator is displaying fields o…

I plan not to use server side connect. because I use backendles for my backend and netlify. how to save object from api respone. like the picture below. How do I save objectid using local storage co…

Wappler Version : 2.9.0 Operating System : Mac OSX Catalina v10.15.3 Experimental: Switched on Null check doesn’t work on numbers (from any component - var, serverconnect, datastore etc). <dmx-val…

Folks, This might be a unique situation. I am able to run some queries and generate a responsive bootstrap generated data smoothly. The individual cells are binded to the right parameters and populat…

Hey all, I’m new here and just learning with a pro account. I’m watching the video: https://youtu.be/fTHshWOgCcU?t=302 and I don’t have the same options to duplicate the button. Same goes for ins…

Wappler Version: 2.90 Operating System: Windows 10 Expected behavior What do you think should happen? I am trying to configure two server connect actions on a button click. I expect to be able t…

This is probably super trivial but I can’t seem to find any info about it. How do I make a text input show those check symbols on form update? This was taken from a test page I made when I was st…

Wappler Version: 2.8.4 Operating System: Windows 10 Expected behavior Be able to enter text without hiccups Actual behavior

I’m probably missing something simple here. I have a Custom Switch which works (i.e. clicking the switch causes the checked value to change), but the switch doesn’t appear to be checked on the UI. It…

Hi, could u pls tell me how can i use a youtube video as a responsive background instead of a video file from my server? Thnks in advance.

Let’s say I want to build a desktop app and want to query a server for updates on a periodic basis. Is this possible with the new App Connect Flows?

I have a page in which I have a number of forms which show/hide on button click which toggles a variable tied to the show event of the element (mainly to show insert form below table). Setting dynamic…

I want to open swiper to a specific slide. I have a gallery and I use the swiper as the slide show and it works well, however it starts the slides at the begining… I want the user to be able click o…

I have a fix for your error @brad. dmxFormatter.zip (7.4 KB) It was a small bug introduced in the last update, did have a fix directly after release that will be included in the next update. The bug …

thay should be child.items.where(`year`,"2019","==").sum("salary") or child.items.where("year","2019").sum("salary") the type of quotes doesn’t matter, but the == parameter should be on the 3rd p…

This has been fixed in Wappler 2.5.2

I have a basic form with some text fields and two media editor text areas. Problem is medium editor does not display the buttons although I have set them to display. Any Idea what I am doing wrong? H…

Hi, I’m wanting to build a timeline of client activity that combines different activities from different database tables and show them in chronological order. For example combining bookings, transact…

Hi. I have a form to insert data into the database which utilize the autocomplete component and it’s working fine. However when I try to edit a record and I want to populate the value of the autocompl…

Hi, I have 2 questions: Question 1: How to send check box values (checked) through an URL at a form submission Question 2: How to dynamicklly check check box after receiving their values through an…

Hi, I’m trying to create a form that includes a color picker, it’s pre populated from a data_detail compnent which is defined by clicking a row in a table. If I use a text input the colour hex shows…

Is there a general consensus on whether to use Bootstrap CDN or Bootstrap Local for a new project? My instinct says Bootstrap Local because then you’ll have everything you need locally hosted and you…

Actually we have solved this long time ago, but probably you have an old version of the extension still installed. So you need to refresh the installed extensions. On the Mac you can do so by: firs…

Hi all, Is there any documentation or tutorial about Action List Group component ? Thx for help.

Hi, My apologies if this already exists. I’d be very interested in a video tutorial on using the design components of Wappler. Specifically related to the Bootstrap framework. It seems most of the tu…

I noticed a problem displaying strings which include double quotation marks. This is due to a typo in this line, in dmxAutocomplete.js: return t = (t = (t = (t = t.replace(/&/g, "&amp;")).replace(/"/…

Hello, I have created a SQL PIVOT table to use for my Chart to have multiple datasets. Some of the column names has spaces e.g. “cash advance”. I noticed that if the column name has spaces (i.e. ca…

Hi, In my single page app, the serverconnect of all the pages are loading in the beginning, is there a way for me to use DMX-bind to add noload=“noload” only when ! isMatch ? Thanks, Elias

Hi, Where is the best place to store the name of the loggedin user to display it on the frontend? I am currently storing it in the cookie session but I am sometimes encountering the case where the u…

Hello Wapplers, I would like to ask if anyone was able to implement a Wappler Chart using multiple dynamic datasets? The datasets are changing depending on the value from the db query. e.g. Every …

This has been improved in Wappler 2.1.6 There’s a changed event available now, which should be used in your case.

I used to create functions and run them using Dreamweaver static events and the code would look like this: MM_callJS(‘startloading();’); for a function that would start a loader on the page. Can I r…

i’m trying to use the background video control but it’s not working. I can see it fine in Wappler but when I try to preview it in a browser, nothing shows. I put a width and height on the video in t…

Hi, I have two components on a modal: A custom select that fetches the options from a ServerConnect An input box that is used to add a new option to the select: When I fill the new option box a…

Hi Elias, @patrick will fix this for the next update Meanwhile you can fix it yourself by changing this: title: function() { return this.getAttribute('popover-title') ''; } to: title: f…

A field represents a foreign key. How to create a box of items (combobox) of the information of the other table so that the user can select a specific element?

Hi, I have two input fields where only numbers are allowed. But scientific notations are still allowed, which I don’t want. Does any has an idea how to ignore those? Kind regards, Nick

Hi, I’m trying to figure out how to do this on wappler and I’m out of ideas: My screen has two areas, one main area with images (I’m thinking cards should be the correct option here), and a column (…

I have a page with three rows of content elements that I want to bind to my json file. Should I go though the Repeat Children process for each row, or is there a way to combine bind all of them to the…

Hello, I’ve created a swiper https://kalimeraholidays.com/vlastos-eng.html and I can’t make it smaller. I would like it to be max-height: 50vh on desktop and bigger resolutions. It’s nested direc…

This may not be a Wappler specific question, but I’m having a bear of a time getting my Title and Paragraphs closer to the top of this card body, due to the image causing everything to break to the ne…

Still familiarising myself with Wappler and I have another question. 2 use cases in my project is the ability for a user to pin point a location on a map or an image by clicking on it. Is there a way…

Hi, Since the 1.8.2 update when I try to add a server file include to a page there is a strange thing happening: While the server file include previously added (before the update) show ok on all pag…

https://www.teddy-talk.com/ls-shop.php?offset=72 The above page is using the Nested Repeat Regions and Travel Catalog with Swiper guides. There is an issue where the slides are stacked vertically. Pl…

In Webflow, on selecting the display mode - mobile, tablet etc - all the changes made are with respect to that mode. All media queries are set up automatically. But in Wappler, the new design tab does…

why the text input and text area are being repeated? ref image:

I noticed tonight that if I create a query in the database. Add server connect to page and give it a name. And add a data view to page. If I give the data view a custom name like my_data_view, I wo…

Wappler does not recognize the tags in the App Structure < ul > < li > < / li > </ ul> " or < ol > < li > < / li > < / ol > " although they are listed in the bootstrap4 descriptions. Is there a s…

Does anyone have an idea what these two errors might be? I have no idea what it relates to. I’m not getting any errors in code view, and I have no idea what it might be referring to. Thanks.

Works like a charm now with the 1.5.1 update! As I read in the What’s new, it wasn’t really a bug but a missing feature: Thank you guys!

Hi guys, is there a way to neatly integrate a right click context menu at the rows of a table? Since I am limited in width and the table already has many columns, I figured it would be best to provid…

Hello @jowhiskey The date picker always sends the date in ISO format to the back end and this is for purpose, the format applied in it is for the client side only. This is because your database (date…

I have a number input field. I also have a button. When the button is clicked, I want the input field to go up by 1. So now it is 0. If I hit the button 3 times, then the value should show 3. On …

We take on a lot of outside projects with files located all over the place… The majority of circumstances adopt the following structure: asssets/css assets/js assets/fonts assets/images Now we w…

There are tooltip in Wappler? I m looking for them but I don’t find them

How can we style the lightbox? (dimensions, background transparency, borderstyle, etc ? I am familiar with the lightbox extension in DW.

because the releases are not together wappler dreamweaver?

Wierd 1: The Database Insert / Action screen will only momentarily appear and does not stay open. Mouse clicks will momentarily open the screen but it will not stay open. See attached vid: screen fla…

The Input Parameter ID for variables does not display the value on the app’s screen: Input Parameter Value.mp4 (21.7 MB) But it does insert the code. Don’t know if this is causing my edit/update pag…

In a repeat region, the value of an ID cannot be static because attributes of type ID cannot have the same value in a document. Either the attribute could be removed or a lightning bolt could be adde…

OS info Operating System : Mac OSX 17.5.0 Wappler Version : 1.0.0 Problem description When adding a Select Form Group to a form it just enters the select element in the App Structure. It does ent…

Is there a way to toggle a modal from a test link? It appears it can only be done from a button? This becomes an issue because there is no way to add a button to a dynamic data table cell.

Without the ability to add a tag to content there does not seem to be a way to display a table cell content based on it’s value. Example: If the value of the dynamic content displayed is equal to ‘Y…