Skip to main content

Writing Templates

Octostar Templates provide a powerful and flexible way to craft customer-specific user interfaces without the hassle of handling dependencies. Think of them as lightweight React components equipped with some predefined components to aid your development.

Basic Structure​

A simple Octostar template looks like:

()=><h1>Hello World</h1>

This represents a React functional component. If you're familiar with React, you'll find this approach straightforward.

Available Components​

The Templates come pre-loaded with various components so you don't have to worry about imports. Among these, you'll find all the Ant Design (version 5) components, as well as some custom Octostar components such as:

  • <OsContextMenu item={item}/>: For context menus.
  • <OsTemplate os_template="another_template"/>: To reference another template.
  • <OsRichText record={record} path="somefile.rtf"/>: For rendering rich text based on a record.

For charts, Recharts components are available:

const {ResponsiveContainer, PieChart, Pie, Cell} = Recharts;

Advanced Template​

Let's dive into a more detailed template to understand the capabilities:

// ... Your detailed template code ...

Key Features:​

  1. React Hooks: The template uses standard React hooks such as useState and useEffect for state management and side-effects.
  2. Context Variables: The template has access to some context variables. Two important ones are:
    • record: Represents the single record the template is currently rendering.
    • records: Represents multiple records if the template is set up for that.
  3. APIs: You can use predefined APIs, such as OntologyAPI and DesktopAPI, which are available in the context and are documented separately.
  4. Dynamic Rendering: This template updates the UI based on the data fetched, as shown in the dynamic titles, descriptions, and recent changes.

Things to Keep in Mind​

  1. Error Handling: Always ensure you have adequate error handling, especially when working with asynchronous operations or data fetches.
  2. Data Dependence: Templates rely heavily on context variables like record and records. Always ensure these are available and in the correct format.
  3. Optimization: When dealing with dynamic data updates or rendering lists, consider optimization techniques like memoization or pagination to ensure performance.

In conclusion, Octostar Templates provide a streamlined way to customize user interfaces. With a good understanding of React, you can quickly harness the power of these templates and create rich, dynamic UIs tailored to specific needs.

What's Missing?

It might be helpful to provide users with:

  • Information on how to integrate these templates within their Octostar environment.
  • A list of all available context items and their descriptions.
  • Best practices for performance and error handling.
  • Debugging tips when things don't go as expected.