Popup fired by dashboard button

Hi there!

Is there a way of firing a popup on the client side after a dashboard button is pressed?
I used Firefox inspector to get button Id and then tried adding the following code to the layout that holds the dashboard but had no luck.
imagen

1 Like

Hi @nahuel,

Currently, this is not possible. I think the best route here would be too simply add an HTML button to the page, and attach a listener to that.

Best of all, if you need that button to trigger a workflow, there is an API that you can use to Press a Virtual Button.

Happy to answer any more questions if needed :slight_smile:

If you have time, could you create an example of this? I too am struggling to notify my users on dashboard pages of certain events that result from running workflows.
The walkthrough (https://docs.losant.com/experiences/walkthrough/views/user-profile/) helped with custom page notifications using the successAlert and the errorAlert components but it seems that this cannot be used for the dashboard pages in the same way.

Thanks. I’ll go with the HTML button

How are you able to add additional HTML elements alongside your dashboards?

Hi @Leo_Bach1. I recommend you reading page-layout document, it helped me while understanding the platform. You’ll find that either if a page is custom or dashboard type they are rendered inside the layout using the page helper, {{ page }}.
The layout is built using HTML and Handlebars helpers. So, if you modify the HTML code you’ll be able to add new elements.

1 Like

Thanks for the direction! Much appreciated!

@nahuel and @Leo_Bach1

I just documented a new helper for you. It’s called the {{element}} helper.

You can use it to embed a dashboard directly on a page like this:

{{element 'dashboard' dashboardId='5c1c2acf98e7400007443f56' theme="light" }}

Right now, dashboard is the only element supported :slight_smile: But, this should help build more flexible pages with dashboards.

2 Likes

I tried to change my Gateways Page to a Custom Page from a Dashboard.

I included the element helper for the dashboard that I wanted to pull up in the custom html input area.

{{element 'dashboard' dashboardId='5c829292979b130008e5d604' theme="light" }}

Clicked “Save”.

And tried to access the page from my user experience (which still seems to be active and working):

From the edit page I attempt to open Gateways:

And this is the result I get now (I cannot get back to the area where I can edit the custom HTML or select custom/dashboard):

Can someone help me get back to where I can edit the page?

Sorry for the headache. Thanks for the support!

Hey @Leo_Bach1,

Our team is looking into this now :slight_smile:

1 Like

Thanks! I am trying to avoid breaking things as much as I can.

@Leo_Bach1,

Looks like you found a bug on our end and we have already pushed out a fix live for you :slight_smile:

P.S. Keep breaking things, we want to make sure the platform is the best.

1 Like

Getting Closer:
I’m trying to pass the context in to the dashboard as I was doing before:

Here is the dashboard context in question:

Here is where I call the context within the Device List Block:

Here is the error I get when visiting using my experience user login and visit the page:

Any direction would be appreciated.

Thanks!

Since the deviceTag context variable is a little weird, for that one, you have to specify a key and a value.

LIke so:

{{element 'dashboard' dashboardId="ID" ctx=(obj companyName=(obj key="companyName" value="testCompany" ) )}}

I’ll update this in the docs :slight_smile:

1 Like

Taron,
It looks like I broke it again…

I accidentally put handlebars around the pageData object when inputting the value:

{{element 'dashboard' dashboardId="ID" ctx=(obj companyName=(obj key="companyName" value="{{pageData.experience.user.userTags.companyName}}" ) )}}

Current settings for the Gateways Page (using element helper for the dashboard and the context):


Using the context within the Device List Block on the dashboard itself:

A Device that should meet these parameters and therefore show up on the Device List Block:

The Experience User that is visiting the Gateway Page:

No device shows up on the Device List Block when this user is on the page: