Skip to main content

Document typically represent the visible UI or interface components of an application. They contain elements like buttons, text fields, header tag, and more - essentially the elements with which end-users interact.

Document Overview

In the DIGISQUARES platform, the Document section is designed for creating and customizing various types of documents using a drag-and-drop interface. Users can integrate charts, tables, text fields, images, and more, making it ideal for reports, invoices, or any document-based output.

Accessing the Document Menu​

  1. Navigate to Digisquares and log in.
  2. On the left sidebar, click TempLate > Document to open the Email Menu.
  3. Click + Blank Document to create a new email Ui.

Step-by-Step: Creating a Document​

  1. Navigate to the Document Module

    • From the left sidebar, click Document to open the document design interface.

  2. Select or Create a New Document

    • At the top, name your document or confirm the existing name.
    • Optionally, set Page Size (e.g., A4, Letter) if available.

  3. Add Components to the Canvas

    • From the Components panel on the right, drag and drop elements onto the grid. Examples include:
      • Row: For structuring content in horizontal sections.
      • Box/Code: For embedding code snippets or styled content blocks.
      • Section: For grouping related items together.
      • HTML: Insert custom HTML if you need advanced formatting.
      • Flex Container: For responsive layouts.

  4. Incorporate Shapes and Visuals

    • Add Shapes (e.g., arrows, lines, QR codes) for decoration or scanning.
    • Use the Bar Chart component (or other chart elements) to display data visually.

  5. Position and Resize Elements

    • Drag each component to the desired location on the grid.
    • Resize or align them according to your document’s layout requirements.

  6. Configure Properties and Styles

    • Select a component to reveal its properties or styling options.
    • Adjust text, colors, borders, or data bindings to match your document’s design.

  7. Preview Your Document

    • Check how the final layout appears. If supported, use a preview mode or generate a sample PDF/print preview.

  8. Save Your Work

    • Click Save in the top bar to commit changes.
    • If you need to discard changes, click Cancel.

  9. Publish or Export (Optional)

    • Depending on your workflow, you may export the document to PDF, print it, or integrate it into an automated process within the DIGISQUARES platform.

General Tips​

  • Combining Typography & Special Components
    Use headings (H1, H2, H3, etc.) to structure your page or document, and then insert charts, tables, or other special components to illustrate or support the text content.

  • Styling & Configuration
    Each component might have settings for color, size, data binding, and more. Check your platform’s documentation or property panel for customization options.

  • Responsive Design
    Components like the Flex Container help ensure your layout adapts to different screen sizes. Combine headings, text blocks, and charts within a flex container for a polished, responsive design.

Conclusion
The Document module in DIGISQUARES streamlines the process of creating visually appealing, data-driven documents. By using the drag-and-drop interface and customizable components, you can rapidly produce reports, invoices, or any other document type to meet your organization’s needs.