Input Control Block Dropdown Option Flexibility

Feature Request
,
1

I would really like to be able to list all the devices that fit certain criteria in a dropdown box within the input control block.
My usecase is:
I want users to be able to associate 2 devices together that fit certain criteria.

image
image.png1920×1040 35.8 KB

So on the left dropdown I would like to show all the devices that are owned by a particular user and have a particular tag. on the right I would also like to show options to select between devices owned by the user which also have a tag value that must match certain criteria.

The result would be all the devices that meet the criteria which should then be selectable but not hardcoded in to the options but rather flexible depending on which devices meet the critera (filter):

image
image.png1920×1040 78.6 KB

image
image.png1920×1040 75.4 KB

image
image.png1920×1040 78.6 KB

2

Hi Leo,

I think this would be very helpful for some use cases, especially for a Multi-Tenant experience! I will submit this to our engineering team and update you if it is implemented.

Thanks,
Julia

1 Like
3

Thanks!
I appreciate the help and yall’s quick responses.
:grin:

1 Like
4

For the time being, what directions can you see / would you recommend to implement this sort of feature on one’s own?

My goal is to give experience users (something in a dashboard) a simple way to select select two devices that are owned by their Experience group and pass that data to a workflow to update the device tags for each device.

I want to get users to assign a device with a tag type of ‘sensor’ to a device with a tag type of ‘machine’.
The Machine will ‘own’ the sensor, meaning on the page where my customer views his machine he will only see the sensors owned to that machine (or have a tag of ownedBy === machineName).

5

Hi @Leo_Bach1

While I think that making the dropdown selectors a little smarter is a good idea, what you’re trying to accomplish is better done in an Experience Page rather than a Dashboard Page.

Dashboard Pages are not meant for user input from within an Experience – really they should not be interacting with your Experience’s application logic (“Assign Sensors to Machine” for example). From within an Experience, Dashboard Pages should be focused on displaying device data or interacting with devices.

With that being said, I’d recommend adding a new page to your Experience that’s just a simple HTML form that’s populated from the data from an Experience Workflow.

I’m working on an example for you. For now, you should check out the Experience Views Walkthrough it touches on a lot of the concepts you’d need to build this.

6

Wow, excellent example Taron!
Thanks for the assistance.
I am getting the hang of things but I am fuzzy on how the handlebars work and how I can access the data from them in other places.

When I add the pageData information in the handlebars inside the <option> tags, I get the hardcoded results that I expected from the context data that is passed to this page:

image
image.png1920×1040 35 KB

image
image.png1920×1040 25.9 KB

However, this I am not going to be able to hardcode these values in for all my users.
So what I think I need to do next is to write a script using javascript which takes data that is called with the handlebars (unless there is another way to access this data) and write a for loop to generate the DOM components (in this case the <option> tags for each of the machines and sensors that are returned from the experience reply node).

Do you see or know a simple way to get the data that I’m currently calling with the handlebars (the names of the machines and sensors) into my javascript file?

After I get this list into my javascript file it seems I can use a for loop and iterate over all of the items. Using the .add() method give the user an option for each Machine and Sensor that is owned by their user account:

var sel = document.createElement("select");

var opt1 = document.createElement("option");
var opt2 = document.createElement("option");

opt1.value = "Machine A";
opt1.text = "Option: Machine A";

opt2.value = "Machine B";
opt2.text = "Option: Value 2";

sel.add(opt1, null);
sel.add(opt2, null);

Please let me know your thoughts… I am not as well-versed as I’d like to be in all these areas but I appreciate you guys going above and beyond to help me build out my application.

Thanks!
-Leo

1 Like
7

No problem. There are two things you can do:

Instead of hardcoding, you can loop through the values:

<select class="form-control" id="machine" name="machine">
       {{#each pageData.machines}}
         <option>{{name}}</option>
        {{/each}}
   </select>

Or, if you would like access to your pageData in JavaScript. You can do something like this:

<script>
    var pageData = {{jsonEncode pageData}}
    console.log(pageData)
</script>
2 Likes
8

Here are some Handlebar resources that are helpful:

https://handlebarsjs.com/

http://tryhandlebarsjs.com/

1 Like