Action sheet tied to common toolbar

Questions
1

I’ve created a common toolbar used as a footer. That toolbar has one button and I need to popup an action-sheet when that button is tapped.

I read through this link on how to create a routable action-sheet but, at the time that question was asked a routable action-sheet wasn’t an option (and I think its what I want).

I did see in the docs about routable modals but that doesn’t tell me how to attach the code or the button objects as used in the action-sheet demo.

I modified the action-sheet.html from the kitchen Sink (core) and I have that working as a stand-alone but now I need to make this available to the toolbard/footer on all pages.

I could easily tie an onclick handler to the button but I’m not sure what code would go behind it… an object with the buttons and text but tying the close() etc. I’m not sure of the best way to do this in F7,

How do I approach this?

2

Routable action sheet required in case you need to have more control over action sheet HTML and load it from some file or template or component by its URL. Are you sure this is what you need?

Otherwise, if dynamic Action Sheet is enough (like usually in 99% of cases) then just yes, attach click handler to that toolbar button and call app.actions.create(...params) with required options/buttons https://framework7.io/docs/action-sheet.html#action-sheet-app-methods

3

@nolimits4web Thanks for your continued help…

I tried this:

Like this (HTML):

<div class="col"><button class="button button-fill color-orange" onclick="btnTest();">Test</button></div>

And (javascript):

function btnTest()
{
  // create two groups of buttons
  var buttonsTest = [
    // First Group
    [
      {
        text: 'Call Somebody',
        label: true
      },
      {
        text: 'Call Now!',
        bold: true,
        onClick: function () {
            app.dialog.alert('Calling Somebody');
            window.open("tel:8005551212");
        }
      }
    ],
    // Second Group
    [
      {
        text: 'Cancel',
        color: 'red'
      }
    ]
  ];

  verifyTest = app.actions.create({buttons: buttonsTest});
}

This runs with no errors but I get no action sheet either. Like I said, this is in a common toolbar set as toolbar-bottom. Also, when I look at verifyTest, I see where a lot of “action” has happened but $el is empty.

4

try:

  verifyTest = app.actions.create({buttons: buttonsTest})
  verifyTest.open()

app.actions.create(…params) create an instance, it dosnt open it.

Methods
actions.open(animate) Open action sheet. Where

  • animate - boolean (by default true ) - defines whether it should be opened with animation

https://framework7.io/docs/action-sheet.html#action-sheet-app-methods

also:

app.actions.create({buttons: buttonsTest}).open()

if you dont need the instance

1 Like
5

W.H.A.C.K!

That’s the sound of the forehead slap I just gave myself!

1 Like