12 Days of Retool Day 2 - Two Tuple Hacks

tuple-hacks.json

{"uuid":"791b2f6a-7658-11ed-ad25-bf29ecc70af5","page":{"id":111979449,"data":{"appState":"[\"~#iR\",[\"^ \",\"n\",\"appTemplate\",\"v\",[\"^ \",\"isFetching\",false,\"plugins\",[\"~#iOM\",[\"query1\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"query1\",\"type\",\"datasource\",\"subtype\",\"SqlQueryUnified\",\"namespace\",null,\"resourceName\",\"onboarding_db\",\"resourceDisplayName\",\"onboarding_db\",\"template\",[\"^3\",[\"queryRefreshTime\",\"\",\"records\",\"\",\"lastReceivedFromResourceAt\",null,\"databasePasswordOverride\",\"\",\"queryDisabledMessage\",\"\",\"servedFromCache\",false,\"successMessage\",\"\",\"queryDisabled\",\"\",\"playgroundQuerySaveId\",\"latest\",\"resourceNameOverride\",\"\",\"runWhenModelUpdates\",true,\"showFailureToaster\",true,\"query\",\"select * from products;\",\"playgroundQueryUuid\",\"\",\"playgroundQueryId\",null,\"error\",null,\"privateParams\",[\"~#iL\",[]],\"runWhenPageLoadsDelay\",\"\",\"data\",null,\"recordId\",\"\",\"importedQueryInputs\",[\"^3\",[]],\"isImported\",false,\"showSuccessToaster\",true,\"dataArray\",[\"^:\",[]],\"cacheKeyTtl\",\"\",\"filterBy\",\"\",\"databaseHostOverride\",\"\",\"metadata\",null,\"editorMode\",\"sql\",\"queryRunTime\",null,\"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\",\"finished\",null,\"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\",\"~m1670435787931\",\"updatedAt\",\"~m1670435787931\",\"folder\",\"\",\"screen\",null]]],\"$main\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"$main\",\"^4\",\"frame\",\"^5\",\"Frame\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"type\",\"main\",\"sticky\",false]],\"^;\",[\"^3\",[]],\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",null,\"^@\",\"\",\"^A\",\"~m1670435788123\",\"^B\",\"~m1670435788123\",\"^C\",\"\",\"^D\",null]]],\"$header\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"$header\",\"^4\",\"frame\",\"^5\",\"Frame\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"type\",\"header\",\"sticky\",true,\"isHiddenOnDesktop\",false,\"isHiddenOnMobile\",true]],\"^;\",[\"^3\",[]],\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",null,\"^@\",\"\",\"^A\",\"~m1670435797979\",\"^B\",\"~m1670435797979\",\"^C\",\"\",\"^D\",null]]],\"circularImage1\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"circularImage1\",\"^4\",\"widget\",\"^5\",\"ImageWidget2\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"heightType\",\"fixed\",\"horizontalAlign\",\"center\",\"srcWidth\",null,\"clickable\",false,\"src\",\"https://cff2.earth.com/uploads/2022/06/20124418/Turtle-doves-scaled.jpg\",\"hidden\",false,\"srcHeight\",null,\"showInEditor\",false,\"tooltipText\",\"\",\"fit\",\"contain\",\"style\",[\"^3\",[\"borderRadius\",\"50%\"]],\"aspectRatio\",1,\"storageBlobId\",\"\",\"altText\",\"\",\"dbBlobId\",\"\",\"events\",[\"^3\",[]],\"srcType\",\"src\",\"maintainSpaceWhenHidden\",false]],\"^;\",[\"^3\",[]],\"^<\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^@\",\"\",\"rowGroup\",\"body\",\"subcontainer\",\"header\",\"row\",0,\"col\",0,\"height\",1.5999999999999996,\"width\",1,\"tabNum\",0]]],\"^=\",null,\"^>\",null,\"^?\",null,\"^@\",\"\",\"^A\",\"~m1670435847949\",\"^B\",\"~m1670435880728\",\"^C\",\"\",\"^D\",null]]],\"text1\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"text1\",\"^4\",\"widget\",\"^5\",\"TextWidget2\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"heightType\",\"auto\",\"horizontalAlign\",\"left\",\"hidden\",false,\"imageWidth\",\"fit\",\"showInEditor\",false,\"verticalAlign\",\"center\",\"tooltipText\",\"\",\"value\",\"# Two Tuple Hacks\",\"disableMarkdown\",false,\"overflowType\",\"scroll\",\"maintainSpaceWhenHidden\",false]],\"^;\",[\"^3\",[]],\"^<\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^@\",\"\",\"^E\",\"body\",\"^F\",\"header\",\"row\",0.2,\"col\",1,\"^G\",0.6,\"^H\",5,\"^I\",0]]],\"^=\",null,\"^>\",null,\"^?\",null,\"^@\",\"\",\"^A\",\"~m1670435892368\",\"^B\",\"~m1670435901440\",\"^C\",\"\",\"^D\",null]]],\"customComponent\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"customComponent\",\"^4\",\"widget\",\"^5\",\"CustomComponentWidget\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"allowTopNavigation\",false,\"heightType\",\"fixed\",\"allowDownloads\",false,\"allowFullscreen\",false,\"allowForms\",false,\"model\",\"{\\n  count: 0\\n}\",\"allowCamera\",false,\"allowModals\",false,\"allowPopups\",false,\"iframeCode\",\"<script crossorigin src=\\\"https://unpkg.com/react@18/umd/react.development.js\\\"></script>\\n<script crossorigin src=\\\"https://unpkg.com/react-dom@18/umd/react-dom.development.js\\\"></script>\\n\\n<div id=\\\"react\\\"></div>\\n\\n<script type=\\\"text/babel\\\">\\n\\nconst { useState } = React;\\n\\nfunction MyCustomComponent({ triggerQuery, model, modelUpdate }) {\\n  const [count, setCount] = useState(0);\\n  \\n  return (\\n    <div>\\n      <p>You have clicked {count} times</p>\\n      <button onClick={ () => setCount(count + 1) }>\\n        click me\\n      </button>\\n    </div>\\n  );\\n}\\n\\n// This is the entrypoint for the React component.\\nconst ConnectedComponent = Retool.connectReactComponent(MyCustomComponent);\\nconst container = document.getElementById('react');\\nconst root = ReactDOM.createRoot(container);\\nroot.render(<ConnectedComponent />);\\n\\n</script>\\n\",\"allowMicrophone\",false,\"allowSameOrigin\",false,\"allowPopupsToEscapeSandbox\",false,\"allowPayment\",false,\"allowGeolocation\",false]],\"^;\",[\"^3\",[]],\"^<\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^@\",\"\",\"^E\",\"body\",\"^F\",\"\",\"row\",0.6000000000000001,\"col\",0,\"^G\",3,\"^H\",6,\"^I\",0]]],\"^=\",null,\"^>\",null,\"^?\",null,\"^@\",\"\",\"^A\",\"~m1670452591402\",\"^B\",\"~m1670453201201\",\"^C\",\"\",\"^D\",null]]],\"text2\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"text2\",\"^4\",\"widget\",\"^5\",\"TextWidget2\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"heightType\",\"auto\",\"horizontalAlign\",\"left\",\"hidden\",false,\"imageWidth\",\"fit\",\"showInEditor\",false,\"verticalAlign\",\"center\",\"tooltipText\",\"\",\"value\",\"## Plain useState Example\",\"disableMarkdown\",false,\"overflowType\",\"scroll\",\"maintainSpaceWhenHidden\",false]],\"^;\",[\"^3\",[]],\"^<\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^@\",\"\",\"^E\",\"body\",\"^F\",\"\",\"row\",0,\"col\",0,\"^G\",0.6,\"^H\",6,\"^I\",0]]],\"^=\",null,\"^>\",null,\"^?\",null,\"^@\",\"\",\"^A\",\"~m1670453307123\",\"^B\",\"~m1670453317450\",\"^C\",\"\",\"^D\",null]]],\"customComponent2\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"customComponent2\",\"^4\",\"widget\",\"^5\",\"CustomComponentWidget\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"allowTopNavigation\",false,\"heightType\",\"fixed\",\"allowDownloads\",false,\"allowFullscreen\",false,\"allowForms\",false,\"model\",\"{\\n  count: 0\\n}\",\"allowCamera\",false,\"allowModals\",false,\"allowPopups\",false,\"iframeCode\",\"<script crossorigin src=\\\"https://unpkg.com/react@18/umd/react.development.js\\\"></script>\\n<script crossorigin src=\\\"https://unpkg.com/react-dom@18/umd/react-dom.development.js\\\"></script>\\n\\n<div id=\\\"react\\\"></div>\\n\\n<script type=\\\"text/babel\\\">\\n\\nfunction MyCustomComponent({ triggerQuery, model, modelUpdate }) {\\n  return (\\n    <div>\\n      <p>You have clicked {model.count} times</p>\\n      <button onClick={ () => modelUpdate({ count: model.count + 1 }) }>\\n        click me\\n      </button>\\n    </div>\\n  );\\n}\\n\\n// This is the entrypoint for the React component.\\nconst ConnectedComponent = Retool.connectReactComponent(MyCustomComponent);\\nconst container = document.getElementById('react');\\nconst root = ReactDOM.createRoot(container);\\nroot.render(<ConnectedComponent />);\\n\\n</script>\\n\",\"allowMicrophone\",false,\"allowSameOrigin\",false,\"allowPopupsToEscapeSandbox\",false,\"allowPayment\",false,\"allowGeolocation\",false]],\"^;\",[\"^3\",[]],\"^<\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^@\",\"\",\"^E\",\"body\",\"^F\",\"\",\"row\",0.8,\"col\",6,\"^G\",3,\"^H\",6,\"^I\",0]]],\"^=\",null,\"^>\",null,\"^?\",null,\"^@\",\"\",\"^A\",\"~m1670453328189\",\"^B\",\"~m1670453505266\",\"^C\",\"\",\"^D\",null]]],\"text3\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"text3\",\"^4\",\"widget\",\"^5\",\"TextWidget2\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"heightType\",\"auto\",\"horizontalAlign\",\"left\",\"hidden\",false,\"imageWidth\",\"fit\",\"showInEditor\",false,\"verticalAlign\",\"center\",\"tooltipText\",\"\",\"value\",\"## Model Example\",\"disableMarkdown\",false,\"overflowType\",\"scroll\",\"maintainSpaceWhenHidden\",false]],\"^;\",[\"^3\",[]],\"^<\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^@\",\"\",\"^E\",\"body\",\"^F\",\"\",\"row\",0,\"col\",6,\"^G\",0.6,\"^H\",4,\"^I\",0]]],\"^=\",null,\"^>\",null,\"^?\",null,\"^@\",\"\",\"^A\",\"~m1670453340471\",\"^B\",\"~m1670453352380\",\"^C\",\"\",\"^D\",null]]],\"text4\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"text4\",\"^4\",\"widget\",\"^5\",\"TextWidget2\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"heightType\",\"auto\",\"horizontalAlign\",\"right\",\"hidden\",false,\"imageWidth\",\"fit\",\"showInEditor\",false,\"verticalAlign\",\"center\",\"tooltipText\",\"\",\"value\",\"You have clicked {{ customComponent2.model.count }} times\",\"disableMarkdown\",false,\"overflowType\",\"scroll\",\"maintainSpaceWhenHidden\",false]],\"^;\",[\"^3\",[]],\"^<\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^@\",\"\",\"^E\",\"body\",\"^F\",\"\",\"row\",0.2,\"col\",10,\"^G\",0.6,\"^H\",2,\"^I\",0]]],\"^=\",null,\"^>\",null,\"^?\",null,\"^@\",\"\",\"^A\",\"~m1670453369126\",\"^B\",\"~m1670453415257\",\"^C\",\"\",\"^D\",null]]]]],\"^A\",null,\"version\",\"2.105.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,\"mobileAppSettings\",[\"^ \",\"mobileOfflineModeEnabled\",false],\"folders\",[\"^:\",[]],\"queryStatusVisibility\",false,\"markdownLinkBehavior\",\"auto\",\"inAppRetoolPillAppearance\",\"NO_OVERRIDE\",\"rootScreen\",null,\"instrumentationEnabled\",false,\"experimentalPerfFeatures\",[\"^ \",\"serverDepGraphEnabled\",false,\"useRuntimeV2\",false],\"experimentalStabilityFeatures\",[\"^ \",\"lockModelForUpdates\",false],\"experimentalDataTabEnabled\",true]]]"},"changesRecord":[{"type":"WIDGET_TEMPLATE_UPDATE","payload":{"plugin":{"id":"customComponent2","type":"widget","style":{},"folder":"","subtype":"CustomComponentWidget","template":{"model":"{\n  count: 0\n}","allowForms":false,"heightType":"fixed","iframeCode":"<script crossorigin src=\"https://unpkg.com/react@18/umd/react.development.js\"></script>\n<script crossorigin src=\"https://unpkg.com/react-dom@18/umd/react-dom.development.js\"></script>\n\n<div id=\"react\"></div>\n\n<script type=\"text/babel\">\n\nconst { useState } = React;\n\nfunction MyCustomComponent({ triggerQuery, model, modelUpdate }) {\n  return (\n    <div>\n      <p>You have clicked {model.count} times</p>\n      <button onClick={ () => modelUpdate({ count: model.count + 1 }) }>\n        click me\n      </button>\n    </div>\n  );\n}\n\n// This is the entrypoint for the React component.\nconst ConnectedComponent = Retool.connectReactComponent(MyCustomComponent);\nconst container = document.getElementById('react');\nconst root = ReactDOM.createRoot(container);\nroot.render(<ConnectedComponent />);\n\n</script>\n","allowCamera":false,"allowModals":false,"allowPopups":false,"allowPayment":false,"allowDownloads":false,"allowFullscreen":false,"allowMicrophone":false,"allowSameOrigin":false,"allowGeolocation":false,"allowTopNavigation":false,"allowPopupsToEscapeSandbox":false},"container":"","createdAt":"2022-12-07T22:48:48.189Z","position2":{"col":6,"row":0.8,"width":6,"height":3,"tabNum":0,"rowGroup":"body","container":"","subcontainer":""},"updatedAt":"2022-12-07T22:51:38.271Z"},"update":{"iframeCode":"<script crossorigin src=\"https://unpkg.com/react@18/umd/react.development.js\"></script>\n<script crossorigin src=\"https://unpkg.com/react-dom@18/umd/react-dom.development.js\"></script>\n\n<div id=\"react\"></div>\n\n<script type=\"text/babel\">\n\nfunction MyCustomComponent({ triggerQuery, model, modelUpdate }) {\n  return (\n    <div>\n      <p>You have clicked {model.count} times</p>\n      <button onClick={ () => modelUpdate({ count: model.count + 1 }) }>\n        click me\n      </button>\n    </div>\n  );\n}\n\n// This is the entrypoint for the React component.\nconst ConnectedComponent = Retool.connectReactComponent(MyCustomComponent);\nconst container = document.getElementById('react');\nconst root = ReactDOM.createRoot(container);\nroot.render(<ConnectedComponent />);\n\n</script>\n"},"widgetId":"customComponent2","shouldRecalculateTemplate":true},"isUserTriggered":true}],"gitSha":null,"checksum":null,"createdAt":"2022-12-07T22:51:47.440Z","updatedAt":"2022-12-07T22:51:47.440Z","pageId":1649559,"userId":348139,"branchId":null},"modules":{}}