diff --git a/Dockerfile b/Dockerfile index da7fde4b72..edc4ce4356 100644 --- a/Dockerfile +++ b/Dockerfile @@ -11,8 +11,7 @@ RUN apk add --no-cache \ ## copy frontend COPY nginx.conf /etc/nginx/nginx.conf COPY illa-builder-frontend.conf /etc/nginx/conf.d/illa-builder-frontend.conf -COPY ./apps/builder/dist/index.html /opt/illa/illa-builder-frontend/index.html -COPY ./apps/builder/dist/assets /opt/illa/illa-builder-frontend/assets +COPY ./apps/builder/dist /opt/illa/illa-builder-frontend RUN rm /etc/nginx/conf.d/default.conf # test nginx diff --git a/apps/builder/package.json b/apps/builder/package.json index 2617aff130..13621991c8 100644 --- a/apps/builder/package.json +++ b/apps/builder/package.json @@ -40,8 +40,28 @@ "@editorjs/marker": "^1.3.0", "@emotion/cache": "^11.11.0", "@illa-design/react": "workspace:*", + "@illa-public/avatar": "workspace:*", + "@illa-public/code-editor": "workspace:*", + "@illa-public/cropper": "workspace:*", + "@illa-public/icon": "workspace:*", + "@illa-public/illa-net": "workspace:*", + "@illa-public/invite-modal": "workspace:*", + "@illa-public/layout-auto-change": "workspace:*", + "@illa-public/market-agent": "workspace:*", + "@illa-public/market-app": "workspace:*", + "@illa-public/member-page": "workspace:*", + "@illa-public/mixpanel-utils": "workspace:*", + "@illa-public/record-editor": "workspace:*", + "@illa-public/select": "workspace:*", + "@illa-public/sso-module": "workspace:*", + "@illa-public/upgrade-modal": "workspace:*", + "@illa-public/user-data": "workspace:*", + "@illa-public/user-role-utils": "workspace:*", "@illa-public/illa-storage": "workspace:*", "@illa-public/utils": "workspace:*", + "@illa-public/text-link": "workspace:*", + "@illa-public/resource-generator": "workspace:*", + "@illa-public/public-types": "workspace:*", "@protobuf-ts/runtime": "^2.8.3", "@react-google-maps/api": "^2.18.1", "@rjsf/core": "^5.10.0", @@ -106,27 +126,7 @@ "ts-key-enum": "^2.0.12", "uuid": "^8.3.2", "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.0/xlsx-0.20.0.tgz", - "fuse.js": "^6.6.2", - "@illa-public/user-role-utils": "workspace:*", - "@illa-public/mixpanel-utils": "workspace:*", - "@illa-public/code-editor": "workspace:*", - "@illa-public/cropper": "workspace:*", - "@illa-public/icon": "workspace:*", - "@illa-public/record-editor": "workspace:*", - "@illa-public/avatar": "workspace:*", - "@illa-public/select": "workspace:*", - "@illa-public/user-data": "workspace:*", - "@illa-public/market-agent": "workspace:*", - "@illa-public/market-app": "workspace:*", - "@illa-public/sso-module": "workspace:*", - "@illa-public/layout-auto-change": "workspace:*", - "@illa-public/invite-modal": "workspace:*", - "@illa-public/illa-net": "workspace:*", - "@illa-public/member-page": "workspace:*", - "@illa-public/upgrade-modal": "workspace:*", - "@illa-public/text-link": "workspace:*", - "@illa-public/resource-generator": "workspace:*", - "@illa-public/public-types": "workspace:*" + "fuse.js": "^6.6.2" }, "devDependencies": { "@mdx-js/rollup": "^2.3.0", diff --git a/apps/builder/src/api/http/interceptors/response/errorHandler.ts b/apps/builder/src/api/http/interceptors/response/errorHandler.ts index 90335347f7..4811d7fd7a 100644 --- a/apps/builder/src/api/http/interceptors/response/errorHandler.ts +++ b/apps/builder/src/api/http/interceptors/response/errorHandler.ts @@ -1,54 +1,30 @@ -import { isCloudVersion } from "@illa-public/utils" -import { removeAuthToken } from "@illa-public/utils" +import { getILLABuilderURL, removeAuthToken } from "@illa-public/utils" import { AxiosError } from "axios" import { cloudRedirect } from "@/router/constant" -import { getQS } from "@/router/utils/translateQS" import { commonBillingErrorHandler } from "@/utils/billing/errorHandler" -const getRedirectPathWhen401 = (searchParams: URLSearchParams) => { - const inviteToken = searchParams.get("inviteToken") - const qs = getQS(searchParams) - if (inviteToken) { - return `/register${qs}` - } else { - return `/login${qs}` - } -} - export const errorHandlerInterceptor = (error: AxiosError) => { const { response } = error if (!response) return Promise.reject(error) - const { href } = location const { status } = response switch (status) { // TODO: @aruseito maybe need custom error status, because of we'll have plugin to request other's api case 401: { removeAuthToken() - if (isCloudVersion) { - // navigate to illa cloud, avoid redirect loop - if (!href.includes("redirectURL")) { - window.location.href = cloudRedirect - } - } else { - const { href } = location - const url = new URL(href) - const searchParams = url.searchParams - const path = getRedirectPathWhen401(searchParams) - window.location.pathname = path - } + window.location.href = cloudRedirect break } case 403: { - window.location.pathname = "/403" + window.location.href = `${getILLABuilderURL()}/403` break } case 500: { - window.location.pathname = "/500" + window.location.href = `${getILLABuilderURL()}/500` break } default: { if (status >= 500) { - window.location.pathname = "/500" + window.location.href = `${getILLABuilderURL()}/500` break } commonBillingErrorHandler(response) diff --git a/apps/builder/src/assets/googlesheets/disabled-google.svg b/apps/builder/src/assets/googlesheets/disabled-google.svg new file mode 100644 index 0000000000..07fa3c3019 --- /dev/null +++ b/apps/builder/src/assets/googlesheets/disabled-google.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/builder/src/assets/googlesheets/google-logo.svg b/apps/builder/src/assets/googlesheets/google-logo.svg new file mode 100644 index 0000000000..a85f246207 --- /dev/null +++ b/apps/builder/src/assets/googlesheets/google-logo.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/apps/builder/src/config/newAppConfig.tsx b/apps/builder/src/config/newAppConfig.tsx deleted file mode 100644 index b6bd3b849c..0000000000 --- a/apps/builder/src/config/newAppConfig.tsx +++ /dev/null @@ -1,149 +0,0 @@ -import { v4 } from "uuid" -import { - DEFAULT_ASIDE_COLUMNS_NUMBER, - DEFAULT_BODY_COLUMNS_NUMBER, -} from "@/page/App/components/DotPanel/constant/canvas" -import { - CONTAINER_TYPE, - ComponentNode, - ModalSectionNode, - PADDING_MODE, - SECTION_POSITION, - SectionNode, -} from "@/redux/currentApp/components/componentsState" - -export const BASIC_BODY_SECTION_CONFIG: SectionNode = { - displayName: "bodySection1", - parentNode: "page1", - showName: "bodySection", - type: "SECTION_NODE", - containerType: CONTAINER_TYPE.EDITOR_LAYOUT_SQUARE, - h: 0, - w: 0, - minH: 0, - minW: 0, - x: -1, - y: -1, - z: 0, - version: 0, - props: { - currentViewIndex: 0, - viewSortedKey: ["bodySection1-bodySectionContainer1"], - defaultViewKey: "sub-page1", - sectionViewConfigs: [ - { - id: v4(), - viewDisplayName: "bodySection1-bodySectionContainer1", - key: "sub-page1", - path: "sub-page1", - }, - ], - style: { - padding: { - mode: PADDING_MODE.ALL, - size: "24", - }, - }, - }, - childrenNode: [ - { - displayName: "bodySection1-bodySectionContainer1", - parentNode: "bodySection", - showName: "bodySection1-bodySectionContainer1", - type: "CONTAINER_NODE", - containerType: CONTAINER_TYPE.EDITOR_DOT_PANEL, - h: 0, - w: 0, - minH: 0, - minW: 0, - x: -1, - y: -1, - z: 0, - version: 0, - childrenNode: [], - props: {}, - }, - ], -} - -export const BASIC_MODAL_SECTION_CONFIG: ModalSectionNode = { - displayName: "modalSection1", - parentNode: "page1", - showName: "modalSection", - type: "MODAL_SECTION_NODE", - containerType: CONTAINER_TYPE.EDITOR_LAYOUT_SQUARE, - h: 0, - w: 0, - minH: 0, - minW: 0, - x: -1, - y: -1, - z: 0, - version: 0, - props: {}, - childrenNode: [], -} - -export const BASIC_APP_CONFIG: ComponentNode = { - displayName: "root", - parentNode: "", - showName: "root", - type: "DOT_PANEL", - containerType: CONTAINER_TYPE.EDITOR_DOT_PANEL, - h: 0, - w: 0, - minH: 0, - minW: 0, - x: -1, - y: -1, - z: 0, - version: 0, - props: { - currentPageIndex: 0, - pageSortedKey: ["page1"], - }, - childrenNode: [ - { - displayName: "page1", - parentNode: "root", - showName: "page", - type: "PAGE_NODE", - containerType: CONTAINER_TYPE.EDITOR_PAGE_SQUARE, - h: 0, - w: 0, - minH: 0, - minW: 0, - x: -1, - y: -1, - z: 0, - version: 0, - props: { - canvasSize: "auto", - canvasWidth: 100, - layout: "default", - leftPosition: SECTION_POSITION.NONE, - rightPosition: SECTION_POSITION.NONE, - hasFooter: false, - hasHeader: false, - hasLeft: false, - hasRight: false, - leftWidth: 0, - rightWidth: 0, - topHeight: 0, - bottomHeight: 0, - isLeftFixed: true, - isRightFixed: true, - isHeaderFixed: true, - isFooterFixed: true, - showLeftFoldIcon: false, - showRightFoldIcon: false, - leftColumns: DEFAULT_ASIDE_COLUMNS_NUMBER, - rightColumns: DEFAULT_ASIDE_COLUMNS_NUMBER, - headerColumns: DEFAULT_BODY_COLUMNS_NUMBER, - footerColumns: DEFAULT_BODY_COLUMNS_NUMBER, - bodyColumns: DEFAULT_BODY_COLUMNS_NUMBER, - }, - childrenNode: [BASIC_BODY_SECTION_CONFIG, BASIC_MODAL_SECTION_CONFIG], - }, - ], -} diff --git a/apps/builder/src/config/template/CustomLogin/data.json b/apps/builder/src/config/template/CustomLogin/data.json deleted file mode 100644 index 2ba6a83c92..0000000000 --- a/apps/builder/src/config/template/CustomLogin/data.json +++ /dev/null @@ -1,1491 +0,0 @@ -{ - "appInfo": { - "appId": "ILAex4p1C7FD", - "uid": "35e107b4-c067-46a8-86a6-cb849d8dc56d", - "teamID": "ILAfx4p1C7en", - "appName": "Custom login for your app", - "releaseVersion": 15, - "mainlineVersion": 16, - "deployed": true, - "config": { - "public": true, - "waterMark": true, - "description": "Finished and to be released" - }, - "updatedBy": "ILAfx4p1C7dT", - "updatedAt": "2023-07-31T10:50:16.636335Z", - "appActivity": { - "modifier": "Aruseito", - "modifiedAt": "2023-07-31T10:50:16.636335Z" - }, - "editedBy": [ - { - "userID": "ILAfx4p1C7dT", - "nickname": "Aruseito", - "email": "weichen@illasoft.com", - "avatar": "https://illa-cloud-storage.illacloud.com/user-8b6e4b15-2756-452b-bd36-e72b2ed0eda8/avatar/484b0dbc-d919-48e9-ad0e-d33776be935b.jpeg", - "editedAt": "2023-07-31T10:50:16.625558918Z" - }, - { - "userID": "ILAfx4p1C7eb", - "nickname": "Mikiko", - "email": "liuwenzhuo@illasoft.com", - "avatar": "https://illa-cloud-storage.illacloud.com/user-3649ab59-2fa6-48a4-8ff4-5fd1aaf0e1fc/avatar/f54f4d86-7952-4a9b-b3f1-1024b4118667.jpeg", - "editedAt": "2023-07-31T10:44:39.377461365Z" - }, - { - "userID": "ILAfx4p1C7d2", - "nickname": "karminski-ace", - "email": "code.karminski@outlook.com", - "avatar": "https://illa-cloud-storage.illacloud.com/user-5d92707a-496b-4d17-8bf8-ec7de4eaf9e0/avatar/758aff9c-b8f6-4435-87aa-53b0a1363c10.png", - "editedAt": "2023-07-28T09:49:21.515670746Z" - } - ] - }, - "actions": [ - { - "actionID": "ILAcx4p1C7YG", - "uid": "ecd61c34-86ad-4337-b481-adb7e78da07d", - "teamID": "ILAfx4p1C7en", - "resourceID": "ILAex4p1C7Qj", - "displayName": "login_api", - "actionType": "restapi", - "content": { - "$dynamicAttrPaths": [ - "successEvent[0].globalStateValue", - "successEvent[0].enabled", - "successEvent[1].enabled", - "successEvent[1].description", - "successEvent[2].enabled", - "successEvent[3].enabled" - ], - "body": { - "content": "{{JSON.stringify(form1.formData)}}", - "type": "json" - }, - "bodyType": "raw", - "cookies": [ - { - "key": "", - "value": "" - } - ], - "headers": [ - { - "key": "", - "value": "" - } - ], - "method": "POST", - "successEvent": [ - { - "actionType": "setGlobalState", - "enabled": "{{login_api.data.token!=undefined\u0026\u0026login_api.data.token!=\"\"}}", - "eventType": "success", - "globalStateMethod": "setValue", - "globalStateValue": "{{login_api.data.token}}", - "id": "events-e84989ca-4a4d-47ba-91e7-92e7cb758277", - "stateDisplayName": "token" - }, - { - "actionType": "showNotification", - "description": "{{\"current user: \"+login_api.data.firstName+\" \"+login_api.data.lastName}}", - "enabled": "{{login_api.data.token!=undefined\u0026\u0026login_api.data.token!=\"\"}}", - "eventType": "success", - "id": "events-5ce27c9f-6fed-4eb8-9fb9-96279228baa7", - "title": "Successfully login" - }, - { - "actionType": "setRouter", - "enabled": "{{login_api.data.token!=undefined\u0026\u0026login_api.data.token!=\"\"}}", - "eventType": "success", - "id": "events-07782107-f555-45ac-878b-4438af3be8a5", - "pagePath": "homepage", - "viewPath": "View1" - }, - { - "actionType": "showNotification", - "description": "Please try again", - "enabled": "{{login_api.data.token==undefined||login_api.data.token==\"\"}}", - "eventType": "success", - "id": "option-fb9c82f1-7372-40f6-991a-553a125b0b5e", - "title": "Login failed" - } - ], - "url": "auth/login", - "urlParams": [ - { - "key": "", - "value": "" - } - ] - }, - "transformer": { - "enable": false, - "rawData": "" - }, - "triggerMode": "manually", - "config": { - "public": true, - "advancedConfig": { - "runtime": "none", - "pages": [], - "delayWhenLoaded": "", - "displayLoadingPage": false, - "isPeriodically": false, - "periodInterval": "" - } - }, - "createdAt": "2023-07-19T10:25:38.730333Z", - "createdBy": "ILAfx4p1C7eb", - "updatedAt": "2023-07-31T10:44:32.898559Z", - "updatedBy": "ILAfx4p1C7eb" - }, - { - "actionID": "ILAcx4p1C7YC", - "uid": "b38282f0-e971-480f-9a2c-e44ba5ce666c", - "teamID": "ILAfx4p1C7en", - "resourceID": "ILAex4p1C7Qj", - "displayName": "check_token_expired", - "actionType": "restapi", - "content": { - "$dynamicAttrPaths": ["successEvent[0].enabled"], - "body": null, - "bodyType": "none", - "cookies": [ - { - "key": "", - "value": "" - } - ], - "headers": [ - { - "key": "Authorization", - "value": "Bearer {{globalData.token}}" - } - ], - "method": "GET", - "successEvent": [ - { - "actionType": "setRouter", - "enabled": "{{check_token_expired.data!=\"not found!\"}}", - "eventType": "success", - "id": "events-262d08ea-fb16-4e5e-a894-5b417a973510", - "pagePath": "login", - "viewPath": "View 1" - } - ], - "url": "auth/RESOURCE", - "urlParams": [ - { - "key": "", - "value": "" - } - ] - }, - "transformer": { - "enable": false, - "rawData": "" - }, - "triggerMode": "manually", - "config": { - "public": true, - "advancedConfig": { - "runtime": "pageLoading", - "pages": ["homepage"], - "delayWhenLoaded": "", - "displayLoadingPage": true, - "isPeriodically": true, - "periodInterval": "{{1800}}" - } - }, - "createdAt": "2023-07-19T10:52:06.407781Z", - "createdBy": "ILAfx4p1C7eb", - "updatedAt": "2023-07-31T10:44:32.922911Z", - "updatedBy": "ILAfx4p1C7eb" - } - ], - "components": { - "version": 0, - "displayName": "root", - "parentNode": "", - "showName": "root", - "childrenNode": [ - { - "version": 0, - "displayName": "login", - "parentNode": "root", - "showName": "page", - "childrenNode": [ - { - "version": 0, - "displayName": "bodySection1", - "parentNode": "login", - "showName": "bodySection", - "childrenNode": [ - { - "version": 0, - "displayName": "bodySection1-bodySectionContainer1", - "parentNode": "bodySection1", - "showName": "bodySection1-bodySectionContainer1", - "childrenNode": [ - { - "version": 0, - "displayName": "form1", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "form", - "childrenNode": [ - { - "version": 0, - "displayName": "canvas1", - "parentNode": "form1", - "showName": "canvas", - "childrenNode": [ - { - "version": 0, - "displayName": "text1", - "parentNode": "canvas1", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 11, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 0, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "# Login", - "verticalAlign": "center" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "canvas2", - "parentNode": "form1", - "showName": "canvas", - "childrenNode": [ - { - "version": 0, - "displayName": "input1", - "parentNode": "canvas2", - "showName": "input", - "childrenNode": null, - "type": "INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 8, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 3, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "showVisibleButton" - ], - "colorScheme": "blackAlpha", - "formDataKey": "username", - "hidden": false, - "label": "Username", - "labelAlign": "left", - "labelPosition": "top", - "labelWidth": "{{33}}", - "placeholder": "kminchelle", - "showVisibleButton": "{{true}}", - "type": "input", - "value": "kminchelle" - } - }, - { - "version": 0, - "displayName": "input2", - "parentNode": "canvas2", - "showName": "input", - "childrenNode": null, - "type": "INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 8, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 12, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "showVisibleButton" - ], - "colorScheme": "blackAlpha", - "formDataKey": "password", - "hidden": false, - "label": "Password", - "labelAlign": "left", - "labelPosition": "top", - "labelWidth": "{{33}}", - "placeholder": "0lelplR", - "showVisibleButton": "{{true}}", - "type": "password", - "value": "0lelplR" - } - }, - { - "version": 0, - "displayName": "text2", - "parentNode": "canvas2", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 21, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "#787e85b9", - "disableMarkdown": false, - "dynamicHeight": "fixed", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "ALL", - "value": "You can test it with the user info in https://dummyjson.com/users", - "verticalAlign": "center" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "canvas3", - "parentNode": "form1", - "showName": "canvas", - "childrenNode": [ - { - "version": 0, - "displayName": "button1", - "parentNode": "canvas3", - "showName": "button", - "childrenNode": null, - "type": "BUTTON_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 2, - "z": 0, - "props": { - "$dynamicAttrPaths": ["loading", "disabled"], - "colorScheme": "blackAlpha", - "disabled": "{{input1.value==\"\"|| input2.value==\"\"}}", - "events": [ - { - "actionType": "datasource", - "eventType": "click", - "id": "events-8c49b157-16ec-45e7-9277-1326de6ac94f", - "queryID": "login_api" - } - ], - "hidden": false, - "loading": "{{login_api.isRunning}}", - "text": "Login", - "variant": "fill" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "FORM_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 54, - "w": 20, - "minH": 3, - "minW": 1, - "x": 6, - "y": 19, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "backgroundColor": "#ffffffff", - "borderColor": "#ffffffff", - "borderWidth": "4px", - "footerHeight": 10, - "headerHeight": 14, - "radius": "4px", - "resetAfterSuccessful": true, - "shadow": "small", - "showFooter": true, - "showHeader": true, - "validateInputsOnSubmit": true - } - }, - { - "version": 0, - "displayName": "divider1", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "divider", - "childrenNode": null, - "type": "DIVIDER_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 77, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "fs": "14px", - "hidden": false - } - }, - { - "version": 0, - "displayName": "text4", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 82, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "## Intro\nWe need to do the following steps to make sure the a user must login to visit your homepage or other pages\n1. Successfully login\n2. Use the token to set the global data and redirect to homepage\n3. trigger token_check action to check whether the token is available \n3.1 if available, enter the homepage \n3.2 if not available, redirect to login page\n4. Set the check_token action to run periodically to check whether the token is still available. \n\n## How to\n### Method 1: Trigger script to finish it (check this demo: https://builder.illacloud.com/illacloud_demo/deploy/app/ILAex4p1C7Eh)\n### Method 2: Trigger other event handlers without Script\n\n#### Step 1\nSet the front-end and config the login action", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "image1", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "image", - "childrenNode": null, - "type": "IMAGE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 77, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 137, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "hidden": false, - "imageSrc": "https://cloud-api.illacloud.com/drive/f/66faa9b6-f144-49df-92b4-822b86eba497", - "objectFit": "scale-down", - "radius": "0px" - } - }, - { - "version": 0, - "displayName": "text5", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 214, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "#### Step 2\nAdd a globalData named `token` to store the token. ", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "image2", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "image", - "childrenNode": null, - "type": "IMAGE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 56, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 225, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "hidden": false, - "imageSrc": "https://cloud-api.illacloud.com/drive/f/4fac3aff-1e17-422e-af90-f8947b9ab673", - "objectFit": "scale-down", - "radius": "0px" - } - }, - { - "version": 0, - "displayName": "text6", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 281, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "#### Step 3\nAdd an event handler to the login button to trigger the login_api action", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "text7", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 22, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 366, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "#### Step 4\nAdd event handlers to the login_api action to handle the following actions when successfully runs(in this case, we use {\\{login_api.data.token!=undefined\u0026\u0026login_api.data.token!=\"\"}} to check whether the login is successful) \n1. use the token in the response data to set global data \n2. use the first name and last name in the response data to set the notification \n3. set router which means change the page to redirect to the homepage ", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "text8", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 17, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 597, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "#### Step 5\nAdd an event handler to the login_api action to set when failed to login, (in this case, we use {\\{login_api.data.token==undefined||login_api.data.token==\"\"}} to check whether it is failed) \n1. show a notification", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "text9", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 11, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 687, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "#### Step 6\nAdd a check_token_expired action to check whether the token is available", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "text10", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 11, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 760, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "#### Step 7\nAdd an event handler to check_token_expired action to redirect to login page when the token is unavailable(in this case, when check_token_expired.data!=\"not found!\", it is unavailable) ", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "text11", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 11, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 833, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "#### Step 8\nSet the action to run when the homepage loading which is used to avoid visiting homepage without login. ", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "text12", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 11, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 910, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "#### Step 9\nSet the action to run periodically. When you set a expired time(or some expired logic ) to the token and want the user log out when the token state changed, you can use this feature to check the token state periodically. ", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "image3", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "image", - "childrenNode": null, - "type": "IMAGE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 66, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 921, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "hidden": false, - "imageSrc": "https://cloud-api.illacloud.com/drive/f/3c51d04a-4494-4b2e-9215-36f846b4d857", - "objectFit": "scale-down", - "radius": "0px" - } - }, - { - "version": 0, - "displayName": "image4", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "image", - "childrenNode": null, - "type": "IMAGE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 66, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 844, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "hidden": false, - "imageSrc": "https://cloud-api.illacloud.com/drive/f/bb4cac92-8b1f-46f6-bc4b-a57c155e64f1", - "objectFit": "scale-down", - "radius": "0px" - } - }, - { - "version": 0, - "displayName": "image5", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "image", - "childrenNode": null, - "type": "IMAGE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 74, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 292, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "hidden": false, - "imageSrc": "https://cloud-api.illacloud.com/drive/f/eb49752e-288a-4fe2-8252-adf401c8319a", - "objectFit": "scale-down", - "radius": "0px" - } - }, - { - "version": 0, - "displayName": "image6", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "image", - "childrenNode": null, - "type": "IMAGE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 79, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 388, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "hidden": false, - "imageSrc": "https://cloud-api.illacloud.com/drive/f/7d0cd257-24d3-4f20-8d20-17620e66e3d3", - "objectFit": "scale-down", - "radius": "0px" - } - }, - { - "version": 0, - "displayName": "image7", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "image", - "childrenNode": null, - "type": "IMAGE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 73, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 614, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "hidden": false, - "imageSrc": "https://cloud-api.illacloud.com/drive/f/5b371922-94b4-4385-9b33-2b2bc1467c19", - "objectFit": "scale-down", - "radius": "0px" - } - }, - { - "version": 0, - "displayName": "image8", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "image", - "childrenNode": null, - "type": "IMAGE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 62, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 698, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "hidden": false, - "imageSrc": "https://cloud-api.illacloud.com/drive/f/9a0ecb28-4b67-47b4-b1f4-1903782de864", - "objectFit": "scale-down", - "radius": "0px" - } - }, - { - "version": 0, - "displayName": "image9", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "image", - "childrenNode": null, - "type": "IMAGE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 51, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 546, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "hidden": false, - "imageSrc": "https://cloud-api.illacloud.com/drive/f/bf0c576d-df47-4778-ba6f-65653fe44b2c", - "objectFit": "scale-down", - "radius": "0px" - } - }, - { - "version": 0, - "displayName": "image10", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "image", - "childrenNode": null, - "type": "IMAGE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 79, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 467, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "hidden": false, - "imageSrc": "https://cloud-api.illacloud.com/drive/f/38a89498-db32-4edf-8875-4ee3a894b3a9", - "objectFit": "scale-down", - "radius": "0px" - } - }, - { - "version": 0, - "displayName": "image11", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "image", - "childrenNode": null, - "type": "IMAGE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 62, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 771, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "hidden": false, - "imageSrc": "https://cloud-api.illacloud.com/drive/f/6acb8ecb-3807-43bb-b6e6-b80f6e064ca0", - "objectFit": "scale-down", - "radius": "0px" - } - } - ], - "type": "CONTAINER_NODE", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "SECTION_NODE", - "containerType": "EDITOR_LAYOUT_SQUARE", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": { - "currentViewIndex": 0, - "defaultViewKey": "View 1", - "sectionViewConfigs": [ - { - "id": "843eed40-d387-418c-bae1-28fbefc9eb23", - "key": "View 1", - "path": "View 1", - "viewDisplayName": "bodySection1-bodySectionContainer1" - } - ], - "viewSortedKey": ["bodySection1-bodySectionContainer1"] - } - }, - { - "version": 0, - "displayName": "modalSection1", - "parentNode": "login", - "showName": "modalSection", - "childrenNode": null, - "type": "MODAL_SECTION_NODE", - "containerType": "EDITOR_LAYOUT_SQUARE", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "PAGE_NODE", - "containerType": "EDITOR_PAGE_SQUARE", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": { - "bodyColumns": 32, - "bottomHeight": 0, - "canvasSize": "auto", - "canvasWidth": 100, - "footerColumns": 32, - "hasFooter": false, - "hasHeader": false, - "hasLeft": false, - "hasRight": false, - "headerColumns": 32, - "isFooterFixed": true, - "isHeaderFixed": true, - "isLeftFixed": true, - "isRightFixed": true, - "layout": "default", - "leftColumns": 8, - "leftPosition": "NONE", - "leftWidth": 0, - "rightColumns": 8, - "rightPosition": "NONE", - "rightWidth": 0, - "showLeftFoldIcon": false, - "showRightFoldIcon": false, - "topHeight": 0 - } - }, - { - "version": 0, - "displayName": "homepage", - "parentNode": "root", - "showName": "page", - "childrenNode": [ - { - "version": 0, - "displayName": "bodySection2", - "parentNode": "homepage", - "showName": "bodySection", - "childrenNode": [ - { - "version": 0, - "displayName": "bodySection2-bodySectionContainer1", - "parentNode": "bodySection2", - "showName": "bodySectionContainer", - "childrenNode": [ - { - "version": 0, - "displayName": "container1", - "parentNode": "bodySection2-bodySectionContainer1", - "showName": "container", - "childrenNode": [ - { - "version": 0, - "displayName": "canvas4", - "parentNode": "container1", - "showName": "canvas", - "childrenNode": [ - { - "version": 0, - "displayName": "editable_text1", - "parentNode": "canvas4", - "showName": "editable_text", - "childrenNode": null, - "type": "EDITABLE_TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 5, - "z": 0, - "props": { - "$dynamicAttrPaths": ["labelWidth", "value"], - "colorScheme": "blue", - "hidden": false, - "label": "username", - "labelAlign": "left", - "labelPosition": "left", - "labelWidth": "{{33}}", - "value": "{{login_api.data.username}}" - } - }, - { - "version": 0, - "displayName": "editable_text2", - "parentNode": "canvas4", - "showName": "editable_text", - "childrenNode": null, - "type": "EDITABLE_TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 10, - "z": 0, - "props": { - "$dynamicAttrPaths": ["labelWidth", "value"], - "colorScheme": "blue", - "hidden": false, - "label": "email", - "labelAlign": "left", - "labelPosition": "left", - "labelWidth": "{{33}}", - "value": "{{login_api.data.email}}" - } - }, - { - "version": 0, - "displayName": "editable_text3", - "parentNode": "canvas4", - "showName": "editable_text", - "childrenNode": null, - "type": "EDITABLE_TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 15, - "z": 0, - "props": { - "$dynamicAttrPaths": ["labelWidth", "value"], - "colorScheme": "blue", - "hidden": false, - "label": "firstName", - "labelAlign": "left", - "labelPosition": "left", - "labelWidth": "{{33}}", - "value": "{{login_api.data.firstName}}" - } - }, - { - "version": 0, - "displayName": "editable_text4", - "parentNode": "canvas4", - "showName": "editable_text", - "childrenNode": null, - "type": "EDITABLE_TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 20, - "z": 0, - "props": { - "$dynamicAttrPaths": ["labelWidth", "value"], - "colorScheme": "blue", - "hidden": false, - "label": "lastName", - "labelAlign": "left", - "labelPosition": "left", - "labelWidth": "{{33}}", - "value": "{{login_api.data.lastName}}" - } - }, - { - "version": 0, - "displayName": "text3", - "parentNode": "canvas4", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 0, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "fixed", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "ALL", - "value": "## Current User", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "button2", - "parentNode": "canvas4", - "showName": "button", - "childrenNode": null, - "type": "BUTTON_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 25, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "orange", - "events": [ - { - "actionType": "setGlobalState", - "eventType": "click", - "globalStateMethod": "setValue", - "globalStateValue": "", - "id": "events-89d772cd-dc89-4aaa-9b5c-1b7e30356816", - "stateDisplayName": "token" - }, - { - "actionType": "setRouter", - "eventType": "click", - "id": "events-836af620-ad79-4b88-aa62-cfb359161745", - "pagePath": "login", - "viewPath": "View 1" - } - ], - "hidden": false, - "text": "Log out", - "variant": "fill" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "canvas5", - "parentNode": "container1", - "showName": "canvas", - "childrenNode": null, - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "canvas6", - "parentNode": "container1", - "showName": "canvas", - "childrenNode": null, - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "CONTAINER_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 33, - "w": 14, - "minH": 3, - "minW": 1, - "x": 9, - "y": 23, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "backgroundColor": "#ffffffff", - "borderColor": "#ffffffff", - "borderWidth": "1px", - "currentIndex": 0, - "currentKey": "View 1", - "dynamicHeight": "auto", - "radius": "4px", - "resizeDirection": "HORIZONTAL", - "shadow": "small", - "viewList": [ - { - "id": "e4bae78f-27a5-4250-9085-a1d2a552b255", - "key": "View 1", - "label": "View 1" - }, - { - "id": "afa06c9e-c01e-4e0a-a981-fa75b4243ecb", - "key": "View 2", - "label": "View 2" - }, - { - "id": "e1ea714f-ffa4-45fb-a9e5-d410065999a9", - "key": "View 3", - "label": "View 3" - } - ] - } - } - ], - "type": "CONTAINER_NODE", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "SECTION_NODE", - "containerType": "EDITOR_LAYOUT_SQUARE", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": { - "currentViewIndex": 0, - "defaultViewKey": "View 1", - "sectionViewConfigs": [ - { - "id": "f27bfbed-a36e-44ea-bc0d-5bf01b980a4c", - "key": "View 1", - "path": "View1", - "viewDisplayName": "bodySection2-bodySectionContainer1" - } - ], - "viewSortedKey": ["bodySection2-bodySectionContainer1"] - } - }, - { - "version": 0, - "displayName": "modalSection2", - "parentNode": "homepage", - "showName": "modalSection", - "childrenNode": null, - "type": "MODAL_SECTION_NODE", - "containerType": "EDITOR_LAYOUT_SQUARE", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "PAGE_NODE", - "containerType": "EDITOR_PAGE_SQUARE", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": { - "bodyColumns": 32, - "bottomHeight": 0, - "canvasSize": "auto", - "canvasWidth": 100, - "footerColumns": 32, - "hasFooter": false, - "hasHeader": false, - "hasLeft": false, - "hasRight": false, - "headerColumns": 32, - "isFooterFixed": true, - "isHeaderFixed": true, - "isLeftFixed": true, - "isRightFixed": true, - "layout": "default", - "leftColumns": 8, - "leftPosition": "NONE", - "leftWidth": 0, - "rightColumns": 8, - "rightPosition": "NONE", - "rightWidth": 0, - "showLeftFoldIcon": false, - "showRightFoldIcon": false, - "topHeight": 0 - } - } - ], - "type": "DOT_PANEL", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "currentPageIndex": 0, - "globalData": { - "token": "" - }, - "homepageDisplayName": "login", - "pageSortedKey": ["login", "homepage"] - } - }, - "dependenciesState": {}, - "dragShadowState": {}, - "dottedLineSquareState": {}, - "displayNameState": [] -} diff --git a/apps/builder/src/config/template/CustomLogin/index.ts b/apps/builder/src/config/template/CustomLogin/index.ts deleted file mode 100644 index 0480998117..0000000000 --- a/apps/builder/src/config/template/CustomLogin/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -import data from "@/config/template/CustomLogin/data.json" -import { CurrentAppResp } from "@/page/App/resp/currentAppResp" - -export const CUSTOM_LOGIN_DATA = data as unknown as CurrentAppResp diff --git a/apps/builder/src/config/template/CustomLoginWithSC/data.json b/apps/builder/src/config/template/CustomLoginWithSC/data.json deleted file mode 100644 index 487d1ce5ed..0000000000 --- a/apps/builder/src/config/template/CustomLoginWithSC/data.json +++ /dev/null @@ -1,2024 +0,0 @@ -{ - "appInfo": { - "appId": "ILAex4p1C7Eh", - "uid": "2901b50f-2c71-4621-b834-718b1cf10d20", - "teamID": "ILAfx4p1C7en", - "appName": "Custom login with Script", - "releaseVersion": 20, - "mainlineVersion": 21, - "deployed": true, - "config": { - "public": true, - "waterMark": true, - "description": "Finished and to be released" - }, - "updatedBy": "ILAfx4p1C7dT", - "updatedAt": "2023-07-31T10:52:19.264519Z", - "appActivity": { - "modifier": "Aruseito", - "modifiedAt": "2023-07-31T10:52:19.264519Z" - }, - "editedBy": [ - { - "userID": "ILAfx4p1C7dT", - "nickname": "Aruseito", - "email": "weichen@illasoft.com", - "avatar": "https://illa-cloud-storage.illacloud.com/user-8b6e4b15-2756-452b-bd36-e72b2ed0eda8/avatar/484b0dbc-d919-48e9-ad0e-d33776be935b.jpeg", - "editedAt": "2023-07-31T10:52:18.834817043Z" - }, - { - "userID": "ILAfx4p1C7eb", - "nickname": "Mikiko", - "email": "liuwenzhuo@illasoft.com", - "avatar": "https://illa-cloud-storage.illacloud.com/user-3649ab59-2fa6-48a4-8ff4-5fd1aaf0e1fc/avatar/f54f4d86-7952-4a9b-b3f1-1024b4118667.jpeg", - "editedAt": "2023-07-31T10:43:58.746147696Z" - } - ] - }, - "actions": [ - { - "actionID": "ILAcx4p1C7Tw", - "uid": "a578625d-6d27-44a9-880c-fc07c785e1f8", - "teamID": "ILAfx4p1C7en", - "resourceID": "ILAex4p1C7Qj", - "displayName": "admin_access_data", - "actionType": "restapi", - "content": { - "body": null, - "bodyType": "none", - "cookies": [ - { - "key": "", - "value": "" - } - ], - "headers": [ - { - "key": "", - "value": "" - } - ], - "method": "GET", - "url": "products/", - "urlParams": [ - { - "key": "", - "value": "" - } - ] - }, - "transformer": { - "enable": false, - "rawData": "" - }, - "triggerMode": "automate", - "config": { - "public": true, - "advancedConfig": { - "runtime": "appLoaded", - "pages": [], - "delayWhenLoaded": "", - "displayLoadingPage": false, - "isPeriodically": false, - "periodInterval": "" - } - }, - "createdAt": "2023-07-21T06:37:24.236889Z", - "createdBy": "ILAfx4p1C7eb", - "updatedAt": "2023-07-31T10:39:46.710253Z", - "updatedBy": "ILAfx4p1C7eb" - }, - { - "actionID": "ILAcx4p1C7Wj", - "uid": "0f5304f5-0162-435a-aa68-0fd37dc1983f", - "teamID": "ILAfx4p1C7en", - "resourceID": "ILAex4p1C7Qj", - "displayName": "check_token_expired", - "actionType": "restapi", - "content": { - "$dynamicAttrPaths": ["successEvent[0].script"], - "body": null, - "bodyType": "none", - "cookies": [ - { - "key": "", - "value": "" - } - ], - "headers": [ - { - "key": "Authorization", - "value": "Bearer {{globalData.token}}" - } - ], - "method": "GET", - "successEvent": [ - { - "actionType": "script", - "eventType": "success", - "id": "events-c8083787-27d7-4541-bad1-0778ef1aef06", - "script": "{{(async function (){const token_request = check_token_expired.data;\nif(token_request!=\"not found!\") {\n utils.setRouter({pagePath:\"login\",viewPath:\"View 1\"});\nutils.setGlobalDataValue({key:\"token\",value:\"\"});\n}})()}}" - } - ], - "url": "auth/RESOURCE", - "urlParams": [ - { - "key": "", - "value": "" - } - ] - }, - "transformer": { - "enable": false, - "rawData": "" - }, - "triggerMode": "manually", - "config": { - "public": true, - "advancedConfig": { - "runtime": "pageLoading", - "pages": ["homepage"], - "delayWhenLoaded": "", - "displayLoadingPage": true, - "isPeriodically": true, - "periodInterval": "{{1800}}" - } - }, - "createdAt": "2023-07-20T13:30:46.418195Z", - "createdBy": "ILAfx4p1C7eb", - "updatedAt": "2023-07-31T10:39:46.779242Z", - "updatedBy": "ILAfx4p1C7eb" - }, - { - "actionID": "ILAcx4p1C7Wi", - "uid": "dc27c524-e3c7-416b-8070-28648a0acb90", - "teamID": "ILAfx4p1C7en", - "resourceID": "ILAex4p1C7Qj", - "displayName": "login_api", - "actionType": "restapi", - "content": { - "$dynamicAttrPaths": [ - "successEvent[0].globalStateValue", - "successEvent[0].enabled", - "successEvent[1].enabled", - "successEvent[1].description", - "successEvent[2].enabled", - "successEvent[3].enabled" - ], - "body": { - "content": "{{JSON.stringify(form1.formData)}}", - "type": "json" - }, - "bodyType": "raw", - "cookies": [ - { - "key": "", - "value": "" - } - ], - "headers": [ - { - "key": "", - "value": "" - } - ], - "method": "POST", - "successEvent": [ - { - "actionType": "setGlobalState", - "enabled": "{{login_api.data.token!=undefined}}", - "eventType": "success", - "globalStateMethod": "setValue", - "globalStateValue": "{{login_api.data.token}}", - "id": "events-e84989ca-4a4d-47ba-91e7-92e7cb758277", - "stateDisplayName": "token" - }, - { - "actionType": "showNotification", - "description": "{{\"current user: \"+login_api.data.firstName+\" \"+login_api.data.lastName}}", - "enabled": "{{login_api.data.token!=undefined}}", - "eventType": "success", - "id": "events-5ce27c9f-6fed-4eb8-9fb9-96279228baa7", - "title": "Successfully login" - }, - { - "actionType": "setRouter", - "enabled": "{{login_api.data.token!=undefined}}", - "eventType": "success", - "id": "events-07782107-f555-45ac-878b-4438af3be8a5", - "pagePath": "homepage", - "viewPath": "View1" - }, - { - "actionType": "showNotification", - "description": "Please try again", - "enabled": "{{login_api.data.token==undefined}}", - "eventType": "success", - "id": "option-fb9c82f1-7372-40f6-991a-553a125b0b5e", - "title": "Login failed" - } - ], - "url": "auth/login", - "urlParams": [ - { - "key": "", - "value": "" - } - ] - }, - "transformer": { - "enable": false, - "rawData": "" - }, - "triggerMode": "manually", - "config": { - "public": true, - "advancedConfig": { - "runtime": "none", - "pages": [], - "delayWhenLoaded": "", - "displayLoadingPage": false, - "isPeriodically": false, - "periodInterval": "" - } - }, - "createdAt": "2023-07-20T13:30:46.418197Z", - "createdBy": "ILAfx4p1C7eb", - "updatedAt": "2023-07-31T10:39:46.990007Z", - "updatedBy": "ILAfx4p1C7eb" - } - ], - "components": { - "version": 0, - "displayName": "root", - "parentNode": "", - "showName": "root", - "childrenNode": [ - { - "version": 0, - "displayName": "login", - "parentNode": "root", - "showName": "page", - "childrenNode": [ - { - "version": 0, - "displayName": "bodySection1", - "parentNode": "login", - "showName": "bodySection", - "childrenNode": [ - { - "version": 0, - "displayName": "bodySection1-bodySectionContainer1", - "parentNode": "bodySection1", - "showName": "bodySection1-bodySectionContainer1", - "childrenNode": [ - { - "version": 0, - "displayName": "form1", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "form", - "childrenNode": [ - { - "version": 0, - "displayName": "canvas1", - "parentNode": "form1", - "showName": "canvas", - "childrenNode": [ - { - "version": 0, - "displayName": "text1", - "parentNode": "canvas1", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 11, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 0, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "# Login", - "verticalAlign": "center" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "canvas2", - "parentNode": "form1", - "showName": "canvas", - "childrenNode": [ - { - "version": 0, - "displayName": "input1", - "parentNode": "canvas2", - "showName": "input", - "childrenNode": null, - "type": "INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 8, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 3, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "showVisibleButton" - ], - "colorScheme": "blackAlpha", - "formDataKey": "username", - "hidden": false, - "label": "Username", - "labelAlign": "left", - "labelPosition": "top", - "labelWidth": "{{33}}", - "placeholder": "kminchelle", - "showVisibleButton": "{{true}}", - "type": "input", - "value": "kminchelle" - } - }, - { - "version": 0, - "displayName": "input2", - "parentNode": "canvas2", - "showName": "input", - "childrenNode": null, - "type": "INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 8, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 12, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "showVisibleButton" - ], - "colorScheme": "blackAlpha", - "formDataKey": "password", - "hidden": false, - "label": "Password", - "labelAlign": "left", - "labelPosition": "top", - "labelWidth": "{{33}}", - "placeholder": "0lelplR", - "showVisibleButton": "{{true}}", - "type": "password", - "value": "0lelplR" - } - }, - { - "version": 0, - "displayName": "text2", - "parentNode": "canvas2", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 21, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "#787e85b9", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "You can test it with the user info in https://dummyjson.com/users \nUserinfo used to test the non-admin user: username:dpettegre6 password: YVmhktgYVS", - "verticalAlign": "center" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "canvas3", - "parentNode": "form1", - "showName": "canvas", - "childrenNode": [ - { - "version": 0, - "displayName": "button1", - "parentNode": "canvas3", - "showName": "button", - "childrenNode": null, - "type": "BUTTON_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 2, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "loading", - "disabled", - "events[0].script" - ], - "colorScheme": "blackAlpha", - "disabled": "{{input1.value==\"\"|| input2.value==\"\"}}", - "events": [ - { - "actionType": "script", - "eventType": "click", - "id": "events-8c49b157-16ec-45e7-9277-1326de6ac94f", - "script": "{{(async function (){const login_token = await login_api.trigger();\nif(login_token.token!=\"\"\u0026\u0026login_token.token!=undefined){\nutils.setGlobalDataValue({key:\"token\",value:login_token.token});\n utils.showNotification({type:\"info\",title:\"Successfully login\",description:\"current user: \"+login_token.firstName+\" \"+login_token.lastName,duration:4500});\nutils.setRouter({pagePath:\"homepage\",viewPath:\"View 1\"});\n}else{\nutils.showNotification({type:\"info\",title:\"Failed to login\",description:\"\",duration:4500});\n};})()}}" - } - ], - "hidden": false, - "loading": "{{login_api.isRunning}}", - "text": "Login", - "variant": "fill" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "FORM_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 57, - "w": 18, - "minH": 3, - "minW": 1, - "x": 7, - "y": 19, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "backgroundColor": "#ffffffff", - "borderColor": "#ffffffff", - "borderWidth": "4px", - "footerHeight": 10, - "headerHeight": 14, - "radius": "4px", - "resetAfterSuccessful": true, - "shadow": "small", - "showFooter": true, - "showHeader": true, - "validateInputsOnSubmit": true - } - }, - { - "version": 0, - "displayName": "text4", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 50, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 85, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "## Intro\nWe need to do the following steps to make sure the a user must login to visit your homepage or other pages\n1. Successfully login\n2. Use the token to set the global data and redirect to homepage\n3. trigger token_check action to check whether the token is available \n3.1 if available, enter the homepage \n3.2 if not available, redirect to login page\n4. Set the check_token action to run periodically to check whether the token is still available. \n\n## How to\n### Method 1: Trigger script to finish it\n#### Step 1\nSet the front-end and config the login action", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "text5", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 11, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 188, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "#### Step 2\nAdd a globalData named `token` to store the token. ", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "text6", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 31, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 252, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "#### Step 3\nAdd a event handler to the login button to check if successfully login(in this case we use whether the token in the action response is not null to check it). \n\nIf successfully login, 1. use the token to set globalData 2. show a notification 3. setRouter(which means change page) to homepage View 1\n\n```\nconst login_token = await login_api.trigger();\nif(login_token.token!=\"\"\u0026\u0026login_token.token!=undefined){\nutils.setGlobalDataValue({key:\"token\",value:login_token.token});\n utils.showNotification({type:\"info\",title:\"Successfully login\",description:\"current user: \"+login_token.firstName+\" \"+login_token.lastName,duration:4500});\nutils.setRouter({pagePath:\"homepage\",viewPath:\"View 1\"});\n}else{\nutils.showNotification({type:\"info\",title:\"Failed to login\",description:\"\",duration:4500});\n};\n```\n", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "text7", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 11, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 336, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "#### Step 4\nAdd a check_token_expired action to check whether the token is available", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "text8", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 23, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 400, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "#### Step 5\nAdd a event handler to the action to Run Script: if the token is not available, redirect to login page.(In this case, when the response is \"not found!\", token is available)\n\n ```\n const token_request = check_token_expired.data;\nif(token_request!=\"not found!\") {\n utils.setRouter({pagePath:\"login\",viewPath:\"View 1\"});\nutils.setGlobalDataValue({key:\"token\",value:\"\"});\n}\n```", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "text9", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 11, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 476, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "#### Step 6\nSet the action to run when the homepage loading which is used to avoid visiting homepage without login. ", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "text10", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 11, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 540, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "#### Step 7\nSet the action to run periodically. When you set a expired time(or some expired logic ) to the token and want the user log out when the token state changed, you can use this feature to check the token state periodically. ", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "text11", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 13, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 604, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "### Method 2: Not Run Script (Check this demo: https://builder.illacloud.com/illacloud_demo/deploy/app/ILAex4p1C7FD)\nWe have added all the functions in Method 1 to the event handler and you can add multiple event handlers to one component or one action. \n And you can use change Run Script to others like trigger action, set router, set global data... to set the event handlers when the login button is clicked or the action runs successful. ", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "image1", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "image", - "childrenNode": null, - "type": "IMAGE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 53, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 135, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "hidden": false, - "imageSrc": "https://cloud-api.illacloud.com/drive/f/66faa9b6-f144-49df-92b4-822b86eba497", - "objectFit": "scale-down", - "radius": "0px" - } - }, - { - "version": 0, - "displayName": "image2", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "image", - "childrenNode": null, - "type": "IMAGE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 53, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 199, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "hidden": false, - "imageSrc": "https://cloud-api.illacloud.com/drive/f/4fac3aff-1e17-422e-af90-f8947b9ab673", - "objectFit": "scale-down", - "radius": "0px" - } - }, - { - "version": 0, - "displayName": "image3", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "image", - "childrenNode": null, - "type": "IMAGE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 53, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 283, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "hidden": false, - "imageSrc": "https://cloud-api.illacloud.com/drive/f/051daf87-3857-4476-853c-25b3b42c4cdc", - "objectFit": "scale-down", - "radius": "0px" - } - }, - { - "version": 0, - "displayName": "image4", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "image", - "childrenNode": null, - "type": "IMAGE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 53, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 423, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "hidden": false, - "imageSrc": "https://cloud-api.illacloud.com/drive/f/b70f1ebb-2847-4aa8-a6d5-5e187ebd368d", - "objectFit": "scale-down", - "radius": "0px" - } - }, - { - "version": 0, - "displayName": "image5", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "image", - "childrenNode": null, - "type": "IMAGE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 53, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 487, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "hidden": false, - "imageSrc": "https://cloud-api.illacloud.com/drive/f/bb4cac92-8b1f-46f6-bc4b-a57c155e64f1", - "objectFit": "scale-down", - "radius": "0px" - } - }, - { - "version": 0, - "displayName": "image6", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "image", - "childrenNode": null, - "type": "IMAGE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 53, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 551, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "hidden": false, - "imageSrc": "https://cloud-api.illacloud.com/drive/f/3c51d04a-4494-4b2e-9215-36f846b4d857", - "objectFit": "scale-down", - "radius": "0px" - } - }, - { - "version": 0, - "displayName": "image7", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "image", - "childrenNode": null, - "type": "IMAGE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 53, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 347, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "hidden": false, - "imageSrc": "https://cloud-api.illacloud.com/drive/f/a994f380-069e-4fa3-a0df-dc32778da7f6", - "objectFit": "scale-down", - "radius": "0px" - } - }, - { - "version": 0, - "displayName": "image8", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "image", - "childrenNode": null, - "type": "IMAGE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 49, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 617, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "hidden": false, - "imageSrc": "https://cloud-api.illacloud.com/drive/f/1bbb39e3-e37f-47b4-8851-d7657bf030f1", - "objectFit": "scale-down", - "radius": "0px" - } - }, - { - "version": 0, - "displayName": "divider1", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "divider", - "childrenNode": null, - "type": "DIVIDER_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 28, - "minH": 3, - "minW": 1, - "x": 2, - "y": 80, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "fs": "14px", - "hidden": false - } - } - ], - "type": "CONTAINER_NODE", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "SECTION_NODE", - "containerType": "EDITOR_LAYOUT_SQUARE", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": { - "currentViewIndex": 0, - "defaultViewKey": "View 1", - "sectionViewConfigs": [ - { - "id": "843eed40-d387-418c-bae1-28fbefc9eb23", - "key": "View 1", - "path": "View 1", - "viewDisplayName": "bodySection1-bodySectionContainer1" - } - ], - "viewSortedKey": ["bodySection1-bodySectionContainer1"] - } - }, - { - "version": 0, - "displayName": "modalSection1", - "parentNode": "login", - "showName": "modalSection", - "childrenNode": null, - "type": "MODAL_SECTION_NODE", - "containerType": "EDITOR_LAYOUT_SQUARE", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "PAGE_NODE", - "containerType": "EDITOR_PAGE_SQUARE", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": { - "bodyColumns": 32, - "bottomHeight": 0, - "canvasSize": "auto", - "canvasWidth": 100, - "footerColumns": 32, - "hasFooter": false, - "hasHeader": false, - "hasLeft": false, - "hasRight": false, - "headerColumns": 32, - "isFooterFixed": true, - "isHeaderFixed": true, - "isLeftFixed": true, - "isRightFixed": true, - "layout": "default", - "leftColumns": 8, - "leftPosition": "NONE", - "leftWidth": 0, - "rightColumns": 8, - "rightPosition": "NONE", - "rightWidth": 0, - "showLeftFoldIcon": false, - "showRightFoldIcon": false, - "topHeight": 0 - } - }, - { - "version": 0, - "displayName": "homepage", - "parentNode": "root", - "showName": "page", - "childrenNode": [ - { - "version": 0, - "displayName": "bodySection2", - "parentNode": "homepage", - "showName": "bodySection", - "childrenNode": [ - { - "version": 0, - "displayName": "bodySection2-bodySectionContainer1", - "parentNode": "bodySection2", - "showName": "bodySectionContainer", - "childrenNode": [ - { - "version": 0, - "displayName": "container1", - "parentNode": "bodySection2-bodySectionContainer1", - "showName": "container", - "childrenNode": [ - { - "version": 0, - "displayName": "canvas4", - "parentNode": "container1", - "showName": "canvas", - "childrenNode": [ - { - "version": 0, - "displayName": "editable_text1", - "parentNode": "canvas4", - "showName": "editable_text", - "childrenNode": null, - "type": "EDITABLE_TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 5, - "z": 0, - "props": { - "$dynamicAttrPaths": ["labelWidth", "value"], - "colorScheme": "blue", - "hidden": false, - "label": "username", - "labelAlign": "left", - "labelPosition": "left", - "labelWidth": "{{33}}", - "value": "{{login_api.data.username}}" - } - }, - { - "version": 0, - "displayName": "editable_text2", - "parentNode": "canvas4", - "showName": "editable_text", - "childrenNode": null, - "type": "EDITABLE_TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 10, - "z": 0, - "props": { - "$dynamicAttrPaths": ["labelWidth", "value"], - "colorScheme": "blue", - "hidden": false, - "label": "email", - "labelAlign": "left", - "labelPosition": "left", - "labelWidth": "{{33}}", - "value": "{{login_api.data.email}}" - } - }, - { - "version": 0, - "displayName": "editable_text3", - "parentNode": "canvas4", - "showName": "editable_text", - "childrenNode": null, - "type": "EDITABLE_TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 15, - "z": 0, - "props": { - "$dynamicAttrPaths": ["labelWidth", "value"], - "colorScheme": "blue", - "hidden": false, - "label": "firstName", - "labelAlign": "left", - "labelPosition": "left", - "labelWidth": "{{33}}", - "value": "{{login_api.data.firstName}}" - } - }, - { - "version": 0, - "displayName": "editable_text4", - "parentNode": "canvas4", - "showName": "editable_text", - "childrenNode": null, - "type": "EDITABLE_TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 20, - "z": 0, - "props": { - "$dynamicAttrPaths": ["labelWidth", "value"], - "colorScheme": "blue", - "hidden": false, - "label": "lastName", - "labelAlign": "left", - "labelPosition": "left", - "labelWidth": "{{33}}", - "value": "{{login_api.data.lastName}}" - } - }, - { - "version": 0, - "displayName": "text3", - "parentNode": "canvas4", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 0, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "fixed", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "ALL", - "value": "## Current User", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "button2", - "parentNode": "canvas4", - "showName": "button", - "childrenNode": null, - "type": "BUTTON_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 25, - "z": 0, - "props": { - "$dynamicAttrPaths": ["events[0].script"], - "colorScheme": "orange", - "events": [ - { - "actionType": "script", - "eventType": "click", - "id": "events-89d772cd-dc89-4aaa-9b5c-1b7e30356816", - "script": "{{(async function (){utils.setGlobalDataValue({key:\"token\", value: \"\"});\n\nutils.setRouter({pagePath:\"login\",viewPath:\"View 1\"});\n})()}}" - } - ], - "hidden": false, - "text": "Log out", - "variant": "fill" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "canvas5", - "parentNode": "container1", - "showName": "canvas", - "childrenNode": null, - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "canvas6", - "parentNode": "container1", - "showName": "canvas", - "childrenNode": null, - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "CONTAINER_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 33, - "w": 22, - "minH": 3, - "minW": 1, - "x": 5, - "y": 23, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "backgroundColor": "#ffffffff", - "borderColor": "#ffffffff", - "borderWidth": "1px", - "currentIndex": 0, - "currentKey": "View 1", - "dynamicHeight": "auto", - "radius": "4px", - "resizeDirection": "HORIZONTAL", - "shadow": "small", - "viewList": [ - { - "id": "e4bae78f-27a5-4250-9085-a1d2a552b255", - "key": "View 1", - "label": "View 1" - }, - { - "id": "afa06c9e-c01e-4e0a-a981-fa75b4243ecb", - "key": "View 2", - "label": "View 2" - }, - { - "id": "e1ea714f-ffa4-45fb-a9e5-d410065999a9", - "key": "View 3", - "label": "View 3" - } - ] - } - }, - { - "version": 0, - "displayName": "image9", - "parentNode": "bodySection2-bodySectionContainer1", - "showName": "image", - "childrenNode": null, - "type": "IMAGE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 56, - "w": 22, - "minH": 3, - "minW": 1, - "x": 5, - "y": 61, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "hidden": false, - "imageSrc": "https://cloud-api.illacloud.com/drive/f/66e8892c-e005-4ae3-86e8-6ec18bdc794c", - "objectFit": "scale-down", - "radius": "0px" - } - } - ], - "type": "CONTAINER_NODE", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "bodySection2-bodySectionContainer2", - "parentNode": "bodySection2", - "showName": "bodySectionContainer", - "childrenNode": [ - { - "version": 0, - "displayName": "table1", - "parentNode": "bodySection2-bodySectionContainer2", - "showName": "table", - "childrenNode": null, - "type": "TABLE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 78, - "w": 24, - "minH": 3, - "minW": 1, - "x": 4, - "y": 33, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "dataSourceJS", - "pageSize", - "dataSource" - ], - "columnMapper": { - "brand": { - "accessorKey": "brand", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 7, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "brand", - "id": "brand", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "category": { - "accessorKey": "category", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 8, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "category", - "id": "category", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "description": { - "accessorKey": "description", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 2, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "description", - "id": "description", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "discountPercentage": { - "accessorKey": "discountPercentage", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 4, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "discountPercentage", - "id": "discountPercentage", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "id": { - "accessorKey": "id", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 0, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "id", - "id": "id", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "images": { - "accessorKey": "images", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 10, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "images", - "id": "images", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "price": { - "accessorKey": "price", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 3, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "price", - "id": "price", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "rating": { - "accessorKey": "rating", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 5, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "rating", - "id": "rating", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "stock": { - "accessorKey": "stock", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 6, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "stock", - "id": "stock", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "thumbnail": { - "accessorKey": "thumbnail", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 9, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "thumbnail", - "id": "thumbnail", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "title": { - "accessorKey": "title", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 1, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "title", - "id": "title", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - } - }, - "columnNameIndices": { - "0": "id", - "1": "title", - "10": "images", - "2": "description", - "3": "price", - "4": "discountPercentage", - "5": "rating", - "6": "stock", - "7": "brand", - "8": "category", - "9": "thumbnail" - }, - "columnVisibility": { - "brand": true, - "category": true, - "description": true, - "discountPercentage": true, - "id": true, - "images": true, - "price": true, - "rating": true, - "stock": true, - "thumbnail": true, - "title": true - }, - "columns": [ - { - "accessorKey": "id", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 0, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "id", - "id": "id", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "title", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 1, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "title", - "id": "title", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "description", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 2, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "description", - "id": "description", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "price", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 3, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "price", - "id": "price", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "discountPercentage", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 4, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "discountPercentage", - "id": "discountPercentage", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "rating", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 5, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "rating", - "id": "rating", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "stock", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 6, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "stock", - "id": "stock", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "brand", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 7, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "brand", - "id": "brand", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "category", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 8, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "category", - "id": "category", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "thumbnail", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 9, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "thumbnail", - "id": "thumbnail", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "images", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 10, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "images", - "id": "images", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - } - ], - "customColumnIndices": {}, - "dataSource": "{{check_token_expired.data}}", - "dataSourceJS": "{{admin_access_data.data.products}}", - "dataSourceMode": "dynamic", - "defaultSortKey": "default", - "defaultSortOrder": "ascend", - "download": false, - "emptyState": "No rows found", - "filter": false, - "overFlow": "pagination", - "pageIndex": 0, - "pageSize": "{{10}}", - "paginationOffset": 0, - "renamedColumnNames": {}, - "rowEvents": {}, - "rowSelection": { - "5": true - }, - "selectedRow": [ - { - "brand": "Apple", - "category": "laptops", - "description": "MacBook Pro 2021 with mini-LED display may launch between September, November", - "discountPercentage": 11.02, - "id": 6, - "images": [ - "https://i.dummyjson.com/data/products/6/1.png", - "https://i.dummyjson.com/data/products/6/2.jpg", - "https://i.dummyjson.com/data/products/6/3.png", - "https://i.dummyjson.com/data/products/6/4.jpg" - ], - "price": 1749, - "rating": 4.57, - "stock": 83, - "thumbnail": "https://i.dummyjson.com/data/products/6/thumbnail.png", - "title": "MacBook Pro" - } - ], - "selectedRowIndex": [5] - } - }, - { - "version": 0, - "displayName": "text12", - "parentNode": "bodySection2-bodySectionContainer2", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 9, - "w": 24, - "minH": 3, - "minW": 1, - "x": 4, - "y": 21, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "## Hi admin user", - "verticalAlign": "center" - } - } - ], - "type": "CONTAINER_NODE", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "SECTION_NODE", - "containerType": "EDITOR_LAYOUT_SQUARE", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": { - "currentViewIndex": 0, - "defaultViewKey": "View 2", - "sectionViewConfigs": [ - { - "id": "f27bfbed-a36e-44ea-bc0d-5bf01b980a4c", - "key": "View 1", - "path": "View 1", - "viewDisplayName": "bodySection2-bodySectionContainer1" - }, - { - "id": "f27a9601-c48d-4af8-80ca-1457cb87bc0b", - "key": "View 2", - "path": "View 2", - "viewDisplayName": "bodySection2-bodySectionContainer2" - } - ], - "viewSortedKey": [ - "bodySection2-bodySectionContainer1", - "bodySection2-bodySectionContainer2" - ] - } - }, - { - "version": 0, - "displayName": "modalSection2", - "parentNode": "homepage", - "showName": "modalSection", - "childrenNode": null, - "type": "MODAL_SECTION_NODE", - "containerType": "EDITOR_LAYOUT_SQUARE", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "leftSection1", - "parentNode": "homepage", - "showName": "leftSection", - "childrenNode": [ - { - "version": 0, - "displayName": "leftSection1-leftSectionContainer1", - "parentNode": "leftSection1", - "showName": "leftSectionContainer", - "childrenNode": [ - { - "version": 1, - "displayName": "menu1", - "parentNode": "leftSection1-leftSectionContainer1", - "showName": "menu", - "childrenNode": null, - "type": "MENU_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 28, - "w": 8, - "minH": 3, - "minW": 1, - "x": 0, - "y": 7, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "dataSources", - "selectedValues", - "items[0].hidden" - ], - "bgColor": "transparent", - "colorScheme": "blue", - "dataSources": "{{[]}}", - "horizontalAlign": "flex-start", - "hoverColorScheme": "grayBlue", - "items": [ - { - "events": [ - { - "actionType": "setRouter", - "eventType": "clickMenuItem", - "id": "events-f04a0657-e25a-4557-8ef4-965093f88a42", - "pagePath": "homepage", - "viewPath": "View 2" - } - ], - "hidden": "{{login_api.data.username!=\"kminchelle\"}}", - "hiddenDynamic": true, - "id": "9b4515a9-e6c8-4a2a-bc95-918914d60bc0", - "label": "Admin", - "value": "menu0" - }, - { - "events": [ - { - "actionType": "setRouter", - "eventType": "clickMenuItem", - "id": "events-8ba73776-2fcc-4c62-a4e8-86655e17b056", - "pagePath": "homepage", - "viewPath": "View 1" - } - ], - "hiddenDynamic": false, - "id": "c6cdc555-beda-4d46-83b7-bc89cc05eb22", - "label": "Profile setting", - "value": "Profile setting" - } - ], - "menuLogo": "https://cloud-api.illacloud.com/drive/f/0f3ef4da-7741-45f8-b054-57458c244214", - "menuTitle": "ILLA", - "mode": "vertical", - "optionConfigureMode": "static", - "selectedValues": "{{[]}}" - } - } - ], - "type": "CONTAINER_NODE", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "SECTION_NODE", - "containerType": "EDITOR_LAYOUT_SQUARE", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": { - "currentViewIndex": 0, - "defaultViewKey": "View 1", - "sectionViewConfigs": [ - { - "id": "b031c952-bb7b-4d86-b83a-a5d0d9d00227", - "key": "View 1", - "path": "View1", - "viewDisplayName": "leftSection1-leftSectionContainer1" - } - ], - "viewSortedKey": ["leftSection1-leftSectionContainer1"] - } - } - ], - "type": "PAGE_NODE", - "containerType": "EDITOR_PAGE_SQUARE", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": { - "bodyColumns": 32, - "bottomHeight": 0, - "canvasSize": "auto", - "canvasWidth": 100, - "footerColumns": 32, - "hasFooter": false, - "hasHeader": false, - "hasLeft": true, - "hasRight": false, - "headerColumns": 32, - "isFooterFixed": true, - "isHeaderFixed": true, - "isLeftFixed": true, - "isRightFixed": true, - "layout": "Custom", - "leftColumns": 8, - "leftPosition": "FULL", - "leftWidth": 15.918367346938775, - "rightColumns": 8, - "rightPosition": "NONE", - "rightWidth": 0, - "showLeftFoldIcon": false, - "showRightFoldIcon": false, - "topHeight": 0 - } - } - ], - "type": "DOT_PANEL", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "currentPageIndex": 0, - "globalData": { - "token": "" - }, - "homepageDisplayName": "login", - "pageSortedKey": ["login", "homepage"] - } - }, - "dependenciesState": {}, - "dragShadowState": {}, - "dottedLineSquareState": {}, - "displayNameState": [] -} diff --git a/apps/builder/src/config/template/CustomLoginWithSC/index.ts b/apps/builder/src/config/template/CustomLoginWithSC/index.ts deleted file mode 100644 index b8af230eaf..0000000000 --- a/apps/builder/src/config/template/CustomLoginWithSC/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -import data from "@/config/template/CustomLoginWithSC/data.json" -import { CurrentAppResp } from "@/page/App/resp/currentAppResp" - -export const CUSTOM_LOGIN_WITH_SC_DATA = data as unknown as CurrentAppResp diff --git a/apps/builder/src/config/template/Form/data.json b/apps/builder/src/config/template/Form/data.json deleted file mode 100644 index 5a5b232416..0000000000 --- a/apps/builder/src/config/template/Form/data.json +++ /dev/null @@ -1,721 +0,0 @@ -{ - "appInfo": { - "appId": "ILAex4p1C7QV", - "uid": "00000000-0000-0000-0000-000000000000", - "teamID": "ILAfx4p1C7d0", - "appName": "New survey", - "releaseVersion": 1, - "mainlineVersion": 1, - "config": { - "public": true, - "waterMark": true - }, - "updatedBy": "ILAfx4p1C7eb", - "updatedAt": "2023-06-30T09:46:45.444336Z", - "appActivity": { - "modifier": "Mikiko", - "modifiedAt": "2023-06-30T09:46:45.444336Z" - } - }, - "actions": [ - { - "actionID": "ILAfx4p1C7UZ", - "uid": "fcbe638c-dffc-4d04-9e4b-baaeb68c3c64", - "teamID": "ILAfx4p1C7en", - "resourceID": "ILAfx4p1C7cn", - "displayName": "postgresql1", - "actionType": "postgresql", - "content": { - "$dynamicAttrPaths": [], - "failedEvent": [ - { - "actionType": "showNotification", - "eventType": "fail", - "id": "events-31e82bf7-fe1e-415b-a169-c27adfd49532", - "title": "Failed to submit" - } - ], - "mode": "sql", - "query": "insert into survey values('{{radioGroup1.value}}','{{input1.value}}','{{select2.value}}','{{radioGroup2.value}}','{{textarea1.value}}','1')", - "successEvent": [ - { - "actionType": "showNotification", - "eventType": "success", - "id": "events-4cf8b8da-d005-48b6-a04e-eb8992fa0ff0", - "title": "Submitted successfully" - } - ] - }, - "transformer": { - "enable": false, - "rawData": "" - }, - "triggerMode": "manually", - "config": { - "public": true, - "advancedConfig": { - "runtime": "none", - "pages": [], - "delayWhenLoaded": "", - "displayLoadingPage": false, - "isPeriodically": false, - "periodInterval": "" - } - }, - "createdAt": "2023-06-30T09:45:59.51915Z", - "createdBy": "ILAfx4p1C7eb", - "updatedAt": "2023-06-30T09:45:59.519151Z", - "updatedBy": "ILAfx4p1C7eb" - } - ], - "components": { - "displayName": "root", - "parentNode": "", - "showName": "root", - - "childrenNode": [ - { - "displayName": "page1", - "parentNode": "root", - "showName": "page", - - "childrenNode": [ - { - "displayName": "bodySection1", - "parentNode": "page1", - "showName": "bodySection", - - "childrenNode": [ - { - "displayName": "bodySection1-bodySectionContainer1", - "parentNode": "bodySection1", - "showName": "bodySection1-bodySectionContainer1", - - "childrenNode": [ - { - "displayName": "form1", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "form", - - "childrenNode": [ - { - "displayName": "canvas1", - "parentNode": "form1", - "showName": "canvas", - - "childrenNode": [ - { - "displayName": "container1", - "parentNode": "canvas1", - "showName": "container", - - "childrenNode": [ - { - "displayName": "canvas4", - "parentNode": "container1", - "showName": "canvas", - - "childrenNode": [ - { - "displayName": "text2", - "parentNode": "canvas4", - "showName": "text", - - "childrenNode": [], - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 12, - "w": 31, - "minH": 3, - "minW": 2, - - "x": 1, - "y": 3, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "#ffffffff", - "disableMarkdown": true, - "dynamicHeight": "fixed", - "fs": "24px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "ALL", - "value": "Product pricing survey", - "verticalAlign": "center" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - - "h": 0, - "w": 0, - "minH": 3, - "minW": 2, - - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "displayName": "canvas5", - "parentNode": "container1", - "showName": "canvas", - - "childrenNode": [], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - - "h": 0, - "w": 0, - "minH": 3, - "minW": 2, - - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "displayName": "canvas6", - "parentNode": "container1", - "showName": "canvas", - - "childrenNode": [], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - - "h": 0, - "w": 0, - "minH": 3, - "minW": 2, - - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "CONTAINER_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 20, - "w": 32, - "minH": 3, - "minW": 2, - - "x": 0, - "y": 0, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "backgroundColor": "purple", - "borderColor": "#ffffffff", - "borderWidth": "1px", - "currentIndex": 0, - "currentKey": "View 1", - "dynamicHeight": "fixed", - "radius": "4px", - "resizeDirection": "ALL", - "shadow": "small", - "viewList": [ - { - "id": "63d8d169-3ada-4d38-ac4a-45a9d5a4b0c7", - "key": "View 1", - "label": "View 1" - }, - { - "id": "e02bc607-35d1-4718-b05e-f7380ecad7e8", - "key": "View 2", - "label": "View 2" - }, - { - "id": "432ca28f-3d95-4f79-9dbb-e60a1889f1ca", - "key": "View 3", - "label": "View 3" - } - ] - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - - "h": 0, - "w": 0, - "minH": 3, - "minW": 2, - - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "displayName": "canvas2", - "parentNode": "form1", - "showName": "canvas", - - "childrenNode": [ - { - "displayName": "radioGroup1", - "parentNode": "canvas2", - "showName": "radioGroup", - - "childrenNode": [], - "type": "RADIO_GROUP_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 7, - "w": 31, - "minH": 3, - "minW": 2, - - "x": 1, - "y": 3, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "dataSources", - "formDataKey" - ], - "colorScheme": "purple", - "dataSources": "{{[]}}", - "direction": "horizontal", - "formDataKey": "{{radioGroup1.displayName}}", - "hidden": false, - "hideValidationMessage": true, - "label": "Are you familiar with the product?", - "labelAlign": "left", - "labelPosition": "top", - "labelWidth": "{{33}}", - "manualOptions": [ - { - "id": "option-f75d5ec7-2ec8-4cb9-b31a-ee951c180ce7", - "label": "Yes, I own it.", - "value": "Yes, I own it." - }, - { - "id": "option-faa6d61b-997a-4fad-9eca-89a42e63869a", - "label": "Yes, I have seen it.", - "value": "Yes, I have seen it." - }, - { - "id": "option-6c059d02-f28f-49a4-8a8d-ef4ae7d6d812", - "label": "Yes, I have heard of it.", - "value": "Yes, I have heard of it." - }, - { - "id": "option-2bc0a6b1-7279-4a10-b4dd-299e4ac7ba03", - "label": "Maybe, I'm not sure.", - "value": "Maybe, Im not sure." - }, - { - "id": "option-5794dc9a-d4db-4453-8d09-06e91cbeef82", - "label": "Not at all.", - "value": "Not at all." - } - ], - "optionConfigureMode": "static", - "required": true, - "value": "Option 1" - } - }, - { - "displayName": "select2", - "parentNode": "canvas2", - "showName": "select", - - "childrenNode": [], - "type": "SELECT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 8, - "w": 31, - "minH": 3, - "minW": 2, - - "x": 1, - "y": 22, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "dataSources", - "formDataKey" - ], - "colorScheme": "purple", - "dataSources": "{{[]}}", - "formDataKey": "{{select2.displayName}}", - "hidden": false, - "hideValidationMessage": true, - "label": "How often do you purchase electronics?", - "labelAlign": "left", - "labelPosition": "top", - "labelWidth": "{{33}}", - "manualOptions": [ - { - "id": "option-dd409771-335e-4ce3-b970-f7b9958e328d", - "label": "Option 1", - "value": "Option 1" - }, - { - "id": "option-d5ec133a-903d-49d8-ac51-5314dd4074e4", - "label": "Option 2", - "value": "Option 2" - }, - { - "id": "option-7531bcb9-d32e-44fa-a6e0-a327684d687b", - "label": "Option 3", - "value": "Option 3" - } - ], - "optionConfigureMode": "static", - "placeholder": "Select an option", - "required": true - } - }, - { - "displayName": "radioGroup2", - "parentNode": "canvas2", - "showName": "radioGroup", - - "childrenNode": [], - "type": "RADIO_GROUP_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 4, - "w": 31, - "minH": 3, - "minW": 2, - - "x": 1, - "y": 32, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "dataSources", - "formDataKey" - ], - "colorScheme": "purple", - "dataSources": "{{[]}}", - "direction": "horizontal", - "formDataKey": "{{radioGroup2.displayName}}", - "hidden": false, - "hideValidationMessage": true, - "label": "How interested are you in owning the product?", - "labelAlign": "left", - "labelPosition": "top", - "labelWidth": "{{33}}", - "manualOptions": [ - { - "id": "option-f75d5ec7-2ec8-4cb9-b31a-ee951c180ce7", - "label": "Very interested", - "value": "Very interested" - }, - { - "id": "option-faa6d61b-997a-4fad-9eca-89a42e63869a", - "label": "Somewhat interested", - "value": "Somewhat interested" - }, - { - "id": "option-6c059d02-f28f-49a4-8a8d-ef4ae7d6d812", - "label": "No interested", - "value": "No interested" - } - ], - "optionConfigureMode": "static", - "required": true, - "value": "Option 1" - } - }, - { - "displayName": "textarea1", - "parentNode": "canvas2", - "showName": "textarea", - - "childrenNode": [], - "type": "TEXTAREA_INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 13, - "w": 31, - "minH": 3, - "minW": 2, - - "x": 1, - "y": 41, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "formDataKey" - ], - "colorScheme": "purple", - "dynamicHeight": "fixed", - "formDataKey": "{{textarea1.displayName}}", - "hidden": "", - "hiddenDynamic": true, - "hideValidationMessage": true, - "label": "Other features you would like to see", - "labelAlign": "left", - "labelPosition": "top", - "labelWidth": "{{33}}", - "placeholder": "enter sth", - "resizeDirection": "ALL", - "value": "" - } - }, - { - "displayName": "input1", - "parentNode": "canvas2", - "showName": "input", - - "childrenNode": [], - "type": "INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 8, - "w": 31, - "minH": 3, - "minW": 2, - - "x": 1, - "y": 12, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "formDataKey" - ], - "colorScheme": "purple", - "formDataKey": "{{input1.displayName}}", - "hidden": false, - "label": "How much would you expect to pay for the product?", - "labelAlign": "left", - "labelPosition": "top", - "labelWidth": "{{33}}", - "placeholder": "input sth", - "value": "" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - - "h": 0, - "w": 0, - "minH": 3, - "minW": 2, - - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "displayName": "canvas3", - "parentNode": "form1", - "showName": "canvas", - - "childrenNode": [ - { - "displayName": "button2", - "parentNode": "canvas3", - "showName": "button", - - "childrenNode": [], - "type": "BUTTON_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 5, - "w": 8, - "minH": 3, - "minW": 2, - - "x": 24, - "y": 0, - "z": 0, - "props": { - "$dynamicAttrPaths": ["loading"], - "colorScheme": "purple", - "events": [ - { - "actionType": "datasource", - "eventType": "click", - "id": "7ca6dceb-e22f-4eb1-8b14-dcb792e0f4d6", - "queryID": "postgresql1" - } - ], - "hidden": false, - "loading": "{{postgresql1.isRunning}}", - "text": "Submit", - "variant": "fill" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - - "h": 0, - "w": 0, - "minH": 3, - "minW": 2, - - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "FORM_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 91, - "w": 32, - "minH": 3, - "minW": 2, - - "x": 0, - "y": 2, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "backgroundColor": "#ffffffff", - "borderColor": "#ffffffff", - "borderWidth": "4px", - "footerHeight": 7, - "headerHeight": 22, - "radius": "4px", - "resetAfterSuccessful": true, - "shadow": "small", - "showFooter": true, - "showHeader": true, - "validateInputsOnSubmit": true - } - } - ], - "type": "CONTAINER_NODE", - "containerType": "EDITOR_DOT_PANEL", - - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "SECTION_NODE", - "containerType": "EDITOR_LAYOUT_SQUARE", - - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - - "x": -1, - "y": -1, - "z": 0, - "props": { - "currentViewIndex": 0, - "defaultViewKey": "View 1", - "sectionViewConfigs": [ - { - "id": "b8a15a09-3c37-4319-a3a1-b7c375a8b17a", - "key": "View 1", - "path": "View 1", - "viewDisplayName": "bodySection1-bodySectionContainer1" - } - ], - "viewSortedKey": ["bodySection1-bodySectionContainer1"] - } - }, - { - "displayName": "modalSection1", - "parentNode": "page1", - "showName": "modalSection", - - "childrenNode": [], - "type": "MODAL_SECTION_NODE", - "containerType": "EDITOR_LAYOUT_SQUARE", - - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "PAGE_NODE", - "containerType": "EDITOR_PAGE_SQUARE", - - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - - "x": -1, - "y": -1, - "z": 0, - "props": { - "bodyColumns": 32, - "bottomHeight": 0, - "canvasSize": "fixed", - "canvasWidth": 1000, - "footerColumns": 32, - "hasFooter": false, - "hasHeader": false, - "hasLeft": false, - "hasRight": false, - "headerColumns": 32, - "isFooterFixed": true, - "isHeaderFixed": true, - "isLeftFixed": true, - "isRightFixed": true, - "layout": "default", - "leftColumns": 8, - "leftPosition": "NONE", - "leftWidth": 0, - "rightColumns": 8, - "rightPosition": "NONE", - "rightWidth": 0, - "showLeftFoldIcon": false, - "showRightFoldIcon": false, - "topHeight": 0 - } - } - ], - "type": "DOT_PANEL", - "containerType": "EDITOR_DOT_PANEL", - - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - - "x": -1, - "y": -1, - "z": 0, - "props": { - "currentPageIndex": 0, - "pageSortedKey": ["page1"] - } - }, - "dependenciesState": {}, - "dragShadowState": {}, - "dottedLineSquareState": {}, - "displayNameState": [] -} diff --git a/apps/builder/src/config/template/Form/index.ts b/apps/builder/src/config/template/Form/index.ts deleted file mode 100644 index 0463176666..0000000000 --- a/apps/builder/src/config/template/Form/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -import data from "@/config/template/Form/data.json" -import { CurrentAppResp } from "@/page/App/resp/currentAppResp" - -export const FORM_DATA = data as unknown as CurrentAppResp diff --git a/apps/builder/src/config/template/List/data.json b/apps/builder/src/config/template/List/data.json deleted file mode 100644 index f092081876..0000000000 --- a/apps/builder/src/config/template/List/data.json +++ /dev/null @@ -1,1851 +0,0 @@ -{ - "appInfo": { - "appId": "ILAex4p1C7QU", - "uid": "00000000-0000-0000-0000-000000000000", - "teamID": "ILAfx4p1C7d0", - "appName": "New admin panel", - "releaseVersion": 2, - "mainlineVersion": 2, - "config": { - "public": true, - "waterMark": true - }, - "updatedBy": "ILAfx4p1C7eb", - "updatedAt": "2023-06-30T09:57:16.78257Z", - "appActivity": { - "modifier": "Mikiko", - "modifiedAt": "2023-06-30T09:57:16.78257Z" - } - }, - "actions": [ - { - "actionID": "ILAfx4p1C7VO", - "uid": "a08d22e2-4bf6-4ee0-93a4-96136e613600", - "teamID": "ILAfx4p1C7en", - "resourceID": "ILAfx4p1C7cn", - "displayName": "orders", - "actionType": "postgresql", - "content": { - "mode": "sql", - "query": "select * from orders\n" - }, - "transformer": { - "enable": false, - "rawData": "" - }, - "triggerMode": "automate", - "config": { - "public": true, - "advancedConfig": { - "runtime": "appLoaded", - "pages": [], - "delayWhenLoaded": "", - "displayLoadingPage": false, - "isPeriodically": false, - "periodInterval": "" - } - }, - "createdAt": "2023-06-30T09:47:50.957133Z", - "createdBy": "ILAfx4p1C7eb", - "updatedAt": "2023-06-30T09:56:42.074562Z", - "updatedBy": "ILAfx4p1C7eb" - }, - { - "actionID": "ILAfx4p1C7VN", - "uid": "57618349-00f3-4a23-af9a-05e7453d3309", - "teamID": "ILAfx4p1C7en", - "resourceID": "ILAfx4p1C7cn", - "displayName": "update_user", - "actionType": "postgresql", - "content": { - "$dynamicAttrPaths": [], - "failedEvent": [ - { - "actionType": "showNotification", - "eventType": "fail", - "id": "events-77140c28-e24b-4fbb-b28c-abbb3e3f2139", - "notificationType": "error", - "title": "Failed to updae" - } - ], - "mode": "sql", - "query": "update users set name = '{{input2.value}}', email = '{{input4.value}}' where id = '{{input3.value}}'", - "successEvent": [ - { - "actionType": "datasource", - "eventType": "success", - "id": "events-f405e174-a2fe-4e27-bd31-1acbec92928a", - "queryID": "user_order" - }, - { - "actionType": "showNotification", - "eventType": "success", - "id": "events-05d1ae92-cd1c-4f11-a1ac-1cc631d38dfa", - "title": "Updated successfully" - } - ] - }, - "transformer": { - "enable": false, - "rawData": "" - }, - "triggerMode": "manually", - "config": { - "public": true, - "advancedConfig": { - "runtime": "none", - "pages": [], - "delayWhenLoaded": "", - "displayLoadingPage": false, - "isPeriodically": false, - "periodInterval": "" - } - }, - "createdAt": "2023-06-30T09:47:50.957132Z", - "createdBy": "ILAfx4p1C7eb", - "updatedAt": "2023-06-30T09:47:50.957132Z", - "updatedBy": "ILAfx4p1C7eb" - }, - { - "actionID": "ILAfx4p1C7VM", - "uid": "38056984-d383-4b79-88ba-5ae38535ccc6", - "teamID": "ILAfx4p1C7en", - "resourceID": "ILAfx4p1C7cn", - "displayName": "id", - "actionType": "postgresql", - "content": { - "mode": "sql", - "query": "select id from users" - }, - "transformer": { - "enable": false, - "rawData": "" - }, - "triggerMode": "automate", - "config": { - "public": true, - "advancedConfig": { - "runtime": "appLoaded", - "pages": [], - "delayWhenLoaded": "", - "displayLoadingPage": false, - "isPeriodically": false, - "periodInterval": "" - } - }, - "createdAt": "2023-06-30T09:47:50.957134Z", - "createdBy": "ILAfx4p1C7eb", - "updatedAt": "2023-06-30T09:56:59.23909Z", - "updatedBy": "ILAfx4p1C7eb" - }, - { - "actionID": "ILAfx4p1C7VL", - "uid": "df68185f-ef76-4035-9e8c-cf5660b03d1d", - "teamID": "ILAfx4p1C7en", - "resourceID": "ILAfx4p1C7cn", - "displayName": "user_order", - "actionType": "postgresql", - "content": { - "mode": "sql", - "query": "select * \n from users\njoin orders\non users.id = orders.id\nwhere {{!input1.value}} or lower(users.name) like '%{{input1.value.toLowerCase()}}%'" - }, - "transformer": { - "enable": false, - "rawData": "" - }, - "triggerMode": "automate", - "config": { - "public": true, - "advancedConfig": { - "runtime": "appLoaded", - "pages": [], - "delayWhenLoaded": "", - "displayLoadingPage": false, - "isPeriodically": false, - "periodInterval": "" - } - }, - "createdAt": "2023-06-30T09:47:50.957135Z", - "createdBy": "ILAfx4p1C7eb", - "updatedAt": "2023-06-30T09:57:03.686096Z", - "updatedBy": "ILAfx4p1C7eb" - }, - { - "actionID": "ILAfx4p1C7V0", - "uid": "16a199fa-1d8d-409a-bf75-0f9149003f55", - "teamID": "ILAfx4p1C7en", - "resourceID": "ILAfx4p1C7cn", - "displayName": "delete_user", - "actionType": "postgresql", - "content": { - "$dynamicAttrPaths": [], - "failedEvent": [ - { - "actionType": "showNotification", - "eventType": "fail", - "id": "events-a2ef0578-8d9b-4a5c-b51e-38e3cdaddacc", - "notificationType": "error", - "title": "Failed to update" - } - ], - "mode": "sql", - "query": "DELETE FROM users WHERE id = {{input3.value}};", - "successEvent": [ - { - "actionType": "datasource", - "eventType": "success", - "id": "events-880b77c9-9c86-4fd1-b273-02c155dd7fad", - "queryID": "user_order" - }, - { - "actionType": "showNotification", - "eventType": "success", - "id": "events-869c028b-88ae-400c-a9bb-afe68c443f7c", - "title": "Deleted successfully" - } - ] - }, - "transformer": { - "enable": false, - "rawData": "" - }, - "triggerMode": "manually", - "config": { - "public": true, - "advancedConfig": { - "runtime": "appLoaded", - "pages": [], - "delayWhenLoaded": "", - "displayLoadingPage": false, - "isPeriodically": false, - "periodInterval": "" - } - }, - "createdAt": "2023-06-30T09:47:50.957136Z", - "createdBy": "ILAfx4p1C7eb", - "updatedAt": "2023-06-30T09:57:08.208379Z", - "updatedBy": "ILAfx4p1C7eb" - }, - { - "actionID": "ILAfx4p1C7VZ", - "uid": "b499bc30-3f97-4346-a19c-8487204fb837", - "teamID": "ILAfx4p1C7en", - "resourceID": "ILAfx4p1C7cn", - "displayName": "add_new", - "actionType": "postgresql", - "content": { - "$dynamicAttrPaths": [], - "failedEvent": [ - { - "actionType": "showNotification", - "eventType": "fail", - "id": "events-d6a0d696-e53b-432d-935b-1f64c6344103", - "title": "Failed to add" - } - ], - "mode": "sql", - "query": "Update orders set start_time = '{{date2.value}}', expired_time = '{{date3.value}}', charge = '{{input5.value}}', feature_flag = ARRAY[{{\"'\"+checkboxGroup2.value.join(',').replace(\",\",\"','\")+\"'\"}}] where id = '{{select1.value}}'", - "successEvent": [ - { - "actionType": "showNotification", - "eventType": "success", - "id": "events-0846e855-0972-454d-a31c-cdd84a1995eb", - "title": "Successfully added" - }, - { - "actionType": "datasource", - "eventType": "success", - "id": "events-44dcb72a-22c6-46bf-90ce-5a79e90b292a", - "queryID": "orders" - } - ] - }, - "transformer": { - "enable": false, - "rawData": "" - }, - "triggerMode": "manually", - "config": { - "public": true, - "advancedConfig": { - "runtime": "none", - "pages": [], - "delayWhenLoaded": "", - "displayLoadingPage": false, - "isPeriodically": false, - "periodInterval": "" - } - }, - "createdAt": "2023-06-30T09:47:50.957137Z", - "createdBy": "ILAfx4p1C7eb", - "updatedAt": "2023-06-30T09:57:16.777228Z", - "updatedBy": "ILAfx4p1C7eb" - } - ], - "components": { - "displayName": "root", - "parentNode": "", - "showName": "root", - - "childrenNode": [ - { - "displayName": "page1", - "parentNode": "root", - "showName": "page", - - "childrenNode": [ - { - "displayName": "bodySection1", - "parentNode": "page1", - "showName": "bodySection", - - "childrenNode": [ - { - "displayName": "bodySection1-bodySectionContainer1", - "parentNode": "bodySection1", - "showName": "bodySection1-bodySectionContainer1", - - "childrenNode": [ - { - "displayName": "container1", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "container", - - "childrenNode": [ - { - "displayName": "canvas1", - "parentNode": "container1", - "showName": "canvas", - - "childrenNode": [ - { - "displayName": "container2", - "parentNode": "canvas1", - "showName": "container", - - "childrenNode": [ - { - "displayName": "canvas4", - "parentNode": "container2", - "showName": "canvas", - - "childrenNode": [ - { - "displayName": "input1", - "parentNode": "canvas4", - "showName": "input", - - "childrenNode": [], - "type": "INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 5, - "w": 17, - "minH": 3, - "minW": 2, - - "x": 1, - "y": 1, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "formDataKey" - ], - "colorScheme": "blue", - "formDataKey": "{{input1.displayName}}", - "hidden": false, - "label": "Search by name", - "labelAlign": "left", - "labelPosition": "left", - "labelWidth": "{{20}}", - "placeholder": "input name", - "value": "" - } - }, - { - "displayName": "list1", - "parentNode": "canvas4", - "showName": "list", - - "childrenNode": [ - { - "displayName": "canvas2", - "parentNode": "list1", - "showName": "canvas", - - "childrenNode": [ - { - "displayName": "text1", - "parentNode": "canvas2", - "showName": "text", - - "childrenNode": [], - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 9, - "w": 26, - "minH": 3, - "minW": 2, - - "x": 6, - "y": 1, - "z": 0, - "props": { - "$dynamicAttrPaths": ["value"], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "fixed", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "ALL", - "value": "{{list1.dataSources.map((currentItem) => ('## ' + currentItem.name))}}", - "verticalAlign": "center" - } - }, - { - "displayName": "text3", - "parentNode": "canvas2", - "showName": "text", - - "childrenNode": [], - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 5, - "w": 30, - "minH": 3, - "minW": 2, - - "x": 2, - "y": 12, - "z": 0, - "props": { - "$dynamicAttrPaths": ["value"], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "fixed", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "ALL", - "value": "{{list1.dataSources.map((currentItem) => ('Email: ' + currentItem.email))}}", - "verticalAlign": "center" - } - }, - { - "displayName": "text4", - "parentNode": "canvas2", - "showName": "text", - - "childrenNode": [], - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 5, - "w": 30, - "minH": 3, - "minW": 2, - - "x": 2, - "y": 24, - "z": 0, - "props": { - "$dynamicAttrPaths": ["value"], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "fixed", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "ALL", - "value": "{{list1.dataSources.map((currentItem) => ('Expired time: ' + currentItem.expired_time))}}", - "verticalAlign": "center" - } - }, - { - "displayName": "text2", - "parentNode": "canvas2", - "showName": "text", - - "childrenNode": [], - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 5, - "w": 30, - "minH": 3, - "minW": 2, - - "x": 2, - "y": 18, - "z": 0, - "props": { - "$dynamicAttrPaths": ["value"], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "fixed", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "ALL", - "value": "{{list1.dataSources.map((currentItem) => ('Feature Flags: ' + currentItem.feature_flag))}}", - "verticalAlign": "center" - } - }, - { - "displayName": "image1", - "parentNode": "canvas2", - "showName": "image", - - "childrenNode": [], - "type": "IMAGE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 10, - "w": 4, - "minH": 3, - "minW": 2, - - "x": 2, - "y": 1, - "z": 0, - "props": { - "$dynamicAttrPaths": ["imageSrc"], - "hidden": false, - "imageSrc": "{{list1.dataSources.map((currentItem) => (currentItem.img))}}", - "objectFit": "cover", - "radius": "0px" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - - "h": 0, - "w": 0, - "minH": 3, - "minW": 2, - - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "LIST_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 87, - "w": 17, - "minH": 3, - "minW": 2, - - "x": 1, - "y": 7, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "pageSize", - "dataSources" - ], - "backgroundColor": "#ffffffff", - "dataSources": "{{user_order.data}}", - "dynamicHeight": "fixed", - "itemBackGroundColor": "#f7f7f7ff", - "itemHeight": 248, - "overflowMethod": "SCROLL", - "pageSize": "{{4}}", - "resizeDirection": "ALL" - } - }, - { - "displayName": "container3", - "parentNode": "canvas4", - "showName": "container", - - "childrenNode": [ - { - "displayName": "canvas3", - "parentNode": "container3", - "showName": "canvas", - - "childrenNode": [ - { - "displayName": "input3", - "parentNode": "canvas3", - "showName": "input", - - "childrenNode": [], - "type": "INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 8, - "w": 31, - "minH": 3, - "minW": 2, - - "x": 1, - "y": 13, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "formDataKey", - "disabled", - "value" - ], - "colorScheme": "blue", - "disabled": "{{true}}", - "formDataKey": "{{input2.displayName}}", - "hidden": false, - "label": "ID", - "labelAlign": "left", - "labelPosition": "top", - "labelWidth": "{{33}}", - "placeholder": "", - "value": "{{list1.selectedItem.id}}" - } - }, - { - "displayName": "input2", - "parentNode": "canvas3", - "showName": "input", - - "childrenNode": [], - "type": "INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 8, - "w": 31, - "minH": 3, - "minW": 2, - - "x": 1, - "y": 23, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "formDataKey", - "value" - ], - "colorScheme": "blue", - "formDataKey": "{{input2.displayName}}", - "hidden": false, - "label": "Name", - "labelAlign": "left", - "labelPosition": "top", - "labelWidth": "{{33}}", - "placeholder": "input sth", - "value": "{{list1.selectedItem.name}}" - } - }, - { - "displayName": "input4", - "parentNode": "canvas3", - "showName": "input", - - "childrenNode": [], - "type": "INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 8, - "w": 31, - "minH": 3, - "minW": 2, - - "x": 1, - "y": 33, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "formDataKey", - "value" - ], - "colorScheme": "blue", - "formDataKey": "{{input4.displayName}}", - "hidden": false, - "label": "Email", - "labelAlign": "left", - "labelPosition": "top", - "labelWidth": "{{33}}", - "placeholder": "input sth", - "value": "{{list1.selectedItem.email}}" - } - }, - { - "displayName": "checkboxGroup1", - "parentNode": "canvas3", - "showName": "checkboxGroup", - - "childrenNode": [], - "type": "CHECKBOX_GROUP_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 7, - "w": 31, - "minH": 3, - "minW": 2, - - "x": 1, - "y": 43, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "dataSources", - "formDataKey", - "disabled", - "value" - ], - "colorScheme": "blue", - "dataSources": "{{[]}}", - "direction": "horizontal", - "disabled": "{{true}}", - "formDataKey": "{{checkboxGroup1.displayName}}", - "label": "Feature flags", - "labelAlign": "left", - "labelPosition": "top", - "labelWidth": "{{33}}", - "manualOptions": [ - { - "id": "option-16bd4d02-854a-48b1-a2f9-ed9901df680b", - "label": "feature1", - "value": "Feature1" - }, - { - "id": "option-bc4edcb8-305d-456f-94cf-242eb6c5ed82", - "label": "feature2", - "value": "Feature2" - }, - { - "id": "option-303ce567-5fc0-45f6-a4d7-21fdd658b30e", - "label": "feature3", - "value": "Feature3" - } - ], - "optionConfigureMode": "static", - "value": "{{list1.selectedItem.feature_flag}}" - } - }, - { - "displayName": "button1", - "parentNode": "canvas3", - "showName": "button", - - "childrenNode": [], - "type": "BUTTON_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 5, - "w": 16, - "minH": 3, - "minW": 2, - - "x": 1, - "y": 62, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "red", - "events": [ - { - "actionType": "datasource", - "eventType": "click", - "id": "events-e420497f-d55b-41d7-83f7-8c97f303389d", - "queryID": "delete_user" - } - ], - "hidden": false, - "text": "Delete", - "variant": "fill" - } - }, - { - "displayName": "button2", - "parentNode": "canvas3", - "showName": "button", - - "childrenNode": [], - "type": "BUTTON_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 5, - "w": 15, - "minH": 3, - "minW": 2, - - "x": 17, - "y": 62, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "blue", - "events": [ - { - "actionType": "datasource", - "eventType": "click", - "id": "events-858b7211-76a9-46eb-9dd8-e61105f04d78", - "queryID": "update_user" - } - ], - "hidden": false, - "text": "Update", - "variant": "fill" - } - }, - { - "displayName": "date1", - "parentNode": "canvas3", - "showName": "date", - - "childrenNode": [], - "type": "DATE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 8, - "w": 31, - "minH": 3, - "minW": 2, - - "x": 1, - "y": 52, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "formDataKey", - "disabled", - "value", - "dateFormat" - ], - "colorScheme": "blue", - "dateFormat": "{{ YYYY-MM-DD }}", - "disabled": "{{true}}", - "formDataKey": "{{date1.displayName}}", - "hidden": false, - "label": "Expired time", - "labelAlign": "left", - "labelPosition": "top", - "labelWidth": "{{33}}", - "value": "{{list1.selectedItem.expired_time}}" - } - }, - { - "displayName": "container4", - "parentNode": "canvas3", - "showName": "container", - - "childrenNode": [ - { - "displayName": "canvas6", - "parentNode": "container4", - "showName": "canvas", - - "childrenNode": [ - { - "displayName": "text6", - "parentNode": "canvas6", - "showName": "text", - - "childrenNode": [], - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 5, - "w": 32, - "minH": 3, - "minW": 2, - - "x": 0, - "y": 2, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "#000000ff", - "disableMarkdown": false, - "dynamicHeight": "fixed", - "fs": "16px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "ALL", - "value": "✍️ Detail and Update", - "verticalAlign": "center" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - - "h": 0, - "w": 0, - "minH": 3, - "minW": 2, - - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "displayName": "canvas9", - "parentNode": "container4", - "showName": "canvas", - - "childrenNode": [], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - - "h": 0, - "w": 0, - "minH": 3, - "minW": 2, - - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "displayName": "canvas10", - "parentNode": "container4", - "showName": "canvas", - - "childrenNode": [], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - - "h": 0, - "w": 0, - "minH": 3, - "minW": 2, - - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "CONTAINER_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 10, - "w": 32, - "minH": 3, - "minW": 2, - - "x": 0, - "y": 1, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "backgroundColor": "#f7f7f7ff", - "borderColor": "#ffffffff", - "borderWidth": "0px", - "currentIndex": 0, - "currentKey": "View 1", - "dynamicHeight": "fixed", - "radius": "4px", - "resizeDirection": "ALL", - "shadow": "small", - "viewList": [ - { - "id": "bb9caaff-403f-439f-97e5-9ebba193e59e", - "key": "View 1", - "label": "View 1" - }, - { - "id": "7a0db908-2396-4542-ad72-a036b446ac93", - "key": "View 2", - "label": "View 2" - }, - { - "id": "ccd98289-629a-4030-9e7e-288c7dea9fb1", - "key": "View 3", - "label": "View 3" - } - ] - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - - "h": 0, - "w": 0, - "minH": 3, - "minW": 2, - - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "displayName": "canvas7", - "parentNode": "container3", - "showName": "canvas", - - "childrenNode": [], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - - "h": 0, - "w": 0, - "minH": 3, - "minW": 2, - - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "displayName": "canvas8", - "parentNode": "container3", - "showName": "canvas", - - "childrenNode": [], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - - "h": 0, - "w": 0, - "minH": 3, - "minW": 2, - - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "CONTAINER_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 71, - "w": 14, - "minH": 3, - "minW": 2, - - "x": 18, - "y": 7, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "backgroundColor": "#ffffffff", - "borderColor": "#ffffffff", - "borderWidth": "1px", - "currentIndex": 0, - "currentKey": "View 1", - "dynamicHeight": "fixed", - "radius": "4px", - "resizeDirection": "ALL", - "shadow": "small", - "viewList": [ - { - "id": "cfb12f54-e7e3-4ad2-bcb3-2b55cd9169c6", - "key": "View 1", - "label": "View 1" - }, - { - "id": "d38b13da-739b-4721-94d1-9715bcf2fdcd", - "key": "View 2", - "label": "View 2" - }, - { - "id": "bd6664dd-7317-4ffc-bb43-8ef8449e17de", - "key": "View 3", - "label": "View 3" - } - ] - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - - "h": 0, - "w": 0, - "minH": 3, - "minW": 2, - - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "displayName": "canvas5", - "parentNode": "container2", - "showName": "canvas", - - "childrenNode": [ - { - "displayName": "container5", - "parentNode": "canvas5", - "showName": "container", - - "childrenNode": [ - { - "displayName": "canvas11", - "parentNode": "container5", - "showName": "canvas", - - "childrenNode": [ - { - "displayName": "container6", - "parentNode": "canvas11", - "showName": "container", - - "childrenNode": [ - { - "displayName": "canvas12", - "parentNode": "container6", - "showName": "canvas", - - "childrenNode": [ - { - "displayName": "text7", - "parentNode": "canvas12", - "showName": "text", - - "childrenNode": [], - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 5, - "w": 31, - "minH": 3, - "minW": 2, - - "x": 1, - "y": 3, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "fixed", - "fs": "16px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "ALL", - "value": "💰 Add New Order", - "verticalAlign": "center" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - - "h": 0, - "w": 0, - "minH": 3, - "minW": 2, - - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "CONTAINER_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 12, - "w": 32, - "minH": 3, - "minW": 2, - - "x": 0, - "y": 0, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "backgroundColor": "#f7f7f7ff", - "borderColor": "#ffffffff", - "borderWidth": "0px", - "currentIndex": 0, - "currentKey": "View 1", - "dynamicHeight": "fixed", - "radius": "4px", - "resizeDirection": "ALL", - "shadow": "small", - "viewList": [ - { - "id": "bb9caaff-403f-439f-97e5-9ebba193e59e", - "key": "View 1", - "label": "View 1" - } - ] - } - }, - { - "displayName": "date2", - "parentNode": "canvas11", - "showName": "date", - - "childrenNode": [], - "type": "DATE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 5, - "w": 31, - "minH": 3, - "minW": 2, - - "x": 1, - "y": 24, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "formDataKey" - ], - "colorScheme": "blue", - "dateFormat": "YYYY-MM-DD", - "formDataKey": "{{date2.displayName}}", - "hidden": false, - "label": "Started time", - "labelAlign": "left", - "labelPosition": "top", - "labelWidth": "{{33}}", - "required": true, - "value": "2023-03-15" - } - }, - { - "displayName": "date3", - "parentNode": "canvas11", - "showName": "date", - - "childrenNode": [], - "type": "DATE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 8, - "w": 31, - "minH": 3, - "minW": 2, - - "x": 1, - "y": 34, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "formDataKey" - ], - "colorScheme": "blue", - "dateFormat": "YYYY-MM-DD", - "formDataKey": "{{date3.displayName}}", - "hidden": false, - "label": "Expired time", - "labelAlign": "left", - "labelPosition": "top", - "labelWidth": "{{33}}", - "required": true, - "value": "2023-03-15" - } - }, - { - "displayName": "input5", - "parentNode": "canvas11", - "showName": "input", - - "childrenNode": [], - "type": "INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 5, - "w": 31, - "minH": 3, - "minW": 2, - - "x": 1, - "y": 44, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "formDataKey" - ], - "colorScheme": "blue", - "formDataKey": "{{input5.displayName}}", - "hidden": false, - "label": "Charge", - "labelAlign": "left", - "labelPosition": "top", - "labelWidth": "{{33}}", - "placeholder": "input sth", - "required": true, - "value": "" - } - }, - { - "displayName": "checkboxGroup2", - "parentNode": "canvas11", - "showName": "checkboxGroup", - - "childrenNode": [], - "type": "CHECKBOX_GROUP_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 4, - "w": 31, - "minH": 3, - "minW": 2, - - "x": 1, - "y": 54, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "dataSources", - "formDataKey" - ], - "colorScheme": "blue", - "dataSources": "{{[]}}", - "direction": "horizontal", - "formDataKey": "{{checkboxGroup2.displayName}}", - "label": "Feature flag", - "labelAlign": "left", - "labelPosition": "top", - "labelWidth": "{{33}}", - "manualOptions": [ - { - "id": "option-406a3391-c686-48e2-9142-04e1648bc85a", - "label": "Feature1", - "value": "Feature1" - }, - { - "id": "option-0e8cdf3f-4b1e-41bb-baa6-87ae40850d7d", - "label": "Feature2", - "value": "Feature2" - }, - { - "id": "option-6731951d-04db-4e6b-a798-09847baaa82e", - "label": "Feature3", - "value": "Feature3" - } - ], - "optionConfigureMode": "static", - "required": true - } - }, - { - "displayName": "button3", - "parentNode": "canvas11", - "showName": "button", - - "childrenNode": [], - "type": "BUTTON_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 5, - "w": 31, - "minH": 3, - "minW": 2, - - "x": 1, - "y": 63, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "blue", - "events": [ - { - "actionType": "datasource", - "eventType": "click", - "id": "events-2b7c34b5-57f7-4447-97ed-60b86f6a79e9", - "queryID": "add_new" - } - ], - "hidden": false, - "text": "Add", - "variant": "fill" - } - }, - { - "displayName": "select1", - "parentNode": "canvas11", - "showName": "select", - - "childrenNode": [], - "type": "SELECT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 5, - "w": 31, - "minH": 3, - "minW": 2, - - "x": 1, - "y": 14, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "dataSources", - "formDataKey", - "mappedOption.labels", - "mappedOption.values" - ], - "colorScheme": "blue", - "dataSources": "{{id.data}}", - "formDataKey": "{{select1.displayName}}", - "hidden": false, - "label": "ID", - "labelAlign": "left", - "labelPosition": "top", - "labelWidth": "{{33}}", - "manualOptions": [ - { - "id": "option-e95f7293-01fd-4a32-96f5-719cfc1ccf30", - "label": "Option 1", - "value": "Option 1" - }, - { - "id": "option-d0fdf56b-9cd9-4e59-9d05-10cdd47a4501", - "label": "Option 2", - "value": "Option 2" - }, - { - "id": "option-81f79b5a-576a-4889-b389-af7851c8fd86", - "label": "Option 3", - "value": "Option 3" - } - ], - "mappedOption": { - "labels": "{{select1.dataSources.map((item) => ( item.id))}}", - "values": "{{select1.dataSources.map((item) => ( item.id))}}" - }, - "optionConfigureMode": "dynamic", - "required": true - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - - "h": 0, - "w": 0, - "minH": 3, - "minW": 2, - - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "CONTAINER_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 74, - "w": 15, - "minH": 3, - "minW": 2, - - "x": 17, - "y": 1, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "backgroundColor": "#ffffffff", - "borderColor": "#ffffffff", - "borderWidth": "1px", - "currentIndex": 0, - "currentKey": "View 1", - "dynamicHeight": "fixed", - "radius": "4px", - "resizeDirection": "ALL", - "shadow": "small", - "viewList": [ - { - "id": "bb9caaff-403f-439f-97e5-9ebba193e59e", - "key": "View 1", - "label": "View 1" - } - ] - } - }, - { - "displayName": "table1", - "parentNode": "canvas5", - "showName": "table", - - "childrenNode": [], - "type": "TABLE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 74, - "w": 16, - "minH": 3, - "minW": 2, - - "x": 1, - "y": 1, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "pageSize", - "dataSourceJS" - ], - "columns": [ - { - "accessorKey": "id", - "columnIndex": 0, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "id", - "id": "id", - "type": "text", - "visible": true - }, - { - "accessorKey": "expired_time", - "columnIndex": 1, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "expired_time", - "id": "expired_time", - "type": "text", - "visible": true - }, - { - "accessorKey": "start_time", - "columnIndex": 2, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "start_time", - "id": "start_time", - "type": "text", - "visible": true - }, - { - "accessorKey": "feature_flag", - "columnIndex": 3, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "feature_flag", - "id": "feature_flag", - "type": "text", - "visible": true - }, - { - "accessorKey": "charge", - "columnIndex": 4, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "charge", - "id": "charge", - "type": "text", - "visible": true - } - ], - "dataSourceJS": "{{orders.data}}", - "dataSourceMode": "dynamic", - "defaultSortKey": "id", - "defaultSortOrder": "ascend", - "download": false, - "emptyState": "No rows found", - "filter": false, - "overFlow": "pagination", - "pageSize": "{{10}}", - "rowEvents": {}, - "rowSelection": { - "1": true - }, - "selectedRow": [ - { - "charge": "40000", - "expired_time": "2024-1-2", - "feature_flag": ["Feature3"], - "id": "3", - "start_time": "2023-1-3" - } - ] - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - - "h": 0, - "w": 0, - "minH": 3, - "minW": 2, - - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "CONTAINER_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 97, - "w": 32, - "minH": 3, - "minW": 2, - - "x": 0, - "y": 8, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "backgroundColor": "#ffffffff", - "borderColor": "#ffffffff", - "borderWidth": "0px", - "currentIndex": 0, - "currentKey": "Users", - "dynamicHeight": "fixed", - "linkWidgetDisplayName": "tabs1", - "radius": "4px", - "resizeDirection": "ALL", - "shadow": "small", - "viewList": [ - { - "id": "cfb12f54-e7e3-4ad2-bcb3-2b55cd9169c6", - "key": "Users", - "label": "Users" - }, - { - "id": "d38b13da-739b-4721-94d1-9715bcf2fdcd", - "key": "Orders", - "label": "Orders" - } - ] - } - }, - { - "displayName": "tabs1", - "parentNode": "canvas1", - "showName": "tabs", - - "childrenNode": [], - "type": "TABS_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 6, - "w": 32, - "minH": 3, - "minW": 2, - - "x": 0, - "y": 1, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "align": "flex-start", - "colorScheme": "blue", - "currentIndex": 0, - "currentKey": "Users", - "linkWidgetDisplayName": "container2", - "navigateContainer": true, - "tabList": [ - { - "id": "39adb386-ffc8-4fc8-96a1-900057c98741", - "key": "Tab 1", - "label": "Tab 1" - }, - { - "id": "9d8fd915-ddce-4cc2-aa48-ab4560476a3a", - "key": "Tab 2", - "label": "Tab 2" - }, - { - "id": "6a8b5312-fe35-4c87-b6c2-21d851944b05", - "key": "Tab 3", - "label": "Tab 3" - } - ], - "tabPosition": "top", - "viewList": [ - { - "id": "cfb12f54-e7e3-4ad2-bcb3-2b55cd9169c6", - "key": "Users", - "label": "Users" - }, - { - "id": "d38b13da-739b-4721-94d1-9715bcf2fdcd", - "key": "Orders", - "label": "Orders" - } - ] - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - - "h": 0, - "w": 0, - "minH": 3, - "minW": 2, - - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "CONTAINER_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - - "h": 107, - "w": 32, - "minH": 3, - "minW": 2, - - "x": 0, - "y": 0, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "backgroundColor": "#ffffffff", - "borderColor": "#ffffffff", - "borderWidth": "0px", - "currentIndex": 0, - "currentKey": "View 1", - "dynamicHeight": "fixed", - "radius": "4px", - "resizeDirection": "ALL", - "shadow": "small", - "viewList": [ - { - "id": "cfb12f54-e7e3-4ad2-bcb3-2b55cd9169c6", - "key": "View 1", - "label": "View 1" - } - ] - } - } - ], - "type": "CONTAINER_NODE", - "containerType": "EDITOR_DOT_PANEL", - - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "SECTION_NODE", - "containerType": "EDITOR_LAYOUT_SQUARE", - - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - - "x": -1, - "y": -1, - "z": 0, - "props": { - "currentViewIndex": 0, - "defaultViewKey": "View 1", - "sectionViewConfigs": [ - { - "id": "b8a15a09-3c37-4319-a3a1-b7c375a8b17a", - "key": "View 1", - "path": "View 1", - "viewDisplayName": "bodySection1-bodySectionContainer1" - } - ], - "viewSortedKey": ["bodySection1-bodySectionContainer1"] - } - }, - { - "displayName": "modalSection1", - "parentNode": "page1", - "showName": "modalSection", - - "childrenNode": [], - "type": "MODAL_SECTION_NODE", - "containerType": "EDITOR_LAYOUT_SQUARE", - - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "PAGE_NODE", - "containerType": "EDITOR_PAGE_SQUARE", - - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - - "x": -1, - "y": -1, - "z": 0, - "props": { - "bodyColumns": 32, - "bottomHeight": 0, - "canvasSize": "fixed", - "canvasWidth": 1440, - "footerColumns": 32, - "hasFooter": false, - "hasHeader": false, - "hasLeft": false, - "hasRight": false, - "headerColumns": 32, - "isFooterFixed": true, - "isHeaderFixed": true, - "isLeftFixed": true, - "isRightFixed": true, - "layout": "default", - "leftColumns": 8, - "leftPosition": "NONE", - "leftWidth": 0, - "rightColumns": 8, - "rightPosition": "NONE", - "rightWidth": 0, - "showLeftFoldIcon": false, - "showRightFoldIcon": false, - "topHeight": 0 - } - } - ], - "type": "DOT_PANEL", - "containerType": "EDITOR_DOT_PANEL", - - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - - "x": -1, - "y": -1, - "z": 0, - "props": { - "currentPageIndex": 0, - "pageSortedKey": ["page1"] - } - }, - "dependenciesState": {}, - "dragShadowState": {}, - "dottedLineSquareState": {}, - "displayNameState": [] -} diff --git a/apps/builder/src/config/template/List/index.ts b/apps/builder/src/config/template/List/index.ts deleted file mode 100644 index df966294c1..0000000000 --- a/apps/builder/src/config/template/List/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -import data from "@/config/template/List/data.json" -import { CurrentAppResp } from "@/page/App/resp/currentAppResp" - -export const LIST_DATA = data as unknown as CurrentAppResp diff --git a/apps/builder/src/config/template/TableGuide/data.json b/apps/builder/src/config/template/TableGuide/data.json deleted file mode 100644 index ea41a9cffd..0000000000 --- a/apps/builder/src/config/template/TableGuide/data.json +++ /dev/null @@ -1,11560 +0,0 @@ -{ - "appInfo": { - "appId": "ILAex4p1C7Ga", - "uid": "00000000-0000-0000-0000-000000000000", - "teamID": "ILAfx4p1C7d0", - "appName": "Table guide", - "releaseVersion": 0, - "mainlineVersion": 0, - "deployed": false, - "config": { - "public": true, - "waterMark": true, - "description": "Finished and to be released" - }, - "updatedBy": "ILAfx4p1C7eb", - "updatedAt": "2023-07-25T13:39:09.5224Z", - "appActivity": { - "modifier": "Mikiko", - "modifiedAt": "2023-07-25T13:39:09.5224Z" - } - }, - "actions": [ - { - "actionID": "ILAcx4p1C7rs", - "uid": "b5716749-1d0a-455a-8118-3545ce0450c3", - "teamID": "ILAfx4p1C7en", - "resourceID": "ILAfx4p1C7cn", - "displayName": "search_by_name", - "actionType": "postgresql", - "content": { - "mode": "sql", - "query": "select * \n from users\njoin orders\non users.id = orders.id\nwhere {{!input17.value}} or lower(users.name) like '%{{input17.value.toLowerCase()}}%'" - }, - "transformer": { - "enable": false, - "rawData": "" - }, - "triggerMode": "manually", - "config": { - "public": true, - "advancedConfig": { - "runtime": "appLoaded", - "pages": [], - "delayWhenLoaded": "", - "displayLoadingPage": false, - "isPeriodically": false, - "periodInterval": "" - } - }, - "createdAt": "2023-07-18T14:08:18.983175Z", - "createdBy": "ILAfx4p1C7eb", - "updatedAt": "2023-07-24T09:09:09.218493Z", - "updatedBy": "ILAfx4p1C7eb" - }, - { - "actionID": "ILAcx4p1C7rq", - "uid": "ceccaca0-c1ee-4791-9e95-e29fb6cc118e", - "teamID": "ILAfx4p1C7en", - "resourceID": "ILAex4p1C7Qj", - "displayName": "delete_product", - "actionType": "restapi", - "content": { - "$dynamicAttrPaths": [], - "body": null, - "bodyType": "none", - "cookies": [ - { - "key": "", - "value": "" - } - ], - "headers": [ - { - "key": "", - "value": "" - } - ], - "method": "DELETE", - "successEvent": [ - { - "actionType": "datasource", - "eventType": "success", - "id": "events-61e74de4-b192-44b9-8a50-3a3709785d76", - "queryID": "list_all_products" - }, - { - "actionType": "showNotification", - "description": "Successfully deleted", - "eventType": "success", - "id": "events-7a069236-aa53-4eb6-b46e-d8019cb3a883", - "title": "Notification" - } - ], - "url": "products/{{input1.value}}", - "urlParams": [ - { - "key": "", - "value": "" - } - ] - }, - "transformer": { - "enable": false, - "rawData": "" - }, - "triggerMode": "manually", - "config": { - "public": true, - "advancedConfig": { - "runtime": "none", - "pages": [], - "delayWhenLoaded": "", - "displayLoadingPage": false, - "isPeriodically": false, - "periodInterval": "" - } - }, - "createdAt": "2023-07-18T08:34:41.642726Z", - "createdBy": "ILAfx4p1C7eb", - "updatedAt": "2023-07-24T09:09:09.251606Z", - "updatedBy": "ILAfx4p1C7eb" - }, - { - "actionID": "ILAcx4p1C7rf", - "uid": "31236b02-3798-40a2-a4e8-80c2e130d220", - "teamID": "ILAfx4p1C7en", - "resourceID": "ILAex4p1C7Qj", - "displayName": "list_all_products", - "actionType": "restapi", - "content": { - "body": null, - "bodyType": "none", - "cookies": [ - { - "key": "", - "value": "" - } - ], - "headers": [ - { - "key": "", - "value": "" - } - ], - "method": "GET", - "url": "products/", - "urlParams": [ - { - "key": "", - "value": "" - } - ] - }, - "transformer": { - "enable": false, - "rawData": "" - }, - "triggerMode": "automate", - "config": { - "public": true, - "advancedConfig": { - "runtime": "appLoaded", - "pages": [], - "delayWhenLoaded": "", - "displayLoadingPage": false, - "isPeriodically": false, - "periodInterval": "" - } - }, - "createdAt": "2023-07-18T03:55:52.364409Z", - "createdBy": "ILAfx4p1C7eb", - "updatedAt": "2023-07-24T09:09:09.186788Z", - "updatedBy": "ILAfx4p1C7eb" - }, - { - "actionID": "ILAcx4p1C7ru", - "uid": "ba8d14f8-df87-4dce-892d-fb145bb1c69b", - "teamID": "ILAfx4p1C7en", - "resourceID": "ILAex4p1C7Qj", - "displayName": "serverside_pagination", - "actionType": "restapi", - "content": { - "body": null, - "bodyType": "none", - "cookies": [ - { - "key": "", - "value": "" - } - ], - "headers": [ - { - "key": "", - "value": "" - } - ], - "method": "GET", - "url": "products?limit={{table2.pageSize}}&skip={{table2.pageIndex*table2.pageSize}}", - "urlParams": [ - { - "key": "", - "value": "" - } - ] - }, - "transformer": { - "enable": false, - "rawData": "" - }, - "triggerMode": "manually", - "config": { - "public": true, - "advancedConfig": { - "runtime": "appLoaded", - "pages": [], - "delayWhenLoaded": "", - "displayLoadingPage": false, - "isPeriodically": false, - "periodInterval": "" - } - }, - "createdAt": "2023-07-18T05:32:22.883797Z", - "createdBy": "ILAfx4p1C7eb", - "updatedAt": "2023-07-24T09:09:09.196213Z", - "updatedBy": "ILAfx4p1C7eb" - }, - { - "actionID": "ILAcx4p1C7rt", - "uid": "d07d6369-0802-479d-a6b8-27c602b344dd", - "teamID": "ILAfx4p1C7en", - "resourceID": "ILAex4p1C7Qj", - "displayName": "delete_row_via_select_cell", - "actionType": "restapi", - "content": { - "$dynamicAttrPaths": [], - "body": null, - "bodyType": "none", - "cookies": [ - { - "key": "", - "value": "" - } - ], - "headers": [ - { - "key": "", - "value": "" - } - ], - "method": "DELETE", - "successEvent": [ - { - "actionType": "datasource", - "eventType": "success", - "id": "events-5a53bb51-c106-4a47-a3eb-bc9ba4e28093", - "queryID": "list_all_products" - }, - { - "actionType": "showNotification", - "description": "Succesfully deleted", - "eventType": "success", - "id": "events-e30f13bf-db10-4ae5-9141-e4aeb83b4615", - "title": "Notification" - } - ], - "url": "products/{{table5.dataSourceJS[table5.selectedCell.index].id}}", - "urlParams": [ - { - "key": "", - "value": "" - } - ] - }, - "transformer": { - "enable": false, - "rawData": "" - }, - "triggerMode": "manually", - "config": { - "public": true, - "advancedConfig": { - "runtime": "none", - "pages": [], - "delayWhenLoaded": "", - "displayLoadingPage": false, - "isPeriodically": false, - "periodInterval": "" - } - }, - "createdAt": "2023-07-18T09:02:29.209107Z", - "createdBy": "ILAfx4p1C7eb", - "updatedAt": "2023-07-24T09:09:09.212568Z", - "updatedBy": "ILAfx4p1C7eb" - }, - { - "actionID": "ILAcx4p1C7rr", - "uid": "f48902a6-a207-4294-8ce0-70061b4506f5", - "teamID": "ILAfx4p1C7en", - "resourceID": "ILAex4p1C7Qj", - "displayName": "update_product", - "actionType": "restapi", - "content": { - "$dynamicAttrPaths": [], - "body": { - "content": "{{JSON.stringify(form1.formData)}}", - "type": "json" - }, - "bodyType": "raw", - "cookies": [ - { - "key": "", - "value": "" - } - ], - "headers": [ - { - "key": "", - "value": "" - } - ], - "method": "PUT", - "successEvent": [ - { - "actionType": "datasource", - "eventType": "success", - "id": "events-5a53bb51-c106-4a47-a3eb-bc9ba4e28093", - "queryID": "list_all_products" - }, - { - "actionType": "showNotification", - "description": "Succesfully updated", - "eventType": "success", - "id": "events-e30f13bf-db10-4ae5-9141-e4aeb83b4615", - "title": "Notification" - } - ], - "url": "products/{{input1.value}}", - "urlParams": [ - { - "key": "", - "value": "" - } - ] - }, - "transformer": { - "enable": false, - "rawData": "" - }, - "triggerMode": "manually", - "config": { - "public": true, - "advancedConfig": { - "runtime": "none", - "pages": [], - "delayWhenLoaded": "", - "displayLoadingPage": false, - "isPeriodically": false, - "periodInterval": "" - } - }, - "createdAt": "2023-07-18T08:24:31.186693Z", - "createdBy": "ILAfx4p1C7eb", - "updatedAt": "2023-07-24T09:09:09.221723Z", - "updatedBy": "ILAfx4p1C7eb" - }, - { - "actionID": "ILAcx4p1C7rp", - "uid": "5a041c6c-fbcd-4b60-a6f1-a480ece7a7f2", - "teamID": "ILAfx4p1C7en", - "resourceID": "ILAex4p1C7Qj", - "displayName": "update_row_via_select_cell", - "actionType": "restapi", - "content": { - "$dynamicAttrPaths": [], - "body": { - "content": "{{\n {\n table5.selectedCell.columnName : table5.selectedCell.value\n}\n}}", - "type": "json" - }, - "bodyType": "raw", - "cookies": [ - { - "key": "", - "value": "" - } - ], - "headers": [ - { - "key": "", - "value": "" - } - ], - "method": "PUT", - "successEvent": [ - { - "actionType": "datasource", - "eventType": "success", - "id": "events-5a53bb51-c106-4a47-a3eb-bc9ba4e28093", - "queryID": "list_all_products" - }, - { - "actionType": "showNotification", - "description": "Succesfully updated", - "eventType": "success", - "id": "events-e30f13bf-db10-4ae5-9141-e4aeb83b4615", - "title": "Notification" - } - ], - "url": "products/{{table5.dataSourceJS[table5.selectedCell.index].id}}", - "urlParams": [ - { - "key": "", - "value": "" - } - ] - }, - "transformer": { - "enable": false, - "rawData": "" - }, - "triggerMode": "manually", - "config": { - "public": true, - "advancedConfig": { - "runtime": "none", - "pages": [], - "delayWhenLoaded": "", - "displayLoadingPage": false, - "isPeriodically": false, - "periodInterval": "" - } - }, - "createdAt": "2023-07-18T09:20:49.555571Z", - "createdBy": "ILAfx4p1C7eb", - "updatedAt": "2023-07-24T09:09:09.255712Z", - "updatedBy": "ILAfx4p1C7eb" - }, - { - "actionID": "ILAcx4p1C7ro", - "uid": "9c08f6e3-f87c-4bf0-81d6-43b10f0326ad", - "teamID": "ILAfx4p1C7en", - "resourceID": "ILAfx4p1C7d0", - "displayName": "currentDate", - "actionType": "transformer", - "content": { - "transformerString": "{{(function (){var currentDate = new Date();\n\n// 获取当前时间的年份\nvar year = currentDate.getFullYear();\n\n// 获取当前时间的月份(注意,月份是从 0 开始计数的,所以需要加 1)\nvar month = currentDate.getMonth() + 1;\n\n// 获取当前时间的日期\nvar date = currentDate.getDate();\n\n// 获取当前时间的小时数\nvar hours = currentDate.getHours();\n\n// 获取当前时间的分钟数\nvar minutes = currentDate.getMinutes();\n\n// 获取当前时间的秒数\nvar seconds = currentDate.getSeconds();\n\n// 获取当前时间的毫秒数\nvar milliseconds = currentDate.getMilliseconds();\n\ncurrentDate = {\"year\":year, \"month\":month, \"date\":date,\"hours\":hours, \"minutes\":minutes,\"seconds\":seconds,\"milliseconds\":milliseconds}\nreturn currentDate;})()}}" - }, - "transformer": { - "enable": false, - "rawData": "" - }, - "triggerMode": "manually", - "config": { - "public": true, - "advancedConfig": { - "runtime": "none", - "pages": [], - "delayWhenLoaded": "", - "displayLoadingPage": false, - "isPeriodically": false, - "periodInterval": "" - } - }, - "createdAt": "2023-07-18T16:20:46.357934Z", - "createdBy": "ILAfx4p1C7eb", - "updatedAt": "2023-07-24T09:09:09.261438Z", - "updatedBy": "ILAfx4p1C7eb" - }, - { - "actionID": "ILAcx4p1C7rn", - "uid": "bdf23e84-00a6-401b-b235-a171a2b3ea1f", - "teamID": "ILAfx4p1C7en", - "resourceID": "ILAex4p1C7Qj", - "displayName": "delete_product_via_id", - "actionType": "restapi", - "content": { - "$dynamicAttrPaths": [], - "body": null, - "bodyType": "none", - "cookies": [ - { - "key": "", - "value": "" - } - ], - "headers": [ - { - "key": "", - "value": "" - } - ], - "method": "DELETE", - "successEvent": [ - { - "actionType": "datasource", - "eventType": "success", - "id": "events-61e74de4-b192-44b9-8a50-3a3709785d76", - "queryID": "list_all_products" - }, - { - "actionType": "showNotification", - "description": "Successfully deleted", - "eventType": "success", - "id": "events-7a069236-aa53-4eb6-b46e-d8019cb3a883", - "title": "Notification" - } - ], - "url": "products/{{table7.selectedRow[0].id}}", - "urlParams": [ - { - "key": "", - "value": "" - } - ] - }, - "transformer": { - "enable": false, - "rawData": "" - }, - "triggerMode": "manually", - "config": { - "public": true, - "advancedConfig": { - "runtime": "none", - "pages": [], - "delayWhenLoaded": "", - "displayLoadingPage": false, - "isPeriodically": false, - "periodInterval": "" - } - }, - "createdAt": "2023-07-18T12:50:50.273657Z", - "createdBy": "ILAfx4p1C7eb", - "updatedAt": "2023-07-24T09:09:09.267783Z", - "updatedBy": "ILAfx4p1C7eb" - } - ], - "components": { - "version": 0, - "displayName": "root", - "parentNode": "", - "showName": "root", - "childrenNode": [ - { - "version": 0, - "displayName": "page1", - "parentNode": "root", - "showName": "page", - "childrenNode": [ - { - "version": 0, - "displayName": "bodySection1", - "parentNode": "page1", - "showName": "bodySection", - "childrenNode": [ - { - "version": 0, - "displayName": "bodySection1-bodySectionContainer1", - "parentNode": "bodySection1", - "showName": "bodySection1-bodySectionContainer1", - "childrenNode": [ - { - "version": 0, - "displayName": "text1", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 11, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 5, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "blackAlpha", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "# 📈Supported column types", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "tabs3", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "tabs", - "childrenNode": null, - "type": "TABS_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 77, - "w": 4, - "minH": 3, - "minW": 1, - "x": 0, - "y": 18, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "align": "flex-start", - "colorScheme": "blue", - "currentIndex": 0, - "currentKey": "Auto", - "tabList": [ - { - "id": "e65d510f-def7-4376-825f-85eba2951c43", - "key": "Auto", - "label": "Auto" - }, - { - "id": "ac4502b3-d981-4e35-8b66-c3895968d5dd", - "key": "Text", - "label": "Text" - }, - { - "id": "1aa15e64-9d60-40b7-b724-a427a8aa8e45", - "key": "Date", - "label": "Date" - }, - { - "id": "views-cb773059-b237-4d98-b165-a288bf2ae276", - "key": "Time", - "label": "Time" - }, - { - "id": "views-378d12e2-6e7e-4dd8-985c-4a4b8e05d10f", - "key": "DateTime", - "label": "DateTime" - }, - { - "id": "views-054b4c7a-4600-4f04-b20d-baaf944d8981", - "key": "Tag", - "label": "Tag" - }, - { - "id": "views-c0138643-62e2-4e28-8554-8b28e4ab8dd0", - "key": "Number", - "label": "Number" - }, - { - "id": "views-55adf2db-f06e-4628-b0d1-a0f78917cd7d", - "key": "Percent", - "label": "Percent" - }, - { - "id": "views-ed79a235-1807-4c7b-914c-f075dd3b13a5", - "key": "Link", - "label": "Link" - }, - { - "id": "views-4ecbb39b-87c6-48bd-8c72-452d97888aaf", - "key": "Button", - "label": "Button" - }, - { - "id": "views-44d24f8d-2b38-4f9d-8c51-41ea8d917883", - "key": "ButtonGroup", - "label": "ButtonGroup" - }, - { - "id": "views-297e7375-5d14-4216-87e6-dd046d8b0e8c", - "key": "Boolean", - "label": "Boolean" - }, - { - "id": "views-a417127d-c200-4de3-9542-aa3c53a6e596", - "key": "Image", - "label": "Image" - }, - { - "id": "views-0d8a5cb6-5b30-4782-9bde-d5bb95f576ae", - "key": "IconGroup", - "label": "IconGroup" - }, - { - "id": "views-860d914e-69fb-43a0-ae51-9beefd90823d", - "key": "Rating", - "label": "Rating" - }, - { - "id": "views-55ad1a50-d900-4670-8e9e-f280d452054c", - "key": "Markdown", - "label": "Markdown" - }, - { - "id": "views-c25c8559-dabc-4a82-8058-ac2b2a7e5aa3", - "key": "Currency", - "label": "Currency" - } - ], - "tabPosition": "left", - "viewList": [] - } - }, - { - "version": 0, - "displayName": "text24", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 3, - "w": 27, - "minH": 3, - "minW": 1, - "x": 5, - "y": 18, - "z": 0, - "props": { - "$dynamicAttrPaths": ["value"], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "{{tabs3.currentKey==\"Auto\"?\"Automatically set the column type based on the column data. \":tabs3.currentKey==\"Text\"?\"Display data as plain text\":tabs3.currentKey==\"Date\"?\"You can set the date format. For example: YYYY-MM-DD, 2023-01-01. MM DD, YYYY, 01 01,2023\":tabs3.currentKey==\"Tag\"?\"We parse each string in the string array into an independent tag. Therefore, the value of each cell here can be a string or an array. You can also set the tag color based on the tag value. \":tabs3.currentKey==\"Time\"?\"You can set the time format. For example: hh:mm:ss, 21:23:30\":tabs3.currentKey==\"DateTime\"?\"You can set the dateTime format. For example: YYYY-MM-DD hh:mm:ss, 2023-01-01 12:00:00\":tabs3.currentKey==\"Number\"?\"To display the data in number format. You can set the decimal place and whether to show the thousand separators\":tabs3.currentKey==\"Percent\"?\"To set a number as a percentage\":tabs3.currentKey==\"Link\"?\"To display a clickable link\":tabs3.currentKey==\"Button\"?\"Allow to add event handlers to trigger anything\":tabs3.currentKey==\"ButtonGroup\"?\"Allow to add multiple buttons and configure the event handlers and other config of every button separated. \":tabs3.currentKey==\"Boolean\"?\"Display the bolean value\":tabs3.currentKey==\"Image\"?\"Display an image via base64 or an online URL\":tabs3.currentKey==\"IconGroup\"?\"Allow to add multiple icons and configure the event handlers and other config of every icon separated. \":tabs3.currentKey==\"Rating\"?\"To display the number in a rating format\":tabs3.currentKey==\"Markdown\"?\"To display the data in Markdown\":\"To set a currency with a currency code\"}}", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "divider6", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "divider", - "childrenNode": null, - "type": "DIVIDER_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 27, - "minH": 3, - "minW": 1, - "x": 5, - "y": 22, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "fs": "14px", - "hidden": false - } - }, - { - "version": 0, - "displayName": "table11", - "parentNode": "bodySection1-bodySectionContainer1", - "showName": "table", - "childrenNode": null, - "type": "TABLE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 68, - "w": 27, - "minH": 3, - "minW": 1, - "x": 5, - "y": 27, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "pageSize", - "dataSourceJS", - "columns[0].backgroundColor", - "columns[1].backgroundColor", - "columns[2].backgroundColor", - "columns[3].backgroundColor", - "columns[4].backgroundColor", - "columns[5].backgroundColor", - "columns[6].backgroundColor", - "columns[1].mappedValue", - "columns[6].decimalPlaces", - "columns[6].mappedValue", - "columns[7].backgroundColor", - "columns[8].backgroundColor", - "columns[9].backgroundColor", - "columns[4].mappedValue", - "columns[4].tagLabel", - "columns[10].mappedValue", - "columns[10].backgroundColor", - "columns[11].backgroundColor", - "columns[12].backgroundColor", - "columns[13].backgroundColor", - "columns[14].backgroundColor", - "columns[15].backgroundColor", - "columns[14].mappedValue", - "columns[15].mappedValue", - "columns[15].decimalPlaces", - "columns[13].mappedValue" - ], - "columnMapper": { - "Boolean": { - "accessorKey": "column-e8d0450e-a3e1-4ffa-a166-1a9cd97bb00c", - "alignment": "left", - "backgroundColor": "white", - "colorScheme": "blue", - "columnIndex": 10, - "custom": true, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "backgroundColor": false, - "mappedValue": true - }, - "header": "Boolean", - "id": "column-e8d0450e-a3e1-4ffa-a166-1a9cd97bb00c", - "mappedValue": [true, false, false, false], - "objectFit": "scale-down", - "tagColor": "auto", - "type": "boolean", - "visible": true - }, - "Button": { - "accessorKey": "column-552369e7-25b3-4d52-ad70-64b9c8acd5ee", - "alignment": "left", - "backgroundColor": "white", - "colorScheme": "grayBlue", - "columnIndex": 8, - "custom": true, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "backgroundColor": false, - "mappedValue": false - }, - "header": "Button", - "id": "column-552369e7-25b3-4d52-ad70-64b9c8acd5ee", - "mappedValue": "Button", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "button", - "visible": true - }, - "ButtonGroup": { - "accessorKey": "column-8d7e23cd-0ed2-4552-b749-188b2e4d920e", - "alignment": "left", - "backgroundColor": "white", - "buttonGroupContent": [ - { - "cellValue": "Button1", - "colorScheme": "blackAlpha", - "events": [], - "id": "cell-e4a0e804-8151-4594-9db7-118a175d1498", - "index": 0, - "label": "Button1", - "variant": "fill" - }, - { - "cellValue": "Button2", - "colorScheme": "blackAlpha", - "id": "cell-a593058d-4555-4380-9f87-14f44bc6150c", - "index": 1, - "label": "Button2", - "variant": "outline" - } - ], - "colorScheme": "blue", - "columnIndex": 9, - "custom": true, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "backgroundColor": false - }, - "header": "ButtonGroup", - "id": "column-8d7e23cd-0ed2-4552-b749-188b2e4d920e", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "buttongroup", - "visible": true - }, - "Currency": { - "accessorKey": "column-3308598a-cd33-4a61-be10-012e5195150d", - "alignment": "left", - "backgroundColor": "white", - "colorScheme": "blue", - "columnIndex": 15, - "currencyCode": "USD", - "custom": true, - "decimalPlaces": 2, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "backgroundColor": false, - "currencyCode": false, - "mappedValue": true - }, - "header": "Currency", - "id": "column-3308598a-cd33-4a61-be10-012e5195150d", - "mappedValue": [3700, 5400, 6000, 8000], - "objectFit": "scale-down", - "tagColor": "auto", - "type": "currency", - "visible": true - }, - "Date": { - "accessorKey": "column-a3a06943-7f8d-497d-8f76-791774a0081c", - "alignment": "left", - "backgroundColor": "white", - "colorScheme": "blue", - "columnIndex": 1, - "custom": true, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "backgroundColor": false, - "mappedValue": false - }, - "header": "Date", - "id": "column-a3a06943-7f8d-497d-8f76-791774a0081c", - "mappedValue": 2023, - "objectFit": "scale-down", - "tagColor": "auto", - "type": "date", - "visible": true - }, - "DateTime": { - "accessorKey": "column-d423fc70-360b-43b3-b93f-08f703bf2441", - "alignment": "left", - "backgroundColor": "white", - "colorScheme": "blue", - "columnIndex": 3, - "custom": true, - "enableSorting": true, - "format": "YYYY-MM-DD HH:mm:ss", - "fromCurrentRow": { - "backgroundColor": false, - "mappedValue": false - }, - "header": "DateTime", - "id": "column-d423fc70-360b-43b3-b93f-08f703bf2441", - "mappedValue": "2023-1-1 19:45:30", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "datetime", - "visible": true - }, - "IconGroup": { - "accessorKey": "column-014459e3-fc62-4308-ba4e-6e1bfcee0ef9", - "alignment": "left", - "backgroundColor": "white", - "buttonGroupContent": [ - { - "cellValue": "Button1", - "colorScheme": "blue", - "id": "cell-f1d472c3-7b2c-469f-b4ab-53dc50ff9b09", - "index": 0, - "label": "Button1", - "variant": "fill" - }, - { - "cellValue": "Button2", - "colorScheme": "blue", - "id": "cell-6d8ba3a3-b153-4e48-81be-0aebee2e2a01", - "index": 1, - "label": "Button2", - "variant": "fill" - } - ], - "colorScheme": "blue", - "columnIndex": 12, - "custom": true, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "backgroundColor": false - }, - "header": "IconGroup", - "iconGroupContent": [ - { - "cellValue": "BsHandThumbsUp", - "colorScheme": "grayBlue", - "id": "cell-5a9bdc94-d136-4a2a-a49b-9adb4a7d80ff", - "index": 0, - "label": "Icon1" - }, - { - "cellValue": "SlTrash", - "colorScheme": "grayBlue", - "id": "cell-c05d2ad1-094b-48b9-a55c-59034aee0238", - "index": 1, - "label": "Icon2" - }, - { - "cellValue": "SlActionRedo", - "colorScheme": "grayBlue", - "id": "cell-a83c868c-78d2-4c9f-b89e-3ba6601021ca", - "index": 2, - "label": "Icon3" - } - ], - "id": "column-014459e3-fc62-4308-ba4e-6e1bfcee0ef9", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "icongroup", - "visible": true - }, - "Image": { - "accessorKey": "column-70ef68a3-7b1d-425d-92c3-207c14caeebf", - "alignment": "left", - "backgroundColor": "white", - "colorScheme": "blue", - "columnIndex": 11, - "custom": true, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "backgroundColor": false, - "mappedValue": false - }, - "header": "Image", - "id": "column-70ef68a3-7b1d-425d-92c3-207c14caeebf", - "mappedValue": "https://i.dummyjson.com/data/products/8/thumbnail.jpg", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "image", - "visible": true - }, - "Link": { - "accessorKey": "column-5e80ad3c-9b59-4f17-b62b-3268ebaac1d7", - "alignment": "left", - "backgroundColor": "white", - "colorScheme": "blue", - "columnIndex": 7, - "custom": true, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "backgroundColor": false, - "mappedValue": false - }, - "header": "Link", - "id": "column-5e80ad3c-9b59-4f17-b62b-3268ebaac1d7", - "mappedValue": "https://www.illacloud.com", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "link", - "visible": true - }, - "Markdown": { - "accessorKey": "column-e3f8adff-12e5-4632-8700-16017c8cfd23", - "alignment": "left", - "backgroundColor": "white", - "colorScheme": "blue", - "columnIndex": 14, - "custom": true, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "backgroundColor": false, - "mappedValue": true - }, - "header": "Markdown", - "id": "column-e3f8adff-12e5-4632-8700-16017c8cfd23", - "mappedValue": [ - "## April", - "## May", - "## June", - "## July" - ], - "objectFit": "scale-down", - "tagColor": "auto", - "type": "markdown", - "visible": true - }, - "Rating": { - "accessorKey": "column-a836c590-0019-4002-965c-a763e8cbbf7a", - "alignment": "left", - "backgroundColor": "white", - "colorScheme": "blue", - "columnIndex": 13, - "custom": true, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "backgroundColor": false, - "mappedValue": true - }, - "header": "Rating", - "id": "column-a836c590-0019-4002-965c-a763e8cbbf7a", - "mappedValue": [1, 2, 3, 5], - "objectFit": "scale-down", - "tagColor": "auto", - "type": "rating", - "visible": true - }, - "Tag": { - "accessorKey": "column-b9725dc7-aea9-44f7-8679-a11c70c70b5b", - "alignment": "left", - "backgroundColor": "white", - "colorScheme": "blue", - "columnIndex": 4, - "custom": true, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "backgroundColor": false, - "mappedValue": true, - "tagLabel": true - }, - "header": "Tag", - "id": "column-b9725dc7-aea9-44f7-8679-a11c70c70b5b", - "mappedValue": [ - ["a tag", "b tag", "c tag"], - ["c tag", "d tag"], - ["a tag", "d tag"], - ["a tag", "d tag"] - ], - "objectFit": "scale-down", - "tagColor": "auto", - "tagLabel": [ - ["a tag", "b tag", "c tag"], - ["c tag", "d tag"], - ["a tag", "d tag"], - ["a tag", "d tag"] - ], - "type": "tag", - "visible": true - }, - "Time": { - "accessorKey": "column-be03c712-c374-48f5-8589-0b9745fee496", - "alignment": "left", - "backgroundColor": "white", - "colorScheme": "blue", - "columnIndex": 2, - "custom": true, - "enableSorting": true, - "format": "HH:mm:ss", - "fromCurrentRow": { - "backgroundColor": false, - "mappedValue": false - }, - "header": "Time", - "id": "column-be03c712-c374-48f5-8589-0b9745fee496", - "mappedValue": "2023-1-1 19:45:30", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "time", - "visible": true - }, - "incomes": { - "accessorKey": "incomes", - "alignment": "left", - "backgroundColor": "white", - "colorScheme": "blue", - "columnIndex": 6, - "decimalPlaces": 0, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "backgroundColor": false, - "mappedValue": true - }, - "header": "Percent", - "id": "incomes", - "mappedValue": [0.4, 0.87, 1.2, 1.4], - "objectFit": "scale-down", - "tagColor": "auto", - "type": "percent", - "visible": true - }, - "month": { - "accessorKey": "month", - "alignment": "left", - "backgroundColor": "white", - "colorScheme": "blue", - "columnIndex": 0, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "backgroundColor": false, - "mappedValue": false - }, - "header": "Text", - "id": "month", - "mappedValue": "", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "text", - "visible": true - }, - "users": { - "accessorKey": "users", - "alignment": "left", - "backgroundColor": "white", - "colorScheme": "blue", - "columnIndex": 5, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "backgroundColor": false - }, - "header": "Number", - "id": "users", - "objectFit": "scale-down", - "showThousandsSeparator": true, - "tagColor": "auto", - "type": "number", - "visible": true - } - }, - "columnNameIndices": { - "0": "month", - "1": "Date", - "2": "Time", - "3": "DateTime", - "4": "Tag", - "5": "users", - "6": "incomes", - "7": "Link", - "8": "Button", - "9": "ButtonGroup", - "10": "Boolean", - "11": "Image", - "12": "IconGroup", - "13": "Rating", - "14": "Markdown", - "15": "Currency" - }, - "columnSizing": { - "column-014459e3-fc62-4308-ba4e-6e1bfcee0ef9": 134, - "column-552369e7-25b3-4d52-ad70-64b9c8acd5ee": 119, - "column-5e80ad3c-9b59-4f17-b62b-3268ebaac1d7": 108, - "column-8d7e23cd-0ed2-4552-b749-188b2e4d920e": 246, - "column-a3a06943-7f8d-497d-8f76-791774a0081c": 125, - "column-a836c590-0019-4002-965c-a763e8cbbf7a": 228, - "column-b9725dc7-aea9-44f7-8679-a11c70c70b5b": 141, - "column-be03c712-c374-48f5-8589-0b9745fee496": 105, - "column-d423fc70-360b-43b3-b93f-08f703bf2441": 151, - "column-e8d0450e-a3e1-4ffa-a166-1a9cd97bb00c": 135, - "incomes": 113, - "month": 85, - "users": 113 - }, - "columnVisibility": { - "Boolean": true, - "Button": true, - "ButtonGroup": true, - "Currency": true, - "Date": true, - "DateTime": true, - "IconGroup": true, - "Image": true, - "Link": true, - "Markdown": true, - "Rating": true, - "Tag": true, - "Time": true, - "incomes": true, - "month": true, - "users": true - }, - "columns": [ - { - "accessorKey": "month", - "alignment": "left", - "backgroundColor": "{{tabs3.currentKey==\"Text\"?\"#DADCFF\":\"white\"}}", - "colorScheme": "blue", - "columnIndex": 0, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "backgroundColor": false, - "mappedValue": false - }, - "header": "Text", - "id": "month", - "mappedValue": "", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "text", - "visible": true - }, - { - "accessorKey": "column-a3a06943-7f8d-497d-8f76-791774a0081c", - "alignment": "left", - "backgroundColor": "{{tabs3.currentKey==\"Date\"?\"#DADCFF\":\"white\"}}", - "colorScheme": "blue", - "columnIndex": 1, - "custom": true, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "backgroundColor": false, - "mappedValue": false - }, - "header": "Date", - "id": "column-a3a06943-7f8d-497d-8f76-791774a0081c", - "mappedValue": "{{currentDate.value.year}}", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "date", - "visible": true - }, - { - "accessorKey": "column-be03c712-c374-48f5-8589-0b9745fee496", - "alignment": "left", - "backgroundColor": "{{tabs3.currentKey==\"Time\"?\"#DADCFF\":\"white\"}}", - "colorScheme": "blue", - "columnIndex": 2, - "custom": true, - "enableSorting": true, - "format": "HH:mm:ss", - "fromCurrentRow": { - "backgroundColor": false, - "mappedValue": false - }, - "header": "Time", - "id": "column-be03c712-c374-48f5-8589-0b9745fee496", - "mappedValue": "2023-1-1 19:45:30", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "time", - "visible": true - }, - { - "accessorKey": "column-d423fc70-360b-43b3-b93f-08f703bf2441", - "alignment": "left", - "backgroundColor": "{{tabs3.currentKey==\"DateTime\"?\"#DADCFF\":\"white\"}}", - "colorScheme": "blue", - "columnIndex": 3, - "custom": true, - "enableSorting": true, - "format": "YYYY-MM-DD HH:mm:ss", - "fromCurrentRow": { - "backgroundColor": false, - "mappedValue": false - }, - "header": "DateTime", - "id": "column-d423fc70-360b-43b3-b93f-08f703bf2441", - "mappedValue": "2023-1-1 19:45:30", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "datetime", - "visible": true - }, - { - "accessorKey": "column-b9725dc7-aea9-44f7-8679-a11c70c70b5b", - "alignment": "left", - "backgroundColor": "{{tabs3.currentKey==\"Tag\"?\"#DADCFF\":\"white\"}}", - "colorScheme": "blue", - "columnIndex": 4, - "custom": true, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "backgroundColor": false, - "mappedValue": true, - "tagLabel": true - }, - "header": "Tag", - "id": "column-b9725dc7-aea9-44f7-8679-a11c70c70b5b", - "mappedValue": "{{table11.dataSourceJS.map((currentRow) => ( currentRow.month==\"April\"?[\"a tag\",\"b tag\",\"c tag\"]:currentRow.month==\"May\"?[\"c tag\",\"d tag\"]:[\"a tag\",\"d tag\"]))}}", - "objectFit": "scale-down", - "tagColor": "auto", - "tagLabel": "{{table11.dataSourceJS.map((currentRow) => ( currentRow.month==\"April\"?[\"a tag\",\"b tag\",\"c tag\"]:currentRow.month==\"May\"?[\"c tag\",\"d tag\"]:[\"a tag\",\"d tag\"]))}}", - "type": "tag", - "visible": true - }, - { - "accessorKey": "users", - "alignment": "left", - "backgroundColor": "{{tabs3.currentKey==\"Number\"?\"#DADCFF\":\"white\"}}", - "colorScheme": "blue", - "columnIndex": 5, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "backgroundColor": false - }, - "header": "Number", - "id": "users", - "objectFit": "scale-down", - "showThousandsSeparator": true, - "tagColor": "auto", - "type": "number", - "visible": true - }, - { - "accessorKey": "incomes", - "alignment": "left", - "backgroundColor": "{{tabs3.currentKey==\"Percent\"?\"#DADCFF\":\"white\"}}", - "colorScheme": "blue", - "columnIndex": 6, - "decimalPlaces": "{{0}}", - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "backgroundColor": false, - "mappedValue": true - }, - "header": "Percent", - "id": "incomes", - "mappedValue": "{{table11.dataSourceJS.map((currentRow) => ( currentRow.incomes/10000))}}", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "percent", - "visible": true - }, - { - "accessorKey": "column-5e80ad3c-9b59-4f17-b62b-3268ebaac1d7", - "alignment": "left", - "backgroundColor": "{{tabs3.currentKey==\"Link\"?\"#DADCFF\":\"white\"}}", - "colorScheme": "blue", - "columnIndex": 7, - "custom": true, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "backgroundColor": false, - "mappedValue": false - }, - "header": "Link", - "id": "column-5e80ad3c-9b59-4f17-b62b-3268ebaac1d7", - "mappedValue": "https://www.illacloud.com", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "link", - "visible": true - }, - { - "accessorKey": "column-552369e7-25b3-4d52-ad70-64b9c8acd5ee", - "alignment": "left", - "backgroundColor": "{{tabs3.currentKey==\"Button\"?\"#DADCFF\":\"white\"}}", - "colorScheme": "grayBlue", - "columnIndex": 8, - "custom": true, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "backgroundColor": false, - "mappedValue": false - }, - "header": "Button", - "id": "column-552369e7-25b3-4d52-ad70-64b9c8acd5ee", - "mappedValue": "Button", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "button", - "visible": true - }, - { - "accessorKey": "column-8d7e23cd-0ed2-4552-b749-188b2e4d920e", - "alignment": "left", - "backgroundColor": "{{tabs3.currentKey==\"ButtonGroup\"?\"#DADCFF\":\"white\"}}", - "buttonGroupContent": [ - { - "cellValue": "Button1", - "colorScheme": "blackAlpha", - "events": [], - "id": "cell-e4a0e804-8151-4594-9db7-118a175d1498", - "index": 0, - "label": "Button1", - "variant": "fill" - }, - { - "cellValue": "Button2", - "colorScheme": "blackAlpha", - "id": "cell-a593058d-4555-4380-9f87-14f44bc6150c", - "index": 1, - "label": "Button2", - "variant": "outline" - } - ], - "colorScheme": "blue", - "columnIndex": 9, - "custom": true, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "backgroundColor": false - }, - "header": "ButtonGroup", - "id": "column-8d7e23cd-0ed2-4552-b749-188b2e4d920e", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "buttongroup", - "visible": true - }, - { - "accessorKey": "column-e8d0450e-a3e1-4ffa-a166-1a9cd97bb00c", - "alignment": "left", - "backgroundColor": "{{tabs3.currentKey==\"Boolean\"?\"#DADCFF\":\"white\"}}", - "colorScheme": "blue", - "columnIndex": 10, - "custom": true, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "backgroundColor": false, - "mappedValue": true - }, - "header": "Boolean", - "id": "column-e8d0450e-a3e1-4ffa-a166-1a9cd97bb00c", - "mappedValue": "{{table11.dataSourceJS.map((currentRow) => ( currentRow.month==\"April\"?true:false))}}", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "boolean", - "visible": true - }, - { - "accessorKey": "column-70ef68a3-7b1d-425d-92c3-207c14caeebf", - "alignment": "left", - "backgroundColor": "{{tabs3.currentKey==\"Image\"?\"#DADCFF\":\"white\"}}", - "colorScheme": "blue", - "columnIndex": 11, - "custom": true, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "backgroundColor": false, - "mappedValue": false - }, - "header": "Image", - "id": "column-70ef68a3-7b1d-425d-92c3-207c14caeebf", - "mappedValue": "https://i.dummyjson.com/data/products/8/thumbnail.jpg", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "image", - "visible": true - }, - { - "accessorKey": "column-014459e3-fc62-4308-ba4e-6e1bfcee0ef9", - "alignment": "left", - "backgroundColor": "{{tabs3.currentKey==\"IconGroup\"?\"#DADCFF\":\"white\"}}", - "buttonGroupContent": [ - { - "cellValue": "Button1", - "colorScheme": "blue", - "id": "cell-f1d472c3-7b2c-469f-b4ab-53dc50ff9b09", - "index": 0, - "label": "Button1", - "variant": "fill" - }, - { - "cellValue": "Button2", - "colorScheme": "blue", - "id": "cell-6d8ba3a3-b153-4e48-81be-0aebee2e2a01", - "index": 1, - "label": "Button2", - "variant": "fill" - } - ], - "colorScheme": "blue", - "columnIndex": 12, - "custom": true, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "backgroundColor": false - }, - "header": "IconGroup", - "iconGroupContent": [ - { - "cellValue": "BsHandThumbsUp", - "colorScheme": "grayBlue", - "id": "cell-5a9bdc94-d136-4a2a-a49b-9adb4a7d80ff", - "index": 0, - "label": "Icon1" - }, - { - "cellValue": "SlTrash", - "colorScheme": "grayBlue", - "id": "cell-c05d2ad1-094b-48b9-a55c-59034aee0238", - "index": 1, - "label": "Icon2" - }, - { - "cellValue": "SlActionRedo", - "colorScheme": "grayBlue", - "id": "cell-a83c868c-78d2-4c9f-b89e-3ba6601021ca", - "index": 2, - "label": "Icon3" - } - ], - "id": "column-014459e3-fc62-4308-ba4e-6e1bfcee0ef9", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "icongroup", - "visible": true - }, - { - "accessorKey": "column-a836c590-0019-4002-965c-a763e8cbbf7a", - "alignment": "left", - "backgroundColor": "{{tabs3.currentKey==\"Rating\"?\"#DADCFF\":\"white\"}}", - "colorScheme": "blue", - "columnIndex": 13, - "custom": true, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "backgroundColor": false, - "mappedValue": true - }, - "header": "Rating", - "id": "column-a836c590-0019-4002-965c-a763e8cbbf7a", - "mappedValue": "{{table11.dataSourceJS.map((currentRow) => ( currentRow.month==\"April\"?1:currentRow.month==\"May\"?2:currentRow.month==\"June\"?3:5))}}", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "rating", - "visible": true - }, - { - "accessorKey": "column-e3f8adff-12e5-4632-8700-16017c8cfd23", - "alignment": "left", - "backgroundColor": "{{tabs3.currentKey==\"Markdown\"?\"#DADCFF\":\"white\"}}", - "colorScheme": "blue", - "columnIndex": 14, - "custom": true, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "backgroundColor": false, - "mappedValue": true - }, - "header": "Markdown", - "id": "column-e3f8adff-12e5-4632-8700-16017c8cfd23", - "mappedValue": "{{table11.dataSourceJS.map((currentRow) => ( '## ' + currentRow.month))}}", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "markdown", - "visible": true - }, - { - "accessorKey": "column-3308598a-cd33-4a61-be10-012e5195150d", - "alignment": "left", - "backgroundColor": "{{tabs3.currentKey==\"Currency\"?\"#DADCFF\":\"white\"}}", - "colorScheme": "blue", - "columnIndex": 15, - "currencyCode": "USD", - "custom": true, - "decimalPlaces": "{{2}}", - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "backgroundColor": false, - "currencyCode": false, - "mappedValue": true - }, - "header": "Currency", - "id": "column-3308598a-cd33-4a61-be10-012e5195150d", - "mappedValue": "{{table11.dataSourceJS.map((currentRow) => ( currentRow.users))}}", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "currency", - "visible": true - } - ], - "customColumnIndices": { - "1": "Date", - "2": "Time", - "3": "DateTime", - "4": "Tag", - "7": "Link", - "8": "Button", - "9": "ButtonGroup", - "10": "Boolean", - "11": "Image", - "12": "IconGroup", - "13": "Rating", - "14": "Markdown", - "15": "Currency" - }, - "dataSourceJS": "{{[\n {\n \"month\": \"April\",\n \"users\": 3700,\n \"incomes\": 4000\n },\n {\n \"month\": \"May\",\n \"users\": 5400,\n \"incomes\": 8700\n },\n {\n \"month\": \"June\",\n \"users\": 6000,\n \"incomes\": 12000\n },\n {\n \"month\": \"July\",\n \"users\": 8000,\n \"incomes\": 14000\n }\n]}}", - "dataSourceMode": "dynamic", - "defaultSortKey": "default", - "defaultSortOrder": "ascend", - "download": false, - "emptyState": "No rows found", - "filter": false, - "overFlow": "pagination", - "pageIndex": 0, - "pageSize": "{{10}}", - "paginationOffset": 0, - "renamedColumnNames": { - "incomes": "Percent", - "month": "Text", - "users": "Number" - }, - "rowEvents": {}, - "rowSelection": { - "1": true - }, - "selectedRow": [ - { - "incomes": 8700, - "month": "May", - "users": 5400 - } - ], - "selectedRowIndex": [1] - } - } - ], - "type": "CONTAINER_NODE", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "bodySection1-bodySectionContainer2", - "parentNode": "bodySection1", - "showName": "bodySectionContainer", - "childrenNode": null, - "type": "CONTAINER_NODE", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "bodySection1-bodySectionContainer3", - "parentNode": "bodySection1", - "showName": "bodySectionContainer", - "childrenNode": [ - { - "version": 0, - "displayName": "text3", - "parentNode": "bodySection1-bodySectionContainer3", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 11, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 5, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "# Select 1 row and use row data", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "table3", - "parentNode": "bodySection1-bodySectionContainer3", - "showName": "table", - "childrenNode": null, - "type": "TABLE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 85, - "w": 19, - "minH": 3, - "minW": 1, - "x": 0, - "y": 29, - "z": 0, - "props": { - "$dynamicAttrPaths": ["dataSourceJS", "pageSize"], - "columnMapper": { - "brand": { - "accessorKey": "brand", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 6, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "brand", - "id": "brand", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "category": { - "accessorKey": "category", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 9, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "category", - "id": "category", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "description": { - "accessorKey": "description", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 3, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "description", - "id": "description", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "discountPercentage": { - "accessorKey": "discountPercentage", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 5, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "discountPercentage", - "id": "discountPercentage", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "id": { - "accessorKey": "id", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 0, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "id", - "id": "id", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "images": { - "accessorKey": "images", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 10, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "images", - "id": "images", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "image", - "visible": true - }, - "price": { - "accessorKey": "price", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 4, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "mappedValue": false - }, - "header": "price", - "id": "price", - "mappedValue": "", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "rating": { - "accessorKey": "rating", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 7, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "rating", - "id": "rating", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "stock": { - "accessorKey": "stock", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 8, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "stock", - "id": "stock", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "thumbnail": { - "accessorKey": "thumbnail", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 1, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "thumbnail", - "id": "thumbnail", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "title": { - "accessorKey": "title", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 2, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "title", - "id": "title", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "text", - "visible": true - } - }, - "columnNameIndices": { - "0": "id", - "1": "thumbnail", - "2": "title", - "3": "description", - "4": "price", - "5": "discountPercentage", - "6": "brand", - "7": "rating", - "8": "stock", - "9": "category", - "10": "images" - }, - "columnSizing": { - "id": 72 - }, - "columnVisibility": { - "brand": true, - "category": true, - "description": true, - "discountPercentage": true, - "id": true, - "images": true, - "price": true, - "rating": true, - "stock": true, - "thumbnail": true, - "title": true - }, - "columns": [ - { - "accessorKey": "id", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 0, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "id", - "id": "id", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "thumbnail", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 1, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "thumbnail", - "id": "thumbnail", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "title", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 2, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "title", - "id": "title", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "text", - "visible": true - }, - { - "accessorKey": "description", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 3, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "description", - "id": "description", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "price", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 4, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "mappedValue": false - }, - "header": "price", - "id": "price", - "mappedValue": "", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "discountPercentage", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 5, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "discountPercentage", - "id": "discountPercentage", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "brand", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 6, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "brand", - "id": "brand", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "rating", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 7, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "rating", - "id": "rating", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "stock", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 8, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "stock", - "id": "stock", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "category", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 9, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "category", - "id": "category", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "images", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 10, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "images", - "id": "images", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "image", - "visible": true - } - ], - "customColumnIndices": {}, - "dataSourceJS": "{{list_all_products.data.products}}", - "dataSourceMode": "dynamic", - "defaultSortKey": "default", - "defaultSortOrder": "ascend", - "download": false, - "emptyState": "No rows found", - "filter": false, - "overFlow": "pagination", - "pageIndex": 0, - "pageSize": "{{10}}", - "paginationOffset": 0, - "renamedColumnNames": {}, - "rowEvents": {}, - "rowSelection": { - "2": true - }, - "selectedRow": [ - { - "brand": "Samsung", - "category": "smartphones", - "description": "Samsung's new variant which goes beyond Galaxy to the Universe", - "discountPercentage": 15.46, - "id": 3, - "images": [ - "https://i.dummyjson.com/data/products/3/1.jpg" - ], - "price": 1249, - "rating": 4.09, - "stock": 36, - "thumbnail": "https://i.dummyjson.com/data/products/3/thumbnail.jpg", - "title": "Samsung Universe 9" - } - ], - "selectedRowIndex": [2] - } - }, - { - "version": 0, - "displayName": "form1", - "parentNode": "bodySection1-bodySectionContainer3", - "showName": "form", - "childrenNode": [ - { - "version": 0, - "displayName": "canvas1", - "parentNode": "form1", - "showName": "canvas", - "childrenNode": [ - { - "version": 0, - "displayName": "text4", - "parentNode": "canvas1", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 2, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "fixed", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "ALL", - "value": "### Data of Selected Row", - "verticalAlign": "center" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "canvas2", - "parentNode": "form1", - "showName": "canvas", - "childrenNode": [ - { - "version": 0, - "displayName": "input1", - "parentNode": "canvas2", - "showName": "input", - "childrenNode": null, - "type": "INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 1, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "showVisibleButton", - "disabled", - "value" - ], - "colorScheme": "blue", - "disabled": "{{true}}", - "formDataKey": "id", - "hidden": false, - "label": "id", - "labelAlign": "left", - "labelPosition": "left", - "labelWidth": "{{33}}", - "placeholder": "input sth", - "showVisibleButton": "{{true}}", - "type": "input", - "value": "{{table3.selectedRow[0].id.toString()}}" - } - }, - { - "version": 0, - "displayName": "input2", - "parentNode": "canvas2", - "showName": "input", - "childrenNode": null, - "type": "INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 6, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "showVisibleButton", - "value" - ], - "colorScheme": "blue", - "formDataKey": "title", - "hidden": false, - "label": "title", - "labelAlign": "left", - "labelPosition": "left", - "labelWidth": "{{33}}", - "placeholder": "input sth", - "showVisibleButton": "{{true}}", - "type": "input", - "value": "{{table3.selectedRow[0].title}}" - } - }, - { - "version": 0, - "displayName": "input5", - "parentNode": "canvas2", - "showName": "input", - "childrenNode": null, - "type": "INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 24, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "showVisibleButton", - "value" - ], - "colorScheme": "blue", - "formDataKey": "thumbnail", - "hidden": false, - "label": "discountPercentage", - "labelAlign": "left", - "labelPosition": "left", - "labelWidth": "{{33}}", - "placeholder": "input sth", - "showVisibleButton": "{{true}}", - "type": "input", - "value": "{{table3.selectedRow[0].discountPercentage.toString()}}" - } - }, - { - "version": 0, - "displayName": "input6", - "parentNode": "canvas2", - "showName": "input", - "childrenNode": null, - "type": "INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 19, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "showVisibleButton", - "value" - ], - "colorScheme": "blue", - "formDataKey": "price", - "hidden": false, - "label": "price", - "labelAlign": "left", - "labelPosition": "left", - "labelWidth": "{{33}}", - "placeholder": "input sth", - "showVisibleButton": "{{true}}", - "type": "input", - "value": "{{table3.selectedRow[0].price.toString()}}" - } - }, - { - "version": 0, - "displayName": "select1", - "parentNode": "canvas2", - "showName": "select", - "childrenNode": null, - "type": "SELECT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 44, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "mappedOption.labels", - "dataSources", - "mappedOption.values", - "value" - ], - "colorScheme": "blue", - "dataSources": "{{[{ category: \"smartphones\" }, { category: \"laptops\" }, { category: \"fragrances\" }, { category: \"skincare\" }, { category: \"groceries\" }, { category: \"home-decoration\" }]}}", - "formDataKey": "categor", - "hidden": false, - "label": "category", - "labelAlign": "left", - "labelPosition": "left", - "labelWidth": "{{33}}", - "manualOptions": [ - { - "id": "option-f051a2f8-0086-4f0c-96d4-0bc68fe47ee6", - "label": "Option 1", - "value": "Option 1" - }, - { - "id": "option-12656077-b156-41b3-ace3-680324093f74", - "label": "Option 2", - "value": "Option 2" - }, - { - "id": "option-2d2e97b2-c0f7-45bd-bfea-d28a48d000d6", - "label": "Option 3", - "value": "Option 3" - } - ], - "mappedOption": { - "disables": "", - "labels": "{{select1.dataSources.map((item) => ( item.category))}}", - "values": "{{select1.dataSources.map((item) => ( item.category))}}" - }, - "optionConfigureMode": "dynamic", - "value": "{{table3.selectedRow[0].category}}" - } - }, - { - "version": 0, - "displayName": "input3", - "parentNode": "canvas2", - "showName": "input", - "childrenNode": null, - "type": "INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 34, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "showVisibleButton", - "value" - ], - "colorScheme": "blue", - "formDataKey": "rating", - "hidden": false, - "label": "rating", - "labelAlign": "left", - "labelPosition": "left", - "labelWidth": "{{33}}", - "placeholder": "input sth", - "showVisibleButton": "{{true}}", - "type": "input", - "value": "{{table3.selectedRow[0].rating.toString()}}" - } - }, - { - "version": 0, - "displayName": "input4", - "parentNode": "canvas2", - "showName": "input", - "childrenNode": null, - "type": "INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 39, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "showVisibleButton", - "value" - ], - "colorScheme": "blue", - "formDataKey": "stock", - "hidden": false, - "label": "stock", - "labelAlign": "left", - "labelPosition": "left", - "labelWidth": "{{33}}", - "placeholder": "input sth", - "showVisibleButton": "{{true}}", - "type": "input", - "value": "{{table3.selectedRow[0].stock.toString()}}" - } - }, - { - "version": 0, - "displayName": "select2", - "parentNode": "canvas2", - "showName": "select", - "childrenNode": null, - "type": "SELECT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 29, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "mappedOption.labels", - "mappedOption.values", - "value", - "dataSources" - ], - "colorScheme": "blue", - "dataSources": "{{[{ brand: \"Apple\" }, { brand: \"Samsung\" }, { brand: \"OPPO\" }, { brand: \"Huawei\" }, { brand: \"Microsoft Surface\" }, { brand: \"Infinix\" }, { brand: \"HP Pavilion\" }, { brand: \"Impression of Acqua Di Gio\" }, { brand: \"Royal_Mirage\" }, { brand: \"Fog Scent Xpressio\" }, { brand: \"Al Munakh\" }, { brand: \"Lord - Al-Rehab\" }, { brand: \"L'Oreal Paris\" }, { brand: \"Hemani Tea\" }, { brand: \"Dermive\" }, { brand: \"ROREC White Rice\" }, { brand: \"Fair & Clear\" }, { brand: \"Saaf & Khaas\" }, { brand: \"Bake Parlor Big\" }, { brand: \"Baking Food Items\" }, { brand: \"fauji\" }, { brand: \"Dry Rose\" }, { brand: \"Boho Decor\" }, { brand: \"Flying Wooden\" }, { brand: \"LED Lights\" }, { brand: \"luxury palace\" }, { brand: \"Golden\" }]}}", - "formDataKey": "brand", - "hidden": false, - "label": "brand", - "labelAlign": "left", - "labelPosition": "left", - "labelWidth": "{{33}}", - "manualOptions": [ - { - "id": "option-f051a2f8-0086-4f0c-96d4-0bc68fe47ee6", - "label": "Option 1", - "value": "Option 1" - }, - { - "id": "option-12656077-b156-41b3-ace3-680324093f74", - "label": "Option 2", - "value": "Option 2" - }, - { - "id": "option-2d2e97b2-c0f7-45bd-bfea-d28a48d000d6", - "label": "Option 3", - "value": "Option 3" - } - ], - "mappedOption": { - "labels": "{{select2.dataSources.map((item) => ( item.brand))}}", - "values": "{{select2.dataSources.map((item) => ( item.brand))}}" - }, - "optionConfigureMode": "dynamic", - "value": "{{table3.selectedRow[0].brand}}" - } - }, - { - "version": 0, - "displayName": "input8", - "parentNode": "canvas2", - "showName": "input", - "childrenNode": null, - "type": "INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 49, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "showVisibleButton", - "value" - ], - "colorScheme": "blue", - "formDataKey": "thumbnail", - "hidden": false, - "label": "thumbnail", - "labelAlign": "left", - "labelPosition": "left", - "labelWidth": "{{33}}", - "placeholder": "input sth", - "showVisibleButton": "{{true}}", - "type": "input", - "value": "{{table3.selectedRow[0].thumbnail}}" - } - }, - { - "version": 0, - "displayName": "textarea1", - "parentNode": "canvas2", - "showName": "textarea", - "childrenNode": null, - "type": "TEXTAREA_INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 8, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 11, - "z": 0, - "props": { - "$dynamicAttrPaths": ["labelWidth", "value"], - "colorScheme": "blue", - "dynamicHeight": "limited", - "dynamicMaxHeight": 144, - "dynamicMinHeight": 64, - "formDataKey": "description", - "hidden": false, - "label": "description", - "labelAlign": "left", - "labelPosition": "left", - "labelWidth": "{{33}}", - "placeholder": "enter sth", - "resizeDirection": "HORIZONTAL", - "value": "{{table3.selectedRow[0].description}}" - } - }, - { - "version": 0, - "displayName": "input7", - "parentNode": "canvas2", - "showName": "input", - "childrenNode": null, - "type": "INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 57, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "showVisibleButton", - "value" - ], - "colorScheme": "blue", - "formDataKey": "images", - "hidden": false, - "label": "images", - "labelAlign": "left", - "labelPosition": "left", - "labelWidth": "{{33}}", - "placeholder": "input sth", - "showVisibleButton": "{{true}}", - "type": "input", - "value": "{{table3.selectedRow[0].images.toString()}}" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "canvas3", - "parentNode": "form1", - "showName": "canvas", - "childrenNode": [ - { - "version": 0, - "displayName": "button1", - "parentNode": "canvas3", - "showName": "button", - "childrenNode": null, - "type": "BUTTON_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 8, - "minH": 3, - "minW": 1, - "x": 24, - "y": 0, - "z": 0, - "props": { - "$dynamicAttrPaths": ["loading"], - "colorScheme": "blue", - "events": [ - { - "actionType": "datasource", - "eventType": "click", - "id": "20fa35fe-2b5b-49bf-a71f-291212f6c8ff", - "queryID": "update_product" - } - ], - "hidden": false, - "loading": "{{update_product.isRunning}}", - "text": "Fake update", - "variant": "fill" - } - }, - { - "version": 0, - "displayName": "button2", - "parentNode": "canvas3", - "showName": "button", - "childrenNode": null, - "type": "BUTTON_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 8, - "minH": 3, - "minW": 1, - "x": 16, - "y": 0, - "z": 0, - "props": { - "$dynamicAttrPaths": ["loading"], - "colorScheme": "blue", - "events": [ - { - "actionType": "datasource", - "eventType": "click", - "id": "events-7e7b8dd6-e4ac-45d0-a577-5e8cd48b3b46", - "queryID": "delete_product" - } - ], - "hidden": false, - "loading": "{{delete_product.isRunning}}", - "text": "Fake delete", - "variant": "outline" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "FORM_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 85, - "w": 12, - "minH": 3, - "minW": 1, - "x": 20, - "y": 29, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "backgroundColor": "#ffffffff", - "borderColor": "#ffffffff", - "borderWidth": "4px", - "footerHeight": 7, - "headerHeight": 11, - "radius": "4px", - "resetAfterSuccessful": true, - "shadow": "small", - "showFooter": true, - "showHeader": true, - "validateInputsOnSubmit": true - } - }, - { - "version": 0, - "displayName": "divider2", - "parentNode": "bodySection1-bodySectionContainer3", - "showName": "divider", - "childrenNode": null, - "type": "DIVIDER_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 24, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "fs": "14px", - "hidden": false - } - }, - { - "version": 0, - "displayName": "text21", - "parentNode": "bodySection1-bodySectionContainer3", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 17, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "selectedRow is an array of objects. The object contains data for each column of the selected row. \n When the table only allows selecting one row, you can use table1.selectedRow[0] to get the data of the selected row.", - "verticalAlign": "center" - } - } - ], - "type": "CONTAINER_NODE", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "bodySection1-bodySectionContainer4", - "parentNode": "bodySection1", - "showName": "bodySectionContainer", - "childrenNode": [ - { - "version": 0, - "displayName": "text5", - "parentNode": "bodySection1-bodySectionContainer4", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 11, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 5, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "# Select multiple rows and use row data", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "table4", - "parentNode": "bodySection1-bodySectionContainer4", - "showName": "table", - "childrenNode": null, - "type": "TABLE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 85, - "w": 19, - "minH": 3, - "minW": 1, - "x": 0, - "y": 30, - "z": 0, - "props": { - "$dynamicAttrPaths": ["dataSourceJS", "pageSize"], - "columnMapper": { - "brand": { - "accessorKey": "brand", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 5, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "brand", - "id": "brand", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "category": { - "accessorKey": "category", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 9, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "category", - "id": "category", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": false - }, - "description": { - "accessorKey": "description", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 2, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "description", - "id": "description", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "discountPercentage": { - "accessorKey": "discountPercentage", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 4, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "discountPercentage", - "id": "discountPercentage", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "id": { - "accessorKey": "id", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 0, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "id", - "id": "id", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "images": { - "accessorKey": "images", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 10, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "images", - "id": "images", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "image", - "visible": false - }, - "price": { - "accessorKey": "price", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 3, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "mappedValue": false - }, - "header": "price", - "id": "price", - "mappedValue": "", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "rating": { - "accessorKey": "rating", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 6, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "rating", - "id": "rating", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "stock": { - "accessorKey": "stock", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 7, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "stock", - "id": "stock", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "thumbnail": { - "accessorKey": "thumbnail", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 8, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "thumbnail", - "id": "thumbnail", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": false - }, - "title": { - "accessorKey": "title", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 1, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "title", - "id": "title", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "text", - "visible": true - } - }, - "columnNameIndices": { - "0": "id", - "1": "title", - "2": "description", - "3": "price", - "4": "discountPercentage", - "5": "brand", - "6": "rating", - "7": "stock", - "8": "thumbnail", - "9": "category", - "10": "images" - }, - "columnSizing": { - "id": 72 - }, - "columnVisibility": { - "brand": true, - "category": false, - "description": true, - "discountPercentage": true, - "id": true, - "images": false, - "price": true, - "rating": true, - "stock": true, - "thumbnail": false, - "title": true - }, - "columns": [ - { - "accessorKey": "id", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 0, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "id", - "id": "id", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "title", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 1, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "title", - "id": "title", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "text", - "visible": true - }, - { - "accessorKey": "description", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 2, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "description", - "id": "description", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "price", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 3, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "mappedValue": false - }, - "header": "price", - "id": "price", - "mappedValue": "", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "discountPercentage", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 4, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "discountPercentage", - "id": "discountPercentage", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "brand", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 5, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "brand", - "id": "brand", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "rating", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 6, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "rating", - "id": "rating", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "stock", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 7, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "stock", - "id": "stock", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "thumbnail", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 8, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "thumbnail", - "id": "thumbnail", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": false - }, - { - "accessorKey": "category", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 9, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "category", - "id": "category", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": false - }, - { - "accessorKey": "images", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 10, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "images", - "id": "images", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "image", - "visible": false - } - ], - "customColumnIndices": {}, - "dataSourceJS": "{{list_all_products.data.products}}", - "dataSourceMode": "dynamic", - "defaultSortKey": "default", - "defaultSortOrder": "ascend", - "download": false, - "emptyState": "No rows found", - "filter": false, - "multiRowSelection": true, - "overFlow": "pagination", - "pageIndex": 0, - "pageSize": "{{10}}", - "paginationOffset": 0, - "renamedColumnNames": {}, - "rowEvents": {}, - "rowSelection": { - "0": true, - "1": true, - "2": true, - "3": true - }, - "selectedRow": [ - { - "brand": "Apple", - "category": "smartphones", - "description": "An apple mobile which is nothing like apple", - "discountPercentage": 12.96, - "id": 1, - "images": [ - "https://i.dummyjson.com/data/products/1/1.jpg", - "https://i.dummyjson.com/data/products/1/2.jpg", - "https://i.dummyjson.com/data/products/1/3.jpg", - "https://i.dummyjson.com/data/products/1/4.jpg", - "https://i.dummyjson.com/data/products/1/thumbnail.jpg" - ], - "price": 549, - "rating": 4.69, - "stock": 94, - "thumbnail": "https://i.dummyjson.com/data/products/1/thumbnail.jpg", - "title": "iPhone 9" - }, - { - "brand": "Apple", - "category": "smartphones", - "description": "SIM-Free, Model A19211 6.5-inch Super Retina HD display with OLED technology A12 Bionic chip with ...", - "discountPercentage": 17.94, - "id": 2, - "images": [ - "https://i.dummyjson.com/data/products/2/1.jpg", - "https://i.dummyjson.com/data/products/2/2.jpg", - "https://i.dummyjson.com/data/products/2/3.jpg", - "https://i.dummyjson.com/data/products/2/thumbnail.jpg" - ], - "price": 899, - "rating": 4.44, - "stock": 34, - "thumbnail": "https://i.dummyjson.com/data/products/2/thumbnail.jpg", - "title": "iPhone X" - }, - { - "brand": "Samsung", - "category": "smartphones", - "description": "Samsung's new variant which goes beyond Galaxy to the Universe", - "discountPercentage": 15.46, - "id": 3, - "images": [ - "https://i.dummyjson.com/data/products/3/1.jpg" - ], - "price": 1249, - "rating": 4.09, - "stock": 36, - "thumbnail": "https://i.dummyjson.com/data/products/3/thumbnail.jpg", - "title": "Samsung Universe 9" - }, - { - "brand": "OPPO", - "category": "smartphones", - "description": "OPPO F19 is officially announced on April 2021.", - "discountPercentage": 17.91, - "id": 4, - "images": [ - "https://i.dummyjson.com/data/products/4/1.jpg", - "https://i.dummyjson.com/data/products/4/2.jpg", - "https://i.dummyjson.com/data/products/4/3.jpg", - "https://i.dummyjson.com/data/products/4/4.jpg", - "https://i.dummyjson.com/data/products/4/thumbnail.jpg" - ], - "price": 280, - "rating": 4.3, - "stock": 123, - "thumbnail": "https://i.dummyjson.com/data/products/4/thumbnail.jpg", - "title": "OPPOF19" - } - ], - "selectedRowIndex": [0, 1, 2, 3] - } - }, - { - "version": 0, - "displayName": "list1", - "parentNode": "bodySection1-bodySectionContainer4", - "showName": "list", - "childrenNode": [ - { - "version": 0, - "displayName": "canvas4", - "parentNode": "list1", - "showName": "canvas", - "childrenNode": [ - { - "version": 0, - "displayName": "input9", - "parentNode": "canvas4", - "showName": "input", - "childrenNode": null, - "type": "INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 26, - "minH": 3, - "minW": 1, - "x": 6, - "y": 0, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "formDataKey", - "showVisibleButton", - "readOnly", - "value" - ], - "colorScheme": "blue", - "disabled": "", - "formDataKey": "{{input9.displayName}}", - "hidden": false, - "label": "brand", - "labelAlign": "left", - "labelPosition": "left", - "labelWidth": "{{33}}", - "placeholder": "input sth", - "readOnly": "{{true}}", - "showVisibleButton": "{{true}}", - "type": "input", - "value": "{{list1.dataSources.map((currentItem) => (currentItem.brand))}}" - } - }, - { - "version": 0, - "displayName": "input10", - "parentNode": "canvas4", - "showName": "input", - "childrenNode": null, - "type": "INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 26, - "minH": 3, - "minW": 1, - "x": 6, - "y": 5, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "formDataKey", - "showVisibleButton", - "readOnly", - "value" - ], - "colorScheme": "blue", - "disabled": "", - "formDataKey": "{{input9.displayName}}", - "hidden": false, - "label": "title", - "labelAlign": "left", - "labelPosition": "left", - "labelWidth": "{{33}}", - "placeholder": "input sth", - "readOnly": "{{true}}", - "showVisibleButton": "{{true}}", - "type": "input", - "value": "{{list1.dataSources.map((currentItem) => (currentItem.title))}}" - } - }, - { - "version": 0, - "displayName": "input11", - "parentNode": "canvas4", - "showName": "input", - "childrenNode": null, - "type": "INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 26, - "minH": 3, - "minW": 1, - "x": 6, - "y": 10, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "value", - "labelWidth", - "formDataKey", - "showVisibleButton", - "readOnly" - ], - "colorScheme": "blue", - "disabled": "", - "formDataKey": "{{input9.displayName}}", - "hidden": false, - "label": "description", - "labelAlign": "left", - "labelPosition": "left", - "labelWidth": "{{33}}", - "placeholder": "input sth", - "readOnly": "{{true}}", - "showVisibleButton": "{{true}}", - "type": "input", - "value": "{{list1.dataSources.map((currentItem) => (currentItem.description))}}" - } - }, - { - "version": 0, - "displayName": "image1", - "parentNode": "canvas4", - "showName": "image", - "childrenNode": null, - "type": "IMAGE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 9, - "w": 5, - "minH": 3, - "minW": 1, - "x": 0, - "y": 0, - "z": 0, - "props": { - "$dynamicAttrPaths": ["imageSrc"], - "hidden": false, - "imageSrc": "{{list1.dataSources.map((currentItem) => (currentItem.thumbnail))}}", - "objectFit": "scale-down", - "radius": "0px" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "LIST_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 85, - "w": 13, - "minH": 3, - "minW": 1, - "x": 19, - "y": 30, - "z": 0, - "props": { - "$dynamicAttrPaths": ["pageSize", "dataSources"], - "backgroundColor": "white", - "dataSources": "{{table4.selectedRow}}", - "dynamicHeight": "fixed", - "itemBackGroundColor": "white", - "itemHeight": 138, - "overflowMethod": "SCROLL", - "pageSize": "{{6}}", - "resizeDirection": "ALL" - } - }, - { - "version": 0, - "displayName": "text22", - "parentNode": "bodySection1-bodySectionContainer4", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 8, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 17, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "selectedRow is an array of objects. \n \n When the table allows selecting multiple row, you can use table1.selectedRow to get the data of the selected rows. \n Try to select multiple rows in the table below👇", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "divider4", - "parentNode": "bodySection1-bodySectionContainer4", - "showName": "divider", - "childrenNode": null, - "type": "DIVIDER_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 25, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "fs": "14px", - "hidden": false - } - } - ], - "type": "CONTAINER_NODE", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "bodySection1-bodySectionContainer5", - "parentNode": "bodySection1", - "showName": "bodySectionContainer", - "childrenNode": [ - { - "version": 0, - "displayName": "text6", - "parentNode": "bodySection1-bodySectionContainer5", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 11, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 5, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "# Select a cell and use the data", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "table5", - "parentNode": "bodySection1-bodySectionContainer5", - "showName": "table", - "childrenNode": null, - "type": "TABLE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 85, - "w": 19, - "minH": 3, - "minW": 1, - "x": 0, - "y": 30, - "z": 0, - "props": { - "$dynamicAttrPaths": ["dataSourceJS", "pageSize"], - "columnMapper": { - "brand": { - "accessorKey": "brand", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 5, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "brand", - "id": "brand", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "category": { - "accessorKey": "category", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 9, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "category", - "id": "category", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "description": { - "accessorKey": "description", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 2, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "description", - "id": "description", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "discountPercentage": { - "accessorKey": "discountPercentage", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 4, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "discountPercentage", - "id": "discountPercentage", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "id": { - "accessorKey": "id", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 0, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "id", - "id": "id", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "images": { - "accessorKey": "images", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 10, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "images", - "id": "images", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "image", - "visible": true - }, - "price": { - "accessorKey": "price", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 3, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "mappedValue": false - }, - "header": "price", - "id": "price", - "mappedValue": "", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "rating": { - "accessorKey": "rating", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 6, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "rating", - "id": "rating", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "stock": { - "accessorKey": "stock", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 7, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "stock", - "id": "stock", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "thumbnail": { - "accessorKey": "thumbnail", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 8, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "thumbnail", - "id": "thumbnail", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "title": { - "accessorKey": "title", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 1, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "title", - "id": "title", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "text", - "visible": true - } - }, - "columnNameIndices": { - "0": "id", - "1": "title", - "2": "description", - "3": "price", - "4": "discountPercentage", - "5": "brand", - "6": "rating", - "7": "stock", - "8": "thumbnail", - "9": "category", - "10": "images" - }, - "columnSizing": { - "id": 72 - }, - "columnVisibility": { - "brand": true, - "category": true, - "description": true, - "discountPercentage": true, - "id": true, - "images": true, - "price": true, - "rating": true, - "stock": true, - "thumbnail": true, - "title": true - }, - "columns": [ - { - "accessorKey": "id", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 0, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "id", - "id": "id", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "title", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 1, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "title", - "id": "title", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "text", - "visible": true - }, - { - "accessorKey": "description", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 2, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "description", - "id": "description", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "price", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 3, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "mappedValue": false - }, - "header": "price", - "id": "price", - "mappedValue": "", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "discountPercentage", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 4, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "discountPercentage", - "id": "discountPercentage", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "brand", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 5, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "brand", - "id": "brand", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "rating", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 6, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "rating", - "id": "rating", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "stock", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 7, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "stock", - "id": "stock", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "thumbnail", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 8, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "thumbnail", - "id": "thumbnail", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "category", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 9, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "category", - "id": "category", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "images", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 10, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "images", - "id": "images", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "image", - "visible": true - } - ], - "customColumnIndices": {}, - "dataSourceJS": "{{list_all_products.data.products}}", - "dataSourceMode": "dynamic", - "defaultSortKey": "default", - "defaultSortOrder": "ascend", - "download": false, - "emptyState": "No rows found", - "enableSingleCellSelection": true, - "filter": false, - "overFlow": "pagination", - "pageIndex": 0, - "pageSize": "{{10}}", - "paginationOffset": 0, - "renamedColumnNames": {}, - "rowEvents": {}, - "rowSelection": { - "1": true - }, - "selectedRow": [ - { - "brand": "Apple", - "category": "smartphones", - "description": "SIM-Free, Model A19211 6.5-inch Super Retina HD display with OLED technology A12 Bionic chip with ...", - "discountPercentage": 17.94, - "id": 2, - "images": [ - "https://i.dummyjson.com/data/products/2/1.jpg", - "https://i.dummyjson.com/data/products/2/2.jpg", - "https://i.dummyjson.com/data/products/2/3.jpg", - "https://i.dummyjson.com/data/products/2/thumbnail.jpg" - ], - "price": 899, - "rating": 4.44, - "stock": 34, - "thumbnail": "https://i.dummyjson.com/data/products/2/thumbnail.jpg", - "title": "iPhone X" - } - ], - "selectedRowIndex": [1] - } - }, - { - "version": 0, - "displayName": "input12", - "parentNode": "bodySection1-bodySectionContainer5", - "showName": "input", - "childrenNode": null, - "type": "INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 8, - "w": 13, - "minH": 3, - "minW": 1, - "x": 19, - "y": 43, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "formDataKey", - "showVisibleButton", - "value" - ], - "colorScheme": "blue", - "formDataKey": "{{input12.displayName}}", - "hidden": false, - "label": "Selected cell value", - "labelAlign": "left", - "labelPosition": "top", - "labelWidth": "{{33}}", - "placeholder": "input sth", - "showVisibleButton": "{{true}}", - "type": "input", - "value": "{{table5.selectedCell.value.toString()}}" - } - }, - { - "version": 0, - "displayName": "button3", - "parentNode": "bodySection1-bodySectionContainer5", - "showName": "button", - "childrenNode": null, - "type": "BUTTON_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 5, - "minH": 3, - "minW": 1, - "x": 27, - "y": 53, - "z": 0, - "props": { - "$dynamicAttrPaths": ["loading"], - "colorScheme": "blue", - "events": [ - { - "actionType": "datasource", - "eventType": "click", - "id": "events-3600d4eb-6a13-4568-bbe6-0de3e15ff3ee", - "queryID": "update_row_via_select_cell" - } - ], - "hidden": false, - "loading": "{{update_row_via_select_cell.isRunning}}", - "text": "Fake update", - "variant": "fill" - } - }, - { - "version": 0, - "displayName": "button4", - "parentNode": "bodySection1-bodySectionContainer5", - "showName": "button", - "childrenNode": null, - "type": "BUTTON_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 5, - "minH": 3, - "minW": 1, - "x": 22, - "y": 53, - "z": 0, - "props": { - "$dynamicAttrPaths": ["loading"], - "colorScheme": "blue", - "events": [ - { - "actionType": "datasource", - "eventType": "click", - "id": "events-7a3a43e3-79f3-42ee-b7e6-09acd770d0af", - "queryID": "delete_row_via_select_cell" - } - ], - "hidden": false, - "loading": "{{delete_row_via_select_cell.isRunning}}", - "text": "Fake delete row", - "variant": "outline" - } - }, - { - "version": 0, - "displayName": "text23", - "parentNode": "bodySection1-bodySectionContainer5", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 8, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 17, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "### Useful data\n**selectedCell**: an object contains 3 attribute: \n\n1. index: the index of the row containing the cell in the data source is not affected by filtering, sorting, or other operations.\n\n 2. columnName: the column name of the cell's column. This is the column name provided by the data source, and changing the displayed column name only through the inspect panel will not affect this value.\n\n3. value: the original value returned by the data source\n\n4. mappedValue: when a mapped value has been set, the mapped value.\n\n### How to use it\n1. Use `table1.selectedCell.value` to get the value\n2. Use `table1.dataSourceJS[table5.selectedCell.index].id` to get the data on the same row (the example statement is get id) . ", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "divider5", - "parentNode": "bodySection1-bodySectionContainer5", - "showName": "divider", - "childrenNode": null, - "type": "DIVIDER_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 25, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "fs": "14px", - "hidden": false - } - } - ], - "type": "CONTAINER_NODE", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "bodySection1-bodySectionContainer6", - "parentNode": "bodySection1", - "showName": "bodySectionContainer", - "childrenNode": [ - { - "version": 0, - "displayName": "table2", - "parentNode": "bodySection1-bodySectionContainer6", - "showName": "table", - "childrenNode": null, - "type": "TABLE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 85, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 201, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "dataSourceJS", - "pageSize", - "totalRowCount", - "loading" - ], - "columnMapper": { - "brand": { - "accessorKey": "brand", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 7, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "brand", - "id": "brand", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "category": { - "accessorKey": "category", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 8, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "category", - "id": "category", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "description": { - "accessorKey": "description", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 2, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "description", - "id": "description", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "discountPercentage": { - "accessorKey": "discountPercentage", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 4, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "discountPercentage", - "id": "discountPercentage", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "id": { - "accessorKey": "id", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 0, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "id", - "id": "id", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "images": { - "accessorKey": "images", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 10, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "images", - "id": "images", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "price": { - "accessorKey": "price", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 3, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "price", - "id": "price", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "rating": { - "accessorKey": "rating", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 5, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "rating", - "id": "rating", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "stock": { - "accessorKey": "stock", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 6, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "stock", - "id": "stock", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "thumbnail": { - "accessorKey": "thumbnail", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 9, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "thumbnail", - "id": "thumbnail", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "title": { - "accessorKey": "title", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 1, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "title", - "id": "title", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - } - }, - "columnNameIndices": { - "0": "id", - "1": "title", - "2": "description", - "3": "price", - "4": "discountPercentage", - "5": "rating", - "6": "stock", - "7": "brand", - "8": "category", - "9": "thumbnail", - "10": "images" - }, - "columnSizing": { - "id": 72 - }, - "columnVisibility": { - "brand": true, - "category": true, - "description": true, - "discountPercentage": true, - "id": true, - "images": true, - "price": true, - "rating": true, - "stock": true, - "thumbnail": true, - "title": true - }, - "columns": [ - { - "accessorKey": "id", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 0, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "id", - "id": "id", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "title", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 1, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "title", - "id": "title", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "description", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 2, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "description", - "id": "description", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "price", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 3, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "price", - "id": "price", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "discountPercentage", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 4, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "discountPercentage", - "id": "discountPercentage", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "rating", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 5, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "rating", - "id": "rating", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "stock", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 6, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "stock", - "id": "stock", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "brand", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 7, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "brand", - "id": "brand", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "category", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 8, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "category", - "id": "category", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "thumbnail", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 9, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "thumbnail", - "id": "thumbnail", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "images", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 10, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "images", - "id": "images", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - } - ], - "customColumnIndices": {}, - "dataSourceJS": "{{serverside_pagination.data.products}}", - "dataSourceMode": "dynamic", - "defaultSortKey": "default", - "defaultSortOrder": "ascend", - "download": false, - "emptyState": "No rows found", - "enableServerSidePagination": true, - "enableServerSidePaginationDynamic": false, - "events": [ - { - "actionType": "datasource", - "eventType": "paginationChange", - "id": "events-b3ff44cf-862b-49ec-9155-134431001dd1", - "queryID": "serverside_pagination" - } - ], - "filter": false, - "loading": "{{serverside_pagination.isRunning}}", - "loadingDynamic": true, - "overFlow": "pagination", - "pageIndex": 0, - "pageSize": "{{10}}", - "paginationOffset": 0, - "paginationType": "limitOffsetBased", - "renamedColumnNames": {}, - "rowEvents": {}, - "rowSelection": {}, - "selectedRow": [], - "selectedRowIndex": [], - "totalRowCount": "{{list_all_products.data.products.length}}" - } - }, - { - "version": 0, - "displayName": "text2", - "parentNode": "bodySection1-bodySectionContainer6", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 11, - "w": 31, - "minH": 3, - "minW": 1, - "x": 0, - "y": 5, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "# Server-side pagination", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "text25", - "parentNode": "bodySection1-bodySectionContainer6", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 36, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 17, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "To use server-side pagination, you need to first turn on the server-side pagination switch from the inspect panel on the right.\nWe support three types of server-side pagination: `limit-offset based`, `cursor-based`, and `GraphQL Relay cursor-based`.\n\n### Limit offset based\n\n#### Required fields on the inspect panel\n\n**Total row count**: to set the total rows the table will display. It is used to count how many pages and whether there is the next page.\nYou can set it via a query like `select count(*) from t1`. If the data source of the table has some filters like `where t1.dt>=\"2023-01-01\"`, the query used in total row count should be the same like `select count(*) from t1 where t1.dt>=\"2023-01-01`. \n**PageSize**: to set how many rows in 1 page.\n\n#### Useful data\n\n**pageSize**: a number used to set limit in query \n \n**pageIndex**: current page index. a number start from 0. For example, when the page number is 2, the index will be 1. Use {\\{table1.pageIndex*table1.pageSize}} to set offset or skip in query.\n\n#### How to use it\n\n##### SQL\n\n```\nselect *\nfrom t1\nlimit {\\{table1.pageSize}}\noffset {\\{table1.pageIndex*table1.pageSize}}\n```\nThe inspect panel: \n1. Enable serverside pagination\n2. Change the mode to limit-offset based\n3. Total rows(you can alse use count(*) in SQL statement to count the total rows): {\\{list_all_products.data.products.length}} \n4. PageSize: set a number such as {\\{10}}\n\n##### API\n\n***This syntax may vary based on different APIs.***\n\n```\n?limit={\\{table2.pageSize}}&skip={\\{table2.pageIndex*table2.pageSize}}\n```\n\n### Cursor based / GraphQL Relay cursor\n\n#### Required fields on the inspect panel\n\n**Total row count**: to set the total rows the table will display. For example, `{\\{graphql1.data.totalCount}}`\n**Previous cursor**: to set the page start cursor. For example, `{\\{graphql1.data.pageInfo.startCursor}}`\n**Next cursor**: to set the page end cursor. For example, `{\\{graphql1.data.pageInfo.endCursor}}`\n**PageSize**: to set how many rows in 1 page.\n\n#### Useful data\n\n**pageSize**: used to set the numIssues\n**beforeCursor**: used to set the beforeCursor\n**nextCursor**: used to set the nextCursor\n\n#### How to use it\n\nThe following is a GraphQL demo.\n**Query**:\n\n```\nquery ($repoOwner: String!, $repoName: String!, $first: Int, $last: Int, $beforeCursor: String, $afterCursor: String) {\n repository(owner: $repoOwner, name: $repoName) {\n issues(first: $first, last: $last, before: $beforeCursor, after: $afterCursor) {\n pageInfo {\n hasNextPage\n hasPreviousPage\n endCursor\n startCursor\n }\n totalCount\n edges {\n cursor\n node {\n title\n number\n url\n }\n }\n }\n }\n}\n```\n\n**Variables**:\n\n ---\n| key | value |\n| :--- | :--- |\n| repoOwner | tensorflow |\n| repoName | tensorflow |\n| numIssues | {\\{table1.pageSize}} |\n| beforeCursor | {\\{table1.beforeCursor}} |\n| nextCursor | {\\{table1.nextCursor}} |\n| first | {\\{table1.nextCursor ? table1.pageSize: table1.beforeCursor && table1.nextCursor ? null : table1.pageSize}} |\n| last | {\\{table1.beforeCursor ? table.pageSize: null}} |", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "divider7", - "parentNode": "bodySection1-bodySectionContainer6", - "showName": "divider", - "childrenNode": null, - "type": "DIVIDER_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 53, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "fs": "14px", - "hidden": false - } - }, - { - "version": 0, - "displayName": "text35", - "parentNode": "bodySection1-bodySectionContainer6", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 3, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 198, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "The following is a limit offset based demo", - "verticalAlign": "center" - } - } - ], - "type": "CONTAINER_NODE", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "bodySection1-bodySectionContainer7", - "parentNode": "bodySection1", - "showName": "bodySectionContainer", - "childrenNode": [ - { - "version": 0, - "displayName": "text7", - "parentNode": "bodySection1-bodySectionContainer7", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 11, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 5, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "# Select a cell and use the data", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "table6", - "parentNode": "bodySection1-bodySectionContainer7", - "showName": "table", - "childrenNode": null, - "type": "TABLE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 85, - "w": 22, - "minH": 3, - "minW": 1, - "x": 10, - "y": 68, - "z": 0, - "props": { - "$dynamicAttrPaths": ["dataSourceJS", "pageSize"], - "columnMapper": { - "brand": { - "accessorKey": "brand", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 5, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "brand", - "id": "brand", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "category": { - "accessorKey": "category", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 9, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "category", - "id": "category", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "description": { - "accessorKey": "description", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 2, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "description", - "id": "description", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "discountPercentage": { - "accessorKey": "discountPercentage", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 4, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "discountPercentage", - "id": "discountPercentage", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "id": { - "accessorKey": "id", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 0, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "id", - "id": "id", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "images": { - "accessorKey": "images", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 10, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "images", - "id": "images", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "image", - "visible": true - }, - "price": { - "accessorKey": "price", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 3, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "mappedValue": false - }, - "header": "price", - "id": "price", - "mappedValue": "", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "rating": { - "accessorKey": "rating", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 6, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "rating", - "id": "rating", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "stock": { - "accessorKey": "stock", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 7, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "stock", - "id": "stock", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "thumbnail": { - "accessorKey": "thumbnail", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 8, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "thumbnail", - "id": "thumbnail", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "title": { - "accessorKey": "title", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 1, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "title", - "id": "title", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "text", - "visible": true - } - }, - "columnNameIndices": { - "0": "id", - "1": "title", - "2": "description", - "3": "price", - "4": "discountPercentage", - "5": "brand", - "6": "rating", - "7": "stock", - "8": "thumbnail", - "9": "category", - "10": "images" - }, - "columnSizing": { - "id": 72 - }, - "columnVisibility": { - "brand": true, - "category": true, - "description": true, - "discountPercentage": true, - "id": true, - "images": true, - "price": true, - "rating": true, - "stock": true, - "thumbnail": true, - "title": true - }, - "columns": [ - { - "accessorKey": "id", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 0, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "id", - "id": "id", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "title", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 1, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "title", - "id": "title", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "text", - "visible": true - }, - { - "accessorKey": "description", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 2, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "description", - "id": "description", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "price", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 3, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "mappedValue": false - }, - "header": "price", - "id": "price", - "mappedValue": "", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "discountPercentage", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 4, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "discountPercentage", - "id": "discountPercentage", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "brand", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 5, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "brand", - "id": "brand", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "rating", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 6, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "rating", - "id": "rating", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "stock", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 7, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "stock", - "id": "stock", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "thumbnail", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 8, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "thumbnail", - "id": "thumbnail", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "category", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 9, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "category", - "id": "category", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "images", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 10, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "images", - "id": "images", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "image", - "visible": true - } - ], - "customColumnIndices": {}, - "dataSourceJS": "{{list_all_products.data.products}}", - "dataSourceMode": "dynamic", - "defaultSortKey": "default", - "defaultSortOrder": "ascend", - "download": false, - "emptyState": "No rows found", - "enableSingleCellSelection": false, - "filter": true, - "overFlow": "pagination", - "pageIndex": 0, - "pageSize": "{{10}}", - "paginationOffset": 0, - "renamedColumnNames": {}, - "rowEvents": {}, - "rowSelection": { - "1": true - }, - "selectedRow": [ - { - "brand": "Apple", - "category": "smartphones", - "description": "SIM-Free, Model A19211 6.5-inch Super Retina HD display with OLED technology A12 Bionic chip with ...", - "discountPercentage": 17.94, - "id": 2, - "images": [ - "https://i.dummyjson.com/data/products/2/1.jpg", - "https://i.dummyjson.com/data/products/2/2.jpg", - "https://i.dummyjson.com/data/products/2/3.jpg", - "https://i.dummyjson.com/data/products/2/thumbnail.jpg" - ], - "price": 899, - "rating": 4.44, - "stock": 34, - "thumbnail": "https://i.dummyjson.com/data/products/2/thumbnail.jpg", - "title": "iPhone X" - } - ], - "selectedRowIndex": [1] - } - }, - { - "version": 0, - "displayName": "container1", - "parentNode": "bodySection1-bodySectionContainer7", - "showName": "container", - "childrenNode": [ - { - "version": 0, - "displayName": "canvas8", - "parentNode": "container1", - "showName": "canvas", - "childrenNode": [ - { - "version": 0, - "displayName": "container2", - "parentNode": "canvas8", - "showName": "container", - "childrenNode": [ - { - "version": 0, - "displayName": "canvas11", - "parentNode": "container2", - "showName": "canvas", - "childrenNode": [ - { - "version": 0, - "displayName": "button6", - "parentNode": "canvas11", - "showName": "button", - "childrenNode": null, - "type": "BUTTON_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 21, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "events[0].filters" - ], - "colorScheme": "blue", - "events": [ - { - "actionType": "widget", - "eventType": "click", - "filters": "{{ [{\"id\":\"title\", \"value\":input20.value, \"filterFn\":select3.value}] }}", - "id": "events-c3ca66ac-16de-4c15-9417-16888338ceac", - "widgetID": "table6", - "widgetMethod": "setFilters" - } - ], - "hidden": false, - "text": "Apply", - "variant": "fill" - } - }, - { - "version": 0, - "displayName": "input20", - "parentNode": "canvas11", - "showName": "input", - "childrenNode": null, - "type": "INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 15, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "formDataKey", - "labelWidth", - "showVisibleButton", - "disabled" - ], - "colorScheme": "blue", - "disabled": "{{select3.value==\"empty\"||select3.value==\"notEmpty\"}}", - "formDataKey": "{{input20.displayName}}", - "hidden": "", - "hiddenDynamic": true, - "label": "", - "labelAlign": "left", - "labelHidden": true, - "labelPosition": "top", - "labelWidth": "{{33}}", - "placeholder": "input sth", - "showVisibleButton": "{{true}}", - "type": "input", - "value": "iPhone 9" - } - }, - { - "version": 0, - "displayName": "select3", - "parentNode": "canvas11", - "showName": "select", - "childrenNode": null, - "type": "SELECT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 9, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "dataSources", - "formDataKey" - ], - "colorScheme": "blue", - "dataSources": "{{[]}}", - "formDataKey": "{{select3.displayName}}", - "hidden": false, - "label": "Label", - "labelAlign": "left", - "labelHidden": true, - "labelPosition": "left", - "labelWidth": "{{33}}", - "manualOptions": [ - { - "id": "option-2d6fafcc-5cbc-496f-a615-e6173a0478e0", - "label": "equal to", - "value": "equalTo" - }, - { - "id": "option-8d8ef4d2-6419-4da4-9c8c-58bf8a07628c", - "label": "not equal to", - "value": "notEqualTo" - }, - { - "id": "option-ef4ae62c-3019-42b8-b175-34e313720aee", - "label": "contains", - "value": "contains" - }, - { - "id": "option-8ec28309-bc90-4d26-b215-90f8abaad939", - "label": "does not contain", - "value": "doesNotContain" - }, - { - "id": "option-dc64db82-8ce4-49fd-b5c9-a1f355945719", - "label": "less than", - "value": "lessThan" - }, - { - "id": "option-c378e25e-6f56-4a0b-850e-4e8a3a4eec92", - "label": "not less than", - "value": "notLessThan" - }, - { - "id": "option-a46d37a1-ac7e-4b63-9c48-a753094c9b7b", - "label": "more than", - "value": "moreThan" - }, - { - "id": "option-4666ae07-a3a4-426c-bd18-e9e452fd8547", - "label": "not more than", - "value": "notMoreThan" - }, - { - "id": "option-c4af1aeb-2282-427c-b874-a65464938a9b", - "label": "before", - "value": "before" - }, - { - "id": "option-2ee31f9b-32a4-44e7-a74f-736d731a4bf2", - "label": "after", - "value": "after" - }, - { - "id": "option-dba31045-75f6-4cf3-8dc9-0985c45019af", - "label": "is empty", - "value": "empty" - }, - { - "id": "option-63eb4b84-6bad-4933-8836-b19fb0a2ea47", - "label": "is not empty", - "value": "notEmpty" - } - ], - "optionConfigureMode": "static", - "value": "equalTo" - } - }, - { - "version": 0, - "displayName": "text8", - "parentNode": "canvas11", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 3, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "fixed", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "ALL", - "value": "filter data by title:", - "verticalAlign": "center" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "canvas12", - "parentNode": "container2", - "showName": "canvas", - "childrenNode": [ - { - "version": 0, - "displayName": "input13", - "parentNode": "canvas12", - "showName": "input", - "childrenNode": null, - "type": "INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 16, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "disabled", - "formDataKey", - "labelWidth", - "showVisibleButton" - ], - "colorScheme": "blue", - "disabled": "{{select3.value==\"empty\"||select3.value==\"notEmpty\"}}", - "formDataKey": "{{input20.displayName}}", - "hidden": "", - "hiddenDynamic": true, - "label": "brand", - "labelAlign": "left", - "labelHidden": false, - "labelPosition": "left", - "labelWidth": "{{33}}", - "placeholder": "input sth", - "showVisibleButton": "{{true}}", - "type": "input", - "value": "Apple" - } - }, - { - "version": 0, - "displayName": "button5", - "parentNode": "canvas12", - "showName": "button", - "childrenNode": null, - "type": "BUTTON_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 22, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "events[0].filters" - ], - "colorScheme": "blue", - "events": [ - { - "actionType": "widget", - "eventType": "click", - "filters": "{{ [{\"id\":\"price\", \"value\":rangeSlider1.startValue, \"filterFn\":\"notLessThan\"}, {\"id\":\"price\", \"value\":rangeSlider1.endValue, \"filterFn\":\"notMoreThan\"}, {\"id\":\"brand\", \"value\":input13.value, \"filterFn\":\"doesNotContain\"}] }}", - "id": "events-c3ca66ac-16de-4c15-9417-16888338ceac", - "operator": "and", - "widgetID": "table6", - "widgetMethod": "setFilters" - } - ], - "hidden": false, - "text": "Apply", - "variant": "fill" - } - }, - { - "version": 0, - "displayName": "text9", - "parentNode": "canvas12", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 3, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "fixed", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "ALL", - "value": "filter data: price>=x and price<=y and brand not contain z", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "rangeSlider1", - "parentNode": "canvas12", - "showName": "rangeSlider", - "childrenNode": null, - "type": "RANGE_SLIDER_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 6, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 9, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "startValue", - "endValue", - "min", - "max", - "step", - "labelWidth", - "formDataKey" - ], - "colorScheme": "blue", - "disabled": false, - "endValue": "{{1500}}", - "formDataKey": "{{rangeSlider1.displayName}}", - "hidden": false, - "hideOutput": false, - "label": "Label", - "labelAlign": "left", - "labelPosition": "left", - "labelWidth": "{{33}}", - "max": "{{1500}}", - "min": "{{200}}", - "startValue": "{{200}}", - "step": "{{1}}" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "canvas13", - "parentNode": "container2", - "showName": "canvas", - "childrenNode": [ - { - "version": 0, - "displayName": "text10", - "parentNode": "canvas13", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 3, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "fixed", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "ALL", - "value": "filter data: title contains xxx or brand contains xxx", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "input14", - "parentNode": "canvas13", - "showName": "input", - "childrenNode": null, - "type": "INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 9, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "formDataKey", - "showVisibleButton" - ], - "colorScheme": "blue", - "formDataKey": "{{input14.displayName}}", - "hidden": false, - "label": "title", - "labelAlign": "left", - "labelPosition": "left", - "labelWidth": "{{33}}", - "placeholder": "input sth", - "showVisibleButton": "{{true}}", - "type": "input", - "value": "iPhone" - } - }, - { - "version": 0, - "displayName": "input15", - "parentNode": "canvas13", - "showName": "input", - "childrenNode": null, - "type": "INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 15, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "formDataKey", - "showVisibleButton" - ], - "colorScheme": "blue", - "formDataKey": "{{input14.displayName}}", - "hidden": false, - "label": "brand", - "labelAlign": "left", - "labelPosition": "left", - "labelWidth": "{{33}}", - "placeholder": "input sth", - "showVisibleButton": "{{true}}", - "type": "input", - "value": "Samsung" - } - }, - { - "version": 0, - "displayName": "button8", - "parentNode": "canvas13", - "showName": "button", - "childrenNode": null, - "type": "BUTTON_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 21, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "events[0].filters" - ], - "colorScheme": "blue", - "events": [ - { - "actionType": "widget", - "eventType": "click", - "filters": "{{ [{\"id\":\"title\", \"value\":input14.value, \"filterFn\":\"contains\"}, {\"id\":\"brand\", \"value\":input15.value, \"filterFn\":\"contains\"}] }}", - "id": "events-39a887d5-51c8-4647-9edf-6eda4ae011d9", - "operator": "or", - "widgetID": "table6", - "widgetMethod": "setFilters" - } - ], - "hidden": false, - "text": "Apply", - "variant": "fill" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "CONTAINER_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 36, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 6, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "backgroundColor": "#ffffffff", - "borderColor": "#ffffffff", - "borderWidth": "1px", - "currentIndex": 0, - "currentKey": "Single condition", - "dynamicHeight": "fixed", - "linkWidgetDisplayName": "tabs1", - "radius": "4px", - "resizeDirection": "ALL", - "shadow": "none", - "viewList": [ - { - "id": "09a4216a-be09-4f65-b592-17252327e432", - "key": "Single condition", - "label": "Single condition" - }, - { - "id": "9eea6df1-2689-4158-a5dc-0e1597153fb1", - "key": "and", - "label": "and" - }, - { - "id": "db9ba881-4d90-4702-a474-5bd60264f3dc", - "key": "or", - "label": "or" - } - ] - } - }, - { - "version": 0, - "displayName": "tabs1", - "parentNode": "canvas8", - "showName": "tabs", - "childrenNode": null, - "type": "TABS_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 6, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 0, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "align": "flex-start", - "colorScheme": "blue", - "currentIndex": 0, - "currentKey": "Single condition", - "linkWidgetDisplayName": "container2", - "navigateContainer": true, - "tabList": [ - { - "id": "251c12cd-8652-465a-bd43-db2f9005e522", - "key": "Tab 1", - "label": "Tab 1" - }, - { - "id": "3533ece0-8ee7-4c69-95d0-9fce3fdd06a2", - "key": "Tab 2", - "label": "Tab 2" - }, - { - "id": "bc03b697-e531-4057-8d19-ed9866c779c9", - "key": "Tab 3", - "label": "Tab 3" - } - ], - "tabPosition": "top", - "viewList": [ - { - "id": "09a4216a-be09-4f65-b592-17252327e432", - "key": "Single condition", - "label": "Single condition" - }, - { - "id": "9eea6df1-2689-4158-a5dc-0e1597153fb1", - "key": "and", - "label": "and" - }, - { - "id": "db9ba881-4d90-4702-a474-5bd60264f3dc", - "key": "or", - "label": "or" - } - ] - } - }, - { - "version": 0, - "displayName": "button7", - "parentNode": "canvas8", - "showName": "button", - "childrenNode": null, - "type": "BUTTON_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 77, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "events": [ - { - "actionType": "widget", - "eventType": "click", - "id": "events-458d569f-725e-4b92-a565-8567370806b4", - "widgetID": "table6", - "widgetMethod": "clearFilters" - } - ], - "hidden": false, - "text": "Clear filter", - "variant": "fill" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "canvas9", - "parentNode": "container1", - "showName": "canvas", - "childrenNode": null, - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "canvas10", - "parentNode": "container1", - "showName": "canvas", - "childrenNode": null, - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "CONTAINER_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 85, - "w": 10, - "minH": 3, - "minW": 1, - "x": 0, - "y": 68, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "backgroundColor": "#ffffffff", - "borderColor": "#ffffffff", - "borderWidth": "1px", - "currentIndex": 0, - "currentKey": "View 1", - "dynamicHeight": "fixed", - "radius": "4px", - "resizeDirection": "ALL", - "shadow": "small", - "viewList": [ - { - "id": "09a4216a-be09-4f65-b592-17252327e432", - "key": "View 1", - "label": "View 1" - }, - { - "id": "9eea6df1-2689-4158-a5dc-0e1597153fb1", - "key": "View 2", - "label": "View 2" - }, - { - "id": "db9ba881-4d90-4702-a474-5bd60264f3dc", - "key": "View 3", - "label": "View 3" - } - ] - } - }, - { - "version": 0, - "displayName": "text20", - "parentNode": "bodySection1-bodySectionContainer7", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 16, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "**There are two ways to set filters.** \n \n 1. Configure the table in the inspect panel, find the filter switch under the toolbar category, and turn it on so that users can directly set filters on the table.\n\n2. Add event handlers for other components to enable them to control the table and set filters on the table.\n\n### Set filters\nIt is a method used to control a table component and set filters. There are 2 fields in this method. \n **filters**: It is an array of filter objects. The filter object contains 3 attributes: \n1. id--the column id, \n 2. value--the target value, \n \n 3. filterFn: the filter functions such as equalTo. \n\n For example, price>=10, the filter object will be \n```js\n{\n \"id\":\"price\", \n \"value\":10, \n \"filterFn\":\"notLessThan\"\n}\n```\n \n**filter mode**: When you add multiple filters in the filter array above, use this field to set these filters are set with an AND or an OR relationship", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "divider1", - "parentNode": "bodySection1-bodySectionContainer7", - "showName": "divider", - "childrenNode": null, - "type": "DIVIDER_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 63, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "fs": "14px", - "hidden": false - } - } - ], - "type": "CONTAINER_NODE", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "bodySection1-bodySectionContainer8", - "parentNode": "bodySection1", - "showName": "bodySectionContainer", - "childrenNode": [ - { - "version": 0, - "displayName": "text11", - "parentNode": "bodySection1-bodySectionContainer8", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 11, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 5, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "# Click button on table to trigger event handler\n ", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "table7", - "parentNode": "bodySection1-bodySectionContainer8", - "showName": "table", - "childrenNode": null, - "type": "TABLE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 84, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 18, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "dataSourceJS", - "pageSize", - "columns[12].buttonGroupContent[0].events[0].title", - "columns[12].buttonGroupContent[0].events[0].description", - "columns[12].buttonGroupContent[1].events[0].copiedValue" - ], - "columnMapper": { - "Button": { - "accessorKey": "column-1a2ed43c-085c-46b7-9bb1-101d4d1f244e", - "alignment": "left", - "colorScheme": "grayBlue", - "columnIndex": 11, - "custom": true, - "enableSorting": true, - "events": [ - { - "actionType": "widget", - "eventType": "clickMenuItem", - "id": "events-68ecabd7-f45f-4ea2-be97-10ca6b0ba23e", - "widgetID": "modal1", - "widgetMethod": "openModal" - } - ], - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "mappedValue": false - }, - "header": "Button", - "id": "column-1a2ed43c-085c-46b7-9bb1-101d4d1f244e", - "mappedValue": "Show description", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "button", - "variant": "outline", - "visible": true - }, - "Button group": { - "accessorKey": "column-93928253-60cd-4c1a-a88d-56214ea4f453", - "alignment": "left", - "buttonGroupContent": [ - { - "cellValue": "Show brand", - "colorScheme": "grayBlue", - "events": [ - { - "actionType": "showNotification", - "description": [ - "iPhone 9", - "iPhone X", - "Samsung Universe 9", - "OPPOF19", - "Huawei P30", - "MacBook Pro", - "Samsung Galaxy Book", - "Microsoft Surface Laptop 4", - "Infinix INBOOK", - "HP Pavilion 15-DK1056WM", - "perfume Oil", - "Brown Perfume", - "Fog Scent Xpressio Perfume", - "Non-Alcoholic Concentrated Perfume Oil", - "Eau De Perfume Spray", - "Hyaluronic Acid Serum", - "Tree Oil 30ml", - "Oil Free Moisturizer 100ml", - "Skin Beauty Serum.", - "Freckle Treatment Cream- 15gm", - "- Daal Masoor 500 grams", - "Elbow Macaroni - 400 gm", - "Orange Essence Food Flavou", - "cereals muesli fruit nuts", - "Gulab Powder 50 Gram", - "Plant Hanger For Home", - "Flying Wooden Bird", - "3D Embellishment Art Lamp", - "Handcraft Chinese style", - "Key Holder" - ], - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-c073a4ea-db3a-4071-90c8-88ea24489bec", - "title": [ - "Apple", - "Apple", - "Samsung", - "OPPO", - "Huawei", - "Apple", - "Samsung", - "Microsoft Surface", - "Infinix", - "HP Pavilion", - "Impression of Acqua Di Gio", - "Royal_Mirage", - "Fog Scent Xpressio", - "Al Munakh", - "Lord - Al-Rehab", - "L'Oreal Paris", - "Hemani Tea", - "Dermive", - "ROREC White Rice", - "Fair & Clear", - "Saaf & Khaas", - "Bake Parlor Big", - "Baking Food Items", - "fauji", - "Dry Rose", - "Boho Decor", - "Flying Wooden", - "LED Lights", - "luxury palace", - "Golden" - ] - } - ], - "fromCurrentRow": { - "cellValue": false - }, - "id": "cell-6e1c177b-3f06-42f9-afed-ee467f8817b0", - "index": 0, - "label": "Button1", - "variant": "outline" - }, - { - "cellValue": "Copy title", - "colorScheme": "grayBlue", - "events": [ - { - "actionType": "copyToClipboard", - "copiedValue": [ - "iPhone 9", - "iPhone X", - "Samsung Universe 9", - "OPPOF19", - "Huawei P30", - "MacBook Pro", - "Samsung Galaxy Book", - "Microsoft Surface Laptop 4", - "Infinix INBOOK", - "HP Pavilion 15-DK1056WM", - "perfume Oil", - "Brown Perfume", - "Fog Scent Xpressio Perfume", - "Non-Alcoholic Concentrated Perfume Oil", - "Eau De Perfume Spray", - "Hyaluronic Acid Serum", - "Tree Oil 30ml", - "Oil Free Moisturizer 100ml", - "Skin Beauty Serum.", - "Freckle Treatment Cream- 15gm", - "- Daal Masoor 500 grams", - "Elbow Macaroni - 400 gm", - "Orange Essence Food Flavou", - "cereals muesli fruit nuts", - "Gulab Powder 50 Gram", - "Plant Hanger For Home", - "Flying Wooden Bird", - "3D Embellishment Art Lamp", - "Handcraft Chinese style", - "Key Holder" - ], - "eventType": "clickMenuItem", - "fromCurrentRow": { - "copiedValue": true - }, - "id": "events-bf3e3081-ac52-4fbf-bd12-640ded1e167f" - } - ], - "fromCurrentRow": { - "cellValue": false - }, - "id": "cell-e2a83e72-21e6-4ba0-9e25-fb9ed409e45b", - "index": 1, - "label": "Button2", - "variant": "outline" - } - ], - "colorScheme": "blue", - "columnIndex": 12, - "custom": true, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "Button group", - "id": "column-93928253-60cd-4c1a-a88d-56214ea4f453", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "buttongroup", - "visible": true - }, - "Icon": { - "accessorKey": "column-7f32c74a-ea9b-4b50-aa25-d37c1303cf21", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 13, - "custom": true, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "Icon", - "iconGroupContent": [ - { - "cellValue": "BsTrash", - "colorScheme": "grayBlue", - "events": [ - { - "actionType": "datasource", - "eventType": "clickMenuItem", - "id": "events-20b91d42-42b1-452d-b04f-2ef1e2795fa8", - "queryID": "delete_product_via_id" - } - ], - "id": "cell-dbefad38-c166-4300-bec1-f54fa3733b9e", - "index": 0, - "label": "Icon1" - } - ], - "id": "column-7f32c74a-ea9b-4b50-aa25-d37c1303cf21", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "icongroup", - "visible": true - }, - "brand": { - "accessorKey": "brand", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 6, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "brand", - "id": "brand", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": false - }, - "category": { - "accessorKey": "category", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 9, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "category", - "id": "category", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": false - }, - "description": { - "accessorKey": "description", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 3, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "description", - "id": "description", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": false - }, - "discountPercentage": { - "accessorKey": "discountPercentage", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 5, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "discountPercentage", - "id": "discountPercentage", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "id": { - "accessorKey": "id", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 0, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "id", - "id": "id", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "images": { - "accessorKey": "images", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 10, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "images", - "id": "images", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "image", - "visible": false - }, - "price": { - "accessorKey": "price", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 4, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "mappedValue": false - }, - "header": "price", - "id": "price", - "mappedValue": "", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "rating": { - "accessorKey": "rating", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 7, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "rating", - "id": "rating", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": false - }, - "stock": { - "accessorKey": "stock", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 8, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "stock", - "id": "stock", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": false - }, - "thumbnail": { - "accessorKey": "thumbnail", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 1, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "thumbnail", - "id": "thumbnail", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "title": { - "accessorKey": "title", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 2, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "title", - "id": "title", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "text", - "visible": true - } - }, - "columnNameIndices": { - "0": "id", - "1": "thumbnail", - "2": "title", - "3": "description", - "4": "price", - "5": "discountPercentage", - "6": "brand", - "7": "rating", - "8": "stock", - "9": "category", - "10": "images", - "11": "Button", - "12": "Button group", - "13": "Icon" - }, - "columnSizing": { - "column-1a2ed43c-085c-46b7-9bb1-101d4d1f244e": 196, - "column-93928253-60cd-4c1a-a88d-56214ea4f453": 290, - "id": 72, - "title": 288 - }, - "columnVisibility": { - "Button": true, - "Button group": true, - "Icon": true, - "brand": false, - "category": false, - "description": false, - "discountPercentage": true, - "id": true, - "images": false, - "price": true, - "rating": false, - "stock": false, - "thumbnail": true, - "title": true - }, - "columns": [ - { - "accessorKey": "id", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 0, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "id", - "id": "id", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "thumbnail", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 1, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "thumbnail", - "id": "thumbnail", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "title", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 2, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "title", - "id": "title", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "text", - "visible": true - }, - { - "accessorKey": "description", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 3, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "description", - "id": "description", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": false - }, - { - "accessorKey": "price", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 4, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "mappedValue": false - }, - "header": "price", - "id": "price", - "mappedValue": "", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "discountPercentage", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 5, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "discountPercentage", - "id": "discountPercentage", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "brand", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 6, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "brand", - "id": "brand", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": false - }, - { - "accessorKey": "rating", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 7, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "rating", - "id": "rating", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": false - }, - { - "accessorKey": "stock", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 8, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "stock", - "id": "stock", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": false - }, - { - "accessorKey": "category", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 9, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "category", - "id": "category", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": false - }, - { - "accessorKey": "images", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 10, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "images", - "id": "images", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "image", - "visible": false - }, - { - "accessorKey": "column-1a2ed43c-085c-46b7-9bb1-101d4d1f244e", - "alignment": "left", - "colorScheme": "grayBlue", - "columnIndex": 11, - "custom": true, - "enableSorting": true, - "events": [ - { - "actionType": "widget", - "eventType": "clickMenuItem", - "id": "events-68ecabd7-f45f-4ea2-be97-10ca6b0ba23e", - "widgetID": "modal1", - "widgetMethod": "openModal" - } - ], - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "mappedValue": false - }, - "header": "Button", - "id": "column-1a2ed43c-085c-46b7-9bb1-101d4d1f244e", - "mappedValue": "Show description", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "button", - "variant": "outline", - "visible": true - }, - { - "accessorKey": "column-93928253-60cd-4c1a-a88d-56214ea4f453", - "alignment": "left", - "buttonGroupContent": [ - { - "cellValue": "Show brand", - "colorScheme": "grayBlue", - "events": [ - { - "actionType": "showNotification", - "description": "{{table7.dataSourceJS.map((currentRow) => ( currentRow.title))}}", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-c073a4ea-db3a-4071-90c8-88ea24489bec", - "title": "{{table7.dataSourceJS.map((currentRow) => ( currentRow.brand))}}" - } - ], - "fromCurrentRow": { - "cellValue": false - }, - "id": "cell-6e1c177b-3f06-42f9-afed-ee467f8817b0", - "index": 0, - "label": "Button1", - "variant": "outline" - }, - { - "cellValue": "Copy title", - "colorScheme": "grayBlue", - "events": [ - { - "actionType": "copyToClipboard", - "copiedValue": "{{table7.dataSourceJS.map((currentRow) => ( currentRow.title))}}", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "copiedValue": true - }, - "id": "events-bf3e3081-ac52-4fbf-bd12-640ded1e167f" - } - ], - "fromCurrentRow": { - "cellValue": false - }, - "id": "cell-e2a83e72-21e6-4ba0-9e25-fb9ed409e45b", - "index": 1, - "label": "Button2", - "variant": "outline" - } - ], - "colorScheme": "blue", - "columnIndex": 12, - "custom": true, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "Button group", - "id": "column-93928253-60cd-4c1a-a88d-56214ea4f453", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "buttongroup", - "visible": true - }, - { - "accessorKey": "column-7f32c74a-ea9b-4b50-aa25-d37c1303cf21", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 13, - "custom": true, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "Icon", - "iconGroupContent": [ - { - "cellValue": "BsTrash", - "colorScheme": "grayBlue", - "events": [ - { - "actionType": "datasource", - "eventType": "clickMenuItem", - "id": "events-20b91d42-42b1-452d-b04f-2ef1e2795fa8", - "queryID": "delete_product_via_id" - } - ], - "id": "cell-dbefad38-c166-4300-bec1-f54fa3733b9e", - "index": 0, - "label": "Icon1" - } - ], - "id": "column-7f32c74a-ea9b-4b50-aa25-d37c1303cf21", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "icongroup", - "visible": true - } - ], - "customColumnIndices": { - "11": "Button", - "12": "Button group", - "13": "Icon" - }, - "dataSourceJS": "{{list_all_products.data.products}}", - "dataSourceMode": "dynamic", - "defaultSortKey": "default", - "defaultSortOrder": "ascend", - "download": false, - "emptyState": "No rows found", - "enableSingleCellSelection": false, - "filter": true, - "overFlow": "pagination", - "pageIndex": 0, - "pageSize": "{{10}}", - "paginationOffset": 0, - "renamedColumnNames": {}, - "rowEvents": { - "11": { - "0": [ - { - "actionType": "widget", - "eventType": "clickMenuItem", - "id": "events-68ecabd7-f45f-4ea2-be97-10ca6b0ba23e", - "widgetID": "modal1", - "widgetMethod": "openModal" - } - ], - "1": [ - { - "actionType": "widget", - "eventType": "clickMenuItem", - "id": "events-68ecabd7-f45f-4ea2-be97-10ca6b0ba23e", - "widgetID": "modal1", - "widgetMethod": "openModal" - } - ], - "2": [ - { - "actionType": "widget", - "eventType": "clickMenuItem", - "id": "events-68ecabd7-f45f-4ea2-be97-10ca6b0ba23e", - "widgetID": "modal1", - "widgetMethod": "openModal" - } - ], - "3": [ - { - "actionType": "widget", - "eventType": "clickMenuItem", - "id": "events-68ecabd7-f45f-4ea2-be97-10ca6b0ba23e", - "widgetID": "modal1", - "widgetMethod": "openModal" - } - ], - "4": [ - { - "actionType": "widget", - "eventType": "clickMenuItem", - "id": "events-68ecabd7-f45f-4ea2-be97-10ca6b0ba23e", - "widgetID": "modal1", - "widgetMethod": "openModal" - } - ], - "5": [ - { - "actionType": "widget", - "eventType": "clickMenuItem", - "id": "events-68ecabd7-f45f-4ea2-be97-10ca6b0ba23e", - "widgetID": "modal1", - "widgetMethod": "openModal" - } - ], - "6": [ - { - "actionType": "widget", - "eventType": "clickMenuItem", - "id": "events-68ecabd7-f45f-4ea2-be97-10ca6b0ba23e", - "widgetID": "modal1", - "widgetMethod": "openModal" - } - ], - "7": [ - { - "actionType": "widget", - "eventType": "clickMenuItem", - "id": "events-68ecabd7-f45f-4ea2-be97-10ca6b0ba23e", - "widgetID": "modal1", - "widgetMethod": "openModal" - } - ], - "8": [ - { - "actionType": "widget", - "eventType": "clickMenuItem", - "id": "events-68ecabd7-f45f-4ea2-be97-10ca6b0ba23e", - "widgetID": "modal1", - "widgetMethod": "openModal" - } - ], - "9": [ - { - "actionType": "widget", - "eventType": "clickMenuItem", - "id": "events-68ecabd7-f45f-4ea2-be97-10ca6b0ba23e", - "widgetID": "modal1", - "widgetMethod": "openModal" - } - ], - "10": [ - { - "actionType": "widget", - "eventType": "clickMenuItem", - "id": "events-68ecabd7-f45f-4ea2-be97-10ca6b0ba23e", - "widgetID": "modal1", - "widgetMethod": "openModal" - } - ], - "11": [ - { - "actionType": "widget", - "eventType": "clickMenuItem", - "id": "events-68ecabd7-f45f-4ea2-be97-10ca6b0ba23e", - "widgetID": "modal1", - "widgetMethod": "openModal" - } - ], - "12": [ - { - "actionType": "widget", - "eventType": "clickMenuItem", - "id": "events-68ecabd7-f45f-4ea2-be97-10ca6b0ba23e", - "widgetID": "modal1", - "widgetMethod": "openModal" - } - ], - "13": [ - { - "actionType": "widget", - "eventType": "clickMenuItem", - "id": "events-68ecabd7-f45f-4ea2-be97-10ca6b0ba23e", - "widgetID": "modal1", - "widgetMethod": "openModal" - } - ], - "14": [ - { - "actionType": "widget", - "eventType": "clickMenuItem", - "id": "events-68ecabd7-f45f-4ea2-be97-10ca6b0ba23e", - "widgetID": "modal1", - "widgetMethod": "openModal" - } - ], - "15": [ - { - "actionType": "widget", - "eventType": "clickMenuItem", - "id": "events-68ecabd7-f45f-4ea2-be97-10ca6b0ba23e", - "widgetID": "modal1", - "widgetMethod": "openModal" - } - ], - "16": [ - { - "actionType": "widget", - "eventType": "clickMenuItem", - "id": "events-68ecabd7-f45f-4ea2-be97-10ca6b0ba23e", - "widgetID": "modal1", - "widgetMethod": "openModal" - } - ], - "17": [ - { - "actionType": "widget", - "eventType": "clickMenuItem", - "id": "events-68ecabd7-f45f-4ea2-be97-10ca6b0ba23e", - "widgetID": "modal1", - "widgetMethod": "openModal" - } - ], - "18": [ - { - "actionType": "widget", - "eventType": "clickMenuItem", - "id": "events-68ecabd7-f45f-4ea2-be97-10ca6b0ba23e", - "widgetID": "modal1", - "widgetMethod": "openModal" - } - ], - "19": [ - { - "actionType": "widget", - "eventType": "clickMenuItem", - "id": "events-68ecabd7-f45f-4ea2-be97-10ca6b0ba23e", - "widgetID": "modal1", - "widgetMethod": "openModal" - } - ], - "20": [ - { - "actionType": "widget", - "eventType": "clickMenuItem", - "id": "events-68ecabd7-f45f-4ea2-be97-10ca6b0ba23e", - "widgetID": "modal1", - "widgetMethod": "openModal" - } - ], - "21": [ - { - "actionType": "widget", - "eventType": "clickMenuItem", - "id": "events-68ecabd7-f45f-4ea2-be97-10ca6b0ba23e", - "widgetID": "modal1", - "widgetMethod": "openModal" - } - ], - "22": [ - { - "actionType": "widget", - "eventType": "clickMenuItem", - "id": "events-68ecabd7-f45f-4ea2-be97-10ca6b0ba23e", - "widgetID": "modal1", - "widgetMethod": "openModal" - } - ], - "23": [ - { - "actionType": "widget", - "eventType": "clickMenuItem", - "id": "events-68ecabd7-f45f-4ea2-be97-10ca6b0ba23e", - "widgetID": "modal1", - "widgetMethod": "openModal" - } - ], - "24": [ - { - "actionType": "widget", - "eventType": "clickMenuItem", - "id": "events-68ecabd7-f45f-4ea2-be97-10ca6b0ba23e", - "widgetID": "modal1", - "widgetMethod": "openModal" - } - ], - "25": [ - { - "actionType": "widget", - "eventType": "clickMenuItem", - "id": "events-68ecabd7-f45f-4ea2-be97-10ca6b0ba23e", - "widgetID": "modal1", - "widgetMethod": "openModal" - } - ], - "26": [ - { - "actionType": "widget", - "eventType": "clickMenuItem", - "id": "events-68ecabd7-f45f-4ea2-be97-10ca6b0ba23e", - "widgetID": "modal1", - "widgetMethod": "openModal" - } - ], - "27": [ - { - "actionType": "widget", - "eventType": "clickMenuItem", - "id": "events-68ecabd7-f45f-4ea2-be97-10ca6b0ba23e", - "widgetID": "modal1", - "widgetMethod": "openModal" - } - ], - "28": [ - { - "actionType": "widget", - "eventType": "clickMenuItem", - "id": "events-68ecabd7-f45f-4ea2-be97-10ca6b0ba23e", - "widgetID": "modal1", - "widgetMethod": "openModal" - } - ], - "29": [ - { - "actionType": "widget", - "eventType": "clickMenuItem", - "id": "events-68ecabd7-f45f-4ea2-be97-10ca6b0ba23e", - "widgetID": "modal1", - "widgetMethod": "openModal" - } - ] - } - }, - "rowSelection": { - "0": true - }, - "selectedRow": [ - { - "brand": "Apple", - "category": "smartphones", - "description": "An apple mobile which is nothing like apple", - "discountPercentage": 12.96, - "id": 1, - "images": [ - "https://i.dummyjson.com/data/products/1/1.jpg", - "https://i.dummyjson.com/data/products/1/2.jpg", - "https://i.dummyjson.com/data/products/1/3.jpg", - "https://i.dummyjson.com/data/products/1/4.jpg", - "https://i.dummyjson.com/data/products/1/thumbnail.jpg" - ], - "price": 549, - "rating": 4.69, - "stock": 94, - "thumbnail": "https://i.dummyjson.com/data/products/1/thumbnail.jpg", - "title": "iPhone 9" - } - ], - "selectedRowIndex": [0] - } - }, - { - "version": 0, - "displayName": "input16", - "parentNode": "bodySection1-bodySectionContainer8", - "showName": "input", - "childrenNode": null, - "type": "INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 102, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "formDataKey", - "showVisibleButton" - ], - "colorScheme": "blue", - "formDataKey": "{{input16.displayName}}", - "hidden": false, - "label": "Test pasting", - "labelAlign": "left", - "labelPosition": "left", - "labelWidth": "{{33}}", - "placeholder": "paste here", - "showVisibleButton": "{{true}}", - "type": "input", - "value": "" - } - } - ], - "type": "CONTAINER_NODE", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "bodySection1-bodySectionContainer9", - "parentNode": "bodySection1", - "showName": "bodySectionContainer", - "childrenNode": [ - { - "version": 0, - "displayName": "text14", - "parentNode": "bodySection1-bodySectionContainer9", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 11, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 5, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "# Table event handler", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "table8", - "parentNode": "bodySection1-bodySectionContainer9", - "showName": "table", - "childrenNode": null, - "type": "TABLE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 84, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 58, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "columns[12].buttonGroupContent[0].events[0].description", - "columns[12].buttonGroupContent[0].events[0].title", - "columns[12].buttonGroupContent[1].events[0].copiedValue", - "dataSourceJS", - "pageSize", - "columns[11].buttonGroupContent[0].events[0].description", - "columns[11].buttonGroupContent[0].events[0].title", - "columns[11].buttonGroupContent[1].events[0].copiedValue", - "loading", - "events[0].title", - "events[0].description", - "dataSource", - "events[1].title", - "events[1].description", - "events[2].description", - "events[3].description" - ], - "columnMapper": { - "brand": { - "accessorKey": "brand", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 7, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "brand", - "id": "brand", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "category": { - "accessorKey": "category", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 8, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "category", - "id": "category", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "description": { - "accessorKey": "description", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 2, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "description", - "id": "description", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "discountPercentage": { - "accessorKey": "discountPercentage", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 4, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "discountPercentage", - "id": "discountPercentage", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "id": { - "accessorKey": "id", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 0, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "id", - "id": "id", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "images": { - "accessorKey": "images", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 10, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "images", - "id": "images", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "price": { - "accessorKey": "price", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 3, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "price", - "id": "price", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "rating": { - "accessorKey": "rating", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 5, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "rating", - "id": "rating", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "stock": { - "accessorKey": "stock", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 6, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "stock", - "id": "stock", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "thumbnail": { - "accessorKey": "thumbnail", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 9, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "thumbnail", - "id": "thumbnail", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "title": { - "accessorKey": "title", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 1, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "title", - "id": "title", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - } - }, - "columnNameIndices": { - "0": "id", - "1": "title", - "2": "description", - "3": "price", - "4": "discountPercentage", - "5": "rating", - "6": "stock", - "7": "brand", - "8": "category", - "9": "thumbnail", - "10": "images" - }, - "columnSizing": { - "column-1a2ed43c-085c-46b7-9bb1-101d4d1f244e": 196, - "column-93928253-60cd-4c1a-a88d-56214ea4f453": 290, - "id": 72, - "title": 288 - }, - "columnVisibility": { - "brand": true, - "category": true, - "description": true, - "discountPercentage": true, - "id": true, - "images": true, - "price": true, - "rating": true, - "stock": true, - "thumbnail": true, - "title": true - }, - "columns": [ - { - "accessorKey": "id", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 0, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "id", - "id": "id", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "title", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 1, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "title", - "id": "title", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "description", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 2, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "description", - "id": "description", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "price", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 3, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "price", - "id": "price", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "discountPercentage", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 4, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "discountPercentage", - "id": "discountPercentage", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "rating", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 5, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "rating", - "id": "rating", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "stock", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 6, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "stock", - "id": "stock", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "brand", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 7, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "brand", - "id": "brand", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "category", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 8, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "category", - "id": "category", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "thumbnail", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 9, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "thumbnail", - "id": "thumbnail", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "images", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 10, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "images", - "id": "images", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - } - ], - "customColumnIndices": {}, - "dataSource": "{{list_all_products.data}}", - "dataSourceJS": "{{list_all_products.data.products}}", - "dataSourceMode": "dynamic", - "defaultSortKey": "default", - "defaultSortOrder": "ascend", - "download": true, - "downloadRawData": true, - "emptyState": "No rows found", - "enableServerSidePagination": false, - "enableServerSidePaginationDynamic": false, - "enableSingleCellSelection": true, - "events": [ - { - "actionType": "showNotification", - "description": "{{\"The order is: \"+table8.sort.sortOrder}}", - "eventType": "sortingChange", - "id": "events-c11a7f75-d5f4-4e87-acfa-a0bf1ba337fc", - "title": "{{\"sorted column: \"+table8.sort.sortKey}}" - }, - { - "actionType": "showNotification", - "description": "{{\"Page size: \"+table8.pageSize+\", Offset: \"+table8.pageSize*table8.pageIndex}}", - "eventType": "paginationChange", - "id": "events-30ebf122-60f1-4229-a63d-4461ce6edbc4", - "title": "Current page: {{table8.pageIndex+1}}" - }, - { - "actionType": "showNotification", - "description": "{{table8.filters.map(obj => `${obj.id} ${obj.filterFn} ${obj.value}`).join(', ')}}", - "eventType": "filtersChange", - "id": "events-c9a86ec8-3318-45e6-a82d-4ac19335c293", - "title": "Filters changed" - }, - { - "actionType": "showNotification", - "description": "title: {{table8.selectedRow.map(obj => `${obj.title}`).join(', ')}}", - "eventType": "rowSelectChange", - "id": "events-061c5e02-50fe-476c-bf75-4e439cac8c7b", - "title": "Row selected changed" - }, - { - "actionType": "showNotification", - "description": "A row is clicked", - "eventType": "rowClick", - "id": "events-3764e328-9996-4481-83f3-5be860162908", - "title": "Row click" - }, - { - "actionType": "datasource", - "eventType": "refresh", - "id": "events-39315b4e-9128-4153-bc00-9047632a094f", - "queryID": "list_all_products" - } - ], - "filter": true, - "loading": "{{list_all_products.isRunning}}", - "loadingDynamic": true, - "multiRowSelection": false, - "overFlow": "pagination", - "pageIndex": 0, - "pageSize": "{{10}}", - "paginationOffset": 0, - "paginationType": "limitOffsetBased", - "refresh": true, - "renamedColumnNames": {}, - "rowEvents": {}, - "rowSelection": { - "4": true - }, - "selectedRow": [ - { - "brand": "Huawei", - "category": "smartphones", - "description": "Huawei’s re-badged P30 Pro New Edition was officially unveiled yesterday in Germany and now the device has made its way to the UK.", - "discountPercentage": 10.58, - "id": 5, - "images": [ - "https://i.dummyjson.com/data/products/5/1.jpg", - "https://i.dummyjson.com/data/products/5/2.jpg", - "https://i.dummyjson.com/data/products/5/3.jpg" - ], - "price": 499, - "rating": 4.09, - "stock": 32, - "thumbnail": "https://i.dummyjson.com/data/products/5/thumbnail.jpg", - "title": "Huawei P30" - } - ], - "selectedRowIndex": [4], - "totalRowCount": "" - } - }, - { - "version": 0, - "displayName": "tabs2", - "parentNode": "bodySection1-bodySectionContainer9", - "showName": "tabs", - "childrenNode": null, - "type": "TABS_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 32, - "w": 4, - "minH": 3, - "minW": 1, - "x": 0, - "y": 16, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "align": "flex-start", - "colorScheme": "blue", - "currentIndex": 2, - "currentKey": "Page change", - "linkWidgetDisplayName": "container3", - "navigateContainer": true, - "tabList": [ - { - "id": "73f2e007-e273-4449-b6c6-569885509e38", - "key": "Tab 1", - "label": "Tab 1" - }, - { - "id": "094e6540-1271-4276-9b1c-b087bd1c3861", - "key": "Tab 2", - "label": "Tab 2" - }, - { - "id": "c4c152af-cdef-48be-81e5-c7e8ce111f5c", - "key": "Tab 3", - "label": "Tab 3" - } - ], - "tabPosition": "left", - "viewList": [ - { - "id": "views-679c96b8-1fb5-4a02-b558-76e0f38d8ef7", - "key": "What and how", - "label": "What and how" - }, - { - "id": "01015a63-07cf-4ead-ae3d-36ef5c6f259d", - "key": "Sort change", - "label": "Sort change" - }, - { - "id": "08cb5b50-c866-4816-a205-bcb42163d58c", - "key": "Page change", - "label": "Page change" - }, - { - "id": "9cbe4a3b-42a9-481d-8457-25cdad979ad7", - "key": "Filters change", - "label": "Filters change" - }, - { - "id": "views-1129dfaa-e442-4949-8f9c-1ff9c4e12abd", - "key": "Row select change", - "label": "Row select change" - }, - { - "id": "views-39e911ae-78cc-48c0-a806-8cd74a434b0a", - "key": "Row click", - "label": "Row click" - }, - { - "id": "views-2bceb356-fae7-4f8a-8998-36ceca9aa318", - "key": "Refresh", - "label": "Refresh" - }, - { - "id": "views-45814011-2e9c-4263-8e7c-1e3e84787613", - "key": "Select a cell", - "label": "Select a cell" - } - ] - } - }, - { - "version": 0, - "displayName": "container3", - "parentNode": "bodySection1-bodySectionContainer9", - "showName": "container", - "childrenNode": [ - { - "version": 0, - "displayName": "canvas14", - "parentNode": "container3", - "showName": "canvas", - "childrenNode": [ - { - "version": 0, - "displayName": "text15", - "parentNode": "canvas14", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 63, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 0, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "### What is the event handler\nAn event handler is a function that listens for a specified event and triggers the desired functionality of the target task when that event occurs. We support listening to different events in various components and actions. \n \n For example, if you want to trigger a query when a button is clicked, you would need to use an event handler to listen for the button's click event and trigger the query accordingly. \n This article mainly introduces the events that the table component supports listening to and their usage.", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "image4", - "parentNode": "canvas14", - "showName": "image", - "childrenNode": null, - "type": "IMAGE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 47, - "w": 16, - "minH": 3, - "minW": 1, - "x": 0, - "y": 13, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "hidden": false, - "imageSrc": "https://cloud-api.illacloud.com/drive/f/e474bca4-d0ad-46c9-8242-d71e9f66d730", - "objectFit": "scale-down", - "radius": "0px" - } - }, - { - "version": 0, - "displayName": "image5", - "parentNode": "canvas14", - "showName": "image", - "childrenNode": null, - "type": "IMAGE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 47, - "w": 16, - "minH": 3, - "minW": 1, - "x": 16, - "y": 13, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "hidden": false, - "imageSrc": "https://cloud-api.illacloud.com/drive/f/54561f4a-45c1-4a27-b718-aff8d166f0ad", - "objectFit": "scale-down", - "radius": "0px" - } - }, - { - "version": 0, - "displayName": "text28", - "parentNode": "canvas14", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 30, - "minH": 3, - "minW": 1, - "x": 0, - "y": 8, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "### How to add an event handler", - "verticalAlign": "center" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "canvas15", - "parentNode": "container3", - "showName": "canvas", - "childrenNode": [ - { - "version": 0, - "displayName": "text16", - "parentNode": "canvas15", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 63, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 0, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "### Usage\nThis is very useful when you use server-side pagination. You can use tableX.sort.sortKey to set the order by column and use tableX.sort.sortOrder to set the order direction. \n\n### Useful data\n**sort**. an object which contains 2 atrributes, \n1. sortKey: which column is sorted\n2. sortOrder: ascend or descend\n### How to use it\n#### API\n***This syntax may vary based on different APIs.***\n```\n?sort={\\{table1.sort.sortKey}}&order={\\{table1.sort.sortOrder==\"ascend\"?\"asc\":\"desc\"}}\n```", - "verticalAlign": "center" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "canvas16", - "parentNode": "container3", - "showName": "canvas", - "childrenNode": [ - { - "version": 0, - "displayName": "text29", - "parentNode": "canvas16", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 58, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 0, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "### Usage\nThis is very useful when you use server-side pagination. You can use tableX.pageIndex * tableX.pageSize(or tableX.paginationOffset) to set the offset value\n\n### Useful data\n**pageIndex**. a number starting from 0. \n **pageSize**. the page size you set on the inspect panel. \n **paginationOffset**: Used to set the offset or skip in query. It is the same as {\\{table1.pageIndex*table1.pageSize}}\n\n### How to use it\n#### SQL\n```\nselect * from \nt1\noffset {\\{table8.pageSize*table8.pageIndex}}\nlimit {\\{table8.pageSize}}\n```\n\n#### API\n***This syntax may vary based on different APIs.***\n```\n?limit={\\{table2.pageSize}}&skip={\\{table2.pageIndex*table2.pageSize}}\n```", - "verticalAlign": "center" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "canvas17", - "parentNode": "container3", - "showName": "canvas", - "childrenNode": [ - { - "version": 0, - "displayName": "text27", - "parentNode": "canvas17", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 58, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 0, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "### Usage\nThis is very useful when you use server-side pagination. \n\n### Useful data\n**filters**. an array of filter object. The filter object contains 3 atrributes, \n 1. id--the column id, \n 2. value--the target value, \n \n 3. filterFn: the filter functions such as equalTo. \n\n For example, price>=10, the filter object will be \n```\n{\n \"id\":\"price\", \n \"value\":10, \n \"filterFn\":\"notLessThan\"\n}\n```\n### How to use it\nYou can use the data in filters to set your query. \n#### SQL\n\n```\nselect * from \nt1\nwhere {\\{table1.filters[0].id}}='{table1.filters[0].value}'\noffset {\\{table1.pageSize*table1.pageIndex}}\nlimit {\\{table1.pageSize}}\n```\n\nand the total rows should be\n```\nselect count(*) from \nt1\nwhere {\\{table1.filters[0].id}}='{table1.filters[0].value}'\n```\nand you can also calculate the total pages after filtering: {\\{table1.totalRowCount/table1.pageSize}}", - "verticalAlign": "center" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "canvas18", - "parentNode": "container3", - "showName": "canvas", - "childrenNode": [ - { - "version": 0, - "displayName": "text30", - "parentNode": "canvas18", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 78, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 0, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "### Usage\nWhen you want to trigger certain actions when the selected rows change, you can use this event handler. For example, when a row is selected, you can trigger a new query based on its ID.\n\n### Useful data\n**selectedRow**. an array of \nrow data objects. \n When the table allows selecting multiple row, you can use table1.selectedRow to get the data of the selected rows. \n When the table only allows selecting a single row, you can use table1.selectedRow[0] to get the data of the selected row and use table1.selectedRow[0].columnName to get any column data in the selected row. \n **selectRowIndex**: an array of all selectedRow indexes. \n### How to use it\nFor example, to trigger a query where id = selectedRow[0].id\n#### SQL\n```\nselect * from \nt1\nwhere id = '{\\{table1.selectedRow[0].id}}'\n```", - "verticalAlign": "center" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "canvas19", - "parentNode": "container3", - "showName": "canvas", - "childrenNode": [ - { - "version": 0, - "displayName": "text31", - "parentNode": "canvas19", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 51, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 0, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "### Usage\nUsed to trigger certain actions when the row is clicked. \n When enabled multiple rows selection, it will be different from row select change. \n When disabled multiple rows selection, it will be same with row select change", - "verticalAlign": "center" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "canvas20", - "parentNode": "container3", - "showName": "canvas", - "childrenNode": [ - { - "version": 0, - "displayName": "text32", - "parentNode": "canvas20", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 15, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 0, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "### Usage\nWhen the data in your database may be updated, the refresh event will be useful. \n\n ### How to use it\nFor example, the data source of the table is {\\{list_all_products.data.products}} (`list_all_product` is the query). You can set the event handler as follows: 1. set the event to Refresh 2. set the action to trigger action 3. change the action to `list_all_product` \nAnd we will re-run `list_all_product` when trigger the refresh(You can try to trigger it via clicking the refresh icon on the table👇)", - "verticalAlign": "center" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "canvas21", - "parentNode": "container3", - "showName": "canvas", - "childrenNode": [ - { - "version": 0, - "displayName": "text33", - "parentNode": "canvas21", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 25, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 0, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "### Usage\nUsed to trigger certain actions when the cell is clicked and selected. \n\n To use it, you have to turn on the switch on the inspect panel", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "image3", - "parentNode": "canvas21", - "showName": "image", - "childrenNode": null, - "type": "IMAGE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 47, - "w": 16, - "minH": 3, - "minW": 1, - "x": 0, - "y": 13, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "hidden": false, - "imageSrc": "https://cloud-api.illacloud.com/drive/f/694aaafe-0c99-47b9-8993-b7a4cc0c8b66", - "objectFit": "scale-down", - "radius": "0px" - } - }, - { - "version": 0, - "displayName": "text34", - "parentNode": "canvas21", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 25, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 60, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "### Useful data\n**selectedCell**: an object contains 3 attribute: \n\n1. index: the index of the row containing the cell in the data source is not affected by filtering, sorting, or other operations.\n\n 2. columnName: the column name of the cell's column. This is the column name provided by the data source, and changing the displayed column name only through the inspect panel will not affect this value.\n\n3. value: the original value returned by the data source\n\n4. mappedValue: when a mapped value has been set, the mapped value.\n\n### How to use it\n1. Use `table1.selectedCell.value` to get the value\n2. Use `table1.dataSourceJS[table5.selectedCell.index].id` to get the data on the same row (the example statement is get id) . ", - "verticalAlign": "center" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "CONTAINER_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 37, - "w": 28, - "minH": 3, - "minW": 1, - "x": 4, - "y": 16, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "backgroundColor": "#ffffffff", - "borderColor": "#ffffffff", - "borderWidth": "1px", - "currentIndex": 2, - "currentKey": "Page change", - "dynamicHeight": "fixed", - "linkWidgetDisplayName": "tabs2", - "radius": "4px", - "resizeDirection": "ALL", - "shadow": "small", - "viewList": [ - { - "id": "views-679c96b8-1fb5-4a02-b558-76e0f38d8ef7", - "key": "What and how", - "label": "What and how" - }, - { - "id": "01015a63-07cf-4ead-ae3d-36ef5c6f259d", - "key": "Sort change", - "label": "Sort change" - }, - { - "id": "08cb5b50-c866-4816-a205-bcb42163d58c", - "key": "Page change", - "label": "Page change" - }, - { - "id": "9cbe4a3b-42a9-481d-8457-25cdad979ad7", - "key": "Filters change", - "label": "Filters change" - }, - { - "id": "views-1129dfaa-e442-4949-8f9c-1ff9c4e12abd", - "key": "Row select change", - "label": "Row select change" - }, - { - "id": "views-39e911ae-78cc-48c0-a806-8cd74a434b0a", - "key": "Row click", - "label": "Row click" - }, - { - "id": "views-2bceb356-fae7-4f8a-8998-36ceca9aa318", - "key": "Refresh", - "label": "Refresh" - }, - { - "id": "views-45814011-2e9c-4263-8e7c-1e3e84787613", - "key": "Select a cell", - "label": "Select a cell" - } - ] - } - }, - { - "version": 0, - "displayName": "divider8", - "parentNode": "bodySection1-bodySectionContainer9", - "showName": "divider", - "childrenNode": null, - "type": "DIVIDER_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 48, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "fs": "14px", - "hidden": false - } - }, - { - "version": 0, - "displayName": "text26", - "parentNode": "bodySection1-bodySectionContainer9", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 53, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "fixed", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "ALL", - "value": "Try to trigger the event such as change sort, change page...👇", - "verticalAlign": "center" - } - } - ], - "type": "CONTAINER_NODE", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "bodySection1-bodySectionContainer10", - "parentNode": "bodySection1", - "showName": "bodySectionContainer", - "childrenNode": [ - { - "version": 0, - "displayName": "input17", - "parentNode": "bodySection1-bodySectionContainer10", - "showName": "input", - "childrenNode": null, - "type": "INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 10, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 18, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "formDataKey", - "showVisibleButton" - ], - "colorScheme": "blue", - "events": [ - { - "actionType": "datasource", - "eventType": "change", - "id": "events-602b1507-54bb-4ff9-95ca-4e9e38a1a045", - "queryID": "search_by_name" - } - ], - "formDataKey": "{{input17.displayName}}", - "hidden": false, - "label": "Search by name", - "labelAlign": "left", - "labelCaption": "When input nothing, show all data. When input sth, transform the input string into lowcase and search it. The action is triggered when the input changes. ", - "labelPosition": "top", - "labelWidth": "{{33}}", - "placeholder": "input sth", - "showVisibleButton": "{{true}}", - "type": "input", - "value": "" - } - }, - { - "version": 0, - "displayName": "text17", - "parentNode": "bodySection1-bodySectionContainer10", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 11, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 5, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "# Search from database", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "table9", - "parentNode": "bodySection1-bodySectionContainer10", - "showName": "table", - "childrenNode": null, - "type": "TABLE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 85, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 29, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "dataSourceJS", - "pageSize", - "dataSource" - ], - "columnMapper": { - "charge": { - "accessorKey": "charge", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 1, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "charge", - "id": "charge", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "email": { - "accessorKey": "email", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 2, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "email", - "id": "email", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "expired_time": { - "accessorKey": "expired_time", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 3, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "expired_time", - "id": "expired_time", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "feature_flag": { - "accessorKey": "feature_flag", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 4, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "feature_flag", - "id": "feature_flag", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "id": { - "accessorKey": "id", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 0, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "id", - "id": "id", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "img": { - "accessorKey": "img", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 5, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "img", - "id": "img", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "name": { - "accessorKey": "name", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 6, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "name", - "id": "name", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "start_time": { - "accessorKey": "start_time", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 7, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "start_time", - "id": "start_time", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - } - }, - "columnNameIndices": { - "0": "id", - "1": "charge", - "2": "email", - "3": "expired_time", - "4": "feature_flag", - "5": "img", - "6": "name", - "7": "start_time" - }, - "columnSizing": { - "id": 72 - }, - "columnVisibility": { - "charge": true, - "email": true, - "expired_time": true, - "feature_flag": true, - "id": true, - "img": true, - "name": true, - "start_time": true - }, - "columns": [ - { - "accessorKey": "id", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 0, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "id", - "id": "id", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "charge", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 1, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "charge", - "id": "charge", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "email", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 2, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "email", - "id": "email", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "expired_time", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 3, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "expired_time", - "id": "expired_time", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "feature_flag", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 4, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "feature_flag", - "id": "feature_flag", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "img", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 5, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "img", - "id": "img", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "name", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 6, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "name", - "id": "name", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "start_time", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 7, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "start_time", - "id": "start_time", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - } - ], - "customColumnIndices": {}, - "dataSource": "{{search_by_name.data}}", - "dataSourceJS": "{{list_all_products.data.products}}", - "dataSourceMode": "select", - "defaultSortKey": "default", - "defaultSortOrder": "ascend", - "download": false, - "emptyState": "No rows found", - "enableSingleCellSelection": true, - "filter": false, - "overFlow": "pagination", - "pageIndex": 0, - "pageSize": "{{10}}", - "paginationOffset": 0, - "renamedColumnNames": {}, - "rowEvents": {}, - "rowSelection": { - "4": true - }, - "selectedRow": [ - { - "charge": "50000", - "email": "Jason@outlook.com", - "expired_time": "2024-01-04", - "feature_flag": "feature5", - "id": "5", - "img": "https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=1600", - "name": "Jason", - "start_time": "2023-01-05" - } - ], - "selectedRowIndex": [4] - } - } - ], - "type": "CONTAINER_NODE", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "bodySection1-bodySectionContainer11", - "parentNode": "bodySection1", - "showName": "bodySectionContainer", - "childrenNode": [ - { - "version": 0, - "displayName": "text18", - "parentNode": "bodySection1-bodySectionContainer11", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 11, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 5, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "# currentRow", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "table10", - "parentNode": "bodySection1-bodySectionContainer11", - "showName": "table", - "childrenNode": null, - "type": "TABLE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 85, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 59, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "columns[11].mappedValue", - "columns[13].mappedValue", - "columns[14].mappedValue", - "dataSourceJS", - "pageSize", - "columns[11].mappedValue", - "columns[8].backgroundColor", - "columns[5].mappedValue", - "columns[5].decimalPlaces", - "columns[12].disabled", - "columns[12].events[0].title", - "columns[12].events[0].description" - ], - "columnMapper": { - "Disabled when price <1000": { - "accessorKey": "column-6b5c44bd-c0e6-407d-bc7e-8a47dfcd7345", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 12, - "custom": true, - "disabled": [ - true, - true, - false, - true, - true, - false, - false, - false, - false, - false, - true, - true, - true, - true, - true, - true, - true, - true, - true, - true, - true, - true, - true, - true, - true, - true, - true, - true, - true, - true - ], - "enableSorting": true, - "events": [ - { - "actionType": "showNotification", - "description": [ - "The price is: 549", - "The price is: 899", - "The price is: 1249", - "The price is: 280", - "The price is: 499", - "The price is: 1749", - "The price is: 1499", - "The price is: 1499", - "The price is: 1099", - "The price is: 1099", - "The price is: 13", - "The price is: 40", - "The price is: 13", - "The price is: 120", - "The price is: 30", - "The price is: 19", - "The price is: 12", - "The price is: 40", - "The price is: 46", - "The price is: 70", - "The price is: 20", - "The price is: 14", - "The price is: 14", - "The price is: 46", - "The price is: 70", - "The price is: 41", - "The price is: 51", - "The price is: 20", - "The price is: 60", - "The price is: 30" - ], - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-1c22eda9-aacc-45a4-bd95-77ce5797f081", - "title": [ - "iPhone 9", - "iPhone X", - "Samsung Universe 9", - "OPPOF19", - "Huawei P30", - "MacBook Pro", - "Samsung Galaxy Book", - "Microsoft Surface Laptop 4", - "Infinix INBOOK", - "HP Pavilion 15-DK1056WM", - "perfume Oil", - "Brown Perfume", - "Fog Scent Xpressio Perfume", - "Non-Alcoholic Concentrated Perfume Oil", - "Eau De Perfume Spray", - "Hyaluronic Acid Serum", - "Tree Oil 30ml", - "Oil Free Moisturizer 100ml", - "Skin Beauty Serum.", - "Freckle Treatment Cream- 15gm", - "- Daal Masoor 500 grams", - "Elbow Macaroni - 400 gm", - "Orange Essence Food Flavou", - "cereals muesli fruit nuts", - "Gulab Powder 50 Gram", - "Plant Hanger For Home", - "Flying Wooden Bird", - "3D Embellishment Art Lamp", - "Handcraft Chinese style", - "Key Holder" - ] - } - ], - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "disabled": true, - "mappedValue": false - }, - "header": "Disabled when price <1000", - "id": "column-6b5c44bd-c0e6-407d-bc7e-8a47dfcd7345", - "mappedValue": "Show title and price", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "button", - "visible": true - }, - "brand": { - "accessorKey": "brand", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 6, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "brand", - "id": "brand", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": false - }, - "calculated from the first two columns": { - "accessorKey": "column-9a0230e5-c189-4371-bb0a-e5c60de2c270", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 5, - "custom": true, - "decimalPlaces": 0, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "mappedValue": true - }, - "header": "calculated from the first two columns", - "id": "column-9a0230e5-c189-4371-bb0a-e5c60de2c270", - "mappedValue": [ - 71.1504, 161.28060000000002, 193.0954, 50.148, - 52.794200000000004, 192.7398, 62.20850000000001, - 153.3477, 130.0117, 67.9182, 1.092, 6.264, 1.0582, - 18.72, 3.297, 2.5289, 0.4908, 5.24, 4.9128, - 11.892999999999999, 0.9619999999999999, 2.1812, - 1.1256, 7.728000000000001, 9.506, 7.3226, 7.9458, - 3.2979999999999996, 9.204, 0.876 - ], - "objectFit": "scale-down", - "tagColor": "auto", - "type": "number", - "visible": true - }, - "category": { - "accessorKey": "category", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 10, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "category", - "id": "category", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": false - }, - "description": { - "accessorKey": "description", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 2, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "description", - "id": "description", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": false - }, - "discountPercentage": { - "accessorKey": "discountPercentage", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 4, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "discountPercentage", - "id": "discountPercentage", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "id": { - "accessorKey": "id", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 0, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "id", - "id": "id", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": false - }, - "images": { - "accessorKey": "images", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 11, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "mappedValue": true - }, - "header": "images", - "id": "images", - "mappedValue": [ - "https://i.dummyjson.com/data/products/1/1.jpg", - "https://i.dummyjson.com/data/products/2/1.jpg", - "https://i.dummyjson.com/data/products/3/1.jpg", - "https://i.dummyjson.com/data/products/4/1.jpg", - "https://i.dummyjson.com/data/products/5/1.jpg", - "https://i.dummyjson.com/data/products/6/1.png", - "https://i.dummyjson.com/data/products/7/1.jpg", - "https://i.dummyjson.com/data/products/8/1.jpg", - "https://i.dummyjson.com/data/products/9/1.jpg", - "https://i.dummyjson.com/data/products/10/1.jpg", - "https://i.dummyjson.com/data/products/11/1.jpg", - "https://i.dummyjson.com/data/products/12/1.jpg", - "https://i.dummyjson.com/data/products/13/1.jpg", - "https://i.dummyjson.com/data/products/14/1.jpg", - "https://i.dummyjson.com/data/products/15/1.jpg", - "https://i.dummyjson.com/data/products/16/1.png", - "https://i.dummyjson.com/data/products/17/1.jpg", - "https://i.dummyjson.com/data/products/18/1.jpg", - "https://i.dummyjson.com/data/products/19/1.jpg", - "https://i.dummyjson.com/data/products/20/1.jpg", - "https://i.dummyjson.com/data/products/21/1.png", - "https://i.dummyjson.com/data/products/22/1.jpg", - "https://i.dummyjson.com/data/products/23/1.jpg", - "https://i.dummyjson.com/data/products/24/1.jpg", - "https://i.dummyjson.com/data/products/25/1.png", - "https://i.dummyjson.com/data/products/26/1.jpg", - "https://i.dummyjson.com/data/products/27/1.jpg", - "https://i.dummyjson.com/data/products/28/1.jpg", - "https://i.dummyjson.com/data/products/29/1.jpg", - "https://i.dummyjson.com/data/products/30/1.jpg" - ], - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": false - }, - "price": { - "accessorKey": "price", - "alignment": "left", - "backgroundColor": "", - "colorScheme": "blue", - "columnIndex": 3, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "backgroundColor": false, - "mappedValue": false - }, - "header": "price", - "id": "price", - "mappedValue": "", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "rating": { - "accessorKey": "rating", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 7, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "mappedValue": false - }, - "header": "rating", - "id": "rating", - "mappedValue": "", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "rating", - "visible": false - }, - "stock": { - "accessorKey": "stock", - "alignment": "left", - "backgroundColor": [ - "#A8674C", - "#4C8BA8", - "#4C8BA8", - "#A8674C", - "#4C8BA8", - "#A8674C", - "#A8674C", - "#A8674C", - "#A8674C", - "#A8674C", - "#A8674C", - "#A8674C", - "#A8674C", - "#A8674C", - "#A8674C", - "#A8674C", - "#A8674C", - "#A8674C", - "#A8674C", - "#A8674C", - "#A8674C", - "#A8674C", - "#4C8BA8", - "#A8674C", - "#4C8BA8", - "#A8674C", - "#4C8BA8", - "#A8674C", - "#4C8BA8", - "#A8674C" - ], - "colorScheme": "blue", - "columnIndex": 8, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "backgroundColor": true, - "mappedValue": false - }, - "header": "stock", - "id": "stock", - "mappedValue": "", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "thumbnail": { - "accessorKey": "thumbnail", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 9, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "thumbnail", - "id": "thumbnail", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": false - }, - "title": { - "accessorKey": "title", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 1, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "title", - "id": "title", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "text", - "visible": false - } - }, - "columnNameIndices": { - "0": "id", - "1": "title", - "2": "description", - "3": "price", - "4": "discountPercentage", - "5": "calculated from the first two columns", - "6": "brand", - "7": "rating", - "8": "stock", - "9": "thumbnail", - "10": "category", - "11": "images", - "12": "Disabled when price <1000" - }, - "columnSizing": { - "column-9a0230e5-c189-4371-bb0a-e5c60de2c270": 351, - "discountPercentage": 270, - "id": 72, - "price": 195, - "rating": 231, - "stock": 230 - }, - "columnVisibility": { - "Disabled when price <1000": true, - "brand": false, - "calculated from the first two columns": true, - "category": false, - "description": false, - "discountPercentage": true, - "id": false, - "images": false, - "price": true, - "rating": false, - "stock": true, - "thumbnail": false, - "title": false - }, - "columns": [ - { - "accessorKey": "id", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 0, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "id", - "id": "id", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": false - }, - { - "accessorKey": "title", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 1, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "title", - "id": "title", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "text", - "visible": false - }, - { - "accessorKey": "description", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 2, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "description", - "id": "description", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": false - }, - { - "accessorKey": "price", - "alignment": "left", - "backgroundColor": "", - "colorScheme": "blue", - "columnIndex": 3, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "backgroundColor": false, - "mappedValue": false - }, - "header": "price", - "id": "price", - "mappedValue": "", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "discountPercentage", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 4, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "discountPercentage", - "id": "discountPercentage", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "column-9a0230e5-c189-4371-bb0a-e5c60de2c270", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 5, - "custom": true, - "decimalPlaces": "{{0}}", - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "mappedValue": true - }, - "header": "calculated from the first two columns", - "id": "column-9a0230e5-c189-4371-bb0a-e5c60de2c270", - "mappedValue": "{{table10.dataSourceJS.map((currentRow) => ( currentRow.price*currentRow.discountPercentage*0.01))}}", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "number", - "visible": true - }, - { - "accessorKey": "brand", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 6, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "brand", - "id": "brand", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": false - }, - { - "accessorKey": "rating", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 7, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "mappedValue": false - }, - "header": "rating", - "id": "rating", - "mappedValue": "", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "rating", - "visible": false - }, - { - "accessorKey": "stock", - "alignment": "left", - "backgroundColor": "{{table10.dataSourceJS.map((currentRow) => ( currentRow.stock<50?\"#4C8BA8\":\"#A8674C\"))}}", - "colorScheme": "blue", - "columnIndex": 8, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "backgroundColor": true, - "mappedValue": false - }, - "header": "stock", - "id": "stock", - "mappedValue": "", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "thumbnail", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 9, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "thumbnail", - "id": "thumbnail", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": false - }, - { - "accessorKey": "category", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 10, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "category", - "id": "category", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": false - }, - { - "accessorKey": "images", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 11, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "mappedValue": true - }, - "header": "images", - "id": "images", - "mappedValue": "{{table1.dataSourceJS.map((currentRow) => ( currentRow.images[0]))}}", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": false - }, - { - "accessorKey": "column-6b5c44bd-c0e6-407d-bc7e-8a47dfcd7345", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 12, - "custom": true, - "disabled": "{{table10.dataSourceJS.map((currentRow) => ( currentRow.price<1000))}}", - "enableSorting": true, - "events": [ - { - "actionType": "showNotification", - "description": "{{table10.dataSourceJS.map((currentRow) => ( \"The price is: \"+currentRow.price))}}", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-1c22eda9-aacc-45a4-bd95-77ce5797f081", - "title": "{{table10.dataSourceJS.map((currentRow) => ( currentRow.title))}}" - } - ], - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "disabled": true, - "mappedValue": false - }, - "header": "Disabled when price <1000", - "id": "column-6b5c44bd-c0e6-407d-bc7e-8a47dfcd7345", - "mappedValue": "Show title and price", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "button", - "visible": true - } - ], - "customColumnIndices": { - "5": "calculated from the first two columns", - "12": "Disabled when price <1000" - }, - "dataSourceJS": "{{list_all_products.data.products}}", - "dataSourceMode": "dynamic", - "defaultSortKey": "default", - "defaultSortOrder": "ascend", - "download": false, - "emptyState": "No rows found", - "filter": false, - "overFlow": "pagination", - "pageIndex": 0, - "pageSize": "{{10}}", - "paginationOffset": 0, - "renamedColumnNames": {}, - "rowEvents": { - "12": { - "0": [ - { - "actionType": "showNotification", - "description": "The price is: 549", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-1c22eda9-aacc-45a4-bd95-77ce5797f081", - "title": "iPhone 9" - } - ], - "1": [ - { - "actionType": "showNotification", - "description": "The price is: 899", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-1c22eda9-aacc-45a4-bd95-77ce5797f081", - "title": "iPhone X" - } - ], - "2": [ - { - "actionType": "showNotification", - "description": "The price is: 1249", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-1c22eda9-aacc-45a4-bd95-77ce5797f081", - "title": "Samsung Universe 9" - } - ], - "3": [ - { - "actionType": "showNotification", - "description": "The price is: 280", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-1c22eda9-aacc-45a4-bd95-77ce5797f081", - "title": "OPPOF19" - } - ], - "4": [ - { - "actionType": "showNotification", - "description": "The price is: 499", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-1c22eda9-aacc-45a4-bd95-77ce5797f081", - "title": "Huawei P30" - } - ], - "5": [ - { - "actionType": "showNotification", - "description": "The price is: 1749", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-1c22eda9-aacc-45a4-bd95-77ce5797f081", - "title": "MacBook Pro" - } - ], - "6": [ - { - "actionType": "showNotification", - "description": "The price is: 1499", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-1c22eda9-aacc-45a4-bd95-77ce5797f081", - "title": "Samsung Galaxy Book" - } - ], - "7": [ - { - "actionType": "showNotification", - "description": "The price is: 1499", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-1c22eda9-aacc-45a4-bd95-77ce5797f081", - "title": "Microsoft Surface Laptop 4" - } - ], - "8": [ - { - "actionType": "showNotification", - "description": "The price is: 1099", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-1c22eda9-aacc-45a4-bd95-77ce5797f081", - "title": "Infinix INBOOK" - } - ], - "9": [ - { - "actionType": "showNotification", - "description": "The price is: 1099", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-1c22eda9-aacc-45a4-bd95-77ce5797f081", - "title": "HP Pavilion 15-DK1056WM" - } - ], - "10": [ - { - "actionType": "showNotification", - "description": "The price is: 13", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-1c22eda9-aacc-45a4-bd95-77ce5797f081", - "title": "perfume Oil" - } - ], - "11": [ - { - "actionType": "showNotification", - "description": "The price is: 40", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-1c22eda9-aacc-45a4-bd95-77ce5797f081", - "title": "Brown Perfume" - } - ], - "12": [ - { - "actionType": "showNotification", - "description": "The price is: 13", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-1c22eda9-aacc-45a4-bd95-77ce5797f081", - "title": "Fog Scent Xpressio Perfume" - } - ], - "13": [ - { - "actionType": "showNotification", - "description": "The price is: 120", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-1c22eda9-aacc-45a4-bd95-77ce5797f081", - "title": "Non-Alcoholic Concentrated Perfume Oil" - } - ], - "14": [ - { - "actionType": "showNotification", - "description": "The price is: 30", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-1c22eda9-aacc-45a4-bd95-77ce5797f081", - "title": "Eau De Perfume Spray" - } - ], - "15": [ - { - "actionType": "showNotification", - "description": "The price is: 19", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-1c22eda9-aacc-45a4-bd95-77ce5797f081", - "title": "Hyaluronic Acid Serum" - } - ], - "16": [ - { - "actionType": "showNotification", - "description": "The price is: 12", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-1c22eda9-aacc-45a4-bd95-77ce5797f081", - "title": "Tree Oil 30ml" - } - ], - "17": [ - { - "actionType": "showNotification", - "description": "The price is: 40", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-1c22eda9-aacc-45a4-bd95-77ce5797f081", - "title": "Oil Free Moisturizer 100ml" - } - ], - "18": [ - { - "actionType": "showNotification", - "description": "The price is: 46", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-1c22eda9-aacc-45a4-bd95-77ce5797f081", - "title": "Skin Beauty Serum." - } - ], - "19": [ - { - "actionType": "showNotification", - "description": "The price is: 70", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-1c22eda9-aacc-45a4-bd95-77ce5797f081", - "title": "Freckle Treatment Cream- 15gm" - } - ], - "20": [ - { - "actionType": "showNotification", - "description": "The price is: 20", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-1c22eda9-aacc-45a4-bd95-77ce5797f081", - "title": "- Daal Masoor 500 grams" - } - ], - "21": [ - { - "actionType": "showNotification", - "description": "The price is: 14", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-1c22eda9-aacc-45a4-bd95-77ce5797f081", - "title": "Elbow Macaroni - 400 gm" - } - ], - "22": [ - { - "actionType": "showNotification", - "description": "The price is: 14", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-1c22eda9-aacc-45a4-bd95-77ce5797f081", - "title": "Orange Essence Food Flavou" - } - ], - "23": [ - { - "actionType": "showNotification", - "description": "The price is: 46", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-1c22eda9-aacc-45a4-bd95-77ce5797f081", - "title": "cereals muesli fruit nuts" - } - ], - "24": [ - { - "actionType": "showNotification", - "description": "The price is: 70", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-1c22eda9-aacc-45a4-bd95-77ce5797f081", - "title": "Gulab Powder 50 Gram" - } - ], - "25": [ - { - "actionType": "showNotification", - "description": "The price is: 41", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-1c22eda9-aacc-45a4-bd95-77ce5797f081", - "title": "Plant Hanger For Home" - } - ], - "26": [ - { - "actionType": "showNotification", - "description": "The price is: 51", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-1c22eda9-aacc-45a4-bd95-77ce5797f081", - "title": "Flying Wooden Bird" - } - ], - "27": [ - { - "actionType": "showNotification", - "description": "The price is: 20", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-1c22eda9-aacc-45a4-bd95-77ce5797f081", - "title": "3D Embellishment Art Lamp" - } - ], - "28": [ - { - "actionType": "showNotification", - "description": "The price is: 60", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-1c22eda9-aacc-45a4-bd95-77ce5797f081", - "title": "Handcraft Chinese style" - } - ], - "29": [ - { - "actionType": "showNotification", - "description": "The price is: 30", - "eventType": "clickMenuItem", - "fromCurrentRow": { - "description": true, - "title": true - }, - "id": "events-1c22eda9-aacc-45a4-bd95-77ce5797f081", - "title": "Key Holder" - } - ] - } - }, - "rowSelection": { - "1": true - }, - "selectedRow": [ - { - "brand": "Apple", - "category": "smartphones", - "description": "SIM-Free, Model A19211 6.5-inch Super Retina HD display with OLED technology A12 Bionic chip with ...", - "discountPercentage": 17.94, - "id": 2, - "images": [ - "https://i.dummyjson.com/data/products/2/1.jpg", - "https://i.dummyjson.com/data/products/2/2.jpg", - "https://i.dummyjson.com/data/products/2/3.jpg", - "https://i.dummyjson.com/data/products/2/thumbnail.jpg" - ], - "price": 899, - "rating": 4.44, - "stock": 34, - "thumbnail": "https://i.dummyjson.com/data/products/2/thumbnail.jpg", - "title": "iPhone X" - } - ], - "selectedRowIndex": [1] - } - }, - { - "version": 0, - "displayName": "text19", - "parentNode": "bodySection1-bodySectionContainer11", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 26, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 17, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "blackAlpha", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "tooltipText": "", - "value": "### Usage\n**currentRow** is very helpful when you want to configure each cell in a column based on some data that changes with the row it belongs to. \n### How to use it\nMost of the properties related to the columns can be configured using currentRow. For example, \n1. If you want the data displayed in column1 to be the original data in column1 multiplied by 10, you can use currentRow.column1*10. \n\n2. When you want the color of each cell in column1 to be determined by its own value, red for >=500 and green for <500, you can use currentRow.column1>=500? \"red\": \"green\"\n\n### Tips\nYou can use the currentRow only on the table inspect panel. And you do not need to use tableX. to call currentRow, as this will result in an error (❌ table1.currentRow.title;✅ currentRow.title)", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "divider3", - "parentNode": "bodySection1-bodySectionContainer11", - "showName": "divider", - "childrenNode": null, - "type": "DIVIDER_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 54, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "fs": "14px", - "hidden": false - } - } - ], - "type": "CONTAINER_NODE", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "bodySection1-bodySectionContainer12", - "parentNode": "bodySection1", - "showName": "bodySectionContainer", - "childrenNode": [ - { - "version": 0, - "displayName": "text36", - "parentNode": "bodySection1-bodySectionContainer12", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 11, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 5, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "# Control table via other components or actions", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "text37", - "parentNode": "bodySection1-bodySectionContainer12", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 16, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "### We support the following methods\n\n1. Set filter: you can check it in [Search by filter](https://builder.illacloud.com/illacloud_demo/deploy/app/ILAex4p1C7Ga/page1/View%207)\n2. Clear filter: this method will clear the filters set on the table\n3. Select row: use a number to set the row index to select. The index starts from 0\n4. Clear selection: clear the selected row\n5. Select page: use a number to set the page index to select. The index starts from 0\n6. Set sort: use **column name** and **direction(ascend, descend)** to set sort", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "divider9", - "parentNode": "bodySection1-bodySectionContainer12", - "showName": "divider", - "childrenNode": null, - "type": "DIVIDER_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 43, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "fs": "14px", - "hidden": false - } - }, - { - "version": 0, - "displayName": "table1", - "parentNode": "bodySection1-bodySectionContainer12", - "showName": "table", - "childrenNode": null, - "type": "TABLE_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 85, - "w": 22, - "minH": 3, - "minW": 1, - "x": 10, - "y": 54, - "z": 0, - "props": { - "$dynamicAttrPaths": ["dataSourceJS", "pageSize"], - "columnMapper": { - "brand": { - "accessorKey": "brand", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 5, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "brand", - "id": "brand", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "category": { - "accessorKey": "category", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 9, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "category", - "id": "category", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "description": { - "accessorKey": "description", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 2, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "description", - "id": "description", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "discountPercentage": { - "accessorKey": "discountPercentage", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 4, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "discountPercentage", - "id": "discountPercentage", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "id": { - "accessorKey": "id", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 0, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "id", - "id": "id", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "images": { - "accessorKey": "images", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 10, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "images", - "id": "images", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "image", - "visible": true - }, - "price": { - "accessorKey": "price", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 3, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "mappedValue": false - }, - "header": "price", - "id": "price", - "mappedValue": "", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "rating": { - "accessorKey": "rating", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 6, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "rating", - "id": "rating", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "stock": { - "accessorKey": "stock", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 7, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "stock", - "id": "stock", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "thumbnail": { - "accessorKey": "thumbnail", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 8, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "thumbnail", - "id": "thumbnail", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - "title": { - "accessorKey": "title", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 1, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "title", - "id": "title", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "text", - "visible": true - } - }, - "columnNameIndices": { - "0": "id", - "1": "title", - "2": "description", - "3": "price", - "4": "discountPercentage", - "5": "brand", - "6": "rating", - "7": "stock", - "8": "thumbnail", - "9": "category", - "10": "images" - }, - "columnSizing": { - "id": 72 - }, - "columnVisibility": { - "brand": true, - "category": true, - "description": true, - "discountPercentage": true, - "id": true, - "images": true, - "price": true, - "rating": true, - "stock": true, - "thumbnail": true, - "title": true - }, - "columns": [ - { - "accessorKey": "id", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 0, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "id", - "id": "id", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "title", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 1, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "title", - "id": "title", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "text", - "visible": true - }, - { - "accessorKey": "description", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 2, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "description", - "id": "description", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "price", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 3, - "enableSorting": true, - "format": "YYYY-MM-DD", - "fromCurrentRow": { - "mappedValue": false - }, - "header": "price", - "id": "price", - "mappedValue": "", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "discountPercentage", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 4, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "discountPercentage", - "id": "discountPercentage", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "brand", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 5, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "brand", - "id": "brand", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "rating", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 6, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "rating", - "id": "rating", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "stock", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 7, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "stock", - "id": "stock", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "thumbnail", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 8, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "thumbnail", - "id": "thumbnail", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "category", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 9, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "category", - "id": "category", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "auto", - "visible": true - }, - { - "accessorKey": "images", - "alignment": "left", - "colorScheme": "blue", - "columnIndex": 10, - "enableSorting": true, - "format": "YYYY-MM-DD", - "header": "images", - "id": "images", - "objectFit": "scale-down", - "tagColor": "auto", - "type": "image", - "visible": true - } - ], - "customColumnIndices": {}, - "dataSourceJS": "{{list_all_products.data.products}}", - "dataSourceMode": "dynamic", - "defaultSortKey": "default", - "defaultSortOrder": "ascend", - "download": false, - "emptyState": "No rows found", - "enableSingleCellSelection": false, - "filter": true, - "multiRowSelection": false, - "overFlow": "pagination", - "pageIndex": 0, - "pageSize": "{{10}}", - "paginationOffset": 0, - "renamedColumnNames": {}, - "rowEvents": {}, - "rowSelection": {}, - "selectedRow": [], - "selectedRowIndex": [] - } - }, - { - "version": 0, - "displayName": "button12", - "parentNode": "bodySection1-bodySectionContainer12", - "showName": "button", - "childrenNode": null, - "type": "BUTTON_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 8, - "minH": 3, - "minW": 1, - "x": 1, - "y": 66, - "z": 0, - "props": { - "$dynamicAttrPaths": ["events[0].filters"], - "colorScheme": "blackAlpha", - "events": [ - { - "actionType": "widget", - "eventType": "click", - "filters": "{{ [{\"id\":\"title\", \"value\":input18.value, \"filterFn\":select4.value}] }}", - "id": "events-c3ca66ac-16de-4c15-9417-16888338ceac", - "operator": "and", - "widgetID": "table1", - "widgetMethod": "setFilters" - } - ], - "hidden": false, - "text": "Set filter", - "variant": "fill" - } - }, - { - "version": 0, - "displayName": "input18", - "parentNode": "bodySection1-bodySectionContainer12", - "showName": "input", - "childrenNode": null, - "type": "INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 8, - "minH": 3, - "minW": 1, - "x": 1, - "y": 60, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "formDataKey", - "labelWidth", - "showVisibleButton", - "disabled" - ], - "colorScheme": "blue", - "disabled": "{{select3.value==\"empty\"||select3.value==\"notEmpty\"}}", - "formDataKey": "{{input20.displayName}}", - "hidden": "", - "hiddenDynamic": true, - "label": "", - "labelAlign": "left", - "labelHidden": true, - "labelPosition": "top", - "labelWidth": "{{33}}", - "placeholder": "input sth", - "showVisibleButton": "{{true}}", - "type": "input", - "value": "iPhone 9" - } - }, - { - "version": 0, - "displayName": "select4", - "parentNode": "bodySection1-bodySectionContainer12", - "showName": "select", - "childrenNode": null, - "type": "SELECT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 8, - "minH": 3, - "minW": 1, - "x": 1, - "y": 54, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "dataSources", - "formDataKey" - ], - "colorScheme": "blue", - "dataSources": "{{[]}}", - "formDataKey": "{{select3.displayName}}", - "hidden": false, - "label": "Label", - "labelAlign": "left", - "labelHidden": true, - "labelPosition": "left", - "labelWidth": "{{33}}", - "manualOptions": [ - { - "id": "option-2d6fafcc-5cbc-496f-a615-e6173a0478e0", - "label": "equal to", - "value": "equalTo" - }, - { - "id": "option-8d8ef4d2-6419-4da4-9c8c-58bf8a07628c", - "label": "not equal to", - "value": "notEqualTo" - }, - { - "id": "option-ef4ae62c-3019-42b8-b175-34e313720aee", - "label": "contains", - "value": "contains" - }, - { - "id": "option-8ec28309-bc90-4d26-b215-90f8abaad939", - "label": "does not contain", - "value": "doesNotContain" - }, - { - "id": "option-dc64db82-8ce4-49fd-b5c9-a1f355945719", - "label": "less than", - "value": "lessThan" - }, - { - "id": "option-c378e25e-6f56-4a0b-850e-4e8a3a4eec92", - "label": "not less than", - "value": "notLessThan" - }, - { - "id": "option-a46d37a1-ac7e-4b63-9c48-a753094c9b7b", - "label": "more than", - "value": "moreThan" - }, - { - "id": "option-4666ae07-a3a4-426c-bd18-e9e452fd8547", - "label": "not more than", - "value": "notMoreThan" - }, - { - "id": "option-c4af1aeb-2282-427c-b874-a65464938a9b", - "label": "before", - "value": "before" - }, - { - "id": "option-2ee31f9b-32a4-44e7-a74f-736d731a4bf2", - "label": "after", - "value": "after" - }, - { - "id": "option-dba31045-75f6-4cf3-8dc9-0985c45019af", - "label": "is empty", - "value": "empty" - }, - { - "id": "option-63eb4b84-6bad-4933-8836-b19fb0a2ea47", - "label": "is not empty", - "value": "notEmpty" - } - ], - "optionConfigureMode": "static", - "value": "equalTo" - } - }, - { - "version": 0, - "displayName": "text38", - "parentNode": "bodySection1-bodySectionContainer12", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 8, - "minH": 3, - "minW": 1, - "x": 1, - "y": 48, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "fixed", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "ALL", - "value": "filter data by title:", - "verticalAlign": "center" - } - }, - { - "version": 0, - "displayName": "button15", - "parentNode": "bodySection1-bodySectionContainer12", - "showName": "button", - "childrenNode": null, - "type": "BUTTON_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 8, - "minH": 3, - "minW": 1, - "x": 1, - "y": 72, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "blackAlpha", - "events": [ - { - "actionType": "widget", - "eventType": "click", - "id": "events-458d569f-725e-4b92-a565-8567370806b4", - "widgetID": "table1", - "widgetMethod": "clearFilters" - } - ], - "hidden": false, - "text": "Clear filter", - "variant": "fill" - } - }, - { - "version": 0, - "displayName": "button13", - "parentNode": "bodySection1-bodySectionContainer12", - "showName": "button", - "childrenNode": null, - "type": "BUTTON_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 8, - "minH": 3, - "minW": 1, - "x": 1, - "y": 92, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "events[0].widgetTargetValue", - "text" - ], - "colorScheme": "blackAlpha", - "events": [ - { - "actionType": "widget", - "eventType": "click", - "id": "events-458d569f-725e-4b92-a565-8567370806b4", - "widgetID": "table1", - "widgetMethod": "selectRow", - "widgetTargetValue": "{{numberInput1.value}}" - } - ], - "hidden": false, - "text": "Select row {{numberInput1.value+1}}", - "variant": "fill" - } - }, - { - "version": 0, - "displayName": "button14", - "parentNode": "bodySection1-bodySectionContainer12", - "showName": "button", - "childrenNode": null, - "type": "BUTTON_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 8, - "minH": 3, - "minW": 1, - "x": 1, - "y": 97, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "blackAlpha", - "events": [ - { - "actionType": "widget", - "eventType": "click", - "id": "events-458d569f-725e-4b92-a565-8567370806b4", - "widgetID": "table1", - "widgetMethod": "clearSelection", - "widgetTargetValue": "" - } - ], - "hidden": false, - "text": "Clear selection", - "variant": "fill" - } - }, - { - "version": 0, - "displayName": "button16", - "parentNode": "bodySection1-bodySectionContainer12", - "showName": "button", - "childrenNode": null, - "type": "BUTTON_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 8, - "minH": 3, - "minW": 1, - "x": 1, - "y": 117, - "z": 0, - "props": { - "$dynamicAttrPaths": ["events[0].pageIndex", "text"], - "colorScheme": "blackAlpha", - "events": [ - { - "actionType": "widget", - "eventType": "click", - "id": "events-458d569f-725e-4b92-a565-8567370806b4", - "pageIndex": "{{numberInput3.value}}", - "widgetID": "table1", - "widgetMethod": "selectPage", - "widgetTargetValue": "" - } - ], - "hidden": false, - "text": "Select page {{numberInput3.value+1}}", - "variant": "fill" - } - }, - { - "version": 0, - "displayName": "input22", - "parentNode": "bodySection1-bodySectionContainer12", - "showName": "input", - "childrenNode": null, - "type": "INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 8, - "w": 8, - "minH": 3, - "minW": 1, - "x": 1, - "y": 126, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "disabled", - "formDataKey", - "labelWidth", - "showVisibleButton" - ], - "colorScheme": "blue", - "disabled": "{{select3.value==\"empty\"||select3.value==\"notEmpty\"}}", - "formDataKey": "{{input20.displayName}}", - "hidden": "", - "hiddenDynamic": true, - "label": "Sort column", - "labelAlign": "left", - "labelCaption": "", - "labelHidden": false, - "labelPosition": "top", - "labelWidth": "{{33}}", - "placeholder": "input sth", - "showVisibleButton": "{{true}}", - "type": "input", - "value": "title" - } - }, - { - "version": 0, - "displayName": "button17", - "parentNode": "bodySection1-bodySectionContainer12", - "showName": "button", - "childrenNode": null, - "type": "BUTTON_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 8, - "minH": 3, - "minW": 1, - "x": 1, - "y": 141, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "events[0].pageIndex", - "events[0].sortKey", - "events[0].sortOrder" - ], - "colorScheme": "blackAlpha", - "events": [ - { - "actionType": "widget", - "eventType": "click", - "id": "events-458d569f-725e-4b92-a565-8567370806b4", - "pageIndex": "{{string2int.value}}", - "sortKey": "{{input22.value}}", - "sortOrder": "{{radioButton1.value}}", - "widgetID": "table1", - "widgetMethod": "setSort", - "widgetTargetValue": "" - } - ], - "hidden": false, - "text": "Set sort", - "variant": "fill" - } - }, - { - "version": 0, - "displayName": "radioButton1", - "parentNode": "bodySection1-bodySectionContainer12", - "showName": "radioButton", - "childrenNode": null, - "type": "RADIO_BUTTON_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 8, - "minH": 3, - "minW": 1, - "x": 1, - "y": 135, - "z": 0, - "props": { - "$dynamicAttrPaths": [ - "labelWidth", - "dataSources", - "formDataKey" - ], - "colorScheme": "blue", - "dataSources": "{{[]}}", - "formDataKey": "{{radioButton1.displayName}}", - "hidden": false, - "label": "Label", - "labelAlign": "left", - "labelHidden": true, - "labelPosition": "top", - "labelWidth": "{{33}}", - "manualOptions": [ - { - "id": "option-c0a88218-80b5-4a18-8a82-60291ca9ebfd", - "label": "ASC", - "value": "ascend" - }, - { - "id": "option-2147f78b-c14d-4215-8e74-0a23684c93b8", - "label": "DESC", - "value": "descend" - } - ], - "optionConfigureMode": "static", - "value": "ascend" - } - }, - { - "version": 0, - "displayName": "numberInput3", - "parentNode": "bodySection1-bodySectionContainer12", - "showName": "numberInput", - "childrenNode": null, - "type": "NUMBER_INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 10, - "w": 8, - "minH": 3, - "minW": 1, - "x": 1, - "y": 106, - "z": 0, - "props": { - "$dynamicAttrPaths": ["labelWidth", "value"], - "colorScheme": "blue", - "formDataKey": "", - "hidden": false, - "label": "Page index", - "labelAlign": "left", - "labelCaption": "Start from 0", - "labelPosition": "top", - "labelWidth": "{{33}}", - "value": "{{2}}" - } - }, - { - "version": 0, - "displayName": "numberInput1", - "parentNode": "bodySection1-bodySectionContainer12", - "showName": "numberInput", - "childrenNode": null, - "type": "NUMBER_INPUT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 10, - "w": 8, - "minH": 3, - "minW": 1, - "x": 1, - "y": 81, - "z": 0, - "props": { - "$dynamicAttrPaths": ["labelWidth", "value"], - "colorScheme": "blue", - "formDataKey": "", - "hidden": false, - "label": "Row index", - "labelAlign": "left", - "labelCaption": "Start from 0", - "labelPosition": "top", - "labelWidth": "{{33}}", - "value": "{{2}}" - } - } - ], - "type": "CONTAINER_NODE", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "SECTION_NODE", - "containerType": "EDITOR_LAYOUT_SQUARE", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": { - "currentViewIndex": 0, - "defaultViewKey": "View 1", - "sectionViewConfigs": [ - { - "id": "a12aa9f1-eb90-4e24-9d7e-70ca56f52f40", - "key": "View 1", - "path": "View 1", - "viewDisplayName": "bodySection1-bodySectionContainer1" - }, - { - "id": "430fb0c7-780f-433e-b8ef-a82c111c932b", - "key": "View 2", - "path": "View 2", - "viewDisplayName": "bodySection1-bodySectionContainer2" - }, - { - "id": "0e6c5c3a-8afa-493a-a2a6-d6031fab0e76", - "key": "View 3", - "path": "View 3", - "viewDisplayName": "bodySection1-bodySectionContainer3" - }, - { - "id": "a8f0be2f-ec2a-45fb-b60c-2c3fb4266645", - "key": "View 4", - "path": "View 4", - "viewDisplayName": "bodySection1-bodySectionContainer4" - }, - { - "id": "16caa636-ccc5-43c8-bf30-5b579fe9e79f", - "key": "View 5", - "path": "View 5", - "viewDisplayName": "bodySection1-bodySectionContainer5" - }, - { - "id": "188d8ac2-0f17-4268-90fa-3ec8ad625dd7", - "key": "View 6", - "path": "View 6", - "viewDisplayName": "bodySection1-bodySectionContainer6" - }, - { - "id": "8d968a7c-cd2f-43f2-9f74-982671d76dea", - "key": "View 7", - "path": "View 7", - "viewDisplayName": "bodySection1-bodySectionContainer7" - }, - { - "id": "5c3526d1-d234-4496-a571-ef71f00028b8", - "key": "View 8", - "path": "View 8", - "viewDisplayName": "bodySection1-bodySectionContainer8" - }, - { - "id": "47f58318-0a37-45a8-a95a-f32f43e52e1d", - "key": "View 9", - "path": "View 9", - "viewDisplayName": "bodySection1-bodySectionContainer9" - }, - { - "id": "4e2c332b-13fd-45a3-b4f2-db5f37f327cf", - "key": "searchDB", - "path": "searchDB", - "viewDisplayName": "bodySection1-bodySectionContainer10" - }, - { - "id": "14724373-0e2f-42b7-805d-92af7b62d72c", - "key": "currentRow", - "path": "currentRow", - "viewDisplayName": "bodySection1-bodySectionContainer11" - }, - { - "id": "5c0c0a2a-68f4-4ff1-aee1-ffd35a41909d", - "key": "method", - "path": "method", - "viewDisplayName": "bodySection1-bodySectionContainer12" - } - ], - "viewSortedKey": [ - "bodySection1-bodySectionContainer1", - "bodySection1-bodySectionContainer2", - "bodySection1-bodySectionContainer3", - "bodySection1-bodySectionContainer4", - "bodySection1-bodySectionContainer5", - "bodySection1-bodySectionContainer6", - "bodySection1-bodySectionContainer7", - "bodySection1-bodySectionContainer8", - "bodySection1-bodySectionContainer9", - "bodySection1-bodySectionContainer10", - "bodySection1-bodySectionContainer11", - "bodySection1-bodySectionContainer12" - ] - } - }, - { - "version": 0, - "displayName": "modalSection1", - "parentNode": "page1", - "showName": "modalSection", - "childrenNode": [ - { - "version": 0, - "displayName": "modal1", - "parentNode": "modalSection1", - "showName": "modal", - "childrenNode": [ - { - "version": 0, - "displayName": "canvas5", - "parentNode": "modal1", - "showName": "canvas", - "childrenNode": [ - { - "version": 0, - "displayName": "text12", - "parentNode": "canvas5", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 1, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "fixed", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "ALL", - "value": "### Description", - "verticalAlign": "center" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "canvas6", - "parentNode": "modal1", - "showName": "canvas", - "childrenNode": [ - { - "version": 0, - "displayName": "text13", - "parentNode": "canvas6", - "showName": "text", - "childrenNode": null, - "type": "TEXT_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 2, - "z": 0, - "props": { - "$dynamicAttrPaths": ["value"], - "colorScheme": "grayBlue", - "disableMarkdown": false, - "dynamicHeight": "auto", - "fs": "14px", - "hidden": false, - "horizontalAlign": "start", - "resizeDirection": "HORIZONTAL", - "value": "{{table7.selectedRow[0].description}}", - "verticalAlign": "center" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "canvas7", - "parentNode": "modal1", - "showName": "canvas", - "childrenNode": [ - { - "version": 0, - "displayName": "button9", - "parentNode": "canvas7", - "showName": "button", - "childrenNode": null, - "type": "BUTTON_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 32, - "minH": 3, - "minW": 1, - "x": 0, - "y": 0, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "events": [ - { - "actionType": "widget", - "eventType": "click", - "id": "be78a4eb-4a13-4e74-97ec-1a20e63c538c", - "widgetID": "modal1", - "widgetMethod": "closeModal" - } - ], - "hidden": false, - "text": "Close", - "variant": "fill" - } - } - ], - "type": "CANVAS", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 1, - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "MODAL_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 28, - "w": 11, - "minH": 3, - "minW": 1, - "x": 0, - "y": 0, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "backgroundColor": "#ffffffff", - "borderColor": "#ffffffff", - "borderWidth": "1px", - "clickMaskClose": false, - "footerHeight": 7, - "headerHeight": 8, - "radius": "4px", - "shadow": "small", - "showFooter": true, - "showHeader": true - } - } - ], - "type": "MODAL_SECTION_NODE", - "containerType": "EDITOR_LAYOUT_SQUARE", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": {} - }, - { - "version": 0, - "displayName": "leftSection1", - "parentNode": "page1", - "showName": "leftSection", - "childrenNode": [ - { - "version": 0, - "displayName": "leftSection1-leftSectionContainer1", - "parentNode": "leftSection1", - "showName": "leftSectionContainer", - "childrenNode": [ - { - "version": 0, - "displayName": "menu1", - "parentNode": "leftSection1-leftSectionContainer1", - "showName": "menu", - "childrenNode": null, - "type": "MENU_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 33, - "w": 8, - "minH": 3, - "minW": 1, - "x": 0, - "y": 5, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "horizontalAlign": "flex-start", - "items": [ - { - "events": [ - { - "actionType": "setRouter", - "eventType": "clickMenuItem", - "id": "events-057d4f97-92fc-4e09-bcf0-e2a139062324", - "pagePath": "page1", - "viewPath": "View 1" - } - ], - "id": "26f2b2a9-a830-4a6a-a46e-e829186f1fbf", - "label": "📈Supported column types", - "value": "menu7" - }, - { - "events": [ - { - "actionType": "setRouter", - "eventType": "clickMenuItem", - "id": "events-425b15fb-5ffa-4ef0-af45-ef7c75f1600d", - "pagePath": "page1", - "viewPath": "View 3" - } - ], - "id": "c8006a83-cc2a-4138-ba25-2c1fd151eb7f", - "label": "🔘Select 1 row and use row data", - "value": "menu0" - }, - { - "events": [ - { - "actionType": "setRouter", - "eventType": "clickMenuItem", - "id": "events-e5678e49-4a40-470a-a237-05977cd36384", - "pagePath": "page1", - "viewPath": "View 4" - } - ], - "id": "e3e5da1a-79ae-4940-91bb-b8af4d43f2e2", - "label": "◻️Select multiple rows and use row data", - "value": "menu1" - }, - { - "events": [ - { - "actionType": "setRouter", - "eventType": "clickMenuItem", - "id": "events-0c265ca4-7766-495a-8149-d764fa5296b5", - "pagePath": "page1", - "viewPath": "View 5" - } - ], - "id": "7f11c178-4d58-46ee-b16a-ab68617b4500", - "label": "🔢Select a cell and use the data", - "value": "menu10" - }, - { - "events": [ - { - "actionType": "setRouter", - "eventType": "clickMenuItem", - "id": "events-0ecb9823-689c-4e5a-82ec-0ab828d176c2", - "pagePath": "page1", - "viewPath": "View 6" - } - ], - "id": "224280bc-5ba8-4f9f-a0fa-729758bf4e53", - "label": "📃Server-side pagination", - "value": "menu3" - }, - { - "id": "b0e34a6b-c410-412f-a6e5-ac3e5eabdddc", - "label": "🏃‍♀️Trigger event handler", - "subItems": [ - { - "events": [ - { - "actionType": "setRouter", - "eventType": "clickMenuItem", - "id": "events-7511e3f2-94e1-486e-bd21-75563871d7dc", - "pagePath": "page1", - "viewPath": "View 8" - } - ], - "id": "92d58143-05b2-4259-afa5-cc8d2c7244b7", - "label": "Click button on table", - "value": "menu6:subMenu0" - }, - { - "events": [ - { - "actionType": "setRouter", - "eventType": "clickMenuItem", - "id": "events-aab266b3-9747-421e-903a-0556ee4fce5c", - "pagePath": "page1", - "viewPath": "View 9" - } - ], - "id": "ae3be36a-d5a8-470d-94b5-fd130690498d", - "label": "Table event handler", - "value": "menu6:subMenu1" - } - ], - "value": "menu6" - }, - { - "id": "5e32f3e0-2a53-4edf-a6f4-1e67a30276c7", - "label": "🔍 Search table data", - "subItems": [ - { - "events": [ - { - "actionType": "setRouter", - "eventType": "clickMenuItem", - "id": "events-368de0de-89ca-4855-959b-f8d9148ba6a4", - "pagePath": "page1", - "viewPath": "View 7" - } - ], - "id": "78c3476c-2001-446f-8986-0a93023bfc8f", - "label": "Search by filter", - "value": "menu5:subMenu1" - }, - { - "events": [ - { - "actionType": "setRouter", - "eventType": "clickMenuItem", - "id": "events-6a6901d0-4d71-462e-8a91-72c05924498c", - "pagePath": "page1", - "viewPath": "searchDB" - } - ], - "id": "47529a5a-e9b3-4069-a4fd-c3756aba2f03", - "label": "Search from database", - "value": "menu5:subMenu0" - } - ], - "value": "menu5" - }, - { - "events": [ - { - "actionType": "setRouter", - "eventType": "clickMenuItem", - "id": "events-70760745-06b2-4a53-b9e2-5d69d0f4dfdc", - "pagePath": "page1", - "viewPath": "currentRow" - } - ], - "id": "1e130306-262d-4b8d-9a05-ae8af4b3f467", - "label": "🎨currentRow", - "value": "menu9" - }, - { - "events": [ - { - "actionType": "setRouter", - "eventType": "clickMenuItem", - "id": "events-b08458f8-d0c3-43c1-8ef7-285eb9b9f89d", - "pagePath": "page1", - "viewPath": "method" - } - ], - "id": "0478840f-c8dc-4365-ba6c-54a069da67e4", - "label": "🔌Control table via other components or actions", - "value": "menu12" - } - ], - "mode": "vertical", - "selectedValues": ["subMenu1"] - } - }, - { - "version": 0, - "displayName": "button10", - "parentNode": "leftSection1-leftSectionContainer1", - "showName": "button", - "childrenNode": null, - "type": "BUTTON_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 8, - "minH": 3, - "minW": 1, - "x": 0, - "y": 91, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "events": [ - { - "actionType": "openUrl", - "eventType": "click", - "id": "events-ae1caab2-21cb-40ba-94f6-66f1b0b59537", - "newTab": true, - "url": "https://www.illacloud.com/docs/table" - } - ], - "hidden": false, - "text": "Documentation", - "variant": "fill" - } - }, - { - "version": 0, - "displayName": "button11", - "parentNode": "leftSection1-leftSectionContainer1", - "showName": "button", - "childrenNode": null, - "type": "BUTTON_WIDGET", - "containerType": "EDITOR_SCALE_SQUARE", - "h": 5, - "w": 8, - "minH": 3, - "minW": 1, - "x": 0, - "y": 84, - "z": 0, - "props": { - "$dynamicAttrPaths": [], - "colorScheme": "grayBlue", - "events": [ - { - "actionType": "openUrl", - "eventType": "click", - "id": "events-e92d8cc4-77ea-4eae-a916-0ed36f4c102b", - "newTab": true, - "url": "https://discord.com/invite/illacloud" - } - ], - "hidden": false, - "text": "Help", - "tooltipText": "Ask ILLA in Discord", - "variant": "fill" - } - } - ], - "type": "CONTAINER_NODE", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": {} - } - ], - "type": "SECTION_NODE", - "containerType": "EDITOR_LAYOUT_SQUARE", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": { - "currentViewIndex": 0, - "defaultViewKey": "View 1", - "sectionViewConfigs": [ - { - "id": "07aaf312-d16d-475c-9f68-5a5add4473be", - "key": "View 1", - "path": "View1", - "viewDisplayName": "leftSection1-leftSectionContainer1" - } - ], - "viewSortedKey": ["leftSection1-leftSectionContainer1"] - } - } - ], - "type": "PAGE_NODE", - "containerType": "EDITOR_PAGE_SQUARE", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": { - "bodyColumns": 32, - "bottomHeight": 0, - "canvasSize": "auto", - "canvasWidth": 100, - "footerColumns": 32, - "hasFooter": false, - "hasHeader": false, - "hasLeft": true, - "hasRight": false, - "headerColumns": 32, - "isFooterFixed": true, - "isHeaderFixed": true, - "isLeftFixed": true, - "isRightFixed": true, - "layout": "Custom", - "leftColumns": 8, - "leftPosition": "FULL", - "leftWidth": 27.60204081632653, - "rightColumns": 8, - "rightPosition": "NONE", - "rightWidth": 0, - "showLeftFoldIcon": false, - "showRightFoldIcon": false, - "topHeight": 0 - } - } - ], - "type": "DOT_PANEL", - "containerType": "EDITOR_DOT_PANEL", - "h": 0, - "w": 0, - "minH": 0, - "minW": 0, - "x": -1, - "y": -1, - "z": 0, - "props": { - "currentPageIndex": 0, - "pageSortedKey": ["page1"] - } - }, - "dependenciesState": {}, - "dragShadowState": {}, - "dottedLineSquareState": {}, - "displayNameState": [] -} diff --git a/apps/builder/src/config/template/TableGuide/index.ts b/apps/builder/src/config/template/TableGuide/index.ts deleted file mode 100644 index 8531fe863a..0000000000 --- a/apps/builder/src/config/template/TableGuide/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -import data from "@/config/template/TableGuide/data.json" -import { CurrentAppResp } from "@/page/App/resp/currentAppResp" - -export const TABLE_GUIDE_DATA = data as unknown as CurrentAppResp diff --git a/apps/builder/src/config/template/icon/form.svg b/apps/builder/src/config/template/icon/form.svg deleted file mode 100644 index 7a0dd95e2e..0000000000 --- a/apps/builder/src/config/template/icon/form.svg +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/apps/builder/src/config/template/icon/list.svg b/apps/builder/src/config/template/icon/list.svg deleted file mode 100644 index 2db4a08b28..0000000000 --- a/apps/builder/src/config/template/icon/list.svg +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/apps/builder/src/config/template/icon/login.svg b/apps/builder/src/config/template/icon/login.svg deleted file mode 100644 index 5fc6006a2d..0000000000 --- a/apps/builder/src/config/template/icon/login.svg +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/apps/builder/src/config/template/icon/login_with_script.svg b/apps/builder/src/config/template/icon/login_with_script.svg deleted file mode 100644 index dee47a6957..0000000000 --- a/apps/builder/src/config/template/icon/login_with_script.svg +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/apps/builder/src/config/template/icon/table.svg b/apps/builder/src/config/template/icon/table.svg deleted file mode 100644 index c9903c59f2..0000000000 --- a/apps/builder/src/config/template/icon/table.svg +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/apps/builder/src/config/template/index.ts b/apps/builder/src/config/template/index.ts deleted file mode 100644 index 4bbc543602..0000000000 --- a/apps/builder/src/config/template/index.ts +++ /dev/null @@ -1,154 +0,0 @@ -import { CUSTOM_LOGIN_DATA } from "@/config/template/CustomLogin" -import { CUSTOM_LOGIN_WITH_SC_DATA } from "@/config/template/CustomLoginWithSC" -import { FORM_DATA } from "@/config/template/Form" -import { LIST_DATA } from "@/config/template/List" -import { TABLE_GUIDE_DATA } from "@/config/template/TableGuide" -import FormIcon from "@/config/template/icon/form.svg" -import ListIcon from "@/config/template/icon/list.svg" -import LoginIcon from "@/config/template/icon/login.svg" -import LoginWithSCIcon from "@/config/template/icon/login_with_script.svg" -import TableIcon from "@/config/template/icon/table.svg" -import { - TemplateActions, - TemplateName, - TemplateResources, - TemplateSetting, -} from "@/config/template/interface" -import Resources from "@/config/template/resources.json" -import { CurrentAppResp } from "@/page/App/resp/currentAppResp" -import { Resource, ResourceContent } from "@/redux/resource/resourceState" - -export const formatAppDataToConfig = (currentApp: CurrentAppResp) => { - const currentResources = Resources as Resource[] - const resourceIDList = currentApp.actions.map((action) => action.resourceID) - - // get resources form resourceIDList, and generate filter - const filterResources = currentResources.filter((resource) => - resourceIDList.includes(resource.resourceID), - ) - const filterResourcesIdList = filterResources.map( - (resource) => resource.resourceID, - ) - - const resources = filterResources.map( - ({ resourceName, resourceType, content }) => ({ - resourceName, - resourceType, - content, - }), - ) as TemplateResources - - // Add the resourceIndex attribute to actions - const actions = currentApp.actions.map( - ({ - resourceID, - displayName, - actionType, - transformer, - triggerMode, - content, - config, - }) => { - const resourceIndex = resourceID - ? filterResourcesIdList.indexOf(resourceID) - : -1 - return { - resourceID, - displayName, - actionType, - transformer, - triggerMode, - content, - config, - resourceIndex, - } - }, - ) as TemplateActions - - const appConfig = currentApp.components - - return { - appConfig, - resources, - actions, - } -} - -export const templateConfig = { - Form: { - nameKey: "editor.tutorial.panel.tutorial.templates_name.form", - config: formatAppDataToConfig(FORM_DATA), - example: - "https://builder.illacloud.com/illacloud_demo/deploy/app/ILAex4p1C7QV", - }, - List: { - nameKey: "editor.tutorial.panel.tutorial.templates_name.list", - config: formatAppDataToConfig(LIST_DATA), - example: - "https://builder.illacloud.com/illacloud_demo/deploy/app/ILAex4p1C7QU", - }, - TableGuide: { - nameKey: "editor.tutorial.panel.tutorial.templates_name.table_guide", - config: formatAppDataToConfig(TABLE_GUIDE_DATA), - example: - "https://builder.illacloud.com/illacloud_demo/deploy/app/ILAex4p1C7Ga", - }, - CustomLogin: { - nameKey: "editor.tutorial.panel.tutorial.templates_name.custom_login", - config: formatAppDataToConfig(CUSTOM_LOGIN_DATA), - example: - "https://builder.illacloud.com/illacloud_demo/deploy/app/ILAex4p1C7FD", - }, - CustomLoginWithSC: { - nameKey: - "editor.tutorial.panel.tutorial.templates_name.custom_login_with_sc", - config: formatAppDataToConfig(CUSTOM_LOGIN_WITH_SC_DATA), - example: - "https://builder.illacloud.com/illacloud_demo/deploy/app/ILAex4p1C7Eh", - }, -} - -export const Templates: TemplateSetting[] = [ - { - type: "TableGuide", - nameKey: "editor.tutorial.panel.tutorial.templates_name.table_guide", - descKey: "editor.tutorial.panel.tutorial.templates_description.table_guide", - appId: "ILAex4p1C7Ga", - icon: TableIcon, - }, - { - type: "Form", - nameKey: "editor.tutorial.panel.tutorial.templates_name.form", - descKey: "editor.tutorial.panel.tutorial.templates_description.form", - appId: "ILAex4p1C7QV", - icon: FormIcon, - }, - { - type: "List", - nameKey: "editor.tutorial.panel.tutorial.templates_name.list", - descKey: "editor.tutorial.panel.tutorial.templates_description.list", - appId: "ILAex4p1C7QU", - icon: ListIcon, - }, - { - type: "CustomLogin", - nameKey: "editor.tutorial.panel.tutorial.templates_name.custom_login", - descKey: - "editor.tutorial.panel.tutorial.templates_description.custom_login", - appId: "ILAex4p1C7FD", - icon: LoginIcon, - }, - { - type: "CustomLoginWithSC", - nameKey: - "editor.tutorial.panel.tutorial.templates_name.custom_login_with_sc", - descKey: - "editor.tutorial.panel.tutorial.templates_description.custom_login_with_sc", - appId: "ILAex4p1C7Eh", - icon: LoginWithSCIcon, - }, -] - -export const getTemplateConfig = (templateName: TemplateName) => { - return templateConfig[templateName] -} diff --git a/apps/builder/src/config/template/interface.ts b/apps/builder/src/config/template/interface.ts index f3192d701a..16781bebf6 100644 --- a/apps/builder/src/config/template/interface.ts +++ b/apps/builder/src/config/template/interface.ts @@ -1,20 +1,9 @@ -import { templateConfig } from "@/config/template/index" import { ActionContent, ActionItem, } from "@/redux/currentApp/action/actionState" import { ResourceContent, ResourceType } from "@/redux/resource/resourceState" -export type TemplateName = keyof typeof templateConfig - -export interface TemplateSetting { - type: TemplateName - nameKey: string - descKey: string - appId: string - icon: string -} - export type TemplateResources = { resourceName: string resourceType: ResourceType diff --git a/apps/builder/src/config/template/resources.json b/apps/builder/src/config/template/resources.json deleted file mode 100644 index 32e1133e6d..0000000000 --- a/apps/builder/src/config/template/resources.json +++ /dev/null @@ -1,320 +0,0 @@ -[ - { - "resourceID": "ILAex4p1C7Pu", - "uid": "d09abfc3-8bd9-44df-b94f-5c0e63ac5085", - "teamID": "ILAfx4p1C7en", - "resourceName": "gpt", - "resourceType": "restapi", - "content": { - "authContent": {}, - "authentication": "none", - "baseUrl": "https://api.openai.com/v1/chat/completions", - "certs": { - "caCert": "", - "clientCert": "", - "clientKey": "", - "mode": "verify-full" - }, - "cookies": [ - { - "key": "", - "value": "" - } - ], - "headers": [ - { - "key": "", - "value": "" - } - ], - "selfSignedCert": false, - "urlParams": [ - { - "key": "", - "value": "" - } - ] - }, - "createdAt": "2023-07-19T14:01:31.53036Z", - "createdBy": "ILAfx4p1C7eb", - "updatedAt": "2023-07-19T14:01:31.53036Z", - "updatedBy": "ILAfx4p1C7eb" - }, - { - "resourceID": "ILAex4p1C7Qj", - "uid": "0736df12-9ce4-4203-a0e8-7591939ffc34", - "teamID": "ILAfx4p1C7en", - "resourceName": "Demo data", - "resourceType": "restapi", - "content": { - "authContent": {}, - "authentication": "none", - "baseUrl": "https://dummyjson.com/", - "certs": { - "caCert": "", - "clientCert": "", - "clientKey": "", - "mode": "verify-full" - }, - "cookies": [ - { - "key": "", - "value": "" - } - ], - "headers": [ - { - "key": "", - "value": "" - } - ], - "selfSignedCert": false, - "urlParams": [ - { - "key": "", - "value": "" - } - ] - }, - "createdAt": "2023-07-18T03:55:51.716471Z", - "createdBy": "ILAfx4p1C7eb", - "updatedAt": "2023-07-19T10:25:53.562073Z", - "updatedBy": "ILAfx4p1C7eb" - }, - { - "resourceID": "ILAfx4p1C7lz", - "uid": "d54f7152-7114-4269-8c64-df2bcb039b05", - "teamID": "ILAfx4p1C7en", - "resourceName": "Orders", - "resourceType": "supabasedb", - "content": { - "databaseName": "postgres", - "databasePassword": "uCMsmiGVJ69Dz4hR", - "databaseUsername": "postgres", - "host": "db.lhmwqghqgcknexfxbsvr.supabase.co", - "port": "5432", - "ssl": { - "clientCert": "", - "clientKey": "", - "serverCert": "", - "ssl": false - } - }, - "createdAt": "2023-05-26T09:00:19.96713Z", - "createdBy": "ILAfx4p1C7eb", - "updatedAt": "2023-05-26T09:00:19.967131Z", - "updatedBy": "ILAfx4p1C7eb" - }, - { - "resourceID": "ILAfx4p1C7aX", - "uid": "abdd48da-655a-4b40-aa03-fafa06d19b71", - "teamID": "ILAfx4p1C7en", - "resourceName": "123123", - "resourceType": "smtp", - "content": { - "host": "123123", - "password": "", - "port": 123123, - "username": "" - }, - "createdAt": "2023-03-23T09:59:46.970581Z", - "createdBy": "ILAfx4p1C7dT", - "updatedAt": "2023-03-23T09:59:46.970581Z", - "updatedBy": "ILAfx4p1C7dT" - }, - { - "resourceID": "ILAfx4p1C7aY", - "uid": "ee567b91-70fb-49c4-a64a-2a191953f6ed", - "teamID": "ILAfx4p1C7en", - "resourceName": "14324324", - "resourceType": "dynamodb", - "content": { - "accessKeyID": "234234", - "region": "4324", - "secretAccessKey": "234234" - }, - "createdAt": "2023-03-23T09:48:05.073299Z", - "createdBy": "ILAfx4p1C7dT", - "updatedAt": "2023-03-23T09:48:05.073299Z", - "updatedBy": "ILAfx4p1C7dT" - }, - { - "resourceID": "ILAfx4p1C7aJ", - "uid": "1bc96aa0-4aff-4fd7-8a89-89458ba16622", - "teamID": "ILAfx4p1C7en", - "resourceName": "123123", - "resourceType": "elasticsearch", - "content": { - "host": "https://example.com", - "password": "123", - "port": "123123", - "username": "123" - }, - "createdAt": "2023-03-23T09:46:27.185991Z", - "createdBy": "ILAfx4p1C7dT", - "updatedAt": "2023-03-23T09:46:27.185991Z", - "updatedBy": "ILAfx4p1C7dT" - }, - { - "resourceID": "ILAfx4p1C7dC", - "uid": "936375d1-c3c0-4aff-8982-059c12674a63", - "teamID": "ILAfx4p1C7en", - "resourceName": "https://jsonplaceholder.typicode.com", - "resourceType": "restapi", - "content": { - "authContent": {}, - "authentication": "none", - "baseUrl": "https://jsonplaceholder.typicode.com/users", - "certs": { - "caCert": "", - "clientCert": "", - "clientKey": "", - "mode": "verify-full" - }, - "cookies": [ - { - "key": "", - "value": "" - } - ], - "headers": [ - { - "key": "", - "value": "" - } - ], - "selfSignedCert": false, - "urlParams": [ - { - "key": "", - "value": "" - } - ] - }, - "createdAt": "2023-03-02T15:37:02.89246Z", - "createdBy": "ILAfx4p1C7dT", - "updatedAt": "2023-03-23T09:43:38.238965Z", - "updatedBy": "ILAfx4p1C7dT" - }, - { - "resourceID": "ILAfx4p1C7aK", - "uid": "799abbfc-c64e-42d2-9960-f37224f5e3b3", - "teamID": "ILAfx4p1C7en", - "resourceName": "asdasd", - "resourceType": "hfendpoint", - "content": { - "endpoint": "https://example.com", - "token": "asdasdasdasdasd" - }, - "createdAt": "2023-03-23T09:29:53.488099Z", - "createdBy": "ILAfx4p1C7dT", - "updatedAt": "2023-03-23T09:29:53.488099Z", - "updatedBy": "ILAfx4p1C7dT" - }, - { - "resourceID": "ILAfx4p1C7aL", - "uid": "057ae7b3-3bdb-44dd-b19b-fd84b84c5e74", - "teamID": "ILAfx4p1C7en", - "resourceName": "sadjaidjiasdj", - "resourceType": "huggingface", - "content": { - "token": "asdjaisdjiasjdiasd" - }, - "createdAt": "2023-03-23T09:25:00.014675Z", - "createdBy": "ILAfx4p1C7dT", - "updatedAt": "2023-03-23T09:25:00.014675Z", - "updatedBy": "ILAfx4p1C7dT" - }, - { - "resourceID": "ILAfx4p1C7aN", - "uid": "1485830e-f6cb-4e17-88c4-78cb52e1b008", - "teamID": "ILAfx4p1C7en", - "resourceName": "adasdasd", - "resourceType": "oracle", - "content": { - "connectionType": "Service", - "host": "https://example.com", - "name": "12123", - "password": "", - "port": "1512", - "ssl": true, - "username": "" - }, - "createdAt": "2023-03-23T08:57:24.845858Z", - "createdBy": "ILAfx4p1C7dT", - "updatedAt": "2023-03-23T08:58:05.214303Z", - "updatedBy": "ILAfx4p1C7dT" - }, - { - "resourceID": "ILAfx4p1C7aO", - "uid": "efa799db-9027-4668-8658-a5ca1e66c7e7", - "teamID": "ILAfx4p1C7en", - "resourceName": "asdasd", - "resourceType": "mssql", - "content": { - "connectionOpts": [ - { - "key": "", - "value": "" - } - ], - "databaseName": "123123123", - "host": "https://example.com", - "port": "1433", - "ssl": { - "caCert": "", - "clientCert": "", - "privateKey": "", - "ssl": false, - "verificationMode": "full" - } - }, - "createdAt": "2023-03-23T08:48:45.939381Z", - "createdBy": "ILAfx4p1C7dT", - "updatedAt": "2023-03-23T08:48:45.939381Z", - "updatedBy": "ILAfx4p1C7dT" - }, - { - "resourceID": "ILAfx4p1C7aF", - "uid": "1150b888-c017-4292-bb52-60ed516fce3a", - "teamID": "ILAfx4p1C7en", - "resourceName": "878", - "resourceType": "redis", - "content": { - "databaseIndex": 0, - "databasePassword": "", - "databaseUsername": "", - "host": "78", - "port": "78", - "ssl": false - }, - "createdAt": "2023-03-22T07:51:22.844191Z", - "createdBy": "ILAfx4p1C7dT", - "updatedAt": "2023-03-22T07:51:22.844191Z", - "updatedBy": "ILAfx4p1C7dT" - }, - { - "resourceID": "ILAfx4p1C7cn", - "uid": "518778b8-7b56-409b-8b57-244abb624d7e", - "teamID": "ILAfx4p1C7en", - "resourceName": "Onboarding DB", - "resourceType": "postgresql", - "content": { - "databaseName": "illa_demo", - "databasePassword": "illa2022", - "databaseUsername": "illa", - "host": "143.198.231.148", - "port": "30739", - "ssl": { - "clientCert": "", - "clientKey": "", - "serverCert": "", - "ssl": false - } - }, - "createdAt": "2023-03-14T12:31:02.198393Z", - "createdBy": "ILAfx4p1C7eb", - "updatedAt": "2023-03-15T11:08:05.864299Z", - "updatedBy": "ILAfx4p1C7eb" - } -] diff --git a/apps/builder/src/constants/regExp.ts b/apps/builder/src/constants/regExp.ts deleted file mode 100644 index c0e258067c..0000000000 --- a/apps/builder/src/constants/regExp.ts +++ /dev/null @@ -1,2 +0,0 @@ -export const EMAIL_FORMAT = - /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ diff --git a/apps/builder/src/main.tsx b/apps/builder/src/main.tsx index a50481e2a4..8c22676030 100644 --- a/apps/builder/src/main.tsx +++ b/apps/builder/src/main.tsx @@ -1,12 +1,11 @@ import { ILLAMixpanel } from "@illa-public/mixpanel-utils" -import { initDateReport } from "@illa-public/utils" +import { initDateReport, initDayjs } from "@illa-public/utils" import * as Sentry from "@sentry/react" import { StrictMode } from "react" import { createRoot } from "react-dom/client" import { Provider } from "react-redux" import "@/api/http/base" import "@/i18n/config" -import "@/utils/dayjs" import App from "./App" import store from "./store" @@ -27,6 +26,7 @@ if ( initDateReport() ILLAMixpanel.setDeviceID() +initDayjs() const root = createRoot(document.getElementById("root")!!) diff --git a/apps/builder/src/page/AI/AIAgent/aiagent.tsx b/apps/builder/src/page/AI/AIAgent/aiagent.tsx index 9b36e5bf65..a461bc0b88 100644 --- a/apps/builder/src/page/AI/AIAgent/aiagent.tsx +++ b/apps/builder/src/page/AI/AIAgent/aiagent.tsx @@ -1277,7 +1277,6 @@ export const AIAgent: FC = () => { }), ) }} - teamPlan={getPlanUtils(currentTeamInfo)} onShare={(platform) => { track( ILLA_MIXPANEL_EVENT_TYPE.CLICK, @@ -1289,6 +1288,7 @@ export const AIAgent: FC = () => { }, ) }} + teamPlan={getPlanUtils(currentTeamInfo)} /> )} diff --git a/apps/builder/src/page/AI/AIAgentRun/AIAgentRunMobile/index.tsx b/apps/builder/src/page/AI/AIAgentRun/AIAgentRunMobile/index.tsx index bc460e8589..177a8fab04 100644 --- a/apps/builder/src/page/AI/AIAgentRun/AIAgentRunMobile/index.tsx +++ b/apps/builder/src/page/AI/AIAgentRun/AIAgentRunMobile/index.tsx @@ -318,7 +318,6 @@ export const AIAgentRunMobile: FC = () => { }), ) }} - teamPlan={getPlanUtils(currentTeamInfo)} onShare={(platform) => { track( ILLA_MIXPANEL_EVENT_TYPE.CLICK, @@ -345,6 +344,7 @@ export const AIAgentRunMobile: FC = () => { }) dispatch(teamActions.updateInvitedUserReducer(memberListInfo)) }} + teamPlan={getPlanUtils(currentTeamInfo)} /> )} diff --git a/apps/builder/src/page/AI/AIAgentRun/AIAgentRunPC/index.tsx b/apps/builder/src/page/AI/AIAgentRun/AIAgentRunPC/index.tsx index 3df8afcdfc..fad136f6ab 100644 --- a/apps/builder/src/page/AI/AIAgentRun/AIAgentRunPC/index.tsx +++ b/apps/builder/src/page/AI/AIAgentRun/AIAgentRunPC/index.tsx @@ -290,7 +290,6 @@ export const AIAgentRunPC: FC = () => { }), ) }} - teamPlan={getPlanUtils(currentTeamInfo)} onShare={(platform) => { track( ILLA_MIXPANEL_EVENT_TYPE.CLICK, @@ -302,6 +301,7 @@ export const AIAgentRunPC: FC = () => { }, ) }} + teamPlan={getPlanUtils(currentTeamInfo)} /> )} diff --git a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceSelector/index.tsx b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceSelector/index.tsx index 68a1fa1cec..e23910af5e 100644 --- a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceSelector/index.tsx +++ b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceSelector/index.tsx @@ -2,6 +2,7 @@ import { ILLA_MIXPANEL_BUILDER_PAGE_NAME, ILLA_MIXPANEL_EVENT_TYPE, } from "@illa-public/mixpanel-utils" +import { fromNow } from "@illa-public/utils" import { FC, Suspense, useCallback, useEffect, useState } from "react" import { useTranslation } from "react-i18next" import { useSelector } from "react-redux" @@ -15,7 +16,6 @@ import { import { getIconFromActionType } from "@/page/App/components/Actions/getIcon" import { getAllResources } from "@/redux/resource/resourceSelector" import { getResourceTypeFromActionType } from "@/utils/actionResourceTransformer" -import { fromNow } from "@/utils/dayjs" import { track } from "@/utils/mixpanelHelper" import { ActionResourceSelectorProps } from "./interface" import { diff --git a/apps/builder/src/page/App/components/Actions/ResourceGenerator/ConfigElements/GoogleSheetsConfigElement/index.tsx b/apps/builder/src/page/App/components/Actions/ResourceGenerator/ConfigElements/GoogleSheetsConfigElement/index.tsx index f52212cd9a..58636655c7 100644 --- a/apps/builder/src/page/App/components/Actions/ResourceGenerator/ConfigElements/GoogleSheetsConfigElement/index.tsx +++ b/apps/builder/src/page/App/components/Actions/ResourceGenerator/ConfigElements/GoogleSheetsConfigElement/index.tsx @@ -8,7 +8,10 @@ import { ButtonGroup, PreviousIcon, WarningCircleIcon, + useMessage, } from "@illa-design/react" +import { ReactComponent as DisabledGoogleLogoIcon } from "@/assets/googlesheets/disabled-google.svg" +import { ReactComponent as GoogleLogoIcon } from "@/assets/googlesheets/google-logo.svg" import { useOAuthRefresh } from "@/hooks/useOAuthRefresh" import { ResourceDivider } from "@/page/App/components/Actions/ResourceDivider" import { @@ -30,6 +33,7 @@ import { getOAuthAccessToken, redirectToGoogleOAuth } from "@/services/resource" import { validate } from "@/utils/form" import { CreateButton } from "../ActionButtons/CreateButton" import { BaseConfigElementProps } from "../interface" +import { googleIconStyle, googleSheetsButtonStyle } from "./style" const GoogleSheetsConfigElement: FC = (props) => { const { resourceID, onBack, hasFooter = true } = props @@ -40,6 +44,7 @@ const GoogleSheetsConfigElement: FC = (props) => { const resource = useSelector(getAllResources).find( (r) => r.resourceID === resourceID, ) + const message = useMessage() const content = (resource?.content ?? GoogleSheetResourceInitial) as GoogleSheetResource @@ -95,17 +100,25 @@ const GoogleSheetsConfigElement: FC = (props) => { resourceID: string, accessType: AccessType, ) => { - const response = await getOAuthAccessToken( - resourceID, - `${window.location.origin}${location.pathname}`, - accessType, - ) - const { accessToken } = response.data - if (accessToken) { - const res = await redirectToGoogleOAuth(resourceID, accessToken) - if (res.data.url) { - window.location.assign(res.data.url) + try { + const response = await getOAuthAccessToken( + resourceID, + `${window.location.origin}${location.pathname}`, + accessType, + ) + const { accessToken } = response.data + if (accessToken) { + const res = await redirectToGoogleOAuth(resourceID, accessToken) + if (res.data.url) { + window.location.assign(res.data.url) + } + } else { + throw new Error() } + } catch (e) { + message.error({ + content: t("editor.action.form.tips.gs.failed_to_authentica"), + }) } } @@ -228,18 +241,23 @@ const GoogleSheetsConfigElement: FC = (props) => { {isAuthenticated ? ( - - - - ) : ( - + + {formState.isValid ? ( + + ) : ( + + )} + + + {t("editor.action.form.label.gs.reconnect_with_oauth")} + + = (props) => { } /> + ) : ( + <> + {showInitialConnectButton ? ( + + ) : ( + + )} + )} )} diff --git a/apps/builder/src/page/App/components/Actions/ResourceGenerator/ConfigElements/GoogleSheetsConfigElement/style.ts b/apps/builder/src/page/App/components/Actions/ResourceGenerator/ConfigElements/GoogleSheetsConfigElement/style.ts new file mode 100644 index 0000000000..6e2353acc9 --- /dev/null +++ b/apps/builder/src/page/App/components/Actions/ResourceGenerator/ConfigElements/GoogleSheetsConfigElement/style.ts @@ -0,0 +1,50 @@ +import { css } from "@emotion/react" +import { getColor } from "@illa-design/react" + +const googleButtonStyle = css` + display: flex; + font-family: Helvetica Neue; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 22px; + align-items: center; + border: none; + border-radius: 2px !important; +` + +export const googleSheetsButtonStyle = css` + ${googleButtonStyle}; + padding: 1px 16px 1px 1px; + gap: 8px; + box-shadow: + 0px 1px 1px 0px rgba(0, 0, 0, 0.24), + 0px 0px 1px 0px rgba(0, 0, 0, 0.12); + background-color: rgba(66, 133, 244, 1); + color: ${getColor("white", "01")}; + font-family: Helvetica Neue; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 22px; + cursor: pointer; + &:hover { + background-color: rgba(51, 103, 214, 1); + } + &:disabled { + color: rgba(0, 0, 0, 0.4); + cursor: not-allowed; + background-color: rgba(0, 0, 0, 0.09); + box-shadow: none; + } +` + +export const googleIconStyle = css` + width: 38px; + height: 38px; +` + +export const oAuthSubmitButtonStyle = css` + ${googleButtonStyle}; + height: 40px !important; +` diff --git a/apps/builder/src/page/App/components/Icons/googlesheets.tsx b/apps/builder/src/page/App/components/Icons/googlesheets.tsx index 238fdf62f5..feb834bb49 100644 --- a/apps/builder/src/page/App/components/Icons/googlesheets.tsx +++ b/apps/builder/src/page/App/components/Icons/googlesheets.tsx @@ -6,13 +6,15 @@ const GoogleSheetIcon = createIcon({ path: ( <> + diff --git a/apps/builder/src/page/App/components/PageNavBar/ContributeButton/index.tsx b/apps/builder/src/page/App/components/PageNavBar/ContributeButton/index.tsx index 9e386ee12f..b1a3b5bb6b 100644 --- a/apps/builder/src/page/App/components/PageNavBar/ContributeButton/index.tsx +++ b/apps/builder/src/page/App/components/PageNavBar/ContributeButton/index.tsx @@ -18,7 +18,7 @@ import { canUseUpgradeFeature, openShareAppModal, } from "@illa-public/user-role-utils" -import { getMarketLinkTemplate } from "@illa-public/utils" +import { getILLABuilderURL, getMarketLinkTemplate } from "@illa-public/utils" import { getAuthToken } from "@illa-public/utils" import { FC, useState } from "react" import { useTranslation } from "react-i18next" @@ -122,8 +122,12 @@ export const ContributeButton: FC = (props) => { appName: appInfo.appName, })} defaultTab={"public"} - editRedirectURL={`${window.location.origin}/${teamInfo.identifier}/app/${appInfo.appId}`} - useRedirectURL={`${window.location.origin}/${teamInfo.identifier}/deploy/app/${appInfo.appId}`} + editRedirectURL={`${getILLABuilderURL()}/${ + teamInfo.identifier + }/app/${appInfo.appId}`} + useRedirectURL={`${getILLABuilderURL()}/${ + teamInfo.identifier + }/deploy/app/${appInfo.appId}`} defaultAllowInviteLink={teamInfo.permission.inviteLinkEnabled} onInviteLinkStateChange={(enableInviteLink) => { dispatch( diff --git a/apps/builder/src/page/App/components/PageNavBar/ShareAppButton/index.tsx b/apps/builder/src/page/App/components/PageNavBar/ShareAppButton/index.tsx index 49416eef7f..cf8dc277be 100644 --- a/apps/builder/src/page/App/components/PageNavBar/ShareAppButton/index.tsx +++ b/apps/builder/src/page/App/components/PageNavBar/ShareAppButton/index.tsx @@ -19,7 +19,11 @@ import { canUseUpgradeFeature, openShareAppModal, } from "@illa-public/user-role-utils" -import { getMarketLinkTemplate, isCloudVersion } from "@illa-public/utils" +import { + getILLABuilderURL, + getMarketLinkTemplate, + isCloudVersion, +} from "@illa-public/utils" import { getAuthToken } from "@illa-public/utils" import { FC, useState } from "react" import { useTranslation } from "react-i18next" @@ -123,8 +127,12 @@ export const ShareAppButton: FC = (props) => { title={t("user_management.modal.social_media.default_text.app", { appName: appInfo.appName, })} - editRedirectURL={`${window.location.origin}/${teamInfo.identifier}/app/${appInfo.appId}`} - useRedirectURL={`${window.location.origin}/${teamInfo.identifier}/deploy/app/${appInfo.appId}`} + editRedirectURL={`${getILLABuilderURL()}/${ + teamInfo.identifier + }/app/${appInfo.appId}`} + useRedirectURL={`${getILLABuilderURL()}/${ + teamInfo.identifier + }/deploy/app/${appInfo.appId}`} defaultAllowInviteLink={teamInfo.permission.inviteLinkEnabled} onInviteLinkStateChange={(enableInviteLink) => { dispatch( diff --git a/apps/builder/src/page/App/components/PageNavBar/index.tsx b/apps/builder/src/page/App/components/PageNavBar/index.tsx index 66d1db0b0d..d73192c118 100644 --- a/apps/builder/src/page/App/components/PageNavBar/index.tsx +++ b/apps/builder/src/page/App/components/PageNavBar/index.tsx @@ -5,7 +5,12 @@ import { canUseUpgradeFeature, showShareAppModal, } from "@illa-public/user-role-utils" -import { getILLACloudURL, isCloudVersion } from "@illa-public/utils" +import { + getILLABuilderURL, + getILLACloudURL, + isCloudVersion, +} from "@illa-public/utils" +import { fromNow } from "@illa-public/utils" import { FC, MouseEvent, useCallback, useEffect, useState } from "react" import { useTranslation } from "react-i18next" import { useDispatch, useSelector } from "react-redux" @@ -56,7 +61,6 @@ import { updateWaterMarkConfig, } from "@/services/apps" import { takeSnapShot } from "@/services/history" -import { fromNow } from "@/utils/dayjs" import { trackInEditor } from "@/utils/mixpanelHelper" import { isILLAAPiError } from "@/utils/typeHelper" import { isMAC } from "@/utils/userAgent" @@ -138,7 +142,7 @@ export const PageNavBar: FC = (props) => { dispatch(appInfoActions.updateAppDeployedReducer(true)) dispatch(appInfoActions.updateAppPublicReducer(isPublic)) window.open( - `${window.location.origin}/${teamIdentifier}/deploy/app/${appId}`, + `${getILLABuilderURL()}/${teamIdentifier}/deploy/app/${appId}`, "_blank", ) onSuccess?.() diff --git a/apps/builder/src/page/History/components/HistoryNavBar/index.tsx b/apps/builder/src/page/History/components/HistoryNavBar/index.tsx index 64f6a91e85..0286463216 100644 --- a/apps/builder/src/page/History/components/HistoryNavBar/index.tsx +++ b/apps/builder/src/page/History/components/HistoryNavBar/index.tsx @@ -1,7 +1,8 @@ -import React, { FC, useCallback } from "react" +import { getILLABuilderURL, getILLACloudURL } from "@illa-public/utils" +import { FC } from "react" import { useTranslation } from "react-i18next" import { useSelector } from "react-redux" -import { useNavigate, useParams } from "react-router-dom" +import { Link, useParams } from "react-router-dom" import { Button, ExitIcon } from "@illa-design/react" import { ReactComponent as Logo } from "@/assets/illa-logo.svg" import { @@ -15,37 +16,27 @@ import { navDescStyle } from "@/page/History/components/HistoryNavBar/style" import { getAppInfo } from "@/redux/currentApp/appInfo/appInfoSelector" export const HistoryNavBar: FC = () => { - const navigate = useNavigate() const { teamIdentifier, appId } = useParams() const { t } = useTranslation() const appInfo = useSelector(getAppInfo) - const handleLogoClick = useCallback(() => { - navigate(`/${teamIdentifier}/dashboard/apps`) - }, [navigate, teamIdentifier]) - - const exitHistory = useCallback(() => { - window.location.href = `/${teamIdentifier}/app/${appId}` - }, [teamIdentifier, appId]) - return (
- + + +
{appInfo.appName}
{t("editor.history.history_list.label")} - + + +
) } diff --git a/apps/builder/src/page/History/components/SnapShotItem/index.tsx b/apps/builder/src/page/History/components/SnapShotItem/index.tsx index 1680469cf6..1b842e45b4 100644 --- a/apps/builder/src/page/History/components/SnapShotItem/index.tsx +++ b/apps/builder/src/page/History/components/SnapShotItem/index.tsx @@ -1,4 +1,6 @@ import { Avatar } from "@illa-public/avatar" +import { getILLABuilderURL } from "@illa-public/utils" +import { formatDate } from "@illa-public/utils" import { FC, useCallback, useState } from "react" import { useTranslation } from "react-i18next" import { useParams } from "react-router-dom" @@ -10,7 +12,6 @@ import { SnapshotTriggerMode, } from "@/redux/currentAppHistory/currentAppHistoryState" import { recoverSnapShot, recoverSnapShotWS } from "@/services/history" -import { formatDate } from "@/utils/dayjs" import { isILLAAPiError } from "@/utils/typeHelper" import { ReactComponent as SaveIcon } from "./assets/save.svg" import { @@ -125,7 +126,9 @@ export const SnapShotItem: FC = (props) => { await recoverSnapShot(snapshot.appID, snapshot.snapshotID) await recoverSnapShotWS(snapshot.appID) message.success({ content: t("editor.history.message.suc.restore") }) - window.location.href = `/${teamIdentifier}/app/${snapshot.appID}` + window.location.href = `${getILLABuilderURL()}/${teamIdentifier}/app/${ + snapshot.appID + }` } catch (error) { if (isILLAAPiError(error)) { message.error({ content: t("editor.history.message.fail.restore") }) diff --git a/apps/builder/src/page/Resource/Create/index.tsx b/apps/builder/src/page/Resource/Create/index.tsx index 20ce2c37ee..021e1c35f9 100644 --- a/apps/builder/src/page/Resource/Create/index.tsx +++ b/apps/builder/src/page/Resource/Create/index.tsx @@ -3,12 +3,16 @@ import { isCloudVersion } from "@illa-public/utils" import { FC } from "react" import { useTranslation } from "react-i18next" import { useParams } from "react-router-dom" -import { useMessage } from "@illa-design/react" +import { Divider, useMessage } from "@illa-design/react" import { ConfigElement } from "@/page/App/components/Actions/ResourceGenerator/ConfigElements" import { ConfigElementProvider } from "@/page/App/components/Actions/ResourceGenerator/ConfigElements/provider" import { Header } from "../components/resourceHeader" import { WhiteList } from "../components/whiteList" -import { containerStyle, innerContainerStyle } from "./style" +import { + containerStyle, + innerContainerStyle, + outerContainerStyle, +} from "./style" export const ResourceCreate: FC = () => { const { resourceType } = useParams() @@ -32,13 +36,15 @@ export const ResourceCreate: FC = () => { >
- -
- - {isCloudVersion && } + +
+
+ + {isCloudVersion && } +
diff --git a/apps/builder/src/page/Resource/Create/style.ts b/apps/builder/src/page/Resource/Create/style.ts index 7aa6966cf3..25382ee0a2 100644 --- a/apps/builder/src/page/Resource/Create/style.ts +++ b/apps/builder/src/page/Resource/Create/style.ts @@ -4,9 +4,16 @@ export const containerStyle = css` display: flex; justify-content: center; gap: 32px; + width: 1032px; +` + +export const outerContainerStyle = css` + display: flex; + width: 100%; + justify-content: center; ` export const innerContainerStyle = css` - width: 1032px; + width: 100%; height: 100%; ` diff --git a/apps/builder/src/page/Resource/Edit/index.tsx b/apps/builder/src/page/Resource/Edit/index.tsx index 0e8f3a20ea..cec35bfa9c 100644 --- a/apps/builder/src/page/Resource/Edit/index.tsx +++ b/apps/builder/src/page/Resource/Edit/index.tsx @@ -8,14 +8,18 @@ import { FC } from "react" import { useTranslation } from "react-i18next" import { useSelector } from "react-redux" import { Navigate, useParams } from "react-router-dom" -import { useMessage } from "@illa-design/react" +import { Divider, useMessage } from "@illa-design/react" import { ConfigElementProvider } from "@/page/App/components/Actions/ResourceGenerator/ConfigElements/provider" import { getAllResources } from "@/redux/resource/resourceSelector" import { track } from "@/utils/mixpanelHelper" import { ConfigElement } from "../../App/components/Actions/ResourceGenerator/ConfigElements" import { Header } from "../components/resourceHeader" import { WhiteList } from "../components/whiteList" -import { containerStyle, innerContainerStyle } from "./style" +import { + containerStyle, + innerContainerStyle, + outerContainerStyle, +} from "./style" export const ResourceEdit: FC = () => { const { resourceID } = useParams() @@ -57,14 +61,16 @@ export const ResourceEdit: FC = () => { >
- -
- - {isCloudVersion && } + +
+
+ + {isCloudVersion && } +
diff --git a/apps/builder/src/page/Resource/Edit/style.ts b/apps/builder/src/page/Resource/Edit/style.ts index 7aa6966cf3..25382ee0a2 100644 --- a/apps/builder/src/page/Resource/Edit/style.ts +++ b/apps/builder/src/page/Resource/Edit/style.ts @@ -4,9 +4,16 @@ export const containerStyle = css` display: flex; justify-content: center; gap: 32px; + width: 1032px; +` + +export const outerContainerStyle = css` + display: flex; + width: 100%; + justify-content: center; ` export const innerContainerStyle = css` - width: 1032px; + width: 100%; height: 100%; ` diff --git a/apps/builder/src/page/Resource/components/resourceHeader/index.tsx b/apps/builder/src/page/Resource/components/resourceHeader/index.tsx index 3df7a4394e..990ce50da2 100644 --- a/apps/builder/src/page/Resource/components/resourceHeader/index.tsx +++ b/apps/builder/src/page/Resource/components/resourceHeader/index.tsx @@ -9,6 +9,7 @@ import { ResourceHeaderProps } from "./interface" import { buttonContainerStyle, headerContainerStyle, + headerOuterContainerStyle, titleContainerStyle, titleNameContainerStyle, titleNameStyle, @@ -22,28 +23,30 @@ export const Header: FC = (props) => { } return ( -
-
- -
-
-
- {getIconFromResourceType(resourceType, "24px")} -

- {getResourceNameFromResourceType(resourceType)} -

+
+
+
+
-
- - +
+
+ {getIconFromResourceType(resourceType, "24px")} +

+ {getResourceNameFromResourceType(resourceType)} +

+
+
+ + +
diff --git a/apps/builder/src/page/Resource/components/resourceHeader/style.ts b/apps/builder/src/page/Resource/components/resourceHeader/style.ts index ff79319699..e4e3a7aff1 100644 --- a/apps/builder/src/page/Resource/components/resourceHeader/style.ts +++ b/apps/builder/src/page/Resource/components/resourceHeader/style.ts @@ -1,6 +1,13 @@ import { css } from "@emotion/react" import { getColor } from "@illa-design/react" +export const headerOuterContainerStyle = css` + width: 100%; + display: flex; + align-items: center; + justify-content: center; +` + export const headerContainerStyle = css` width: 1032px; padding: 16px 0; diff --git a/apps/builder/src/services/team.ts b/apps/builder/src/services/team.ts index 68e1e65aa0..3a06232165 100644 --- a/apps/builder/src/services/team.ts +++ b/apps/builder/src/services/team.ts @@ -1,13 +1,5 @@ import { authCloudRequest } from "@illa-public/illa-net" -import { - MemberInfo, - TeamInfo, - getCurrentTeamInfo, - teamActions, -} from "@illa-public/user-data" -import store from "../store" -import { getCurrentTeamID } from "../utils/team" - +import { TeamInfo } from "@illa-public/user-data" export const fetchMyTeamsInfo = () => { return authCloudRequest({ @@ -15,140 +7,3 @@ export const fetchMyTeamsInfo = () => { method: "GET", }) } - -export const fetchUpdateMembers = () => { - return authCloudRequest( - { - method: "GET", - url: "/members", - }, - { - teamID: getCurrentTeamID(), - }, - ) -} - -export const fetchRemoveTeam = () => { - return authCloudRequest( - { - method: "DELETE", - }, - { - teamID: getCurrentTeamID(), - }, - ) -} - -interface IInviteLinkStatusRequest { - inviteLinkEnabled: boolean -} - -export const fetchUpdateInviteLinkStatus = (data: IInviteLinkStatusRequest) => { - return authCloudRequest( - { - method: "PATCH", - url: `/configInviteLink`, - data, - }, - { - teamID: getCurrentTeamID(), - }, - ) -} - -interface IUpdateTeamPermissionConfigRequest { - allowEditorManageTeamMember: boolean - allowViewerManageTeamMember: boolean -} - -export const fetchUpdateTeamPermissionConfig = ( - data: IUpdateTeamPermissionConfigRequest, -) => { - return authCloudRequest( - { - method: "PATCH", - url: `/permission`, - data, - }, - { - teamID: getCurrentTeamID(), - }, - ) -} - -export const fetchRemoveTeamMember = (teamMemberID: string) => { - return authCloudRequest( - { - method: "DELETE", - url: `/teamMembers/${teamMemberID}`, - }, - { - teamID: getCurrentTeamID(), - }, - ) -} - -export const updateMembers = async () => { - const response = await fetchUpdateMembers() - if (!response.data) return - store.dispatch(teamActions.updateMemberListReducer(response.data)) - return response.data -} - -export const updateTeamsInfo = async (teamIdentifier?: string) => { - const response = await fetchMyTeamsInfo() - const data = response.data - const currentTeamInfo = data.find( - (item) => item.identifier === teamIdentifier, - ) - if (currentTeamInfo) { - store.dispatch(teamActions.updateCurrentIdReducer(currentTeamInfo.id)) - store.dispatch(teamActions.updateTeamItemsReducer(data)) - } else { - store.dispatch( - teamActions.updateTeamReducer({ - currentId: data?.[0]?.id, - items: data, - }), - ) - } - return data -} - -export const removeTeam = async () => { - await fetchRemoveTeam() - window.open("/", "_self") - return true -} - -export const setInviteLinkEnabled = async (inviteLinkEnabled: boolean) => { - await fetchUpdateInviteLinkStatus({ inviteLinkEnabled }) - const teamInfo = getCurrentTeamInfo(store.getState()) - const teamIdentifier = teamInfo?.identifier - await updateTeamsInfo(teamIdentifier) - return inviteLinkEnabled -} - -export const updateTeamPermissionConfig = async ( - allowEditorManageTeamMember: boolean, - allowViewerManageTeamMember: boolean, - blockRegister: boolean, -) => { - const teamInfo = getCurrentTeamInfo(store.getState()) - const teamIdentifier = teamInfo?.identifier - - const requestData = { - allowEditorManageTeamMember, - allowViewerManageTeamMember, - blockRegister, - } - await fetchUpdateTeamPermissionConfig(requestData) - await updateTeamsInfo(teamIdentifier) - return allowEditorManageTeamMember && allowViewerManageTeamMember -} - -export const removeTeamMembers = async (teamMemberID: string) => { - await fetchRemoveTeamMember(teamMemberID) - await updateMembers() - return true -} \ No newline at end of file diff --git a/apps/builder/src/utils/action/runAction.ts b/apps/builder/src/utils/action/runAction.ts index c95901600e..7b0f43f640 100644 --- a/apps/builder/src/utils/action/runAction.ts +++ b/apps/builder/src/utils/action/runAction.ts @@ -68,6 +68,7 @@ const fetchActionResult = async ( appId: string, actionID: string, actionContent: ActionContent, + actionContext: Record = {}, abortSignal?: AbortSignal, ) => { const canSendRequest = checkCanSendRequest(actionType, actionContent) @@ -80,6 +81,7 @@ const fetchActionResult = async ( actionType, displayName, content: actionContent, + context: actionContext, } return await fetchActionRunResult( appId, @@ -93,6 +95,7 @@ const fetchActionResult = async ( export interface IExecutionActions extends ActionItem { $actionID: string $resourceID: string + $context: Record } export const runActionWithExecutionResult = async ( @@ -103,7 +106,8 @@ export const runActionWithExecutionResult = async ( const { displayName } = action as ActionItem< MysqlLikeAction | RestApiAction > - const { content, $actionID, $resourceID, actionType, transformer } = action + const { content, $actionID, $resourceID, actionType, transformer, $context } = + action const originActionList = getActionList(store.getState()) const originAction = originActionList.find( (item) => item.displayName === displayName, @@ -163,6 +167,7 @@ export const runActionWithExecutionResult = async ( appId, currentActionId, actionContent, + $context, abortSignal, )) as AxiosResponse< IActionRunResultResponseData[]>, @@ -250,21 +255,24 @@ export const runActionWithDelay = ( const { advancedConfig } = config const { delayWhenLoaded } = advancedConfig return new Promise((resolve, reject) => { - const timeoutID = window.setTimeout(async () => { - window.clearTimeout(timeoutID) + const timeoutID = window.setTimeout( + async () => { + window.clearTimeout(timeoutID) - try { - const result = await runActionWithExecutionResult( - action, - true, - abortSignal, - ) - return resolve(result) - } catch (e) { - console.log("e", e) - return reject(e) - } - }, delayWhenLoaded as unknown as number) + try { + const result = await runActionWithExecutionResult( + action, + true, + abortSignal, + ) + return resolve(result) + } catch (e) { + console.log("e", e) + return reject(e) + } + }, + delayWhenLoaded as unknown as number, + ) }) } @@ -282,9 +290,12 @@ export const registerActionPeriod = (action: IExecutionActions) => { return } removeActionPeriod(action.$actionID) - const timeID = window.setInterval(() => { - runActionWithExecutionResult(action) - }, (config.advancedConfig.periodInterval as unknown as number) * 1000) + const timeID = window.setInterval( + () => { + runActionWithExecutionResult(action) + }, + (config.advancedConfig.periodInterval as unknown as number) * 1000, + ) actionIDMapTimerID[action.$actionID] = timeID } diff --git a/apps/builder/src/utils/actionResourceTransformer.ts b/apps/builder/src/utils/actionResourceTransformer.ts index a0b9058d23..6ff85d576d 100644 --- a/apps/builder/src/utils/actionResourceTransformer.ts +++ b/apps/builder/src/utils/actionResourceTransformer.ts @@ -1,12 +1,6 @@ import { ActionType } from "@/redux/currentApp/action/actionState" import { ResourceType } from "@/redux/resource/resourceState" -export function getActionTypeFromResourceType( - resourceType: ResourceType | null | undefined, -): ActionType | null { - return resourceType as ActionType -} - export function getActionSubTitleFromActionType( actionType: ActionType | null | undefined, ): string { diff --git a/apps/builder/src/utils/billing/errorHandler.ts b/apps/builder/src/utils/billing/errorHandler.ts index 0bbc66ad25..8722e3c75a 100644 --- a/apps/builder/src/utils/billing/errorHandler.ts +++ b/apps/builder/src/utils/billing/errorHandler.ts @@ -1,11 +1,8 @@ import { ERROR_FLAG } from "@illa-public/illa-net/errorFlag" import { getILLACloudURL, isCloudVersion } from "@illa-public/utils" import { matchPath } from "react-router-dom" -import { createMessage } from "@illa-design/react" -import i18n from "@/i18n/config" import { isILLAAPiError } from "@/utils/typeHelper" -const message = createMessage() export const commonBillingErrorHandler = (error: unknown) => { if (isILLAAPiError(error) && isCloudVersion) { switch (error.data.errorFlag) { @@ -21,23 +18,3 @@ export const commonBillingErrorHandler = (error: unknown) => { } } } - -export const leaveTeamErrorHandler = (error: unknown) => { - if (isILLAAPiError(error)) { - switch (error.data.errorFlag) { - case ERROR_FLAG.ERROR_FLAG_CAN_NOT_REMOVE_TEAM_MEMBER_BECAUSE_APPSUMO_BUYER: - message.error({ - content: i18n.t("billing.message.appsumo.leave"), - }) - break - case ERROR_FLAG.ERROR_FLAG_CAN_NOT_REMOVE_OWNER_FROM_TEAM: - location.reload() - break - default: - message.error({ - content: i18n.t("team_setting.mes.leave_fail"), - }) - break - } - } -} diff --git a/apps/builder/src/utils/dayjs.ts b/apps/builder/src/utils/dayjs.ts deleted file mode 100644 index e1b05efb36..0000000000 --- a/apps/builder/src/utils/dayjs.ts +++ /dev/null @@ -1,98 +0,0 @@ -/* eslint-disable import/no-named-as-default-member */ -import dayjs from "dayjs" -import advancedFormat from "dayjs/plugin/advancedFormat" -import customParseFormat from "dayjs/plugin/customParseFormat" -import isBetween from "dayjs/plugin/isBetween" -import isToday from "dayjs/plugin/isToday" -import localeData from "dayjs/plugin/localeData" -import LocalizedFormat from "dayjs/plugin/localizedFormat" -import QuarterOfYear from "dayjs/plugin/quarterOfYear" -import relativeTime from "dayjs/plugin/relativeTime" -import updateLocale from "dayjs/plugin/updateLocale" -import utc from "dayjs/plugin/utc" -import weekOfYear from "dayjs/plugin/weekOfYear" -import weekYear from "dayjs/plugin/weekYear" -import i18n, { formatLanguage } from "@/i18n/config" - -dayjs.extend(isToday) -dayjs.extend(isBetween) -dayjs.extend(LocalizedFormat) -dayjs.extend(relativeTime) -dayjs.extend(utc) -dayjs.extend(localeData) -dayjs.extend(updateLocale) -dayjs.extend(weekOfYear) -dayjs.extend(advancedFormat) -dayjs.extend(weekYear) -dayjs.extend(QuarterOfYear) -dayjs.extend(customParseFormat) - -const PER_SECOND = 1000 -const PER_MINUTE = PER_SECOND * 60 -const PER_HOUR = PER_MINUTE * 60 -const PER_DAY = PER_HOUR * 24 - -const FORMAT_RULE = { - "zh-cn": { - inYear: "MMMD日 HH:MM", - otherYear: "YYYY年MMMDD日HH:MM", - }, - "en-us": { - inYear: "HH:MM MMM DD", - otherYear: "HH:MM MMM DD, YYYY", - }, -} - -async function initDayjs() { - const local = localStorage.getItem("i18nextLng") || "en-US" - const language = formatLanguage(local) - switch (language) { - case "zh-CN": - await import("dayjs/locale/zh-cn") - dayjs.locale("zh-cn") - break - case "en-US": - default: - await import("dayjs/locale/en") - dayjs.locale("en-us") - break - } -} - -initDayjs() - -export const fromNow = (date: string) => { - if (!date) return "" - const now = dayjs() - const diff = now.diff(date) - const local = dayjs.locale() as "zh-cn" | "en-us" - if (diff / PER_MINUTE <= 1) { - return i18n.t("dayjs.just_now") - } - - if (diff / PER_DAY >= 7 && dayjs(date).isSame(now, "year")) { - return dayjs(date).format( - FORMAT_RULE[local]?.inYear || FORMAT_RULE["en-us"].inYear, - ) - } - - if (diff / PER_DAY >= 7 && !dayjs(date).isSame(now, "year")) { - return dayjs(date).format( - FORMAT_RULE[local]?.otherYear || FORMAT_RULE["en-us"].otherYear, - ) - } - return dayjs(date).fromNow() -} - -export const formatDate = (dateString: string) => { - const date = dayjs(dateString) - const now = dayjs() - - if (date.format("YYYYMMDD") === now.format("YYYYMMDD")) { - return date.format("hh:mm A") - } else if (date.year() === now.year()) { - return date.format("MMMM DD, h:mm A") - } else { - return date.format("YYYY MMM DD, h:mm A") - } -} diff --git a/apps/builder/src/utils/evaluateDynamicString/dynamicConverter.ts b/apps/builder/src/utils/evaluateDynamicString/dynamicConverter.ts index c5cdba48a7..4daecb4fbc 100644 --- a/apps/builder/src/utils/evaluateDynamicString/dynamicConverter.ts +++ b/apps/builder/src/utils/evaluateDynamicString/dynamicConverter.ts @@ -75,21 +75,30 @@ export const getDynamicValue = ( ILLAEditorRuntimePropsCollectorInstance.getThirdPartyPackages(), ) if (stringSnippets.length) { + let context: Record = {} const values = jsSnippets.map((jsSnippet, index) => { if (jsSnippet) { - return evalScript(jsSnippet, calcContext) + const value = evalScript(jsSnippet, calcContext) + context[jsSnippet] = value + return value } else { return stringSnippets[index] } }) if (stringSnippets.length === 1) { - return values[0] + return { + result: values[0], + context, + } + } + return { + result: substituteDynamicBindingWithValues( + dynamicString, + stringSnippets, + values, + evaluationType, + ), + context, } - return substituteDynamicBindingWithValues( - dynamicString, - stringSnippets, - values, - evaluationType, - ) } } diff --git a/apps/builder/src/utils/evaluateDynamicString/index.ts b/apps/builder/src/utils/evaluateDynamicString/index.ts index ca54c9c669..ed01c0c78a 100644 --- a/apps/builder/src/utils/evaluateDynamicString/index.ts +++ b/apps/builder/src/utils/evaluateDynamicString/index.ts @@ -17,7 +17,8 @@ export const evaluateDynamicString = ( evalResult = realInputValueWithScript(dynamicString, true) } else { try { - evalResult = getDynamicValue(dynamicString, dataTree, evaluationType) + const result = getDynamicValue(dynamicString, dataTree, evaluationType) + evalResult = result?.result } catch (error) { evalResult = undefined throw error @@ -28,3 +29,35 @@ export const evaluateDynamicString = ( } return evalResult } + +export const evaluateDynamicStringAndGetCalcContext = ( + keyInDataTree: string, + dynamicString: string, + dataTree: Record, + evaluationType: EVALUATION_TYPE = EVALUATION_TYPE.TEMPLATE, +) => { + const requiresEval = hasDynamicStringSnippet(dynamicString) + let evalResult + let context: Record = {} + if (requiresEval) { + if (isRunScriptAttr(keyInDataTree) && isWrapperCode(dynamicString)) { + evalResult = realInputValueWithScript(dynamicString, true) + } else { + try { + const result = getDynamicValue(dynamicString, dataTree, evaluationType) + evalResult = result?.result + context = result?.context || {} + } catch (error) { + evalResult = undefined + context = {} + throw error + } + } + } else { + evalResult = dynamicString + } + return { + result: evalResult, + context, + } +} diff --git a/apps/builder/src/utils/executionTreeHelper/executionTreeFactory.ts b/apps/builder/src/utils/executionTreeHelper/executionTreeFactory.ts index 0a3390b901..8f2d309c4e 100644 --- a/apps/builder/src/utils/executionTreeHelper/executionTreeFactory.ts +++ b/apps/builder/src/utils/executionTreeHelper/executionTreeFactory.ts @@ -11,7 +11,7 @@ import { ExecutionState, } from "@/redux/currentApp/executionTree/executionState" import store from "@/store" -import { evaluateDynamicString } from "@/utils/evaluateDynamicString" +import { evaluateDynamicStringAndGetCalcContext } from "@/utils/evaluateDynamicString" import { getSnippets } from "@/utils/evaluateDynamicString/dynamicConverter" import { getDisplayNameAndAttrPath, @@ -647,11 +647,20 @@ export class ExecutionTreeFactory { const requiredEval = hasDynamicStringSnippet(widgetOrActionAttribute) if (requiredEval) { try { - evaluateValue = evaluateDynamicString( - attrPath, - widgetOrActionAttribute, - current, - ) + const { result, context } = + evaluateDynamicStringAndGetCalcContext( + attrPath, + widgetOrActionAttribute, + current, + ) + evaluateValue = result + + const currentContext = get(current, `${displayName}.$context`, {}) + + Object.keys(context).forEach((key) => { + const value = context[key] ?? "" + currentContext[key] = value + }) if (typeof evaluateValue === "function") { set(current, fullPath, undefined) diff --git a/apps/builder/src/utils/executionTreeHelper/generateRawAction.ts b/apps/builder/src/utils/executionTreeHelper/generateRawAction.ts index 818de0ed4f..7d3f7b913b 100644 --- a/apps/builder/src/utils/executionTreeHelper/generateRawAction.ts +++ b/apps/builder/src/utils/executionTreeHelper/generateRawAction.ts @@ -56,6 +56,9 @@ export const generateRawAction = ( modifiedAction.$dynamicAttrPaths = [ ...((newProps?.$dynamicAttrPaths ?? []) as string[]), ] + let context: Record = {} + + modifiedAction.$context = context return modifiedAction } diff --git a/apps/builder/src/utils/executionTreeHelper/generateUrlParams.ts b/apps/builder/src/utils/executionTreeHelper/generateUrlParams.ts index ef2b9452a1..fa6f1fead1 100644 --- a/apps/builder/src/utils/executionTreeHelper/generateUrlParams.ts +++ b/apps/builder/src/utils/executionTreeHelper/generateUrlParams.ts @@ -7,9 +7,8 @@ export const generateUrlParams = () => { const query = href.split("?")[1] const queryArray = parse(query) let appURL = href - const appUrlArray = window.location.pathname.split("/") if (getIsILLAProductMode(store.getState())) { - appURL = window.location.origin + appUrlArray.slice(0, 5).join("/") + appURL = window.location.origin + window.location.pathname } return { query: queryArray, diff --git a/apps/builder/src/utils/navigate/index.ts b/apps/builder/src/utils/navigate/index.ts index ecbd24f550..6be291f679 100644 --- a/apps/builder/src/utils/navigate/index.ts +++ b/apps/builder/src/utils/navigate/index.ts @@ -1,25 +1,7 @@ -import { ILLARoute } from "@/router" - export const handleLinkOpen = (link: string) => { window.open(link, "_blank") } -export const toRegister = () => { - ILLARoute.navigate("/register") -} - -export const toForgotPassword = () => { - ILLARoute.navigate("/forgotPassword") -} - export const openDiscord = () => { handleLinkOpen("https://discord.com/invite/illacloud") } - -export const openIssues = () => { - handleLinkOpen("https://github.com/illacloud/illa-builder/issues") -} - -export const openDocumentation = () => { - handleLinkOpen("https://www.illacloud.com/docs/about-illa") -} diff --git a/packages/illa-design b/packages/illa-design index f065cfa737..3ab7f1734a 160000 --- a/packages/illa-design +++ b/packages/illa-design @@ -1 +1 @@ -Subproject commit f065cfa7378420c19203079584c929bb62be8438 +Subproject commit 3ab7f1734a75ea3060ab92ab52147acf22a67b7e diff --git a/packages/illa-public-component b/packages/illa-public-component index 0c7a40d6fd..1fffb26259 160000 --- a/packages/illa-public-component +++ b/packages/illa-public-component @@ -1 +1 @@ -Subproject commit 0c7a40d6fddf771a639a9d6f4d1e7bb78a8a81cb +Subproject commit 1fffb26259df45a8e9598cf550eba3cefdc21483