backendless-ui-sdk

[ { "system": true, "category": "General", "name": "Autocomplete Google Places", "autoGenerationId": true, "droppable": false, "requireGoogleAPIKey": true, "configurations": [ { "id": "googleApiKey", "title": "Google API Key", "description": "", "type": "text" } ], "traits": [ { "type": "property-select", "label": "Variant", "name": "data-variant", "defaultValue": "standard", "options": [ { "value": "standard", "name": "Standard" }, { "value": "filled", "name": "Filled" }, { "value": "outlined", "name": "Outlined" } ] }, { "type": "property-select", "label": "Size", "name": "data-size", "defaultValue": "medium", "options": [ { "value": "small", "name": "Small" }, { "value": "medium", "name": "Medium" } ] }, { "name": "data-search-mode", "options": [ { "value": "autocomplete", "name": "Autocomplete" }, { "value": "search_box", "name": "Search Box" } ], "defaultValue": "autocomplete", "label": "Mode", "type": "property-select" }, { "name": "data-label", "label": "Label", "type": "text" }, { "name": "data-placeholder", "label": "Placeholder", "type": "text" }, { "valueTrue": "true", "valueFalse": "false", "name": "data-readonly", "label": "Read Only", "type": "checkbox" }, { "valueTrue": "true", "valueFalse": "false", "name": "data-disabled", "label": "Disabled", "type": "checkbox" }, { "valueTrue": "true", "valueFalse": "false", "name": "data-required", "label": "Required", "type": "checkbox" }, { "valueTrue": "true", "valueFalse": "false", "name": "data-autofocus", "label": "Auto Focus", "type": "checkbox" } ], "stylable": [ "align-self", "width", "min-width", "max-width", "margin", "margin-top", "margin-bottom", "margin-left", "margin-right" ], "handlers": [ { "label": "On Before Mount", "description": "This event is triggered immediately before the component is mounted and appeared on the page.", "contextBlocks": [], "name": "onBeforeMount" }, { "label": "On Mounted", "description": "This event is triggered immediately after the component is mounted and appeared on the page.", "contextBlocks": [], "name": "onMounted" }, { "label": "On Before Unmount", "description": "This event is triggered immediately before the component is unmounted and destroyed. Perform any necessary cleanup in this method, such as invalidating timers or cleaning up any RT subscriptions that were created in this component.", "contextBlocks": [], "name": "onBeforeUnmount" }, { "label": "On Change Event", "description": "This event is triggered when the component's state (value) changes.", "contextBlocks": [ { "code": "___arguments.value", "id": "value", "label": "Changed Value" }, { "code": "___arguments.prevValue", "id": "prevValue", "label": "Previous Value" } ], "name": "onChange" }, { "label": "On Focus Event", "description": "This event is fired when the component receives the focus for data entry or by pressing the TAB key.", "contextBlocks": [ { "code": "___arguments.event", "id": "event", "label": "Event" } ], "name": "onFocus" }, { "label": "On Lost Focus Event", "description": "This event is triggered when the component loses focus.", "contextBlocks": [ { "code": "___arguments.event", "id": "event", "label": "Event" } ], "name": "onBlur" }, { "label": "On Visibility Change", "description": "This event is triggered when visibility is changed directly from any Codeless Logic.", "contextBlocks": [ { "code": "___arguments.newValue", "id": "newValue", "label": "Is Visible" } ], "name": "onVisibilityChange" }, { "label": "Class List Logic", "description": "This is a handler for the logic to determine the value of the class list. The value returned by the event handler will be used as component class list.", "contextBlocks": [], "output": true, "dataBinding": true, "name": "onClassListAssignment" }, { "label": "Styles Logic", "description": "This is a handler for the logic to determine what styles should be applied to the component.", "contextBlocks": [], "output": true, "dataBinding": true, "name": "onStyleAssignment" }, { "name": "onKeyDown", "label": "On Key Down Event", "description": "This event is triggered when the key was pressed.", "contextBlocks": [ { "code": "___arguments.keyCode", "id": "keyCode", "label": "Key Code" }, { "code": "___arguments.shiftKey", "id": "shiftKey", "label": "Shift is pressed" }, { "code": "___arguments.ctrlKey", "id": "ctrlKey", "label": "Ctrl/Cmd is pressed" }, { "code": "___arguments.altKey", "id": "altKey", "label": "Alt/Option pressed" } ] }, { "label": "Visibility Logic", "output": true, "dataBinding": true, "description": "This is a handler for the logic to determine if the component should be visible. If the handler returns true, the component will be visible.", "name": "onDisplayAssignment" }, { "label": "Label Logic", "description": "This is a handler for the logic to determine the value of the button's label. The value returned by the event handler will be used as the button label.", "output": true, "dataBinding": true, "name": "onLabelAssignment" }, { "output": true, "name": "onValueAssignment", "dataBinding": true, "description": "This handler can contain logic to determine the value of the component. The autocomplete value is what the user enters or using this handler your logic can determine it.", "label": "Value Logic" }, { "output": true, "name": "onOptionsAssignment", "dataBinding": false, "description": "Using this handler you can return a collection of options provided by the component.", "label": "Options Logic", "contextBlocks": [ { "code": "___arguments.predictions", "id": "predictions", "label": "Predictions" } ] }, { "output": true, "name": "onPlacesPredictionsAssignment", "dataBinding": true, "description": "This handler can contain logic to determine the autocomplete predictions settings for the component.", "label": "Autocomplete Predictions" }, { "output": true, "name": "onQueryPredictionsAssignment", "dataBinding": true, "description": "This handler can contain logic to determine the search box predictions settings for the component.", "label": "Search Box Predictions" }, { "output": true, "name": "onPlaceholderAssignment", "dataBinding": true, "description": "This handler can contain logic to define a component placeholder. An autocomplete placeholder is what the user sees before filling in the autocomplete or using this handler, your logic can determine this.", "label": "Placeholder Logic" }, { "output": true, "name": "onReadOnlyStateAssignment", "dataBinding": true, "description": "This handler can contain logic to determine if the autocomplete component should be read-only. When the handler returns true, the autocomplete component becomes read-only.", "label": "Read-Only State Logic" }, { "label": "Disabled State Logic", "description": "This is a handler for the logic to determine if the component should be disabled. If the handler returns true, the component will be disabled.", "output": true, "dataBinding": true, "name": "onDisabledStateAssignment" }, { "label": "Required State Logic", "description": "Using this handler you can dynamically configure the component as required. A required component prevents form submission until it has a value.", "output": true, "dataBinding": true, "name": "onRequiredStateAssignment" } ], "id": "autocomplete-google-places", "html": "<div data-label=\"Label\" data-variant=\"standard\" data-search-mode=\"autocomplete\" data-size=\"medium\" style=\"margin:0 0 16px 0;\"></div>\n", "hasModule": true, "iconSvg": "<svg viewBox=\"0 0 512 512\">\n <path d=\"M478.33,179.574H33.67c-18.566,0-33.67,15.105-33.67,33.67v85.511c0,18.566,15.105,33.67,33.67,33.67h444.66\n\t\t\tc18.566,0,33.67-15.105,33.67-33.67v-85.511C512,194.679,496.895,179.574,478.33,179.574z M359.148,316.392H33.67\n\t\t\tc-9.725,0-17.637-7.912-17.637-17.637v-85.511c0-9.725,7.912-17.637,17.637-17.637h325.478V316.392z M495.967,298.756\n\t\t\tc0,9.725-7.912,17.637-17.637,17.637H375.182V195.608H478.33c9.725,0,17.637,7.912,17.637,17.637V298.756z\"/>\n <path d=\"M475.447,284.536l-19.638-19.638c3.098-5.092,4.884-11.066,4.884-17.45c0-18.566-15.105-33.67-33.67-33.67\n\t\t\tc-18.566,0-33.67,15.105-33.67,33.67s15.105,33.67,33.67,33.67c6.383,0,12.357-1.786,17.45-4.884l19.638,19.638\n\t\t\tc1.565,1.565,3.617,2.348,5.668,2.348s4.103-0.782,5.668-2.348C478.578,292.742,478.578,287.666,475.447,284.536z\n\t\t\t M427.023,265.086c-9.725,0-17.637-7.912-17.637-17.637c0-9.725,7.912-17.637,17.637-17.637c9.725,0,17.637,7.912,17.637,17.637\n\t\t\tC444.66,257.174,436.748,265.086,427.023,265.086z\"/>\n <path d=\"M42.221,213.779c-4.427,0-8.017,3.589-8.017,8.017v68.409c0,4.427,3.589,8.017,8.017,8.017\n\t\t\tc4.427,0,8.017-3.589,8.017-8.017v-68.409C50.238,217.368,46.649,213.779,42.221,213.779z\"/>\n</svg>\n" }, { "system": true, "category": "Layout", "name": "Block", "hasRepeaterTrait": true, "hasDataContainerTrait": true, "hasPodContainerTrait": true, "traits": [ { "name": "data-anchor", "label": "Anchor", "placeholder": "", "type": "text" }, { "name": "data-tooltip-text", "label": "Tooltip text", "placeholder": "", "type": "text" }, { "type": "property-select", "name": "data-tooltip-placement", "label": "Tooltip placement", "options": [ { "value": "top", "name": "Top" }, { "value": "right", "name": "Right" }, { "value": "bottom", "name": "Bottom" }, { "value": "left", "name": "Left" } ] } ], "handlers": [ { "label": "On Before Mount", "description": "This event is triggered immediately before the component is mounted and appeared on the page.", "contextBlocks": [], "name": "onBeforeMount" }, { "label": "On Mounted", "description": "This event is triggered immediately after the component is mounted and appeared on the page.", "contextBlocks": [], "name": "onMounted" }, { "label": "On Before Unmount", "description": "This event is triggered immediately before the component is unmounted and destroyed. Perform any necessary cleanup in this method, such as invalidating timers or cleaning up any RT subscriptions that were created in this component.", "contextBlocks": [], "name": "onBeforeUnmount" }, { "label": "On After Render", "description": "This event is triggered immediately after the component is rendered. Avoid any operations in the logic which might trigger a new render like changing parent data models because as result it will be an infinite loop and the entire application will freeze.", "contextBlocks": [], "name": "onAfterRender" }, { "label": "On Mouse Over Event", "description": "The event is fired when the mouse pointer hovers over the component.", "contextBlocks": [ { "code": "___arguments.event", "id": "event", "label": "Event" } ], "name": "onMouseOver" }, { "label": "On Mouse Out Event", "description": "The event is fired when the mouse pointer leaves the component boundaries.", "contextBlocks": [ { "code": "___arguments.event", "id": "event", "label": "Event" } ], "name": "onMouseOut" }, { "label": "On Click Event", "description": "This event is fired when the user clicks the mouse or taps the component.", "contextBlocks": [ { "code": "___arguments.event", "id": "event", "label": "Event" } ], "name": "onClick" }, { "label": "On Scroll", "description": "This event is triggered when the component's content is scrolled.\nHandler is triggered only if overflow is selected as scroll or auto", "contextBlocks": [ { "code": "___arguments.scrollTop", "id": "scrollTop", "label": "Scroll Top" }, { "code": "___arguments.scrollBottom", "id": "scrollBottom", "label": "Scroll Bottom" }, { "code": "___arguments.event", "id": "event", "label": "Event" } ], "name": "onScroll" }, { "label": "On Visibility Change", "description": "This event is triggered when visibility is changed directly from any Codeless Logic.", "contextBlocks": [ { "code": "___arguments.newValue", "id": "newValue", "label": "Is Visible" } ], "name": "onVisibilityChange" }, { "label": "Class List Logic", "description": "This is a handler for the logic to determine the value of the class list. The value returned by the event handler will be used as component class list.", "contextBlocks": [], "output": true, "dataBinding": true, "name": "onClassListAssignment" }, { "label": "Styles Logic", "description": "This is a handler for the logic to determine what styles should be applied to the component.", "contextBlocks": [], "output": true, "dataBinding": true, "name": "onStyleAssignment" }, { "label": "Tooltip Text Logic", "description": "This is a handler for the logic to determine what text should be shown in the tooltip.", "output": true, "dataBinding": true, "name": "onTooltipTextAssignment" }, { "label": "Tooltip Visibility Logic", "description": "This is a handler for the logic to determine if the tooltip should be visible. If the handler returns true, the tooltip will be displayed.", "output": true, "name": "onTooltipVisibilityAssignment" }, { "label": "Data Model Logic", "description": "Using this handler you can add logic which determines the data model object which should be used by the block. An object returned by the handler becomes the data model", "output": true, "dataBinding": true, "useParentDataBinding": true, "name": "onContainerDataAssignment" }, { "label": "Repeater Data Logic", "description": "This is a handler for the logic which must return a list of items for the Repeater", "output": true, "dataBinding": true, "useParentDataBinding": true, "contextBlocks": [], "name": "onDynamicItemsAssignment" }, { "label": "Visibility Logic", "output": true, "dataBinding": true, "description": "This is a handler for the logic to determine if the component should be visible. If the handler returns true, the component will be visible.", "name": "onDisplayAssignment" }, { "name": "onAnchorAssignment", "label": "Anchor Logic", "description": "This is a handler for the logic to determine what anchor should be used for component.", "output": true, "dataBinding": true } ], "stylable": [ "z-index", "overflow", "cursor", "position", "top", "left", "right", "bottom", "background-color", "background-image", "background-repeat", "background-position", "background-attachment", "background-size", "background", "flex-direction", "justify-content", "align-items", "align-self", "flex-grow", "flex-shrink", "flex-basis", "flex-container", "flex-wrap", "width", "height", "min-width", "min-height", "max-width", "max-height", "margin", "margin-top", "margin-bottom", "margin-left", "margin-right", "padding", "padding-top", "padding-bottom", "padding-left", "padding-right", "opacity", "border-radius", "border-top-left-radius", "border-top-right-radius", "border-bottom-left-radius", "border-bottom-right-radius", "border", "border-width", "border-style", "border-color", "box-shadow", "box-shadow-h", "box-shadow-v", "box-shadow-blur", "box-shadow-spread", "box-shadow-color", "box-shadow-type", "backdrop-filter", "filter" ], "id": "block", "html": "<div style=\"display:flex; flex-shrink:0; flex-direction:column; padding:10px; min-height:100px; min-width:100px;\"></div>\n", "hasModule": true, "iconSvg": "<svg viewBox=\"0 0 64 64\">\n <path d=\"m55 32c0-.366-.2-.703-.521-.878l-10.479-5.716v-9.406c0-.366-.2-.703-.521-.878l-11-6c-.299-.163-.659-.163-.958 0l-11 6c-.321.175-.521.512-.521.878v9.406l-10.479 5.716c-.321.175-.521.512-.521.878v10c0 .366.2.703.521.878l11 6c.149.081.314.122.479.122s.33-.041.479-.122l10.521-5.739 10.521 5.739c.149.081.314.122.479.122s.33-.041.479-.122l11-6c.321-.175.521-.512.521-.878zm-12 4.861-8.912-4.861 8.912-4.861 8.912 4.861zm-21 1.733 9-4.909v7.722l-9 4.91zm0-20.909 9 4.909v7.722l-9-4.909zm11 4.909 9-4.909v7.722l-9 4.909zm-1-11.455 8.912 4.861-8.912 4.861-8.912-4.861zm-11 16 8.912 4.861-8.912 4.861-8.912-4.861zm-10 6.546 9 4.909v7.722l-9-4.91zm22 0 9 4.909v7.722l-9-4.91zm11 12.631v-7.722l9-4.909v7.722z\"/>\n <path d=\"m32 60.882-1.337-.669-.895 1.789 1.785.893c.14.07.294.105.447.105s.307-.035.447-.105l1.789-.895-.895-1.789z\"/>\n <path d=\"m45.154 53.5h3.693v2h-3.693z\" transform=\"matrix(.894 -.447 .447 .894 -19.411 26.773)\"/>\n <path d=\"m55.062 48.546h3.693v2h-3.693z\" transform=\"matrix(.894 -.447 .447 .894 -16.15 30.681)\"/>\n <path d=\"m35.246 58.454h3.693v2h-3.693z\" transform=\"matrix(.894 -.447 .447 .894 -22.673 22.865)\"/>\n <path d=\"m40.2 55.977h3.693v2h-3.693z\" transform=\"matrix(.894 -.447 .447 .894 -21.042 24.819)\"/>\n <path d=\"m50.108 51.023h3.693v2h-3.693z\" transform=\"matrix(.894 -.447 .447 .894 -17.78 28.727)\"/>\n <path d=\"m61 46.382-1.236.618.895 1.789 1.789-.895c.338-.169.552-.515.552-.894v-2h-2z\"/>\n <path d=\"m61 27h2v4h-2z\"/>\n <path d=\"m61 21h2v4h-2z\"/>\n <path d=\"m61 33h2v4h-2z\"/>\n <path d=\"m61 39h2v4h-2z\"/>\n <path d=\"m62.447 16.105-1.785-.893-.895 1.789 1.233.617v1.382h2v-2c0-.379-.214-.725-.553-.895z\"/>\n <path d=\"m36.073 2.688h2v3.697h-2z\" transform=\"matrix(.447 -.894 .894 .447 16.436 35.667)\"/>\n <path d=\"m45.992 7.647h2v3.697h-2z\" transform=\"matrix(.447 -.894 .894 .447 17.477 47.275)\"/>\n <path d=\"m41.033 5.168h2v3.696h-2z\" transform=\"matrix(.447 -.895 .895 .447 16.962 41.475)\"/>\n <path d=\"m55.911 12.607h2v3.697h-2z\" transform=\"matrix(.447 -.894 .894 .447 18.53 58.894)\"/>\n <path d=\"m50.951 10.128h2v3.696h-2z\" transform=\"matrix(.447 -.895 .895 .447 18.009 53.089)\"/>\n <path d=\"m32 3.118 1.337.669.895-1.789-1.785-.893c-.281-.141-.613-.141-.895 0l-1.788.895.895 1.789z\"/>\n <path d=\"m10.2 10.977h3.693v2h-3.693z\" transform=\"matrix(.894 -.447 .447 .894 -4.085 6.652)\"/>\n <path d=\"m15.154 8.5h3.693v2h-3.693z\" transform=\"matrix(.894 -.447 .447 .894 -2.454 8.606)\"/>\n <path d=\"m5.245 13.454h3.693v2h-3.693z\" transform=\"matrix(.894 -.447 .447 .894 -5.716 4.698)\"/>\n <path d=\"m20.108 6.023h3.693v2h-3.693z\" transform=\"matrix(.894 -.447 .447 .894 -.823 10.56)\"/>\n <path d=\"m25.062 3.546h3.693v2h-3.693z\" transform=\"matrix(.894 -.447 .447 .894 .808 12.514)\"/>\n <path d=\"m1.553 16.105c-.339.17-.553.516-.553.895v2h2v-1.382l1.236-.618-.895-1.789z\"/>\n <path d=\"m1 39h2v4h-2z\"/>\n <path d=\"m1 27h2v4h-2z\"/>\n <path d=\"m1 21h2v4h-2z\"/>\n <path d=\"m1 33h2v4h-2z\"/>\n <path d=\"m3 45h-2v2c0 .379.214.725.553.895l1.785.893.895-1.789-1.233-.617z\"/>\n <path d=\"m20.967 55.136h2v3.696h-2z\" transform=\"matrix(.447 -.894 .894 .447 -38.824 51.145)\"/>\n <path d=\"m6.089 47.696h2v3.698h-2z\" transform=\"matrix(.447 -.894 .894 .447 -40.395 33.726)\"/>\n <path d=\"m25.927 57.615h2v3.698h-2z\" transform=\"matrix(.447 -.894 .894 .447 -38.301 56.94)\"/>\n <path d=\"m16.007 52.656h2v3.696h-2z\" transform=\"matrix(.447 -.894 .894 .447 -39.348 45.335)\"/>\n <path d=\"m11.049 50.175h2v3.697h-2z\" transform=\"matrix(.447 -.894 .894 .447 -39.871 39.535)\"/>\n</svg>\n" }, { "system": true, "category": "Form", "name": "Button", "droppable": false, "preventClickEvent": true, "traits": [ { "type": "property-select", "label": "Behavior", "name": "type", "defaultValue": "button", "options": [ { "value": "button", "name": "Default" }, { "value": "submit", "name": "Submit" }, { "value": "reset", "name": "Reset" } ] }, { "type": "property-select", "label": "Variant", "name": "data-variant", "options": [ { "value": "contained", "name": "Сontained" }, { "value": "outlined", "name": "Outlined" }, { "value": "text", "name": "Text" } ] }, { "type": "property-select", "label": "Size", "name": "data-size", "options": [ { "value": "small", "name": "Small" }, { "value": "medium", "name": "Medium" }, { "value": "large", "name": "Large" } ] }, { "name": "data-label", "label": "Label", "type": "text" }, { "type": "settings-button", "name": "data-start-icon", "label": "Start Icon", "text": "Change", "optional": true, "command": "OPEN_ICON_EDITOR" }, { "type": "settings-button", "name": "data-end-icon", "label": "End Icon", "text": "Change", "optional": true, "command": "OPEN_ICON_EDITOR" }, { "name": "data-disable-elevation", "label": "Disable Elevation", "type": "checkbox", "valueTrue": "true", "valueFalse": "false" }, { "name": "data-disable-ripple", "label": "Disable Ripple", "type": "checkbox", "valueTrue": "true", "valueFalse": "false" }, { "name": "data-disabled", "label": "Disabled", "type": "checkbox", "valueTrue": "true", "valueFalse": "false" }, { "name": "data-tooltip-text", "label": "Tooltip text", "placeholder": "", "type": "text" }, { "type": "property-select", "name": "data-tooltip-placement", "label": "Tooltip placement", "options": [ { "value": "top", "name": "Top" }, { "value": "right", "name": "Right" }, { "value": "bottom", "name": "Bottom" }, { "value": "left", "name": "Left" } ] } ], "handlers": [ { "label": "On Click Event", "description": "This event is fired when the user clicks the mouse or taps the component.", "contextBlocks": [ { "code": "___arguments.event", "id": "event", "label": "Event" } ], "name": "onClick" }, { "label": "On Visibility Change", "description": "This event is triggered when visibility is changed directly from any Codeless Logic.", "contextBlocks": [ { "code": "___arguments.newValue", "id": "newValue", "label": "Is Visible" } ], "name": "onVisibilityChange" }, { "label": "Class List Logic", "description": "This is a handler for the logic to determine the value of the class list. The value returned by the event handler will be used as component class list.", "contextBlocks": [], "output": true, "dataBinding": true, "name": "onClassListAssignment" }, { "label": "Styles Logic", "description": "This is a handler for the logic to determine what styles should be applied to the component.", "contextBlocks": [], "output": true, "dataBinding": true, "name": "onStyleAssignment" }, { "label": "Tooltip Text Logic", "description": "This is a handler for the logic to determine what text should be shown in the tooltip.", "output": true, "dataBinding": true, "name": "onTooltipTextAssignment" }, { "label": "Tooltip Visibility Logic", "description": "This is a handler for the logic to determine if the tooltip should be visible. If the handler returns true, the tooltip will be displayed.", "output": true, "name": "onTooltipVisibilityAssignment" }, { "label": "Visibility Logic", "output": true, "dataBinding": true, "description": "This is a handler for the logic to determine if the component should be visible. If the handler returns true, the component will be visible.", "name": "onDisplayAssignment" }, { "label": "Label Logic", "description": "This is a handler for the logic to determine the value of the button's label. The value returned by the event handler will be used as the button label.", "output": true, "dataBinding": true, "name": "onLabelAssignment" }, { "name": "onVariantAssignment", "label": "Variant Logic", "description": "This is a handler for the logic to determine the variant of the button. The value returned by the event handler will be used as the button variant. It can be can be nullable or one of [contained|outlined|text]", "output": true, "dataBinding": true }, { "label": "Disabled State Logic", "description": "This is a handler for the logic to determine if the component should be disabled. If the handler returns true, the component will be disabled.", "output": true, "dataBinding": true, "name": "onDisabledStateAssignment" } ], "stylable": [ "z-index", "cursor", "position", "top", "left", "right", "bottom", "background-color", "color", "align-self", "width", "height", "min-width", "min-height", "max-width", "max-height", "padding", "padding-top", "padding-bottom", "padding-left", "padding-right", "margin", "margin-top", "margin-bottom", "margin-left", "margin-right", "font-size", "border", "border-width", "border-color", "border-style" ], "id": "button", "html": "<button type=\"button\" data-label=\"Button\" data-variant=\"contained\" data-size=\"medium\" style=\"margin:20px 10px;\"></button>\n", "hasModule": true, "iconSvg": "<svg viewBox=\"0 0 24 24\">\n <path d=\"M22,9 C22,8.4 21.5,8 20.75,8 L3.25,8 C2.5,8 2,8.4 2,9 L2,15 C2,15.6 2.5,16 3.25,16 L20.75,16 C21.5,16 22,15.6 22,15 L22,9 Z M21,15 L3,15 L3,9 L21,9 L21,15 Z\"/>\n <rect x=\"4\" y=\"11.5\" width=\"16\" height=\"1\"/>\n</svg>\n" }, { "system": true, "category": "Visualizations", "name": "Calendar Heatmap", "droppable": false, "module": "ui-component_visualization_calendar-heatmap.js", "traits": [ { "name": "data-visualization-id", "label": "Visualization Name", "type": "visualizations-select" }, { "label": "Feature Toggle", "text": "Configure", "type": "settings-button", "command": "OPEN_VISUALIZATIONS_FEATURE_TOGGLE_EDITOR" } ], "stylable": [ "background-color", "align-self", "width", "height", "min-width", "min-height", "max-width", "max-height", "margin", "margin-top", "margin-bottom", "margin-left", "margin-right", "padding", "padding-top", "padding-bottom", "padding-left", "padding-right", "border-radius", "border-top-left-radius", "border-top-right-radius", "border-bottom-left-radius", "border-bottom-right-radius", "border", "border-width", "border-style", "border-color", "box-shadow", "box-shadow-h", "box-shadow-v", "box-shadow-blur", "box-shadow-spread", "box-shadow-color", "box-shadow-type" ], "actions": [ { "id": "on_feature_toggle_change", "label": "Set in Visualization", "searchLabel": "Visualization Heat Map Feature Toggle", "code": "component.onFeatureToggleChange({ [featureToggleType]: value })", "color": "#9e62e0", "hasReturn": false, "inputsInline": true, "inputs": [ { "name": "featureToggleType", "type": "field_dropdown", "label": "Feature Toggle", "options": [ [ "Toolbar", "'toolbar'" ], [ "Basic Data Settings", "'dataSettings'" ], [ "Advanced Data Settings", "'dataSettingsAdvanced'" ] ] }, { "label": "", "name": "value", "required": true, "shadow": { "type": "logic_boolean", "value": "true" } } ] } ], "handlers": [ { "label": "On Before Mount", "description": "This event is triggered immediately before the component is mounted and appeared on the page.", "contextBlocks": [], "name": "onBeforeMount" }, { "label": "On Mounted", "description": "This event is triggered immediately after the component is mounted and appeared on the page.", "contextBlocks": [], "name": "onMounted" }, { "label": "On Before Unmount", "description": "This event is triggered immediately before the component is unmounted and destroyed. Perform any necessary cleanup in this method, such as invalidating timers or cleaning up any RT subscriptions that were created in this component.", "contextBlocks": [], "name": "onBeforeUnmount" }, { "label": "On Visibility Change", "description": "This event is triggered when visibility is changed directly from any Codeless Logic.", "contextBlocks": [ { "code": "___arguments.newValue", "id": "newValue", "label": "Is Visible" } ], "name": "onVisibilityChange" }, { "label": "Class List Logic", "description": "This is a handler for the logic to determine the value of the class list. The value returned by the event handler will be used as component class list.", "contextBlocks": [], "output": true, "dataBinding": true, "name": "onClassListAssignment" }, { "label": "Styles Logic", "description": "This is a handler for the logic to determine what styles should be applied to the component.", "contextBlocks": [], "output": true, "dataBinding": true, "name": "onStyleAssignment" }, { "label": "Visibility Logic", "output": true, "dataBinding": true, "description": "This is a handler for the logic to determine if the Heat Map should be visible. If the handler returns true, the Heat Map will be displayed.", "name": "onDisplayAssignment" }, { "output": true, "name": "onVisualizationIdAssignment", "dataBinding": true, "description": "This is a handler for the logic to determines the id of the visualization which the Heat Map works with. Value returned by the handler will be used as the id of the Heat Map visualization.", "label": "Visualization Id Logic" } ], "id": "calendar-heatmap-visualization", "html": "<div style=\"display:flex;flex-direction:column;justify-content:center;height:400px;min-height:400px;margin:10px;overflow:hidden;\"></div>\n", "hasModule": true, "iconSvg": "<svg width=\"175\" height=\"175\" viewBox=\"0 0 175 175\">\n <g>\n <rect opacity=\"0.9\" id=\"svg_6\" height=\"40\" width=\"40\" y=\"0\" x=\"-0.384617\" fill-opacity=\"null\" stroke-width=\"1.5\" fill=\"currentColor\"/>\n <rect opacity=\"0.7\" id=\"svg_7\" height=\"40\" width=\"40\" y=\"0\" x=\"45\" fill-opacity=\"null\" stroke-width=\"1.5\" fill=\"currentColor\"/>\n <rect opacity=\"0.77\" id=\"svg_8\" height=\"40\" width=\"40\" y=\"0\" x=\"90.384617\" fill-opacity=\"null\" stroke-width=\"1.5\" fill=\"currentColor\"/>\n <rect opacity=\"0.93\" id=\"svg_9\" height=\"40\" width=\"40\" y=\"-0.384617\" x=\"135\" fill-opacity=\"null\" stroke-width=\"1.5\" fill=\"currentColor\"/>\n <rect id=\"svg_10\" height=\"40\" width=\"40\" y=\"45\" x=\"0\" fill-opacity=\"null\" stroke-width=\"1.5\" fill=\"currentColor\"/>\n <rect opacity=\"0.61\" id=\"svg_11\" height=\"40\" width=\"40\" y=\"45\" x=\"45\" fill-opacity=\"null\" stroke-width=\"1.5\" fill=\"currentColor\"/>\n <rect opacity=\"0.85\" id=\"svg_12\" height=\"40\" width=\"40\" y=\"45\" x=\"90\" fill-opacity=\"null\" stroke-width=\"1.5\" fill=\"currentColor\"/>\n <rect opacity=\"0.6\" id=\"svg_13\" height=\"40\" width=\"40\" y=\"45\" x=\"135\" fill-opacity=\"null\" stroke-width=\"1.5\" fill=\"currentColor\"/>\n <rect opacity=\"0.82\" id=\"svg_14\" height=\"40\" width=\"40\" y=\"90\" x=\"0\" fill-opacity=\"null\" stroke-width=\"1.5\" fill=\"currentColor\"/>\n <rect opacity=\"0.9\" id=\"svg_15\" height=\"40\" width=\"40\" y=\"90\" x=\"45\" fill-opacity=\"null\" stroke-width=\"1.5\" fill=\"currentColor\"/>\n <rect opacity=\"0.93\" id=\"svg_16\" height=\"40\" width=\"40\" y=\"90\" x=\"90\" fill-opacity=\"null\" stroke-width=\"1.5\" fill=\"currentColor\"/>\n <rect opacity=\"0.76\" id=\"svg_17\" height=\"40\" width=\"40\" y=\"90\" x=\"135\" fill-opacity=\"null\" stroke-width=\"1.5\" fill=\"currentColor\"/>\n <rect opacity=\"0.9\" id=\"svg_18\" height=\"40\" width=\"40\" y=\"135\" x=\"0\" fill-opacity=\"null\" stroke-width=\"1.5\" fill=\"currentColor\"/>\n <rect opacity=\"0.82\" id=\"svg_19\" height=\"40\" width=\"40\" y=\"135\" x=\"45\" fill-opacity=\"null\" stroke-width=\"1.5\" fill=\"currentColor\"/>\n <rect opacity=\"0.62\" id=\"svg_20\" height=\"40\" width=\"40\" y=\"135\" x=\"90\" fill-opacity=\"null\" stroke-width=\"1.5\" fill=\"currentColor\"/>\n <rect id=\"svg_21\" height=\"40\" width=\"40\" y=\"135\" x=\"135\" fill-opacity=\"null\" stroke-width=\"1.5\" fill=\"currentColor\"/>\n </g>\n</svg>\n" }, { "system": true, "category": "Visualizations", "name": "Calendar", "droppable": false, "showGoogleAPIKey": true, "module": "ui-component_visualization_calendar.js", "traits": [ { "name": "data-visualization-id", "label": "Visualization Name", "type": "visualizations-select" }, { "label": "Feature Toggle", "text": "Configure", "type": "settings-button", "command": "OPEN_VISUALIZATIONS_FEATURE_TOGGLE_EDITOR" } ], "stylable": [ "background-color", "align-self", "width", "height", "min-width", "min-height", "max-width", "max-height", "margin", "margin-top", "margin-bottom", "margin-left", "margin-right", "padding", "padding-top", "padding-bottom", "padding-left", "padding-right", "border-radius", "border-top-left-radius", "border-top-right-radius", "border-bottom-left-radius", "border-bottom-right-radius", "border", "border-width", "border-style", "border-color", "box-shadow", "box-shadow-h", "box-shadow-v", "box-shadow-blur", "box-shadow-spread", "box-shadow-color", "box-shadow-type" ], "actions": [ { "id": "on_feature_toggle_change", "label": "Set in Visualization", "searchLabel": "Visualization Calendar Feature Toggle", "code": "component.onFeatureToggleChange({ [featureToggleType]: value })", "color": "#9e62e0", "hasReturn": false, "inputsInline": true, "inputs": [ { "name": "featureToggleType", "type": "field_dropdown", "label": "Feature Toggle", "options": [ [ "Toolbar", "'toolbar'" ], [ "Data Editing", "'dataEditing'" ], [ "Navigator Controls", "'navigationControls'" ], [ "Date Fields", "'dateFields'" ], [ "Date Fields Multiple", "'dateFieldsMultiple'" ], [ "Date Fields With End Date", "'dateFieldsEndDateField'" ], [ "Labels Customization", "'labelsCustomization'" ], [ "Labels Colors", "'labelsColors'" ], [ "Basic Data Settings", "'dataSettings'" ], [ "Advanced Data Settings", "'dataSettingsAdvanced'" ] ] }, { "label": "", "name": "value", "required": true, "shadow": { "type": "logic_boolean", "value": "true" } } ] } ], "handlers": [ { "label": "On Before Mount", "description": "This event is triggered immediately before the component is mounted and appeared on the page.", "contextBlocks": [], "name": "onBeforeMount" }, { "label": "On Mounted", "description": "This event is triggered immediately after the component is mounted and appeared on the page.", "contextBlocks": [], "name": "onMounted" }, { "label": "On Before Unmount", "description": "This event is triggered immediately before the component is unmounted and destroyed. Perform any necessary cleanup in this method, such as invalidating timers or cleaning up any RT subscriptions that were created in this component.", "contextBlocks": [], "name": "onBeforeUnmount" }, { "label": "On Visibility Change", "description": "This event is triggered when visibility is changed directly from any Codeless Logic.", "contextBlocks": [ { "code": "___arguments.newValue", "id": "newValue", "label": "Is Visible" } ], "name": "onVisibilityChange" }, { "label": "Class List Logic", "description": "This is a handler for the logic to determine the value of the class list. The value returned by the event handler will be used as component class list.", "contextBlocks": [], "output": true, "dataBinding": true, "name": "onClassListAssignment" }, { "label": "Styles Logic", "description": "This is a handler for the logic to determine what styles should be applied to the component.", "contextBlocks": [], "output": true, "dataBinding": true, "name": "onStyleAssignment" }, { "label": "Visibility Logic", "output": true, "dataBinding": true, "description": "This is a handler for the logic to determine if the Calendar should be visible. If the handler returns true, the Calendar will be displayed.", "name": "onDisplayAssignment" }, { "output": true, "name": "onVisualizationIdAssignment", "dataBinding": true, "description": "This is a handler for the logic to determines the id of the visualization which the Calendar works with. Value returned by the handler will be used as the id of the Calendar visualization.", "label": "Visualization Id Logic" }, { "output": true, "name": "onWhereClauseAssignment", "dataBinding": true, "description": "This is a handler for the logic to determines the additional where clause of the visualization which the Calendar works with. Value returned by the handler will be used as the additional where clause of the Calendar visualization.", "label": "Where Clause Logic" } ], "id": "calendar-visualization", "html": "<div style=\"display:flex;flex-direction:column;justify-content:center;height:400px;min-height:400px;margin:10px;overflow:hidden;\"></div>\n", "hasModule": true, "iconSvg": "<svg viewBox=\"0 0 122.88 122.89\">\n <path d=\"M81.61,4.73C81.61,2.12,84.19,0,87.38,0s5.77,2.12,5.77,4.73V25.45c0,2.61-2.58,4.73-5.77,4.73s-5.77-2.12-5.77-4.73V4.73ZM66.11,105.66c-.8,0-.8-10.1,0-10.1H81.9c.8,0,.8,10.1,0,10.1ZM15.85,68.94c-.8,0-.8-10.1,0-10.1H31.64c.8,0,.8,10.1,0,10.1Zm25.13,0c-.8,0-.8-10.1,0-10.1H56.77c.8,0,.8,10.1,0,10.1Zm25.13,0c-.8,0-.8-10.1,0-10.1H81.9c.8,0,.8,10.1,0,10.1Zm25.14-10.1H107c.8,0,.8,10.1,0,10.1H91.25c-.8,0-.8-10.1,0-10.1ZM15.85,87.3c-.8,0-.8-10.1,0-10.1H31.64c.8,0,.8,10.1,0,10.1ZM41,87.3c-.8,0-.8-10.1,0-10.1H56.77c.8,0,.8,10.1,0,10.1Zm25.13,0c-.8,0-.8-10.1,0-10.1H81.9c.8,0,.8,10.1,0,10.1Zm25.14,0c-.8,0-.8-10.1,0-10.1H107c.8,0,.8,10.1,0,10.1Zm-75.4,18.36c-.8,0-.8-10.1,0-10.1H31.64c.8,0,.8,10.1,0,10.1Zm25.13,0c-.8,0-.8-10.1,0-10.1H56.77c.8,0,.8,10.1,0,10.1ZM29.61,4.73C29.61,2.12,32.19,0,35.38,0s5.77,2.12,5.77,4.73V25.45c0,2.61-2.58,4.73-5.77,4.73s-5.77-2.12-5.77-4.73V4.73ZM6.4,43.47H116.47v-22a3,3,0,0,0-.86-2.07,2.92,2.92,0,0,0-2.07-.86H103a3.2,3.2,0,0,1,0-6.4h10.55a9.36,9.36,0,0,1,9.33,9.33v92.09a9.36,9.36,0,0,1-9.33,9.33H9.33A9.36,9.36,0,0,1,0,113.55V21.47a9.36,9.36,0,0,1,9.33-9.33H20.6a3.2,3.2,0,1,1,0,6.4H9.33a3,3,0,0,0-2.07.86,2.92,2.92,0,0,0-.86,2.07v22Zm110.08,6.41H6.4v63.67a3,3,0,0,0,.86,2.07,2.92,2.92,0,0,0,2.07.86H113.55a3,3,0,0,0,2.07-.86,2.92,2.92,0,0,0,.86-2.07V49.88ZM50.43,18.54a3.2,3.2,0,0,1,0-6.4H71.92a3.2,3.2,0,1,1,0,6.4Z\"/>\n</svg>\n" }, { "system": true, "category": "Backendless", "name": "Chart Builder (deprecated)", "droppable": false, "traits": [ { "type": "settings-button", "label": "Chart", "text": "Change", "command": "OPEN_CHART_EDITOR" } ], "stylable": [ "background-color", "align-self", "width", "height", "min-width", "min-height", "max-width", "max-height", "margin", "margin-top", "margin-bottom", "margin-left", "margin-right", "padding", "padding-top", "padding-bottom", "padding-left", "padding-right", "border-radius", "border-top-left-radius", "border-top-right-radius", "border-bottom-left-radius", "border-bottom-right-radius", "border", "border-width", "border-style", "border-color", "box-shadow", "box-shadow-h", "box-shadow-v", "box-shadow-blur", "box-shadow-spread", "box-shadow-color", "box-shadow-type" ], "handlers": [ { "label": "On Visibility Change", "description": "This event is triggered when visibility is changed directly from any Codeless Logic.", "contextBlocks": [ { "code": "___arguments.newValue", "id": "newValue", "label": "Is Visible" } ], "name": "onVisibilityChange" }, { "label": "Class List Logic", "description": "This is a handler for the logic to determine the value of the class list. The value returned by the event handler will be used as component class list.", "contextBlocks": [], "output": true, "dataBinding": true, "name": "onClassListAssignment" }, { "label": "Styles Logic", "description": "This is a handler for the logic to determine what styles should be applied to the component.", "contextBlocks": [], "output": true, "dataBinding": true, "name": "onStyleAssignment" }, { "label": "Visibility Logic", "output": true, "dataBinding": true, "description": "This is a handler for the logic to determine if the component should be visible. If the handler returns true, the component will be visible.", "name": "onDisplayAssignment" }, { "output": true, "name": "onChartNameAssignment", "dataBinding": true, "description": "This is a handler for the logic to determine the name of the chart. Value returned by the handler will be used as the name of the chart.", "label": "Chart Name Logic" } ], "id": "chart", "html": "<div style=\"height:400px;padding:5px;margin:20px 10px;\"/>\n", "hasModule": true, "iconSvg": "<svg viewBox=\"0 0 512 512\">\n <path d=\"m76 240c12.101562 0 23.054688-4.855469 31.148438-12.652344l44.402343 22.199219c-.222656 1.808594-.550781 3.585937-.550781 5.453125 0 24.8125 20.1875 45 45 45s45-20.1875 45-45c0-6.925781-1.703125-13.410156-4.511719-19.277344l60.234375-60.234375c5.867188 2.808594 12.351563 4.511719 19.277344 4.511719 24.8125 0 45-20.1875 45-45 0-4.671875-.917969-9.089844-2.246094-13.328125l52.335938-39.242187c7.140625 4.769531 15.699218 7.570312 24.910156 7.570312 24.8125 0 45-20.1875 45-45s-20.1875-45-45-45-45 20.1875-45 45c0 4.671875.917969 9.089844 2.246094 13.328125l-52.335938 39.242187c-7.140625-4.769531-15.699218-7.570312-24.910156-7.570312-24.8125 0-45 20.1875-45 45 0 6.925781 1.703125 13.410156 4.511719 19.277344l-60.234375 60.234375c-5.867188-2.808594-12.351563-4.511719-19.277344-4.511719-12.101562 0-23.054688 4.855469-31.148438 12.652344l-44.402343-22.199219