2023-12-28 06:46:28 +00:00
{
"dsl" : {
"widgetName" : "MainContainer" ,
"backgroundColor" : "none" ,
"rightColumn" : 4896 ,
"snapColumns" : 64 ,
"detachFromLayout" : true ,
"widgetId" : "0" ,
"topRow" : 0 ,
"bottomRow" : 400 ,
"containerStyle" : "none" ,
"snapRows" : 124 ,
"parentRowSpace" : 1 ,
"type" : "CANVAS_WIDGET" ,
"canExtend" : true ,
"version" : 87 ,
"minHeight" : 1292 ,
"dynamicTriggerPathList" : [ ] ,
"parentColumnSpace" : 1 ,
"dynamicBindingPathList" : [ ] ,
"leftColumn" : 0 ,
"children" : [
{
"mobileBottomRow" : 33 ,
"widgetName" : "Custom1" ,
"srcDoc" : {
"html" : "<!-- no need to write html, head, body tags, it is handled by the widget -->\n<div id=\"root\"></div>\n" ,
"css" : ".app {\n\theight: calc(var(--appsmith-ui-height) * 1px);\n\twidth: calc(var(--appsmith-ui-width) * 1px);\n\tjustify-content: center;\n\tborder-radius: var(--appsmith-theme-borderRadius);\n\tbox-shadow: var(--appsmith-theme-boxShadow);\n}\n\n.tip-container {\n margin-bottom: 20px;\n}\n\n.tip-container h2 {\n margin-bottom: 20px;\n\tfont-size: 16px;\n\tfont-weight: 700;\n}\n\n.tip-header {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: baseline;\n}\n\n.tip-header div {\n\tcolor: #999;\n}\n\n.button-container {\n\ttext-align: right;\t\n}\n\n.button-container button {\n margin: 0 10px;\n}\n\n.button-container button.primary {\n\tbackground: var(--appsmith-theme-primaryColor) !important;\n}\n\n.button-container button.reset {\n\tcolor: var(--appsmith-theme-primaryColor) !important;\n\tborder-color: var(--appsmith-theme-primaryColor) !important;\n}" ,
2025-03-05 15:13:07 +00:00
"js" : "import React from 'https://cdn.jsdelivr.net/npm/react@18.2.0/+esm';\nimport reactDom from 'https://cdn.jsdelivr.net/npm/react-dom@18.2.0/+esm';\nimport { Button, Card } from 'https://cdn.jsdelivr.net/npm/antd@5.15.0/+esm';\nimport Markdown from 'https://cdn.jsdelivr.net/npm/react-markdown@9.0.1/+esm';\nfunction App() {\n const [currentIndex, setCurrentIndex] = React.useState(0);\n const [key, setKey] = React.useState(0);\n const handleNext = () => {\n const index = (currentIndex + 1) % appsmith.model.tips.length;\n setCurrentIndex(index);\n appsmith.updateModel({\n currentIndex: index\n });\n };\n const handleReset = () => {\n setCurrentIndex(0);\n appsmith.updateModel({\n currentIndex: 0\n });\n appsmith.triggerEvent(\"onResetClick\", {\n oldIndex: currentIndex\n });\n };\n React.useEffect(() => {\n appsmith.onModelChange((model, prevModel) => {\n if (JSON.stringify(prevModel?.tips) !== JSON.stringify(model.tips)) {\n setKey(Math.random());\n }\n });\n }, []);\n return /*#__PURE__*/React.createElement(Card, {\n className: \"app\",\n key: key\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(Markdown, null, appsmith.model.tips[currentIndex])), /*#__PURE__*/React.createElement(\"div\", {\n className: \"button-container\"\n }, /*#__PURE__*/React.createElement(Button, {\n className: \"primary\",\n onClick: handleNext,\n type: \"primary\"\n }, \"Next Tip\"), /*#__PURE__*/React.createElement(Button, {\n className: \"reset\",\n onClick: handleReset\n }, \"Reset\")));\n}\nappsmith.onReady(() => {\n reactDom.render( /*#__PURE__*/React.createElement(App, null), document.getElementById(\"root\"));\n});"
2023-12-28 06:46:28 +00:00
} ,
"isCanvas" : false ,
"displayName" : "Custom" ,
"iconSVG" : "/static/media/icon.867bcc8399fa3f897d425d72690b86e4.svg" ,
"searchTags" : [
"external"
] ,
"topRow" : 3 ,
"bottomRow" : 33 ,
"parentRowSpace" : 10 ,
"type" : "CUSTOM_WIDGET" ,
"hideCard" : false ,
"mobileRightColumn" : 41 ,
"parentColumnSpace" : 19.296875 ,
"dynamicTriggerPathList" : [
{
"key" : "onResetClick"
}
] ,
"dynamicBindingPathList" : [
{
"key" : "theme"
}
] ,
"leftColumn" : 21 ,
"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}" ,
"theme" : "{{appsmith.theme}}" ,
"onResetClick" : "{{showAlert('Successfully reset from ' + oldIndex, '');}}" ,
"events" : [
"onResetClick"
] ,
"key" : "nuzm5titx7" ,
"isDeprecated" : false ,
"rightColumn" : 41 ,
"isSearchWildcard" : true ,
"widgetId" : "giszumqrjp" ,
"isVisible" : true ,
"version" : 1 ,
"uncompiledSrcDoc" : {
"html" : "<!-- no need to write html, head, body tags, it is handled by the widget -->\n<div id=\"root\"></div>\n" ,
"css" : ".app {\n\theight: calc(var(--appsmith-ui-height) * 1px);\n\twidth: calc(var(--appsmith-ui-width) * 1px);\n\tjustify-content: center;\n\tborder-radius: var(--appsmith-theme-borderRadius);\n\tbox-shadow: var(--appsmith-theme-boxShadow);\n}\n\n.tip-container {\n margin-bottom: 20px;\n}\n\n.tip-container h2 {\n margin-bottom: 20px;\n\tfont-size: 16px;\n\tfont-weight: 700;\n}\n\n.tip-header {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: baseline;\n}\n\n.tip-header div {\n\tcolor: #999;\n}\n\n.button-container {\n\ttext-align: right;\t\n}\n\n.button-container button {\n margin: 0 10px;\n}\n\n.button-container button.primary {\n\tbackground: var(--appsmith-theme-primaryColor) !important;\n}\n\n.button-container button.reset {\n\tcolor: var(--appsmith-theme-primaryColor) !important;\n\tborder-color: var(--appsmith-theme-primaryColor) !important;\n}" ,
2025-03-05 15:13:07 +00:00
"js" : "import React from 'https://cdn.jsdelivr.net/npm/react@18.2.0/+esm'\nimport reactDom from 'https://cdn.jsdelivr.net/npm/react-dom@18.2.0/+esm'\nimport { Button, Card } from 'https://cdn.jsdelivr.net/npm/antd@5.15.0/+esm'\nimport Markdown from 'https://cdn.jsdelivr.net/npm/react-markdown@9.0.1/+esm';\n\nfunction App() {\n\tconst [currentIndex, setCurrentIndex] = React.useState(0);\n\t\n\tconst [key, setKey] = React.useState(0);\n\n\tconst handleNext = () => {\n\t\tconst index = (currentIndex + 1) % appsmith.model.tips.length\n\t\tsetCurrentIndex(index);\n\t\tappsmith.updateModel({\n\t\t\tcurrentIndex: index\n\t\t});\n\t};\n\n\tconst handleReset = () => {\n\t\tsetCurrentIndex(0);\n\t\tappsmith.updateModel({\n\t\t\tcurrentIndex: 0\n\t\t});\n\t\tappsmith.triggerEvent(\"onResetClick\", {\n\t\t\toldIndex: currentIndex\n\t\t});\n\t};\n\t\n\tReact.useEffect(() => {\t\t\n\t\tappsmith.onModelChange((model, prevModel) => {\n\t\t\tif (JSON.stringify(prevModel?.tips) !== JSON.stringify(model.tips)) {\n\t\t\t\tsetKey(Math.random());\n\t\t\t}\n\t\t});\n\t}, []);\n\t\n\n\treturn (\n\t\t<Card className=\"app\" key={key}>\n\t\t\t<div className=\"tip-container\">\n\t\t\t\t<div className=\"tip-header\">\n\t\t\t\t\t<h2>Custom Widget</h2>\n\t\t\t\t\t<div>{currentIndex + 1} / {appsmith.model.tips.length}\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<Markdown>{appsmith.model.tips[currentIndex]}</Markdown>\n\t\t\t</div>\n\t\t\t<div className=\"button-container\">\n\t\t\t\t<Button className=\"primary\" onClick={handleNext} type=\"primary\">Next Tip</Button>\n\t\t\t\t<Button className=\"reset\" onClick={handleReset}>Reset</Button>\n\t\t\t</div>\n\t</Card>\n);\n}\n\nappsmith.onReady(() => {\n\treactDom.render(<App />, document.getElementById(\"root\"));\n});"
2023-12-28 06:46:28 +00:00
} ,
"parentId" : "0" ,
"tags" : [
"Display"
] ,
"renderMode" : "CANVAS" ,
"isLoading" : false ,
"mobileTopRow" : 3 ,
"mobileLeftColumn" : 21 ,
"dynamicPropertyPathList" : [
{
"key" : "onResetClick"
}
]
} ,
{
"isVisible" : true ,
"type" : "TEXT_WIDGET" ,
"text" : "{{Custom1.model.currentIndex}}" ,
"fontSize" : "1rem" ,
"fontStyle" : "BOLD" ,
"textAlign" : "LEFT" ,
"textColor" : "#231F20" ,
"widgetName" : "Text1" ,
"shouldTruncate" : false ,
"overflow" : "NONE" ,
"version" : 1 ,
"animateLoading" : true ,
"responsiveBehavior" : "fill" ,
"minWidth" : 450 ,
"minDynamicHeight" : 4 ,
"maxDynamicHeight" : 9000 ,
"dynamicHeight" : "AUTO_HEIGHT" ,
"searchTags" : [
"typography" ,
"paragraph" ,
"label"
] ,
"tags" : [
"Suggested" ,
"Content"
] ,
"hideCard" : false ,
"isDeprecated" : false ,
"displayName" : "Text" ,
"key" : "my0l36gkcf" ,
"iconSVG" : "/static/media/icon.a47d6d5dbbb718c4dc4b2eb4f218c1b7.svg" ,
"widgetId" : "144bnot1xa" ,
"renderMode" : "CANVAS" ,
"truncateButtonColor" : "{{appsmith.theme.colors.primaryColor}}" ,
"fontFamily" : "{{appsmith.theme.fontFamily.appFont}}" ,
"borderRadius" : "{{appsmith.theme.borderRadius.appBorderRadius}}" ,
"isLoading" : false ,
"parentColumnSpace" : 19.296875 ,
"parentRowSpace" : 10 ,
"leftColumn" : 23 ,
"rightColumn" : 40 ,
"topRow" : 36 ,
"bottomRow" : 40 ,
"mobileLeftColumn" : 23 ,
"mobileRightColumn" : 39 ,
"mobileTopRow" : 38 ,
"mobileBottomRow" : 42 ,
"parentId" : "0" ,
"dynamicBindingPathList" : [
{
"key" : "truncateButtonColor"
} ,
{
"key" : "fontFamily"
} ,
{
"key" : "borderRadius"
} ,
{
"key" : "text"
}
] ,
"dynamicTriggerPathList" : [ ] ,
"originalTopRow" : 38 ,
"originalBottomRow" : 42
}
]
}
}
