Display a list of devices based on experience user group

Unfortunately I didn’t add these to any repository. I’m not sure I even have the originals. The underlying layouts (before the modification in this article) are still the same ones that are automatically generated when we bootstrap an experience for a new application. So you can at least get the starting layouts by creating a new application and using the bootstrap process for the example experience.

Done and thank you for the direction

Hi @Brandon_Cannaday,
I used your explanation and it worked quite well so far.

But is it also possible to get a search bar on top of the list to filter it?
My devices are not in a data table yet but I can add this functionality if needed.

Best Regards,
Tim

@Tim_Sahr,

Yes this is possible! With Experience Views, you can do almost anything you want to the client side user-facing application. For example, you can pull in a JQuery library to help you with the device filtering. The downside is, because Experience Views are so flexible, we don’t have any built in components or features to make this easy for you ( … yet :wink: ).

1 Like

Hi @anaptfox,
Thanks, I will look into the jQuery lib and let you know if I get figured it out or not. :wink:

1 Like

@anaptfox

I’m also struggling here.
The workflow works as I see my devices in the pageData:
image

After rebuilt the website using the bootstrap studio and pasted the pageData specific code on a “custom code” section. This is the html code now:

<div class="container-fluid" id="container-base">
            <div class="row flex-row" style="padding: 10px;">
              <div class="col-auto" id="sidebar-devices">
                <div class="card">
                  <div class="card-header">
                    <h5 class="mb-0">MY.Devices</h5>
                  </div>
                  <div class="card-body" id="panel-body-left"><ul class="list-group">
                    {{#each pageData.data.devices}}
                    <li class="list-group-item">
                      <a href="/mydevices/{{this.id}}/dashboard">
                        {{this.name}}
                      </a>
                    </li>
                    {{/each}}
                    </ul></div>
                </div>
              </div>

This is the result on the website:

I repeated Brandon’s instruction again with no luck.
I idea what I could test? :grinning:

@Tim_Sahr,

Your HTML looks correct. However, in Experience Workflow that’s powering this page, are you passing in the pageData correctly?

Could you post a screenshot of the Endpoint Reply settings?

Here is more info of what I’m referring too:

Is this the correct one?
It’s in the workflow which is connected to the Endpoint of the site where I want to render the list.

So, just a couple tips here:

If you’re ever wondering what the structure of the pageData you’re passing to the page, you can always see it with:

{{ . }} the dot just means everything. It’d recommend this to look a the structure of your object to make sure the pageData.data.devices path is correct.

I don’t see the full payload in your screenshot above. But, is it possible that data is nested under another property? pageData.somethingElse.data.devices?

This is the complete payload:

I don’t get the part with the {{ . }}. Where do I put it?

You can put it anywhere within your HTML. You wouldn’t ever do it in practice, it’s just a debugging technique. It just allows you to see the pageData your Experience View is receiving from the Experience Workflow.

If you do this, do you see the proper pageData you’re expecting?

@anaptfox
For me the page data looks correct and as I would expect it.

There are two devices assigned to my account using a tag, in the payload both devices are listed with all attributes and tags.

And this became visible in the top left corner.
image

If you want to you can also hope inside my application and have a look. :+1::slightly_smiling_face:

Hi @anaptfox ,
I found a workaround which is working: I built a layout in Bootstrap Studio and used this a base and added the page. I choosed to render a dashboard. There I inserted a context variable which might would be missing if not adding it there?
image

Now the devices are there the way I wanted it:

Next problem:
On the right site I want a map with all the devices. So I made a dashboard and added a Map block.
Now I’m curious how the context variable have to be defined in order to make this work?

Thanks,
Tim

Hi @Tim_Sahr,

Are you trying to display all of your devices or a dynamic list of devices? If the devices you would like to display are always the same you can add each of these devices to the map block individually. I also noticed you have your duration value set to 60 minutes, with a resolution of 1 minute. Thus, if there is not a value reported for this time period you will see the “No Data to Display” message within your GPS History block.

Thanks! :smile:
Julia

Hi @JuliaKempf ,

I want to display the devices which are assigned to this account. This is based on a user and device tag.

The devices are therefore the same which are visible in the list view on the left site. So they are already available in the page data.

From this overview I want to link to the corresponding dashboard with a more detailed view which is working based in the deviceID from the paga data.

Is this more clear now?

I managed to get the location on the map but there are all devices visible and not only the one with the correct user tag. I only need help to restrict the devices to the corresponding user tag. :slight_smile:
image

Thanks,
Tim

1 Like

Hi @Tim_Sahr,

Thank you for the clarification, this is much more clear now! I took a look at your experience and I believe you are missing just one thing to limit the displayed devices by userGroup. Just as you did previously, you will have to set the dashboard context for your userGroup tag context variable:

Because this is not set, the userGroup equals *, which will display devices with a userGroup tag. I believe the Dashboard Context should look like so based on your use case:

This will grab the User Tags for the logged in user, and references the userGroup value specifically. I would recommend double checking the path for userGroup by looking at your user object in the debug panel (as I guessed your path as pageData.experience.user.userTags.userGroup based on my own debug panel :smile:):

Let me know if anything is unclear, or if I can help further!

Thanks,
Julia

1 Like

Hi @JuliaKempf ,
Thank you very much. This did the trick. :partying_face::sunglasses::relaxed:

Tim

2 Likes