General

Discussions related to the Front End components.

About the General category

Discussions related to the Front End components.

Struggling with hover effect

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…

Wappler Side Navigation Design

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 to add a Stripe Element?

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.

Cutoff text when cell is not wide enough

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…

Placeholder when table is empty

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 …

Best way of making a swiper component

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…

Framework7 Svelte (v6.3.9)

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?

Spinner in the button with dynamic text -- is it possible?

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…

Define Global Data eh?

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?

Submit multiple forms in repeat with flow

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…

Ability to see instant changes on the page when changing styles in NodeJS projects

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…

Auto Show Info Window of any Marker in Google Maps (was available in DMXzone)

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…

Frontend general questions

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…

Google maps: show data detail in modal on Marker Click

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…

DMX Binding - How to get the current URL

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…

Error formating number

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, ‘,’, ’…

Page-specific SEO

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…

Select field arrow disappeared when converting from BS4 to BS5

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

Preview not matching browser view, page not formatted correctly?

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…

Open Window using flow and JS

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…

Blog Body partially listed

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…

How to use 'this' in javascript in repeater

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…

Open S3 Sign Download in Browser

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: …

Adapt visual accessibility

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 …

Bootstrap version

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

Formatting Content Created in Summernote saved to a database then publish on a Web page

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…

Bind Header checkbox in Bootstrap Table to control the row checkboxes

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,…

Trying to get a side nav sticky beneath top sticky menu plus full height

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…

Creating a vertical menu for a dashboard: How do I center text when using navbar brand

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…

Multiple conditions on Class toggle string

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…

App connect showing wrong url path

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…

How to save object from api response

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…

Reading dynamically generated boostrap table

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…

Custom Switch Functional but doesn't change position

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…

Can you schedule App Connect Flows?

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?

Flex container does not hide via dynamic attribute

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…

Open Swiper to a specific slide

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…

Can't seem to get medium editor to display properly

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…

Timeline of activity

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…

Sending and receiving checkbox values through url (or any other method)

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…

Dynamic Colour Picker in form?

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…

Bootstrap CDN vs Bootstrap Local

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…

Action List Group

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

Video Tutorial Request: Design Features

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…

Chart cannot plot line if column name has space

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…

SPA ServerConnect on load

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

Wappler chart using multiple dynamic datasets

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 …

Ignoring scientific notations

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

Listing clicked elements on an area on a list in another area of the screen

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 (…

How to set swiper height to 50vh on desktop and 100% on mobile?

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…

CSS New-Line Question

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…

Coordinates of click on map or image

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…

Swiper - Show navigation arrows on hover and in mobile view

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…

TypeError question

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.

Right click context menu with position at mouse pointer

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…

Increment Value with Button Click

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 …

Lightbox styling

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

App Connect Notifications?

because the releases are not together wappler dreamweaver?

Value of an ID attribute in a repeat region

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…