Using BLOX input.toggle element to add additional dropdown menu

[kingsofdeleon]

Hi there, I have a BLOX widget that I'm using as a controller for a line chart on my dashboard.

This BLOX widget is used to change the date granularity as well as change which KPI's are displayed in the below line chart. At a baseline, it works, but I'm actually looking to modify this widget by adding a toggle that when enabled adds another KPI dropdown that the user could then interact with. I've got some screenshots that mock up what I want this to look like, but I'm unable to get this actually working.

I'm having a hard time passing the true/false data (true when checked, false when unchecked)  to be evaluated by a condition element that is yet to be added. 

I'm including the configuration for the BLOX widget below as well. The item set I want removed is the 3rd Input.choiceset with the class "togglable"

The actual action script seems pretty straightforward once I can have the dropdown added reliably.

I appreciate any help, and thank you very much in advanced!

{
"actions": [],
"body": [
{
"items": [
{
"columns": [
{
"items": [
{
"style": {
"color": "",
"font-weight": "bold",
"margin": "auto",
"padding-left": "20%"
},
"text": "Choose a Date Granularity and Performance Metric",
"type": "TextBlock",
"weight": "regular"
}
],
"type": "Column"
},
{
"items": [
{
"choices": [
{
"title": "Years",
"value": "years"
},
{
"title": "Quarters",
"value": "quarters"
},
{
"title": "Months",
"value": "months"
},
{
"title": "Weeks",
"value": "weeks"
},
{
"title": "Days",
"value": "days"
}
],
"class": "dropDown",
"displayType": "compact",
"id": "dateGran",
"style": {
"font-family": "Roboto",
"visibility": "visible",
"margin": "auto"
},
"type": "Input.ChoiceSet",
"value": "1"
}
],
"type": "Column"
},
{
"items": [
{
"choices": [
{
"title": "Theo Win Per Unit Per Day",
"value": "1"
},
{
"title": "Actual Win Per Unit Per Day",
"value": "2"
},
{
"title": "Coin In Per Unit Per Day",
"value": "3"
},
{
"title": "Leased Fees Per Unit Per Day",
"value": "4"
},
{
"title": "Net Theo Win Per Unit Per Day",
"value": "5"
},
{
"title": "Net Actual Win Per Unit Per Day",
"value": "6"
},
{
"title": "Theo Win",
"value": "7"
},
{
"title": "Actual Win",
"value": "8"
},
{
"title": "Coin In",
"value": "9"
},
{
"title": "Net Theo Win",
"value": "10"
},
{
"title": "Net Actual Win",
"value": "11"
},
{
"title": "Games Played",
"value": "12"
},
{
"title": "Avg Bet",
"value": "13"
},
{
"title": "Occupancy",
"value": "14"
},
{
"title": "Net Theo Win Index VS Floor",
"value": "15"
},
{
"title": "Net Actual Win Index VS Floor",
"value": "16"
}
],
"class": "dropDown",
"displayType": "compact",
"id": "KPISwitch",
"style": {
"font-family": "Roboto",
"margin": "auto"
},
"type": "Input.ChoiceSet",
"value": "1"
},
{
"choices": [
{
"title": "Theo Win Per Unit Per Day",
"value": "1"
},
{
"title": "Actual Win Per Unit Per Day",
"value": "2"
},
{
"title": "Coin In Per Unit Per Day",
"value": "3"
},
{
"title": "Leased Fees Per Unit Per Day",
"value": "4"
},
{
"title": "Net Theo Win Per Unit Per Day",
"value": "5"
},
{
"title": "Net Actual Win Per Unit Per Day",
"value": "6"
},
{
"title": "Theo Win",
"value": "7"
},
{
"title": "Actual Win",
"value": "8"
},
{
"title": "Coin In",
"value": "9"
},
{
"title": "Net Theo Win",
"value": "10"
},
{
"title": "Net Actual Win",
"value": "11"
},
{
"title": "Games Played",
"value": "12"
},
{
"title": "Avg Bet",
"value": "13"
},
{
"title": "Occupancy",
"value": "14"
},
{
"title": "Net Theo Win Index VS Floor",
"value": "15"
},
{
"title": "Net Actual Win Index VS Floor",
"value": "16"
}
],
"class": "dropDown togglable",
"displayType": "compact",
"id": "KPISwitch",
"style": {
"font-family": "Roboto",
"margin": "auto",
"visibility": "visibile"
},
"type": "Input.ChoiceSet",
"value": "1"
}
],
"type": "Column"
},
{
"items": [
{
"actions": [
{
"title": "Apply",
"type": "UpdateData"
}
],
"style": {
"align-self": "",
"font-family": "Roboto",
"margin": "auto",
"padding-left": ""
},
"type": "ActionSet"
},
{
"type": "Input.Toggle",
"title": "Compare 2 KPIs",
"id": "DualAxisToggle",
"style": {
"margin": "auto",
"font-weight": "bold"
},
"valueOn": "false",
"valueOff": "true",
"value": "true"
}
],
"type": "Column"
}
],
"type": "ColumnSet",
"width": ""
}
],
"type": "Container",
"width": ""
}
],
"carouselAnimation": {
"showButtons": false
},
"script": "$('.dropDown').find('.placeholder').remove().end().prepend('<option class = placeholder value=\"\" disabled selected>Select Filter</option>')",
"showCarousel": true,
"style": "",
"title": "",
"titleStyle": [
{
"display": "none"
}
]
}

[DRay]

Hello @kingsofdeleon,

Thank you for submitting your question. 

This is quite a complex custom action. Please reach out to your account team to get connected with a technical resource who can work with you on implementing this.

Thank you, and have a great day!

[kingsofdeleon]

Thanks @DRay , I'll reach out and see how to move forward from here!