Simple experience context links

Greetings. I’ve seen the Kanarra demo, looks great. But in this case I just want to simply be able to ‘click’ the devices on, say, a separate (or not) div or paragraph above or below the main {{page}} to ‘change’ the context experience data of the dashboard to the appropriate device :arrow_heading_down:


What would be the best practice/logical next steps for this? Thanks, :red_circle:

1 Like

Hi @Jose_Cruz,

There are two configuration steps needed to toggle between a device’s context values on an experience page:

1. Create context links within the experience page HTML

Since you are adding these links to the device’s dashboard page, you won’t need to create a new workflow! The HTML link you configure will be the parameter you would like to set. For example, for a device dashboard with a context variable string, a set of page links might look like so:

<div class="context-links">
  <a href="?string=dog">Dog</a>
  <a href="?string=cat">Cat</a>
  <a href="?string=bird">Bird</a>
</div>

As a quick tip, configuring for more than one parameter the link would be ?device=the_device_id&string=an_animal.

2. Configure device page dashboard context

Within your dashboard experience page, you will need to configure the dashboard context for your parameters using the {{request.query}} object. Continuing with the above example, the path would be {{request.query.string}}.

And voila, a context menu that can toggle between values, and all without adding a workflow!

Please let me know if you have any additional questions or roadblocks related to this :smile:

Thanks,
Julia

1 Like

Ok Julia, some things : 1) I don’t have a separate device dashboard, like the Kanarra demo. I have only one ‘main’ page with a ‘layout’ associated with it. On the layout is where I’m putting the ‘sensors links’ you referenced, as shown here:


As you can see below, I have configured ctx variables in dashboard ‘X’ (let’s call it dashboard X) using these ‘hexID’ tags which each corresponds to each individual sensor:
image
And which shows as an option in the Experience page:

This way it ‘renders’ the Experience view with Dashboard ‘X’ with default ‘hexID’ = be9c:

If I do the string query as you guided on #2, I get this:
image
What am I missing, cause definitely I’m missing something :smiley: Thanks, :red_circle:

@Jose_Cruz,

I think this is related to your response on another thread:

Yes, same as Indicator block and image, I don’t see that option:


Can you provide an example of how one can “pass a [deviceId] property in a [pageData] object” as described above ? Thanks, :red_circle:

@Jose_Cruz,

Here is the best example of that:

Ok, this was a lot of :hammer:'ing back and forth for a couple of days, but with @JuliaKempf’s original post mixed with @Brandon_Cannaday’s How to get data from a Workflow into a Custom Experience Page post suggested by @anaptfox I got it going :arrow_heading_down:


And is :mage: EXACTLY what I wanted/needed, so thank you. I think I can now safely add an additional title to my collection of :crown: Junior Associate Losant Developer, if y’all don’t mind :smiley: :red_circle:

Ok, here’s the next hurdle: So far the ‘static’ values as shown above with their corresponding devices’ a href links have worked like a :mage: charm, but I want/need the actual pageData displayed values not to be those ‘static’ :red_circle: BE28 :red_circle: C473 :red_circle: 6DD2 from above, but to be the devices’ tags or even a Data Table entry - not just for the current/selected pageData page/device (as shown in the last line of code) but for the ones on the h ref list on the previous lines. Basically, dynamic text values instead of ‘static’ ones…What would be the course of action or starting points for this (see below):


Thanks in advance, :red_circle:

Hi @Jose_Cruz,

It sounds like you need to use Conditional Block Helpers. Essentially, they allow you to get a dynamic output from pageData.

<div class="context-links">
  {{#if pageData.isSensor}}
    <a href="?string=sensor">Sensor</a>
  {{else}}
    <a href="?string=machine">Machine</a>
  {{/if}}
</div>

I’d be happy to elaborate further :slight_smile:

@anaptfox, Thanks. Actually, what I want is for the text part ( …>Sensor<… ) to be a CTX based on the "?string=x". Is that possible? The <a href= will not change (that will be input manually permanently (deviceID, for example) for any/all pages. What needs to change is the ‘text’ associated with that <a href= link regardless of pageData fetched. Does this make sense? :slight_smile:

@Jose_Cruz,

Could you give an example of when you would change the text or make the text dynamic? What decides if the text needs to change and when? If you could walk me through that, I can certicaly point you down the right path.

1 Like

@anaptfox, I can definitely do that! Check this out below:


As you can see from above in my experience page, I have listed all the available devices on that top ‘div’ row and, in this case, the selected href ‘Fridge’ (which is the actual static/permanent ‘text’ which points to the actual deviceID href link ) shows the correct CTX’d page, stats, etc, as well as at the end of that ‘div’ row the 'Selected Device Name with the pageData.deviceID.name. But what I’m looking for is to make those static ‘nicknames’ Fridge | Freezer | Room | etc. text for each link a, say, attribute, Data Table entry or tag - haven’t figure out that yet, whichever makes more sense and is easier to implement. The idea is that customers could, then, change these nicknames from a Dashboard Input Control box (again, to be saved as an attribute or Data Table row/item update) so I don’t have to do it manually. Let me know if this makes it better to understand; I hope so! :slight_smile: :red_circle:

@Jose_Cruz,

I’m totally following now!

I think here is the piece we are missing. We can check for the presence of a tag and display a name if it’s not there:

     {{#if this.tags.displayName.[0]}}
          {{this.tags.displayName.[0]}}
     {{else}}
          {{this.name}}
     {{/if}}

When put all together with #each you’ll get something like this:

{{#each pageData.devices}}
  <li>
    <a class="device-list-item-link" href="/?device={{this.id}}">
     {{#if this.tags.displayName.[0]}}
          {{this.tags.displayName.[0]}}
     {{else}}
          {{this.name}}
     {{/if}}
    </a>
  </li>
  {{/each}}
1 Like

@anaptfox sir, thank you - I took your advice and ‘tweak’ the approach a bit; instead of going for ‘tags’ (since I wasn’t too sure about which approach to go for, attribute, tag or data table), I decided to go for the Data Table entry since I already have the whole environment set up already for that. So, I ‘tweak’ the workflow for the rendering pages so that it goes and looks at the devices and bring their associated Data Table entries into a payload section called “deviceQueries” I can ‘track’ from in the experience page:


And you can see is working perfectly with those ‘nicknames’ on the ‘top div’ changed at the Data Table level (in this case, most in Spanish) which is exactly what I wanted:

But there is still one question I have. In order to do this, this is how I’m getting this done (which, I’m ok if that’s the case, since I will only do it ONCE per client, then they will dynamically change those ‘nicknames’ thru a Input Control Box/Data Table Update):

Question : How can I ‘automate’ the entry number in the {{pageData.device.devicesQuery.items.X.nickName}} so that I don’t have to manually figure out the exact sorting order (currently by Table Data entry ID)? Any other suggestions to the above, of course, I’m most delighted to hear! :red_circle:

Hi @Jose_Cruz,

I think what you’re looking for is a loop. You can loop through the items section of your devicesQuery with the following:

{{#each pageData.device.devicesQuery.items}}
<a href="?string={{this.id}}"><font color="blue">{{this.nickName}}</font></a>
{{/each}}

Let me know if this works for you.

Thanks,
Heath

1 Like

@JuliaKempf 1st guidance, @Heath, your 3 lines of code, together with @anaptfox firsts suggestions and my ‘data table’ last minute decision and I got exactly what I needed - and saved me a TON of future coding. Thank you ALL, very happy with the support on this one! :red_circle:

3 Likes

Greetings again on this topic @Heath ! New question: how can I get the count of the loop items? For example, if two devices then 2, five well, then of course, 5 etc. ? Thanks, :red_circle:

Hey @Jose_Cruz,

Great question!

You can do this a few ways, actually. Depending on your use case, you can use the length helper:

{{length val}}

  • If val is an array , returns the number of items in the array.
  • If val is an object , returns the number of keys on the object.
  • If val is a string , returns the length of the string.
  • For everything else, returns undefined .

You can also use the Array Logic Workflow Node with the Length Operation.

Let me know if this helps!

Thank you,
Heath

It did! Thank you! :red_circle:

1 Like