HTML Hyperlink in a Modal/Replacing Modal Body

Support
1

Dan Rosenstein:
What would be the correct syntax to create a hyperlink in a modal? I tried various things but none render the url in the hyperlink (it does see the value)…

Owen Reese:
v-html is an easy way to do it. Put the HTML in your model for the link and then

Dan Rosenstein:
Thanks Owen. I guess I can do that (was hoping I could just insert the url). :+1:

Owen Reese:
I think it is possible to do it using just the URL in your model but unfortunately I can’t recall that syntax off the top of my head. What you tried would have been my first guess as well.

Dan Rosenstein:
I used this format and it works:

Dan Rosenstein:

"actions": [{
                "action": "showModal",
                "function": "app.AWS_Html = '<a href=\"' + model.AWS_URL +'\">Visit W3Schools</a>'",
                "options": {
                    "body_calc": "app.AWS_Html",
                    "icon": "",
                    "options": {
                        "blocking": false,
                        "hideCloseButton": true
                    },
                    "overlayTheme": "dark"
                }
            }],
            "buttonClasses": "btn btn-info",
            "styleClasses": "col-md-2",
            "text": "save new",
            "type": "button",
            "visible_calc": "model.PrintDocs=='Yes' && model.AWS_URL.length && jp.paths(model, '$.NotConf[?(@.f_Confirmed)]').length==0 "

Dan Rosenstein:
Thanks again Owen.

Owen Reese:
Good to know, thanks!

Dan Rosenstein:
:sunglasses:

Dan Rosenstein:
only problem is that the function doesn’t seem to populate in time. Modal comes up blank the first time. Tried adding a pause - didn’t help :disappointed:

Dan Rosenstein:
Tried adding a calc to insert into bf_app in the onformrequest but it doesn’t seem to alter the bf_app

Dan Rosenstein:
shows the second time the modal opens

Andrew Dam:
Instead of doing body_calc, you can replace body from the function directly with something like action.options.body = app.AWS_Html

Dan Rosenstein:
so what would be the syntax?

Andrew Dam:
That should be the syntax, you can put that in your function under the line where you’re setting app.AWS_Html

Dan Rosenstein:
hmmm, getting ‘body text not set’

Andrew Dam:
Here’s an example:

{
                    "action": "showModal",
                    "function": "let myLink = \"<a href='<https://www.google.com/>'>Visit google</a>\"\n\naction.options.body = myLink",
                    "options": {
                        "body": "This gets replaced by the function",
                        "icon": "",
                        "options": {
                            "blocking": false,
                            "hideCloseButton": true
                        },
                        "overlayTheme": "dark"
                    }
                }

Dan Rosenstein:
Thanks Andrew. I will try it, I lost my body part so maybe that was the issue - couldn’t replace maybe

Dan Rosenstein:
Worked like a charm! :100::sunglasses:

Dan Rosenstein:
maybe worth moving this thread to the forum