Get the selected value for a Dropdown Button

I have a dropdown button, the user selects an option from the popup list, then an onClick event handler fires. I'm not sure what to do at that point.

I tried passing the value to a query as an additional scope like this:
image

But that results in an error:
image

So, I cannot reference the item- and it doesn't look like the component does not store the last selected item in it (like the s3Uploader does):

1 Like

Hi @Kade333,** **the error you're getting looks like is happening because it can't detect what "item" is. It doesn't seem like there's a reference of "item" in your app. Could you share more about what "item" should be and how you're planning to use it? Are you able to reference "item" from another part of your app? For example, if it's coming from a query, you should be able to set that query variable inside your script.

selectedID: query1.data[0].site_id

Sharing a screenshot or screen recording can be extra helpful for us to understand how to help :slightly_smiling_face:

Here is an export of a much simpler example.
All it needs to do is console.log whatever was selected from the droplist.

{"uuid":"ecd6060a-fc82-11ec-a6f5-d3eea36aff61","page":{"id":81032363,"data":{"appState":"[\"~#iR\",[\"^ \",\"n\",\"appTemplate\",\"v\",[\"^ \",\"isFetching\",false,\"plugins\",[\"~#iOM\",[\"query1\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"query1\",\"type\",\"datasource\",\"subtype\",\"SqlQueryUnified\",\"namespace\",null,\"resourceName\",\"d776848d-c5dc-41c8-9638-b4ec5527e6b4\",\"resourceDisplayName\",\"Zues\",\"template\",[\"^3\",[\"queryRefreshTime\",\"\",\"records\",\"\",\"lastReceivedFromResourceAt\",null,\"databasePasswordOverride\",\"\",\"queryDisabledMessage\",\"\",\"successMessage\",\"\",\"queryDisabled\",\"\",\"playgroundQuerySaveId\",\"latest\",\"resourceNameOverride\",\"\",\"runWhenModelUpdates\",true,\"showFailureToaster\",true,\"query\",\"\",\"playgroundQueryUuid\",\"\",\"playgroundQueryId\",null,\"privateParams\",[\"~#iL\",[]],\"runWhenPageLoadsDelay\",\"\",\"data\",null,\"recordId\",\"\",\"importedQueryInputs\",[\"^3\",[]],\"isImported\",false,\"showSuccessToaster\",true,\"dataArray\",[\"^:\",[]],\"cacheKeyTtl\",\"\",\"filterBy\",\"\",\"databaseHostOverride\",\"\",\"metadata\",null,\"editorMode\",\"sql\",\"actionType\",\"\",\"changesetObject\",\"\",\"shouldUseLegacySql\",false,\"errorTransformer\",\"// The variable 'data' allows you to reference the request's data in the transformer. \\n// example: return data.find(element => element.isError)\\nreturn data.error\",\"databaseNameOverride\",\"\",\"confirmationMessage\",null,\"isFetching\",false,\"changeset\",\"\",\"rawData\",null,\"queryTriggerDelay\",\"0\",\"resourceTypeOverride\",null,\"watchedParams\",[\"^:\",[]],\"enableErrorTransformer\",false,\"enableBulkUpdates\",false,\"showLatestVersionUpdatedWarning\",false,\"timestamp\",0,\"importedQueryDefaults\",[\"^3\",[]],\"enableTransformer\",false,\"showUpdateSetValueDynamicallyToggle\",true,\"bulkUpdatePrimaryKey\",\"\",\"runWhenPageLoads\",false,\"transformer\",\"// type your code here\\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\\nreturn data\",\"events\",[\"^:\",[]],\"tableName\",\"\",\"queryTimeout\",\"10001\",\"requireConfirmation\",false,\"queryFailureConditions\",\"\",\"changesetIsObject\",false,\"enableCaching\",false,\"allowedGroups\",[\"^:\",[]],\"databaseUsernameOverride\",\"\",\"shouldEnableBatchQuerying\",false,\"doNotThrowOnNoOp\",false,\"queryThrottleTime\",\"750\",\"updateSetValueDynamically\",false,\"notificationDuration\",\"\"]],\"style\",null,\"position2\",null,\"mobilePosition2\",null,\"mobileAppPosition\",null,\"tabIndex\",null,\"container\",\"\",\"createdAt\",\"~m1657039979097\",\"updatedAt\",\"~m1657039979097\",\"folder\",\"\",\"screen\",null]]],\"dropdownButton1\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"dropdownButton1\",\"^4\",\"widget\",\"^5\",\"DropdownButtonWidget\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"_disabledByIndex\",[\"^:\",[\"\",\"\",\"\"]],\"horizontalAlign\",\"stretch\",\"iconByIndex\",[],\"iconPosition\",\"left\",\"clickable\",false,\"_iconByIndex\",[\"^:\",[\"\",\"\",\"\"]],\"hidden\",false,\"data\",\"{{ [1, 2, 3] }}\",\"text\",\"Menu\",\"showInEditor\",false,\"tooltipText\",\"\",\"hiddenByIndex\",[],\"_hiddenByIndex\",[\"^:\",[\"\",\"\",\"\"]],\"_captionByIndex\",[\"^:\",[\"\",\"\",\"\"]],\"styleVariant\",\"outline\",\"_hasMigratedNestedItems\",true,\"captionByIndex\",[],\"itemMode\",\"dynamic\",\"_tooltipByIndex\",[\"^:\",[\"\",\"\",\"\"]],\"tooltipByIndex\",[],\"icon\",\"\",\"events\",[\"^:\",[[\"^3\",[\"event\",\"click\",\"type\",\"script\",\"method\",\"run\",\"pluginId\",\"\",\"targetId\",null,\"params\",[\"^3\",[\"src\",\"console.log( theValueOfWhateverWasJustSelected )\"]],\"waitType\",\"debounce\",\"waitMs\",\"0\"]]]],\"_ids\",[\"^:\",[\"0fca6\",\"99bf9\",\"9f95f\"]],\"overlayMaxHeight\",375,\"disabled\",false,\"_labels\",[\"^:\",[\"Option 1\",\"Option 2\",\"Option 3\"]],\"disabledByIndex\",[],\"maintainSpaceWhenHidden\",false,\"labels\",\"{{ item }}\"]],\"^;\",[\"^3\",[]],\"^<\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^@\",\"\",\"rowGroup\",\"body\",\"subcontainer\",\"\",\"row\",0,\"col\",0,\"height\",1,\"width\",12,\"tabNum\",0]]],\"^=\",null,\"^>\",null,\"^?\",null,\"^@\",\"\",\"^A\",\"~m1657040001898\",\"^B\",\"~m1657040120721\",\"^C\",\"\",\"^D\",null]]]]],\"^A\",null,\"version\",\"2.95.0\",\"appThemeId\",null,\"preloadedAppJavaScript\",null,\"preloadedAppJSLinks\",[],\"testEntities\",[],\"tests\",[],\"appStyles\",\"\",\"responsiveLayoutDisabled\",false,\"loadingIndicatorsDisabled\",false,\"urlFragmentDefinitions\",[\"^:\",[]],\"pageLoadValueOverrides\",[\"^:\",[]],\"customDocumentTitle\",\"\",\"customDocumentTitleEnabled\",false,\"customShortcuts\",[],\"isGlobalWidget\",false,\"isMobileApp\",false,\"multiScreenMobileApp\",false,\"folders\",[\"^:\",[]],\"queryStatusVisibility\",false,\"markdownLinkBehavior\",\"auto\",\"inAppRetoolPillAppearance\",\"NO_OVERRIDE\",\"rootScreen\",null,\"instrumentationEnabled\",false,\"experimentalPerfFeatures\",[\"^ \",\"batchCommitModelEnabled\",false,\"skipDepCycleCheckingEnabled\",false,\"serverDepGraphEnabled\",false,\"useRuntimeV2\",false],\"experimentalDataTabEnabled\",false]]]"},"changesRecord":[{"type":"WIDGET_TEMPLATE_UPDATE","payload":{"plugin":{"id":"dropdownButton1","type":"widget","style":{},"folder":"","subtype":"DropdownButtonWidget","template":{"_ids":["0fca6","99bf9","9f95f"],"data":"{{ [1, 2, 3] }}","icon":"","text":"Menu","events":[{"type":"script","event":"click","method":"run","params":{"src":"console.log( theValueOfWhateverWasJust )"},"waitMs":"0","pluginId":"","waitType":"debounce"}],"hidden":false,"labels":"{{ item }}","_labels":["Option 1","Option 2","Option 3"],"disabled":false,"itemMode":"dynamic","clickable":false,"iconByIndex":[],"tooltipText":"","_iconByIndex":["","",""],"iconPosition":"left","showInEditor":false,"styleVariant":"outline","hiddenByIndex":[],"_hiddenByIndex":["","",""],"captionByIndex":[],"tooltipByIndex":[],"_captionByIndex":["","",""],"_tooltipByIndex":["","",""],"disabledByIndex":[],"horizontalAlign":"stretch","_disabledByIndex":["","",""],"overlayMaxHeight":375,"_hasMigratedNestedItems":true,"maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-07-05T16:53:21.898Z","position2":{"col":0,"row":0,"width":12,"height":1,"tabNum":0,"rowGroup":"body","container":"","subcontainer":""},"updatedAt":"2022-07-05T16:55:18.408Z"},"update":{"events":[{"type":"script","event":"click","method":"run","params":{"src":"console.log( theValueOfWhateverWasJustSelected )"},"waitMs":"0","pluginId":"","waitType":"debounce"}]},"widgetId":"dropdownButton1","shouldRecalculateTemplate":true},"isUserTriggered":true}],"gitSha":null,"checksum":null,"createdAt":"2022-07-05T16:55:22.881Z","updatedAt":"2022-07-05T16:55:22.881Z","pageId":1254517,"userId":309410,"branchId":null},"modules":{}}

If this were a select box, I could simply do console.log(select1.value)- but the dropdown button does not save the selected value as 'value'. So, there must be some way to get what the user selected.

@Kade333

I seems like I wasn't able to open the JSON text you sent me :disappointed:. As for the dropdown select component, the values should be saved when you select it. Here's a screenshot of this:

Are you able to get this working on your side?

That is not a dropdown button though, that is a select component.
image

It doesn't look like it's currently possible to do this in Retool at the moment with the Dropdown Component. Would you mind posting this as a feature request on the community so that other users who are interested can chime in on this?

A workaround to this would be to use the Select component. Once you've selected an item from your dropdown, you'll use key selectedItem inside your query, trigger the query, and then use JavaScript to clear the value of the selection with function clearValue().

I made a post it in the Feature Request here: Dropdown Button should save previously selected option

Although, it seems more like the dropdown button is just not working; like it was only designed to be used with static inputs and not mapped inputs.

Thanks for posting in the feature requests! If you haven't checked it out yet, we have some docs here about the Dropdown button and all the keys it holds for that component under Properties. At this time, there doesn't seem to be a "selectedItem" like you were looking for, but others like you may have the same request and we appreciate you posting. You should be notified on any updates on that once it's ready :slightly_smiling_face:.

1 Like