App Connect not working in content pages

Wappler General Need Help
1

Hello,

I am building a Capacitor Framework 7 application. For some reason dynamic dmx data and functions do not work in the content pages I create, only on the index page.

Here is an example content page, in which the dynamic data {{data}} shows up as plaintext on the page instead of dynamic content. Same goes for if i try to populate a div with dmx-bind:title="data", or use any dmx function for that matter.

<!-- Wappler include head-page="index.html" capacitor="local" framework7_icons="local" is="dmx-app" id="test" appConnect="local" framework7_8="With App Connect" -->

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="left">
        <a href="#" class="link back"><i class="icon icon-back"></i>Back
        </a>
      </div>
      <div class="title"></div>
    </div>
  </div>
  <div class="page-content wappler-block">
    {{data}}
  </div>
</div>

If I put the dynamic data on the index page before routing to another page, the data shows up correct.

2

are the content pages is the same folder as the index.html? If not you might have to change the location such as:

<!-- Wappler include head-page="../index.html" capacitor="local" framework7_icons="local" is="dmx-app" id="test" appConnect="local" framework7_8="With App Connect" -->
3

I made this test file in the same folder as index. But it doesn't work in my subfolders either where I'm using ../index.html

4

are you getting any error messages in the browser console?

5

No errors in the browser neither

6

do you see the data you expect under the network tab on the web dev tools?

7

Thats the thing, I tried putting API Actions in content pages but they never trigger.

I tried using buttons to trigger them, does not work. I even added a simple JS function at the bottom of the file and run it on button press using a page flow, but still nothing. But it worked on the index page.

The API Actions wont even trigger if I have autoload on.

8

To try and isolate the issue I downloaded the Kitchen Sink F7 template in Wappler and the same issue persisits. If I add App Connect to the index page it gets initialized correctly and I can use AC functions inside the index.html file.

However when trying to use any App Connect functionality in any other sub-page, by including or excluding it in Wappler include in the application, it does nothing. Even though we should expect routing to be correctly set up for the application.

9

I don't know if this is a good solution, but it solved it for me.

I added this in app.js:

f7.on('tabMounted', function (newTabEl) {
    const el = newTabEl && newTabEl.querySelector
        ? (newTabEl.querySelector('.page-content') || newTabEl)
        : newTabEl;

    parseEl(el);
});

function parseEl(el) {
    if (!el) return;
    if (!window.dmx || !dmx.app || !dmx.app.$parse) return;

    dmx.app.$parse(el);
}
10

I know you got it solved, but I have a few questions about this:

  <div class="page-content wappler-block">
    {{data}}
  </div>

Where's data coming from?

You should have something like app.api.data.etc if it's on App Root
Maybe you have your data component inside index page instead App root ?

Here is my example:

image
image274×131 2.38 KB

image
image375×444 8.14 KB

image
image404×155 3.31 KB

Also you can have your api data source or server connect inside a content page, just make sure it's inside page element:

image
image384×207 3.98 KB

<!-- Wappler include head-page="index.html" is="dmx-app" id="about" appConnect="local" framework7_icons="local" capacitor="local" framework7_8="With App Connect" -->


<div class="page">
  <dmx-api-datasource id="api2" is="dmx-fetch" url="https://jsonplaceholder.typicode.com/posts"></dmx-api-datasource>
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="left">
        <a href="#" class="link back"><i class="icon icon-back"></i>Back
        </a>
      </div>
      <div class="title"></div>
    </div>
  </div>
  <div class="page-content wappler-block">

<!-- Using a repeat here -->
    <div class="row" dmx-repeat:repeat1="app.main.f7page.api2.data">
      <div class="col-auto">
        <p>{{title}}</p>
      </div>
    </div>
  </div>
</div>

11

The API Actions, Stores etc. have not been an issue. The issue was that on the content pages App Connect was not initiated at all and therefore it couldn't be used, regardless of if the API Actions were correctly placed or not.

When trying to use things like dmx:text it wouldnt even attempt to populate the text, since App Connect was not loaded to begin with.

The solution I posted mounts AC to content-pages and therefore I can use all AC functionality.

12

Sorry if I'm asking too much, just want to know..

Are you entirely sure that both (index.html and the content page) has framework7 v8 as framework?
Could it be that some old framework7 file (like v6) is still present onhead tags of index.html?

I have a serious doubt about that app.js always thought it was replaced by dmxFramework7_8.js