Gaio DataOS
Gaio DataOS
Gaio DataOS
  • 👋 Welcome to Gaio DataOS
  • GETTING STARTED
    • Gaio DataOS Console
    • Quickstart
  • FUNDAMENTALS
    • Data Projects
    • Studio
    • Database
    • Workflow
  • Data Sources
  • TASKS
    • ETL
      • Builder
      • SQL
      • Source SQL
      • Insert Table
      • Insert Row
      • Update
      • Delete
      • Create Table
      • Quick Table
      • Quick Upload
      • Pivot Table
      • Unpivot Table
      • REST
      • Parameters to Table
      • Table to Parameters
      • Define parameter value
      • Users
      • CSV Web
      • CSV Local
      • Google Spreadsheet
    • Analytics
      • Sample
      • Cluster
      • Principal Components
      • Association Rules
      • Forecast
      • Python
    • Delivery
      • Content
      • Form Card
      • Export CSV
    • Map Editor
Powered by GitBook
On this page
  • How to Use the Content Editor
  • 1. Select the Content Component
  • 2. Configure the Task
  • 3. Preview and Display Settings
  1. TASKS
  2. Delivery

Content

PreviousDeliveryNextForm Card

Last updated 2 days ago

The Content component allows you to build custom visual elements using HTML, CSS (Style), and JavaScript (Script). It's a powerful tool for creating dynamic dashboards, interactive interfaces, and customized data presentations, all within the Gaio platform.

This task gives a lot of flexibility to users who have programming skills.

How to Use the Content Editor

1. Select the Content Component

  • In the left-side panel under "Delivery", drag the Content task into your flow.

  • Link it to the tasks or tables whose data you want to use.

2. Configure the Task

Task label: (optional) Name for identifying this step in your flow.

HTML Tab (Visual Structure): Use this tab to build the structure of your output.

Script Tab (JavaScript Logic):

  • Access your data tables via the context object.

  • You can dynamically insert values into your HTML.

Style Tab (CSS Styling):

  • Customize the appearance of your content.

Even with the tabs with the names of the languages, the user can use all three in the same code.

Context: To use data from existing tables in Gaio, they must be flagged. To do this, mark each table that will be used so that Gaio makes their data available in this task.

Options:

  • The visual result of the code whether it has a border or not. The idea of the border is to generate a box in the object. Without a border, the text blends into the background, but for example when using images, it is more interesting not to have a border.

  • Library: Here you select which library you want to use.

Content: Here you can view images, PDFs and other files uploaded to Gaio. In this content task, it is possible to present images, PDFs, videos, maps and whatever the code allows.

3. Preview and Display Settings

  • The Result tab shows a live preview of your rendered output.

  • You can combine data from multiple tables, apply calculations, and display results in real time.

  • You can control:

    • Width (%) – How much horizontal space the component uses.

    • Height (px) – Vertical size of the result frame.

  • Whenever you place codes in the black box, you need to press the Run button to view the result below.

Best Practices

  • Keep your HTML and JS modular and clean.

  • Always check for null or undefined data before using.

  • Use console.log() for debugging when needed.