Call Framework7 functions

Wappler General How To
#1

Morning @George @Teodor @patrick

Please can one of you help. I need to call framework7 functions from javascript.

For example I want to use the action sheet so I need to be able to call it programatically.

var actions = app.actions.create({
  buttons: [ /* ... */ ],
  on: {
    opened: function () {
      console.log('Action Sheet opened')
    }
  }
})

I need to be able to control the router programmatically
Tried this and it doesn’t work: app.router.navigate(’/home/’)

You can open the dialog via workflow but you can’t close it.

I have asked for help twice now on the same issues:

Calling Framework7 function (Thanks George for answering part of the question)

Thank you.

#2

Update:

Figured out how to close the dialog after looking through the dmxFramework7.js

created a JS function in my custom js file like so:

function eventcancel() {
    console.log('called');
    Framework7.instance.dialog.close() // this closes the dialog
}

Then called it in workflow;

Screenshot 2021-01-20 at 10.28.00
Screenshot 2021-01-20 at 10.28.00524×792 28.9 KB

#3

Update:

I have figured it out myself based on above. It seems you can call all the F7 function using:

Framework7.instance.xxxx in your own Javascript and then call it using workflow.

Example action sheet:

function f7actionsheet() {
    console.log('f7actionsheet');
    var ac1 = Framework7.instance.actions.create({
        buttons: [
            {
                text: 'Button1',
                bold: true
            },
            {
                text: 'Button2'
            },
            {
                text: 'Cancel',
                color: 'red'
            },
        ]
    })
    ac1.open();
}
#4

Hi @Ray , sorry for picking up this old topic, but did you find other solutions outside Framework7.instance? Still not conviced about this solutions, as some stuff is not working (not all modules) and creating on page init seems also not to work.

#5

Actually in the later Framework7 with App Connect, we have more Framework7 components and actions avaiyas App Connect components and flow actions. So you can program almost everything as in page and app flows, so there is no need for raw js programming.

#6

Depends, but for example Action Sheets, Infinite Scroll, Pull to Refresh, Data Table, Calendar/Date Picker,… ? Those are all features that make an App “appy”.
I pretty sure, I miss something, but how can I setup them via Wappler? (I found “Action Modal”, but what can I do here?)

T

#7

Yes with our front end framework App Connect everything is controlled by data bindings, dynamic attributes and events. Check maybe the App Connect introduction in the docs. And also the programming with App Connect flows.

#8

Pull to refresh as well as other components are available for Framework 7:

1 Like
#9

Thanks, George.

I really appreciate that you have implemented more components (is there a list actually, would make things easier). Especially for those of us, who really really would like to use Wappler for mobile dev and try hard.

But this is not the solution / answer to the question.

The question is quite simple and clear: how to call Framework7 functions from within a actual Wappler page?

The Kitchensink examples don’t work in updated Wappler / Framework 7 projects, the same is true for the examples in the Framework7 docs, which all you guys often refer to. Sometimes retrieving a Instance of Framwork7 works somehow, but not completely.

Let’s take a very simple example: the Dialog page from the Kitchensink, how can this be implemented via the actual Wappler / Framework7 combination? Dialogs are something we need all the time everywhere. Perhaps some of you guys could do a series of quick tutorials on this basic things?

https://framework7.io/docs/dialog

#10

Framework7 is initialised into Framework7.instance and can be used like for things that might not be in App Connect:

function initswiper(sel) {
    return new Promise(function (resolve, reject) {
        params = { pagination: { "el": ".swiper-pagination" }, "spaceBetween": 10, "slidesPerView": "auto", "centeredSlides": true };
        Framework7.instance.swiper.create(sel, params);
        return resolve(true);
    })
}
#11

The Framework7 dialogs are all available as app connect flow actions. So you can make a page flow or app flow and you can call them all from there.

See:

Maybe @Teodor can show a Framework7 specific use case.

1 Like
#12

Unfortunately, this doesn’t work for all components, I tried, for example, to create a Gauge, but gauge.create didn’t work, the method create didn’t exist on Gauge on the Instance. Same for Action Sheets.

#13

But Gauge is also available as a component in Wappler :slight_smile:

#14

That would be awesome!

I am pretty sure, most of the stuff is there, but it’s simply not easy to find or logically (to me).

And then having in mind that I have to pay a monthly fee for the product and spend more time on searching the (sometimes really outdated docs), the forum, begging for direction and help and to annoy ppl here and then still failing is simply frustrating.

#15

Yeah, I know. I used it as a example because someone refered me to the examples of F7 and I wanted to try the nice dynamic gauge from the examples… :wink:

The dynamic gauge from the example:
https://framework7.io/docs/gauge

Pretty sure this is also possible “the Wappler way”, but it’s not obvious to me?

#16

The create function looks available on mine (as does actions.create()):

image
image954×94 13.1 KB

I don’t have any gauge/actions elements on that page to fully test

#17

(Wappler crashed not 4 of 5 times when I try to edit / create a flow… you should have gotten some reports?)

#18

If you have specific crash case that you can reproduce with debug logging on it will be very helpful to file a separate bug report.

#19

Just created a ticket.