An Awesome Experience Example

Hello Beautiful People :slight_smile:

To help you build awesome stuff within Losant, I’m going to start publishing tips every Tuesday. These will cover a wide range of things, and I will try to keep them short and simple. The goal is to make you more of a Losant Expert each week. Note: You can subscribe to this category to be notified every Tuesday.

Let’s get to today’s tip:

Check out the Kanarra Technologies Example. We just released Nested Experience Groups, and with it comes some awesome new functionality to make building Experiences like this WAY easier:

We published this example to GitHub to show some best practices while building Experiences.

For example, if you need to bring your payload data into the world of client-side JS, you can do this little trick:

<script>
      // Bring specific page data into JavaScript so it can be used by scripts (e.g. Google maps).
      // Using a "kanarra" top-level name to remove any potential name conflicts.
      window.kanarra = {
        selectedGroups: {{jsonEncode pageData.selectedGroups}}
      };
</script>

There are a lot of tips in this example repo, which is why I thought it was a great first Tuesday Tip.

Until next time, stay connected :slight_smile:

@anaptfox the page to subscribe doesn’t seem to exist for me.

Hi Paul,

The link should take you to your category notification preferences where you can add Tuesday Tips in the track, watch or mute dropdowns.

Thanks!
Julia

This is a great example, thanks guys!

@anaptfox I was wondering if you have any similar examples of a multi tenant system with some notification infrastructure with experiences pages for configuration of email/sms alerts, adding/removing users to notification groups, etc?

1 Like

@paul_wareham,

We are thinking of all the examples we want and I think this is a good one.

But, in this example, the grouping is used to control what the user sees. But, you can use Experience Groups to group users for notification purposes. You can store the email address and/or phone number of the user as User Tags on the experience user. You can even use tags to store a “user preference”. Then, all the logic for the notifications happens in the Workflow Engine.

I’m happy to provide more suggestions if needed :slight_smile:

@anaptfox Right, yes we can use the experience user settings however that would mean exposing the Losant UI to the end user (our customer, or our customer’s customer). So I’m proposing a simplified UI using an experience view to allow the end user limited ability to add/remove notification users, group them together and allow them to “subscribe” to a given set of pre-built notifications. The pre-built notifications would be backed by workflows but the end user wouldn’t see the logic behind them, just the name.

So that could just mean using the Losant API to communicate with the experience groups and tags?

One factor is that we have found based on customer feedback that they need to be able to group users together, some of which do not have web login access - only notifications and they can chose a set of subscriptions on a per device basis (or possibly a group of devices).

Any feedback appreciated. I can PM you more detail if you like.

cheers,

Paul

@anaptfox I simply can’t figure out which Workflow is triggered when clicking the Apply Groups button. Can anyone help me?

Thanks!
Peter

@Peter_Jordan,

Hello!

I think this is the workflow you’re looking for:

It’s the one called “Endpoint - POST /”. I found this by looking at the HTML form:

<form style="height:100%; min-height:0;" method="POST" action="/">
     ...
     <button type="submit" class="button sidebar-button">Apply Groups</button>
</form>

When the button is pressed, it will make a POST request to the / route.

There you can dig in further to how things work :slight_smile:

I figured it out. My biggest problem is that experience.user is not stored, so what ever I do, the user ends up with a new login prompt. Trying to get the cookie to work, so I don’t have to login all the time.

Is there a whitepaper somewhere on the /login procedure?

@Peter_Jordan,

Could you post a screenshot of your workflow handling the login request?

{{ experience.user }} is dropped as soon as a user has logged in. If i update the page it experience.user is Null

@Peter_Jordan, just to check something.

In this case, I’m setting the “Token Result Path” to {{working.token}}:

Then, in the Endpoint Reply Node, we are using that as the “authorization” cookie:

Could you verify that you’re setting this cooking with the proper token?

Just as supplementary info, this doc covers how the cookie works:

Got to to work now with your advice, Thanx!