{ "backgroundColor": "#FFFFFF", "borderColor": "#E0DEDE", "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", "borderWidth": "1", "bottomRow": 52, "boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}", "defaultModel": "{\n \"tips\": [\n \"Pass data to this widget in the default model field\",\n \"Access data in the javascript file using the appsmith.model variable\",\n \"Create events in the widget and trigger them in the javascript file using appsmith.triggerEvent('eventName')\",\n \"Access data in CSS as var(--appsmith-model-{property-name})\"\n ]\n}", "dynamicBindingPathList": [ { "key": "theme" }, { "key": "borderRadius" }, { "key": "boxShadow" } ], "dynamicHeight": "FIXED", "dynamicTriggerPathList": [ { "key": "onResetClick" } ], "events": [ "onResetClick" ], "isCanvas": false, "isLoading": false, "isSearchWildcard": true, "isVisible": true, "key": "15menc7fc7", "leftColumn": 0, "maxDynamicHeight": 9000, "minDynamicHeight": 4, "mobileBottomRow": 41, "mobileLeftColumn": 6, "mobileRightColumn": 29, "mobileTopRow": 11, "needsErrorInfo": false, "onResetClick": "{{showAlert('Successfully reset!!', '');}}", "parentColumnSpace": 16.479687499999997, "parentId": "8ed8sr6z3y", "parentRowSpace": 10, "renderMode": "CANVAS", "rightColumn": 64, "srcDoc": { "css": ".app {\n height: calc(var(--appsmith-ui-height) * 1px);\n width: calc(var(--appsmith-ui-width) * 1px);\n justify-content: center;\n border-radius: var(--appsmith-theme-borderRadius);\n box-shadow: var(--appsmith-theme-boxShadow);\n padding: 29px 25px;\n box-sizing: border-box;\n font-family: system-ui;\n background: #fff;\n}\n\n.tip-container {\n margin-bottom: 20px;\n font-size: 14px;\n line-height: 1.571429;\n}\n\n.tip-container h2 {\n margin-bottom: 20px;\n font-size: 16px;\n font-weight: 700;\n}\n\n.tip-header {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n margin-bottom: 9px;\n}\n\n.tip-header div {\n color: #999;\n}\n\n.content {\n white-space: pre-wrap;\n word-break: break-word;\n font-size: 14px;\n line-height: 1.571429;\n}\n\n.button-container {\n text-align: right;\n padding-top: 4px;\n}\n\n.button-container button {\n margin: 0 10px;\n cursor: pointer;\n border-radius: var(--appsmith-theme-borderRadius);\n padding: 6px 16px;\n background: none;\n height: auto;\n transition: all 0.3s ease;\n}\n\n.button-container button.primary {\n background: var(--appsmith-theme-primaryColor) !important;\n color: #fff;\n border: 1px solid var(--appsmith-theme-primaryColor) !important;\n}\n\n.button-container button.reset {\n border: 1px solid #999;\n color: #999;\n outline: none;\n box-shadow: none;\n}\n\n.button-container button.reset:hover:not(:disabled) {\n color: var(--appsmith-theme-primaryColor);\n border-color: var(--appsmith-theme-primaryColor);\n}\n\n.button-container button.reset:disabled {\n cursor: default;\n}", "html": "\n
\n", "js": "import React from \"https://esm.sh/react@18.2.0\";\nimport ReactDOM from \"https://esm.sh/react-dom@18.2.0\";\n\nconst Button = ({\n children,\n className,\n ...props\n}) => /*#__PURE__*/React.createElement(\"button\", {\n className: className,\n ...props\n}, children);\n\nfunction App() {\n const [currentIndex, setCurrentIndex] = React.useState(0);\n const handleNext = () => {\n setCurrentIndex(prevIndex => (prevIndex + 1) % appsmith.model.tips.length);\n };\n const handleReset = () => {\n setCurrentIndex(0);\n appsmith.triggerEvent(\"onResetClick\");\n };\n return /*#__PURE__*/React.createElement(\"div\", {\n className: \"app\"\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"tip-container\"\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"tip-header\"\n }, /*#__PURE__*/React.createElement(\"h2\", null, \"Custom Widget\"), /*#__PURE__*/React.createElement(\"div\", null, currentIndex + 1, \" / \", appsmith.model.tips.length)), /*#__PURE__*/React.createElement(\"div\", {\n className: \"content\"\n }, appsmith.model.tips[currentIndex])), /*#__PURE__*/React.createElement(\"div\", {\n className: \"button-container\"\n }, /*#__PURE__*/React.createElement(Button, {\n className: \"primary\",\n onClick: handleNext\n }, \"Next Tip\"), /*#__PURE__*/React.createElement(Button, {\n className: \"reset\",\n disabled: currentIndex === 0,\n onClick: handleReset\n }, \"Reset\")));\n}\n\nappsmith.onReady(() => {\n ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById(\"root\"));\n});" }, "theme": "{{appsmith.theme}}", "topRow": 9, "type": "CUSTOM_WIDGET", "uncompiledSrcDoc": { "css": ".app {\n height: calc(var(--appsmith-ui-height) * 1px);\n width: calc(var(--appsmith-ui-width) * 1px);\n justify-content: center;\n border-radius: var(--appsmith-theme-borderRadius);\n box-shadow: var(--appsmith-theme-boxShadow);\n padding: 29px 25px;\n box-sizing: border-box;\n font-family: system-ui;\n background: #fff;\n}\n\n.tip-container {\n margin-bottom: 20px;\n font-size: 14px;\n line-height: 1.571429;\n}\n\n.tip-container h2 {\n margin-bottom: 20px;\n font-size: 16px;\n font-weight: 700;\n}\n\n.tip-header {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n margin-bottom: 9px;\n}\n\n.tip-header div {\n color: #999;\n}\n\n.content {\n white-space: pre-wrap;\n word-break: break-word;\n font-size: 14px;\n line-height: 1.571429;\n}\n\n.button-container {\n text-align: right;\n padding-top: 4px;\n}\n\n.button-container button {\n margin: 0 10px;\n cursor: pointer;\n border-radius: var(--appsmith-theme-borderRadius);\n padding: 6px 16px;\n background: none;\n height: auto;\n transition: all 0.3s ease;\n}\n\n.button-container button.primary {\n background: var(--appsmith-theme-primaryColor) !important;\n color: #fff;\n border: 1px solid var(--appsmith-theme-primaryColor) !important;\n}\n\n.button-container button.reset {\n border: 1px solid #999;\n color: #999;\n outline: none;\n box-shadow: none;\n}\n\n.button-container button.reset:hover:not(:disabled) {\n color: var(--appsmith-theme-primaryColor);\n border-color: var(--appsmith-theme-primaryColor);\n}\n\n.button-container button.reset:disabled {\n cursor: default;\n}", "html": "\n
\n", "js": "import React from \"https://esm.sh/react@18.2.0\";\nimport ReactDOM from \"https://esm.sh/react-dom@18.2.0\";\n\nconst Button = ({ children, className, ...props }) => (\n \n);\n\nfunction App() {\n const [currentIndex, setCurrentIndex] = React.useState(0);\n\n const handleNext = () => {\n setCurrentIndex((prevIndex) => (prevIndex + 1) % appsmith.model.tips.length);\n };\n\n const handleReset = () => {\n setCurrentIndex(0);\n appsmith.triggerEvent(\"onResetClick\");\n };\n\n return (\n
\n
\n
\n

Custom Widget

\n
{currentIndex + 1} / {appsmith.model.tips.length}
\n
\n
{appsmith.model.tips[currentIndex]}
\n
\n
\n \n \n
\n
\n );\n}\n\nappsmith.onReady(() => {\n/*\n\t * This handler function will get called when parent application is ready.\n\t * Initialize your component here\n\t * more info - https://docs.appsmith.com/reference/widgets/custom#onready\n\t */\n ReactDOM.render(, document.getElementById(\"root\"));\n});" }, "version": 1, "widgetId": "oghaatehlp", "widgetName": "Custom1" }