SPA open modal from external link

Wappler General How To
#1

I have a SPA which is all at index.php (no content files). I need to create links in emails that will open the site and have a specific record load into a modal and have that modal open. I’m guessing it’s some sort of routing but I’ve not been able to get that to work. I figured I would try to just get the page passing the tripbit_id but couldn’t get that working even…

image

image
image639×1446 53.1 KB

I’ve tried a bunch of different combinations of paths with/without / but I get a 404 Not Found error every time.

#2

I got the functionality of getting the parameter and opening the correct record in the modal but with a ?tripbit_id= in the URL.

    $(document).ready(function() {
// document is loaded and DOM is ready
var tripbit_id = getUrlVars()["tripbit_id"];
dmx.parse('sc_tripbit_get.load({tripbit_id: ' + tripbit_id + '})');
$("#modal_tripbit").modal();

});

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}

I’d rather the URL not need the ?tripbit_id=### but rather be /###

#3

Did you check the browser component ?

#4

How would the browser component help me with creating links to my site?

#5
#6

You can put the visibility on the modal indeed on the value of the route and it’s is match data attribute.

Then when the route is matched the modal will show. Maybe @Teodor can assist with a sample

2 Likes
#7

Thanks @George. A sample would be great @Teodor as I’m not really understanding. :slight_smile:

1 Like
#8

Select your modal, add new dynamic attribute and select modal > show.
Select ismatch under your route:

Screenshot_26
Screenshot_26602×1130 84.3 KB

You are done. The modal will show once the selected route is loaded.

1 Like
#9

It’s great how there’s always a solution in Wappler.

When I (try to) follow these steps, the Route doesn’t show up in Data Bindings for me. I suspect I’m just missing steps. Here’s my setup:

  • I have many modals on my site / page. A handful are dynamic, most are not.
  • I want to open the (non-dynamic) modal(s) with an external link
  • I can set up a route… at least it lets me put the data (e.g. /index/#portfolioModal21 ), add Route Properties (a name, a path, the URL, the Method, all of which I’m guessing at)
  • I can go to the Model in the App Structure panel, select Dynamic Attributes, select Modal > Show, and the modal then appears in that section.

But then in “When” under Dynamic Attributes I choose the lightning bolt (client side data binding) and there are no routes displayed, and in fact, my (non-dynamic) modal isn’t in the list, either. I tried making it dynamic - not knowing the implication and experimenting - but it didn’t help. There’s no “Route” to choose from in the Data Bindings that appears.

@Teodor took a screenshot + 3.5 sentences to show how it’s done; I’ve taken 20 times that to describe how it’s not working :no_mouth:

Any help getting this working would be much appreciated. I’m on 3.9.9. Thanks!

#10

Following up here - any ideas on this? I’ve tried to find this for a dynamic modal, and a non-dynamic modal. These steps don’t seem to map to the current version, or options.

Any help is much appreciated.

#11

Funny I was just thinking about this yesterday. I never got it working so not any help but I’ll be interested if you do!