tips.json

[
  {
    "key": "editors:webform:explorer",
    "type": "text",
    "body": "**Explorer - Manage Your Project Assets**\n\nExplore, manage, and access your project's pages, methods, classes, shared elements, debugger sessions, roles & privileges, data models, and settings.",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:explorer:webforms",
    "type": "text",
    "body": "**Pages - Tailoring Your User Interface**\n\nPages serve as your key tools for designing and managing UI components.",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:canvas:toolbar:rendering:button",
    "type": "text",
    "body": "**Rendering - Transforming Blueprint into Interactive Interface**\n\nBefore initiating page rendering, ensure the following conditions are met:\n\n- Your database's [web server](https://developer.4d.com/docs/WebServer/overview) is running on an available [HTTP/HTTPS port](https://developer.4d.com/docs/WebServer/webServerConfig#http-port).\n\n- Your database is configured as a [REST Server](https://developer.4d.com/docs/WebServer/gettingStarted#rest-request).\n\nFor detailed instructions, consult the [documentation](https://developer.qodly.com/docs/studio/rendering), and don't forget to explore the [license usage section](https://developer.4d.com/4d-web-studio/docs/configuration/license-usage) for further guidance.",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:toolbox:components",
    "type": "text",
    "body": "**Components - Building Powerful UI Elements**\n\n[Components](https://developer.qodly.com/docs/studio/design-webforms/components/componentsBasics) are the core building blocks of your application's UI, ready to be drag-and-dropped into your page.\n\nAmong these components, some function as containers, allowing you to nest other components or containers within them.",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:toolbox:components:stylebox",
    "type": "text",
    "body": "**Stylebox - Precise Content Alignment**\n\nThe [Stylebox](https://developer.qodly.com/docs/studio/design-webforms/components/stylebox) is a container that uses [flexbox layout](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) and precise positioning to neatly organize content within pages.",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:toolbox:components:stylebox",
    "type": "video",
    "body": "",
    "video": {
      "provider": "youtube",
      "link": "https://www.youtube.com/embed/sN2tDaDfGCw"
    }
  },
  {
    "key": "editors:webform:toolbox:components:stylebox",
    "type": "video",
    "body": "",
    "video": {
      "provider": "youtube",
      "link": "https://www.youtube.com/embed/E6eJOF3b-Z0"
    }
  },
  {
    "key": "editors:webform:toolbox:components:tabs",
    "type": "text",
    "body": "**Tabs - Streamline UI Navigation with Clickable Tabs**\n\nThe [Tabs](https://developer.qodly.com/docs/studio/design-webforms/components/tabs) component organizes components within a tabs system for intuitive navigation through page sections.",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:toolbox:components:textinput",
    "type": "text",
    "body": "**Text input - Alphanumeric data entry**\n\n[Text Inputs](https://developer.qodly.com/docs/studio/design-webforms/components/textinput) allow users to enter alphanumeric data.",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:toolbox:components:textinput",
    "type": "video",
    "body": "",
    "video": {
      "provider": "youtube",
      "link": "https://www.youtube.com/embed/9SZ91mYoDXE"
    }
  },
  {
    "key": "editors:webform:toolbox:components:textinput",
    "type": "video",
    "body": "",
    "video": {
      "provider": "youtube",
      "link": "https://www.youtube.com/embed/sN2tDaDfGCw"
    }
  },
  {
    "key": "editors:webform:toolbox:components:textinput",
    "type": "video",
    "body": "",
    "video": {
      "provider": "youtube",
      "link": "https://www.youtube.com/embed/QCEaECArjWg"
    }
  },
  {
    "key": "editors:webform:toolbox:components:button",
    "type": "text",
    "body": "**Button - Primary User Action Trigger** \n\n[Buttons](https://developer.qodly.com/docs/studio/design-webforms/components/Button) serve as the primary means for user-initiated actions.",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:toolbox:components:radio",
    "type": "text",
    "body": "**Radio Button - Single or Multiple Option Selection**\n\n[Radio buttons](https://developer.qodly.com/docs/studio/design-webforms/components/radio) enable users to select one or multiple options from a predefined list.",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:toolbox:components:radio",
    "type": "video",
    "body": "",
    "video": {
      "provider": "youtube",
      "link": "https://www.youtube.com/embed/iFAyc8Ig-hs"
    }
  },
  {
    "key": "editors:webform:toolbox:components:rangeinput",
    "type": "text",
    "body": "**Range Input - Numeric Value Selection**\n\nThe [Range Input](https://developer.qodly.com/docs/studio/design-webforms/components/rangeinput) component enables numeric value selection via a slider.",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:toolbox:components:selectbox",
    "type": "text",
    "body": "**Select box - Single-Item Dropdown Selection**\n\nThe [Select Box](https://developer.qodly.com/docs/studio/design-webforms/components/selectbox) display intricate choices in a dropdown-style list with integrated components, facilitating the selection of a single value.",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:toolbox:components:image",
    "type": "text",
    "body": "**Image - Elevate your design with visuals**\n\n The [Image](https://developer.qodly.com/docs/studio/design-webforms/components/image) component displays images, whether static or sourced from a Qodly Source.",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:toolbox:components:icon",
    "type": "text",
    "body": "**Icon - Insert FontAwesome Icons**\n\nThe [Icon](https://developer.qodly.com/docs/studio/design-webforms/components/icon) component enables the use of predefined FontAwesome icons.",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:toolbox:components:checkbox",
    "type": "text",
    "body": "**Checkbox - Toggle Boolean Values**\n\nThe [Checkbox](https://developer.qodly.com/docs/studio/design-webforms/components/checkbox) component toggles boolean values (True/False).",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:toolbox:components:text",
    "type": "text",
    "body": "**Text - Static or Dynamic Text** \n\nThe [Text](https://developer.qodly.com/docs/studio/design-webforms/components/text) component displays either static text or text sourced from a Qodly Source.",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:toolbox:components:datatable",
    "type": "text",
    "body": "**Datatable - Iterating Through Data**\n\nThe [Datatable](https://developer.qodly.com/docs/studio/design-webforms/components/datatable) component displays Qodly Sources as organized rows and columns",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:toolbox:components:datatable",
    "type": "video",
    "body": "**Datatable - Iterating Through Data**\n\nWatch this video to learn more",
    "video": {
      "provider": "youtube",
      "link": "https://www.youtube.com/embed/BZ2gYggw6uY"
    }
  },
  {
    "key": "editors:webform:datatablesetup",
    "type": "text",
    "body": "**Datatable - Iterating Through Data**\n\nThe datatable is a component that iterates on an [ORDA entity selection](https://developer.qodly.com/docs/orda/data-model/#entity-selection) or an array and displays it as a row/column list.",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:datatablesetup",
    "type": "video",
    "body": "**Datatable - Iterate on data**\n\nWatch this video to learn more",
    "video": {
      "provider": "youtube",
      "link": "https://www.youtube.com/embed/BZ2gYggw6uY"
    }
  },
  {
    "key": "editors:webform:toolbox:components:matrix",
    "type": "text",
    "body": "**Matrix - Iterate on Data for Dynamic Designs**\n\nThe [Matrix](https://developer.qodly.com/docs/studio/design-webforms/components/matrix) component enables iteration over a Qodly Source to display dynamic [Stylebox](https://developer.qodly.com/docs/studio/design-webforms/components/stylebox) components with fixed pixel heights for each element.",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:toolbox:components:matrix",
    "type": "video",
    "body": "",
    "video": {
      "provider": "youtube",
      "link": "https://www.youtube.com/embed/SpglwMBtvOc"
    }
  },
  {
    "key": "editors:webform:toolbox:components:webformloader",
    "type": "text",
    "body": "**Page loader - Embed Additional pages**\n\nUse the [Page Loader](https://developer.qodly.com/docs/studio/design-webforms/components/webformloader) component to embed and manage an additional page within your current page. The loaded page's name can be dynamically determined from a String-based Qodly Source.",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:toolbox:components:webformloader",
    "type": "video",
    "body": "",
    "video": {
      "provider": "youtube",
      "link": "https://www.youtube.com/embed/dRJzDYUt0TM"
    }
  },
  {
    "key": "editors:webform:toolbox:outline",
    "type": "text",
    "body": "**Outline - Navigating Your Page Components**\n\nThe [Outline](https://developer.qodly.com/docs/studio/design-webforms/create-webform#outline) provides a visual hierarchy of page components, enabling easy navigation, relocation, and element visibility control during design.",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:toolbox:datasources",
    "type": "text",
    "body": "**Qodly Sources - Managing Data on Your pages**\n\n - Explore tips regarding the Catalog and scalar Qodly Sources, each in their respective sections\n\n - For detailed information, visit https://developer.qodly.com/docs/studio/design-webforms/datasources",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:toolbox:datasources:remote",
    "type": "text",
    "body": "**Remote Qodly Sources - Handle data on the server**\n\nRemote Qodly Sources are\n\n[entities](https://developer.qodly.com/docs/orda/data-model#entity)\n\nand\n\n[entity selections](https://developer.qodly.com/docs/orda/data-model#entity-selection)\n\nYou can create them from the Catalog above or from an existing Qodly Source.\n\nThey are handled on the server and can be assigned to components.\n\nThey offer functions defined on the ORDA classes that they instantiate:\n\n[Entity class](https://developer.qodly.com/docs/orda/data-model#entity-class)\n\n[Entity Selection class](https://developer.qodly.com/docs/orda/data-model#entity-selection)\n\nTo learn more about Qodly Sources, visit the [documentation](https://developer.qodly.com/docs/studio/design-webforms/datasources)\nand watch the tips.",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:toolbox:datasources:remote",
    "type": "video",
    "body": "",
    "video": {
      "provider": "youtube",
      "link": "https://www.youtube.com/embed/f6b3eIaYgNw"
    }
  },
  {
    "key": "editors:webform:toolbox:datasources:remote",
    "type": "video",
    "body": "",
    "video": {
      "provider": "youtube",
      "link": "https://www.youtube.com/embed/clGXvsHC9cQ"
    }
  },
  {
    "key": "editors:webform:toolbox:datasources:catalog",
    "type": "text",
    "body": "**Catalog - A Window to Your Datastore**\n\nThe [Catalog](https://developer.qodly.com/docs/studio/design-webforms/datasources#catalog-datasources-and-scalar-datasources) serves as a representation of your entire database in the form of the [datastore](https://developer.qodly.com/docs/orda/data-model#datastore) object.\n\nIt is your access point to the complete datastore object, its [dataclasses](https://developer.qodly.com/docs/orda/data-model#dataclass), and their associated attributes and functions as defined in [ORDA Data Model Classes](https://developer.qodly.com/docs/language/basics/lang-classes#data-model-classes).\n\nYou can use the catalog to establish Catalog Qodly Sources such as entity selections and entities, directly sourced from dataclasses. ",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:toolbox:datasources:local",
    "type": "text",
    "body": "**Local Qodly Sources - Ephemeral data used in a page** \nUse the local Qodly Sources to handle ephemeral data that will not persist in your database.\nLocal Qodly Sources are working data that is lost when you close your Page (for example, search criteria).",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:toolbox:styleslib",
    "type": "text",
    "body": "**Style Library - Tailoring Your UI Design** \n\nIn the [Style Library](https://developer.qodly.com/docs/studio/design-webforms/styling#styles-library), manage and apply CSS classes to components by drag-and-drop or using the properties panel.",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:toolbox:styleslib",
    "type": "video",
    "body": "",
    "video": {
      "provider": "youtube",
      "link": "https://www.youtube.com/embed/JfSJTic8yik"
    }
  },
  {
    "key": "editors:webform:toolbox:styleslib",
    "type": "video",
    "body": "",
    "video": {
      "provider": "youtube",
      "link": "https://www.youtube.com/embed/QCEaECArjWg"
    }
  },
  {
    "key": "editors:webform:canvas",
    "type": "text",
    "body": "**Canvas - Customize Your UI Using Intuitive Drag-and-Drop Tools**\n\nThe Canvas is your workspace for crafting pages through drag-and-drop interactions with components.\n\nEach component on the canvas features a tooltip bar for convenient tasks such as repositioning, removal, hierarchical navigation, and more.\n\nFor in-depth guidance, refer to the [documentation](https://developer.qodly.com/docs/studio/design-webforms/components/componentsBasics#tooltip).",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:canvas",
    "type": "video",
    "body": "",
    "video": {
      "provider": "youtube",
      "link": "https://www.youtube.com/embed/2885GKsxT7A"
    }
  },
  {
    "key": "editors:webform:breadcrumbs",
    "type": "text",
    "body": "**Breadcrumbs - Visualize the Location in the Component Hierarchy**\n\n[Breadcrumbs](https://developer.qodly.com/docs/studio/design-webforms/create-webform#breadcrumbs) display the selected component's location in the page hierarchy, facilitating easy navigation to its parent or ancestors.",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:properties",
    "type": "text",
    "body": "**Properties panel - Apply properties to a component** \n\nThis panel allows you to:\n- apply specific properties depending on the component (for example, the label of a button)\n- bind a Qodly Source\n- apply styles (color, layout, ...)\n\nNote that the page is a component itself, so you can apply styles to it.",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:properties:style:color",
    "type": "text",
    "body": "**Styling with color **\n\nCustomize your selection with color.",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:properties:style:background",
    "type": "text",
    "body": "**Styling with background **\n\nCustomize your selection with a background.",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:properties:style:boxshadow",
    "type": "text",
    "body": "**Box Shadow - Customize Shadow Effects**\n\nApply shadow effects to your components using these settings, with changes immediately visible on the canvas.\n\nAlternatively, access CSS code and examples for efficient customization.\n\n- [beautiful CSS box-shadow examples](https://getcssscan.com/css-box-shadow-examples)  \n\n- [box shadow css generator](https://cssgenerator.org/box-shadow-css-generator.html)",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:properties:style:css",
    "type": "text",
    "body": "**CSS - Customize Component Styling**\n\nCustomize the styling of a component by entering one or more CSS class names here.\n\nThese classes will be applied to the component, and CSS rules pertaining to [cascading and inheritance](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) will take effect.",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:properties:dataaccess",
    "type": "text",
    "body": "**Data Access - Bind a Qodly Source to a Component** \n\nTo associate a Qodly Source with your component, simply specify the Qodly Source name.",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:properties:serverside",
    "type": "text",
    "body": "**Server-Side: Dynamic Component Behavior Management**\n\nLeverage [Server-Side](https://developer.qodly.com/docs/studio/design-webforms/create-webform#data-access-category:~:text=the%20same%20dataset.-,Server%20Side,-%3A%20Provides%20the%20means) capabilities to dynamically manage your component's behavior with [Qodly Script](https://docqodly.github.io/docs/category/qodlyscript) code, enabling actions like hiding, displaying, and CSS class manipulation.",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:contextualconfiguration",
    "type": "text",
    "body": "**Contextual Configuration Panel - Customizing CSS and Event Settings**\n\nThe [Contextual Configuration Panel](https://developer.qodly.com/docs/studio/design-webforms/create-webform#contextual-panel) allows you to fine-tune CSS code. In addition to editing CSS code, you can:\n\n- Configure events for individual components using [class functions](https://developer.qodly.com/docs/studio/design-webforms/events#bind-class-functions-to-events) or [standard actions](https://developer.qodly.com/docs/studio/design-webforms/events#bind-standard-actions-to-events).\n\n- Set up [events for Qodly Sources](https://developer.qodly.com/docs/studio/design-webforms/events#datasource-events).\n\n- Define [navigation actions](https://developer.qodly.com/docs/studio/design-webforms/events#bind-navigation-actions-to-events).\n\nMost user-triggered events, such as onclick and onmouseover, can be easily configured for components within this panel.",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:contextualconfiguration:event:parameter:toggle",
    "type": "text",
    "body": "**Parameter Options - Qodly Source vs. Hardcoded Value**\n\nChoose the [Parameter type](https://developer.qodly.com/docs/studio/design-webforms/events#bind-class-functions-to-events:~:text=Pass%20Parameters%3A%20You%20can%20expand%20the%20capabilities%20of%20class%20functions%20by%20passing%20parameters%20in%20two%20ways%3A) you wish to pass —whether it's a Qodly Source or a hardcoded value— for the function you are calling.\n\nIf you opt for a hardcoded value, be sure to specify its data type.",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:contextualconfiguration:event:navigation",
    "type": "text",
    "body": "**Page Navigation - Handled with Ease**\n\nHandle [Page Navigation](https://developer.qodly.com/docs/studio/design-webforms/events#bind-navigation-actions-to-events) by associating navigation actions with events on components. Select a component, access the contextual panel, and choose the destination page.\n\nOptions include:\n\n- Within a Page Loader\n\n- In a New Browser Tab (*)\n\n- In the Current Browser Tab (*)\n\n- In the Current Location, acting as a [Page Loader, self](https://developer.qodly.com/docs/studio/design-webforms/components/webformloader#navigating-with-webform-loader).\n\n(*) Please note that these navigation types are exclusively available during [rendering](https://developer.qodly.com/docs/studio/rendering).",
    "video": {
      "provider": "",
      "link": ""
    }
  },
  {
    "key": "editors:webform:contextualconfiguration:event:navigation",
    "type": "video",
    "body": "**Handle navigation between pages**",
    "video": {
      "provider": "youtube",
      "link": "https://www.youtube.com/embed/dRJzDYUt0TM"
    }
  },
  {
    "key": "editors:webform:contextualconfiguration:event:navigation",
    "type": "video",
    "body": "**Handle navigation between pages**",
    "video": {
      "provider": "youtube",
      "link": "https://www.youtube.com/embed/wNQ-7agZRMs"
    }
  },
  {
    "key": "editors:webform:contextualconfiguration:event:navigation",
    "type": "video",
    "body": "**Handle navigation between pages**",
    "video": {
      "provider": "youtube",
      "link": "https://www.youtube.com/embed/mpmOufNaNdc"
    }
  }
]