custom-component-guide-example.json

{"uuid":"b1e3e33e-98a3-11ec-b9c0-93891007542a","page":{"id":60296684,"data":{"appState":"[\"~#iR\",[\"^ \",\"n\",\"appTemplate\",\"v\",[\"^ \",\"isFetching\",false,\"plugins\",[\"~#iOM\",[\"container1\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"container1\",\"type\",\"widget\",\"subtype\",\"ContainerWidget2\",\"resourceName\",null,\"resourceDisplayName\",null,\"template\",[\"^3\",[\"_disabledByIndex\",[\"~#iL\",[\"\"]],\"heightType\",\"auto\",\"currentViewKey\",null,\"iconByIndex\",[],\"clickable\",false,\"_iconByIndex\",[\"^9\",[\"\"]],\"hidden\",false,\"showHeader\",true,\"hoistFetching\",true,\"views\",[],\"showInEditor\",false,\"tooltipText\",\"\",\"hiddenByIndex\",[],\"_hiddenByIndex\",[\"^9\",[\"\"]],\"currentViewIndex\",null,\"_hasMigratedNestedItems\",true,\"transition\",\"none\",\"itemMode\",\"static\",\"_tooltipByIndex\",[\"^9\",[\"\"]],\"tooltipByIndex\",[],\"showFooter\",false,\"_viewKeys\",[\"^9\",[\"View 1\"]],\"events\",[\"^3\",[]],\"_ids\",[\"^9\",[\"5798e\"]],\"viewKeys\",[],\"iconPositionByIndex\",[],\"_iconPositionByIndex\",[\"^9\",[\"\"]],\"loading\",false,\"overflowType\",\"scroll\",\"disabled\",false,\"_labels\",[\"^9\",[\"\"]],\"disabledByIndex\",[],\"maintainSpaceWhenHidden\",false,\"showBody\",true,\"labels\",[]]],\"style\",[\"^3\",[]],\"position2\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"container\",\"\",\"rowGroup\",\"body\",\"subcontainer\",\"\",\"row\",0,\"col\",0,\"height\",4,\"width\",6,\"tabNum\",0]]],\"mobilePosition2\",null,\"mobileAppPosition\",null,\"tabIndex\",null,\"createdAt\",\"~m1646058948804\",\"updatedAt\",\"~m1646058948804\",\"^<\",\"\",\"folder\",\"\",\"screen\",null]]],\"containerTitle1\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"containerTitle1\",\"^4\",\"widget\",\"^5\",\"TextWidget2\",\"^6\",null,\"^7\",null,\"^8\",[\"^3\",[\"heightType\",\"auto\",\"horizontalAlign\",\"left\",\"hidden\",false,\"imageWidth\",\"fit\",\"showInEditor\",false,\"verticalAlign\",\"center\",\"tooltipText\",\"\",\"value\",\"#### Pre Configured Component\",\"disableMarkdown\",false,\"overflowType\",\"scroll\",\"maintainSpaceWhenHidden\",false]],\"^:\",[\"^3\",[]],\"^;\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^<\",\"container1\",\"^=\",\"header\",\"^>\",\"\",\"row\",0,\"col\",0,\"^?\",0.6,\"^@\",12,\"^A\",0]]],\"^B\",null,\"^C\",null,\"^D\",null,\"^E\",\"~m1646058948958\",\"^F\",\"~m1646058967045\",\"^<\",\"\",\"^G\",\"\",\"^H\",null]]],\"customComponentConfigured\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"customComponentConfigured\",\"^4\",\"widget\",\"^5\",\"CustomComponentWidget\",\"^6\",null,\"^7\",null,\"^8\",[\"^3\",[\"allowTopNavigation\",false,\"model\",\"{\\n\\t\\\"greeting\\\": \\\"Hello, \\\",  \\n\\t\\\"username\\\": {{ current_user.fullName }},\\n  \\\"message\\\": \\\"Welcome to custom components!\\\",\\n  \\\"yesQuery\\\": \\\"yesQuery\\\",\\n  \\\"noQuery\\\": \\\"noQuery\\\",\\n  \\\"runQuery\\\": \\\"runQuery\\\"\\n}\",\"allowCamera\",false,\"allowModals\",false,\"iframeCode\",\"<script type=\\\"text/javascript\\\" src=\\\"http://localhost:8080/index.js\\\" />\",\"allowMicrophone\",false,\"allowSameOrigin\",false,\"allowPopupsToEscapeSandbox\",false,\"allowGeolocation\",false]],\"^:\",[\"^3\",[]],\"^;\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^<\",\"container1\",\"^=\",\"body\",\"^>\",\"5798e\",\"row\",0,\"col\",0,\"^?\",8.2,\"^@\",12,\"^A\",0]]],\"^B\",null,\"^C\",null,\"^D\",null,\"^E\",\"~m1646058979233\",\"^F\",\"~m1646062045740\",\"^<\",\"\",\"^G\",\"\",\"^H\",null]]],\"getUser\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"getUser\",\"^4\",\"datasource\",\"^5\",\"SqlQuery\",\"^6\",\"onboarding_db (readonly)\",\"^7\",\"onboarding_db (readonly)\",\"^8\",[\"^3\",[\"queryRefreshTime\",\"\",\"lastReceivedFromResourceAt\",null,\"databasePasswordOverride\",\"\",\"queryDisabledMessage\",\"\",\"successMessage\",\"\",\"queryDisabled\",\"\",\"playgroundQuerySaveId\",\"latest\",\"resourceNameOverride\",\"\",\"runWhenModelUpdates\",true,\"showFailureToaster\",true,\"query\",\"select first_name from users\\nlimit 100\",\"playgroundQueryUuid\",\"\",\"playgroundQueryId\",null,\"privateParams\",[\"^9\",[]],\"runWhenPageLoadsDelay\",\"\",\"warningCodes\",[\"^9\",[]],\"data\",null,\"importedQueryInputs\",[\"^3\",[]],\"isImported\",false,\"showSuccessToaster\",true,\"dataArray\",[\"^9\",[]],\"cacheKeyTtl\",\"\",\"databaseHostOverride\",\"\",\"metadata\",null,\"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\",\"watchedParams\",[\"^9\",[]],\"enableErrorTransformer\",false,\"showLatestVersionUpdatedWarning\",false,\"timestamp\",0,\"importedQueryDefaults\",[\"^3\",[]],\"enableTransformer\",false,\"showUpdateSetValueDynamicallyToggle\",true,\"runWhenPageLoads\",false,\"transformer\",\"// type your code here\\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\\nreturn data\",\"events\",[\"^9\",[[\"^3\",[\"event\",\"success\",\"type\",\"script\",\"method\",\"run\",\"pluginId\",\"\",\"targetId\",null,\"params\",[\"^3\",[\"src\",\"\"]],\"waitType\",\"debounce\",\"waitMs\",\"0\"]]]],\"queryTimeout\",\"10000\",\"requireConfirmation\",false,\"queryFailureConditions\",\"\",\"changesetIsObject\",false,\"enableCaching\",false,\"allowedGroups\",[\"^9\",[]],\"databaseUsernameOverride\",\"\",\"shouldEnableBatchQuerying\",false,\"queryThrottleTime\",\"750\",\"updateSetValueDynamically\",false,\"notificationDuration\",\"\"]],\"^:\",null,\"^;\",null,\"^B\",null,\"^C\",null,\"^D\",null,\"^E\",\"~m1646062708587\",\"^F\",\"~m1646062977878\",\"^<\",\"\",\"^G\",\"\",\"^H\",null]]],\"runQuery\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"runQuery\",\"^4\",\"datasource\",\"^5\",\"JavascriptQuery\",\"^6\",\"JavascriptQuery\",\"^7\",null,\"^8\",[\"^3\",[\"queryRefreshTime\",\"\",\"lastReceivedFromResourceAt\",null,\"queryDisabledMessage\",\"\",\"successMessage\",\"\",\"queryDisabled\",\"\",\"playgroundQuerySaveId\",\"latest\",\"resourceNameOverride\",\"\",\"runWhenModelUpdates\",false,\"showFailureToaster\",true,\"query\",\"customComponentConfigured.updateModel({\\n  username: getUser.data.first_name[[Math.floor(Math.random() * getUser.data.first_name.length)]]\\n})\",\"playgroundQueryUuid\",\"\",\"playgroundQueryId\",null,\"privateParams\",[\"^9\",[]],\"runWhenPageLoadsDelay\",\"\",\"data\",null,\"importedQueryInputs\",[\"^3\",[]],\"isImported\",false,\"showSuccessToaster\",true,\"cacheKeyTtl\",\"\",\"metadata\",null,\"changesetObject\",\"\",\"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\",\"confirmationMessage\",null,\"isFetching\",false,\"changeset\",\"\",\"rawData\",null,\"queryTriggerDelay\",\"0\",\"watchedParams\",[\"^9\",[]],\"enableErrorTransformer\",false,\"showLatestVersionUpdatedWarning\",false,\"timestamp\",0,\"importedQueryDefaults\",[\"^3\",[]],\"enableTransformer\",false,\"showUpdateSetValueDynamicallyToggle\",true,\"runWhenPageLoads\",false,\"transformer\",\"// type your code here\\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\\nreturn data\",\"events\",[\"^9\",[]],\"queryTimeout\",\"10000\",\"requireConfirmation\",false,\"queryFailureConditions\",\"\",\"changesetIsObject\",false,\"enableCaching\",false,\"allowedGroups\",[\"^9\",[]],\"queryThrottleTime\",\"750\",\"updateSetValueDynamically\",false,\"notificationDuration\",\"\"]],\"^:\",null,\"^;\",null,\"^B\",null,\"^C\",null,\"^D\",null,\"^E\",\"~m1646062845467\",\"^F\",\"~m1646063439064\",\"^<\",\"\",\"^G\",\"\",\"^H\",null]]]]],\"^E\",null,\"version\",\"2.86.7\",\"appThemeId\",null,\"preloadedAppJavaScript\",null,\"preloadedAppJSLinks\",[],\"appStyles\",\"\",\"testEntities\",[],\"tests\",[],\"responsiveLayoutDisabled\",false,\"loadingIndicatorsDisabled\",false,\"urlFragmentDefinitions\",[\"^9\",[]],\"pageLoadValueOverrides\",[\"^9\",[]],\"isGlobalWidget\",false,\"isMobileApp\",false,\"multiScreenMobileApp\",false,\"instrumentationEnabled\",false,\"customDocumentTitleEnabled\",false,\"customDocumentTitle\",\"\",\"customShortcuts\",[],\"folders\",[\"^9\",[]],\"markdownLinkBehavior\",\"auto\",\"inAppRetoolPillAppearance\",\"NO_OVERRIDE\",\"rootScreen\",null]]]"},"changesRecord":[{"type":"PLUGIN_UPDATE_ID","payload":{"newId":"customComponentConfigured","pluginId":"customComponent1"}},{"type":"WIDGET_TEMPLATE_UPDATE","payload":{"plugin":{"id":"runQuery","type":"datasource","style":null,"folder":"","screen":null,"subtype":"JavascriptQuery","tabIndex":null,"template":{"data":null,"query":"customComponent1.updateModel({\n  username: getUser.data.first_name[[Math.floor(Math.random() * getUser.data.first_name.length)]]\n})","events":[],"rawData":null,"metadata":null,"changeset":"","timestamp":0,"isFetching":false,"isImported":false,"cacheKeyTtl":"","transformer":"// type your code here\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\nreturn data","queryTimeout":"10000","allowedGroups":[],"enableCaching":false,"privateParams":[],"queryDisabled":"","watchedParams":[],"successMessage":"","changesetObject":"","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","queryRefreshTime":"","runWhenPageLoads":false,"changesetIsObject":false,"enableTransformer":false,"playgroundQueryId":null,"queryThrottleTime":"750","queryTriggerDelay":"0","showFailureToaster":true,"showSuccessToaster":true,"confirmationMessage":null,"importedQueryInputs":{},"playgroundQueryUuid":"","requireConfirmation":false,"runWhenModelUpdates":false,"notificationDuration":"","queryDisabledMessage":"","resourceNameOverride":"","importedQueryDefaults":{},"playgroundQuerySaveId":"latest","runWhenPageLoadsDelay":"","enableErrorTransformer":false,"queryFailureConditions":"","updateSetValueDynamically":false,"lastReceivedFromResourceAt":null,"showLatestVersionUpdatedWarning":false,"showUpdateSetValueDynamicallyToggle":true},"container":"","createdAt":"2022-02-28T15:40:45.467Z","namespace":null,"position2":null,"updatedAt":"2022-02-28T15:42:44.626Z","resourceName":"JavascriptQuery","mobilePosition2":null,"mobileAppPosition":null},"update":{"query":"customComponentConfigured.updateModel({\n  username: getUser.data.first_name[[Math.floor(Math.random() * getUser.data.first_name.length)]]\n})"},"widgetId":"runQuery"},"isUserTriggered":true}],"gitSha":null,"checksum":null,"createdAt":"2022-02-28T15:50:39.508Z","updatedAt":"2022-02-28T15:50:39.508Z","pageId":937324,"userId":234183,"branchId":null},"modules":{}}