Layouter

Information about the different layout options.

Overview

The layouter provides a set of custom HTML elements that can be used to create dynamic user interfaces for your platform. Each element supports common base attributes and has its own specific functionality.

Base Attributes

All layout elements support the following base attributes:

• id: The unique identifier of this node
• status: Comma-separated list of stati where the node should be shown
• rights: Comma-separated list of rights needed to show the node (user needs at least one)
• edit: Defines the edit state of the node (true/false)
• readonly: Shows the element in read-only mode when set (true/false)
• style: CSS styles to be applied to the node

Container Elements

Card/Data

The card and data tags are aliases for the same component that displays content within a collapsible container with a header.

Example

<card name="Properties" collapsed>
  <variable ident="name" />
  <variable ident="status" />
</card>

<data name="User Information" fixed>
  <variable ident="email" access="write" />
  <variable ident="phone" />
</data>

Attributes

• name/title: The title to display in the header
• fixed: Prevents the card from being moved or resized
• collapsed: Collapse the card panel to save space

Div

A generic container element for grouping other layout elements.

Example

<div id="container" style="border: 1px solid #ccc;">
  <variable ident="content" />
  <new-line />
  <button title="Submit" workflow="submit_data" />
</div>

Tab

Used to create tabbed interfaces. Typically used within a record layout.

Example

<tab name="General" active>
  <data name="Basic Info">
    <variable ident="name" />
    <variable ident="email" />
  </data>
</tab>
<tab name="History">
  <record-logs />
</tab>

Attributes

• name/title: The title displayed on the tab
• active: Sets this tab as the initially active one

Variable Display

Variable

The variable tag displays a single variable within a data container. It's only valid within data/card tags.

Example

<data name="Properties">
  <variable ident="name" />
  <variable ident="version" readonly />
  <variable ident="status" access="write" />
  <variable name="Static" value="This string will always be shown" />
  <variable name="Dynamic" workflow="wf_name" label-break />
</data>

Attributes

• ident: The identifier of the variable to display
• name: Override the display name of the variable
• value: A fixed value to show instead of the variable value
• workflow: A workflow to execute on every change
• record: A record UUID or variable name with reference to show data for
• label-break: Break the label to a new line
• lang: Set the field to a specific language (empty means user language)

Interactive Elements

Button

The button, highlight-button, and link tags all map to the same component with different display styles.

Example

<button title="Submit" icon="check" workflow="submit_form" />
<highlight-button title="Users" text="5 active users" icon="users" link="/users" />
<link title="External Link" link="https://example.com" target="_blank" />

Attributes

• title/name: The text to display on the button
• text: Second line text (for highlight buttons)
• icon: Icon name to display
• link: URL to navigate to on click
• target: Link target (_self, _blank, etc.)
• workflow: Workflow to execute on click
• workflow-param: Parameter to pass to the workflow
• typ: Button type (button, highlight, link)

Button Upload

A specialized button for file uploads.

Example

<button-upload text="Upload Files" workflow="process_upload" />

Attributes

• text/name/title: The text to display on the button
• workflow: Workflow to execute when files are uploaded

Data Display

Highlight Data

Displays a highlighted data value, often used for metrics or key performance indicators.

Example

<highlight-data
  name="Active Users"
  sql="SELECT count(uuid) FROM user WHERE active = true;"
  precision="0"
  workflow="view_users"
/>

Attributes

• name: The label to display under the value
• sql: SQL query to fetch the data
• value: Default/fallback value
• precision: Number of decimal places to show
• workflow: Workflow to execute when clicked
• link: URL to navigate to when clicked
• target: Link target

Files

Displays a file carousel for managing file attachments.

Example

<files variable="attachments" column="file_refs" />

Attributes

• variable: Variable identifier containing the file references
• column: Column name in a table containing file references

Record Logs

Shows the history and activity logs for a record. Recommended to use as the only element within a tab.

Example

<tab name="History">
  <record-logs />
</tab>

Charts and Visualizations

Chart

Displays various types of charts for data visualization.

Example

<chart name="User Statistics" typ="doughnut" collapsed>
  <chart-data sql="SELECT status, count(*) FROM users GROUP BY status;" />
</chart>

Attributes

• name: The title to display above the chart
• typ: Chart type (bar, pie, doughnut)
• collapsed: Start with the chart panel collapsed

Chart Data

Defines a data source for charts. Must be used within a chart element.

Example

<chart-data 
  sql="SELECT category, sum(amount) FROM transactions GROUP BY category;"
  name="Spending by Category"
/>

Attributes

• sql: SQL query to fetch the chart data
• name: Label for this data series

QR Code

Generates and displays QR codes.

Example

<qr-code 
  content="https://example.com/record/{{uuid}}"
  icon="link"
  color="#000000"
/>

Attributes

• content: The content to encode in the QR code
• icon: Icon to display with the QR code
• color: Color of the QR code modules

Timeline

Displays events in a timeline format.

Example

<timeline 
  layout="vertical"
  variable="events"
  title="event_title"
  subtitle="event_date"
  content="event_description"
  icon="event_icon"
/>

Attributes

• layout: Timeline layout (vertical, horizontal)
• variable: Variable containing the timeline data
• record: Record reference for the timeline data
• title: Field name for event titles
• subtitle: Field name for event subtitles
• content: Field name for event content
• icon: Field name for event icons
• reference: Field name for event references

Relation Chart

Displays relationships between records in a visual chart.

Example

<relation-chart record="current_record" />

Attributes

• record: Record reference to visualize relationships for

Utility Elements

New Line

Inserts a line break in the layout.

Example

<variable ident="first_name" />
<new-line />
<variable ident="last_name" />

Raw HTML

Allows insertion of custom HTML content.

Example

<raw-html>
  <h2>Custom Headline</h2>
  <p>This is custom HTML content that will be rendered directly.</p>
  <div class="custom-styling">
    Custom styled content
  </div>
</raw-html>

Comments

HTML comments are supported and will be preserved in the layout structure:

<!-- This is a comment that describes the following section -->
<data name="User Data">
  <!-- Variable for storing user name -->
  <variable ident="name" />
</data>

Status and Rights Control

All elements can be conditionally displayed based on record status or user rights:

<!-- Only show when record status is 'new' or 'draft' -->
<button title="Edit" status="new,draft" workflow="edit_record" />

<!-- Only show to users with 'admin' or 'manager' rights -->
<data name="Admin Panel" rights="admin,manager">
  <variable ident="internal_notes" />
</data>

<!-- Combine status and rights -->
<button 
  title="Approve" 
  status="pending" 
  rights="approver"
  workflow="approve_record" 
/>