Bootstrap 4 table fails to pull data properties

[jamesw]

I’m following the PWA videos and created a NodeJS backend. When I select Bootstrap 4 table and select the server connect action on my partial page, I see data there, but it does not show anything after it. I also opened my action in a browser and it is working just fine. This is looking like a bug, since I can query the API find in the browser, but the action refuses to show any properties under data . Yes, App Connect Mode is also on. I also tried restarting Wappler.

Wappler Version : 3.4.1
Operating System : Windows 10

Expected behavior

I should see query properties under data.

Actual behavior

What actually happens?

data is empty.

How to reproduce

1. Clone the PWA app here: https://github.com/Wappler/PWA-Boilerplate.git
2. Create a MySQL database with a table and some data.
3. Create a DB connection in Wappler.
4. Create a server action to query that data and return all the records in the rable.
5. Go to a PARTIAL page (i.e. “_about.html”) and try to insert a Bootstrap 4 table to pull that data.

[Teodor]

Does this only happen in this particular github project and only in a partial? What if you setup a new page and test it there?

[jamesw]

In a new NodeJS project it seems to work fine. I have no idea what the difference is, other than it’s PWA focused.

[jamesw]

So it looks like the issue stems from having the link icon activated. I guess that saves the query to a file or list somewhere? No idea where that file is, but it seems doing so kills the ability to use it in a page, so I’m not sure the point. Many of the Wappler videos show to click it, and nothing works if I do, so now it doesn’t make any sense.

While unlinking fixes the basic queries, the paged queries are still failing to be recognized by the page, though I can view the server action API working in the browser. So far I’m paying for a product that isn’t working the way the video tutorials say it should, so I’m stuck on this currently. Any insight to resolve this quickly, or bug confirmation, would be nice, thanks. @Teodor

[Teodor]

You don’t have to click the save icon for the database queries. It’s only required for database connections and modules which need to be reused across your pages.
Not sure which video shows to use the link icon for a database query but it’s not needed.

[jamesw]

It was here: https://youtu.be/yS_ekw2JcII?t=338

That’s fine, I remove the links and link files, but I still cannot pull data to the page. I can’t even create the table because no properties are showing. I can open my API and read it fine in a browser, so I know the action is working.

[Teodor]

But that video is showing how to link the database connection, not the database query step.
You don’t have to use this button for the query step.

Can you tell me the exact use case where this happens as I really can’t recreate this issue locally? So you have a server action with a paged query and then on what page are you adding it and the table generator exactly?

[jamesw]

Is there a private place I can send you the whole project? I can include the mysql DB files. I’ll try a DM with a link to download it

[Teodor]

I don’t actually need the whole project. Just the page where you are using server connect component and trying to add the generator to. So, just the front end part.

[jamesw]

<!-- Wappler include head-page="index.html" appconnect="local" is="dmx-app" bootstrap4="local" fontawesome_4="cdn" jquery_slim_34="cdn" id="cds" components="{dmxStateManagement:{}}" -->
<dmx-serverconnect id="qryGetUsers" url="api/GetUsers"></dmx-serverconnect>
<dmx-query-manager id="qryUsersState"></dmx-query-manager>
<section id="about">
    <div class="container">
        <div class="row">
            <div class="col">
                <h1>Users</h1>
            </div>
        </div>
    </div>
</section>

That was in a partial page called _users.html. I was trying to insert a BS4 table after the “Users” header.

I also added this route to index.html:

<div is="dmx-route" path="/users" url="views/partials/_users.html" id="rteUsers" exact=""></div>

Take note that I recently tried to move the partials into views/partials/. Originally it was in the root of the project, but the issue was the same. I’m just trying to organize the project.

I really appreciate helping to get this working. I really want to try building a PWA app. I’ve been developing for decades (desktop and web), and wanted to try a PWA for the first time. Also, I sent a link to my project via DM anyhow in case it helps.

[Teodor]

I don’t know how exactly did you create the partial and its main page but probably something got corrupted or was wrongly set up. I suggest you to check NodeJS docs and how to use partials and pages.
I set up a content page (no layout/main page) and then created a partial. Added server connect on the partial and then added the Table Generator - all is fine:

Check how to use partials:

Using Partials with NodeJS

[jamesw]

As I said, I cloned it from the GIT repo: https://github.com/Wappler/PWA-Boilerplate.git
That was from that repo that the Wappler PWA videos were teaching about on the Wappler YouTube page. I did not create that index page OR the partial designs. As I also said, it does work fine for a new basic responsive page, but for that PWA app set up it was not working.

Anyhow, I may have no choice but to try to create a new project and migrate over what I need, if I can figure it out. That means the PWA boilerplate project is no longer compatible I guess with newer versions of Wappler and should be noted, or updated.

[jamesw]

I created a brand new project and the SAME issue happens when trying to create a PWA application with index.html in the project root and a partial page with a BS4 table. I’ve wasted most of the week on this first table of the whole project, which is a bit annoying. Not sure what is going wrong. If it helps, enabling debug mode and refreshing the page in Wappler shows the query was sent:

cserver-connect:app Executing action step paged +17ms
  server-connect:app options: {
  server-connect:app   connection: 'cds',
  server-connect:app   sql: {
  server-connect:app     type: 'SELECT',
  server-connect:app     columns: [
  server-connect:app       [Object], [Object],
  server-connect:app       [Object], [Object],
  server-connect:app       [Object], [Object],
  server-connect:app       [Object], [Object],
  server-connect:app       [Object], [Object],
  server-connect:app       [Object], [Object]
  server-connect:app     ],
  server-connect:app     table: { name: 'users' },
  server-connect:app     joins: [],
  server-connect:app     query: 'SELECT id, first_name, last_name, alias, email, phone, password, created, last_login, deleted, updated, reg_mode\n' +
  server-connect:app       'FROM users\n' +
  server-connect:app       'WHERE deleted IS NULL OR deleted > :P1 /* {{NOW_UTC}} */\n' +
  server-connect:app       'ORDER BY first_name ASC, last_name ASC',
  server-connect:app     params: [ [Object] ],
  server-connect:app     orders: [ [Object], [Object] ],
  server-connect:app     wheres: { condition: 'OR', rules: [Array], conditional: {}, valid: true }
  server-connect:app   }
  server-connect:app }

But the data property contains no data, even though I can clearly load it in a browser a see it.

[jamesw]

You guys are talking to long to figure this out, so I figured it out for you myself. So, I figured perhaps there’s a file that the system could not find and ran Process Monitor to watch Wappler.exe and found this:

Turns out the reason it is failing is because the web root for PWA is the app folder itself, NOT the public folder - at least that is how the boilerplate project was built, and other online tutorials show the index.html as being in the root. Either I’m doing it wrong for PWA in Wappler, or you may need to rethink how your paths are resolving. If I select the app root you should check THERE first, and if not found, then check the parent folder. Or, allow specifying a new root path for that separately.

After a whole week of bug chasing I’ve learned a great deal of the inner workings of things around the system/js libs/etc, so I guess that’s a plus. lol

I would also strongly suggest if a file is not found, you actually tell the user, or log in the output. Don’t just fail silently.

[Teodor]

The PWA boilerplate was created by @ben and it’s not a part of Wappler.
If you found some issue with it maybe Ben can just update it/fix it.

[jamesw]

True, but those videos are on Wappler’s YouTube page, so in essence, to a new member as myself, how should I know the difference? Also, the files are in a Wappler repo, not Ben’s. If he’s supposed to maintain it, perhaps remove it from Wappler’s git and over to Ben’s, then I can enter issues, and he can perhaps look into it.

[jamesw]

So after reviewing the server code for Wappler inline with PWA design patterns, I realized that the public folder should be the website root, and NOT the project folder itself. Ben tried to mash everything into the project root which causes problems, since he set the project root folder as the web root, and the Wappler system looks at the PARENT folder relative to the web root for the app directory, which causes the data to fail. The solution was to simply make public the web root AND the focus of all editing of the PWA project under the public folder instead.

[ben]

Hi James, sorry about the problems that you are having.

The PWA boilerplate is based on an Apache server as can be seen on the Github page

The site root directory is different for NodeJS.

May I suggest that you get your site working without the PWA part.

Once you have completed that, come back here and I will show you how to convert i into a PWA.

PS. Please start a new topic.

[jamesw]

Thanks @ben, it’s ok now. I was hoping it would get me started quickly on a PWA NodeJS project, and didn’t have time during the week to really look at it more closely. I can easily read web projects like a book when I have time. I had more time yesterday to study the project layout and scripts more in depth, and ran some tests on Wappler, and now I know what is going on, and I got it working like a charm.