HortiView Events¶

HortiView Events are platform-level triggers that allow modules to “hook into” specific lifecycle moments or actions within the HortiView platform. When an event occurs—such as the platform finishing its initialization—the system can dynamically call an exposed component from a module to execute logic associated with that event.

This mechanism enables modules to respond to platform changes without requiring the full module UI to load. It is a key part of HortiView’s modular architecture, supporting lightweight, event-driven workflows and improving performance.

Events provide a structured way for modules to:

• Execute background logic at critical points (e.g., after platform load)
• Register additional functionality without bloating the main module
• Implement mini-workflows or data synchronization tasks without rendering a full interface

By leveraging Module Federation’s dynamic loading capabilities, HortiView can call only the components or functions needed for an event, reducing resource usage and improving responsiveness. It also allows us the call a modules logic, without any user interaction.

Event Components¶

An Event Component is a dedicated, exposed component designed to handle a specific event within the HortiView platform. It functions like a standard Module Federation component, providing a default export that encapsulates the event’s logic. In essence, it closely resembles a typical Remote Component used in your main module, but is tailored for event-driven execution.

When the corresponding event is triggered by the platform, the associated Event Component is automatically invoked. This allows you to execute background logic or perform specific tasks in response to platform events, without requiring user interaction or loading the full module UI.

1
2
3
4
5
6
7
8

{
    "name": "_58ef8be9_c9e3_4294_83c3_7b1455b52134",
    "filename": "offlineModule.js",
    "exposes": {
        "./OfflineCapableModule": "./src/Template/RemoteModule",
        "./TriggerOnPlatformLoaded": "./src/Template/events/TriggerOnPlatformLoaded/Remote"
    }
}

The component that will be invoked — such as ./src/Template/events/TriggerOnPlatformLoaded/Remote — must be a default-exported React component. This component should accept and utilize the moduleProperties provided by the platform, serving as an integration wrapper for event handling.

To leverage the full functionality of the BaseModule, wrap your prefetching logic within the <ModuleCore /> component. This ensures proper context and configuration are available to your event-driven logic, enabling seamless integration with the HortiView platform.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

import { BaseProps, checkConfig, ModuleCore } from "@hortiview/modulebase";
import env from "../../../../environments.json";
import { Prefetcher } from "./Prefetcher";

const App = (customProps: Readonly<BaseProps>) => {
    return (
        <ModuleCore props={customProps} env={checkConfig(env)}>
            <Prefetcher />
        </ModuleCore>
    );
};

export default App;

Once you have configured the Module Federation component, you can implement a dedicated component for your prefetching logic. The BaseModule offers two key utilities for this purpose:

• usePrefetchEntity (hook)
• prefetchCustom (method)

The usePrefetchEntity hook allows you to prefetch specific entities within a given entity group, e.g. the farms entity within the FarmOrganization group. You can also prefetch multiple entities from the same group simultaneously (see lines 10 and 13 in the code example above).

Additionally, the prefetchCustom method enables you to prefetch data for use with the useCustom hook, as described in the BaseModule documentation.

These utilities streamline the process of preparing data for offline use, ensuring your module remains responsive and functional even when connectivity is limited.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

import { useBaseProps, useConfig, useOffline } from "@hortiview/modulebase";
import { useEffect, useState } from "react";

export const Prefetcher = () => {
  //show snackbar via baseprops
  const { environment: env } = useConfig();
  const { prefetchCustom, usePrefetchEntity } = useOffline();

  //Prefetch entity metadata (fields)
  usePrefetchEntity("FarmOrganization", "farms");

  //Prefetch entity metadata (of multiple entities)
  usePrefetchEntity("FarmOrganization", "fields", "zones");

  //Prefetch data for example api
  const apiUrlExample = env?.EXAMPLE_API!;
  prefetchCustom({
    endpoint: `${apiUrlExample}/todos`,
    queryKey: ["ToDos"],
    noAuth: true,
  });

  //Prefetch data for external api
  const apiUrlEXTERNAL = env?.EXTERNAL_GET!;
  prefetchCustom({
    endpoint: `${apiUrlEXTERNAL}`,
    queryKey: ["External"],
    noAuth: true,
  });

  return <></>;
};

Function Components¶

A Functions Component is an exposed component that allows you to define simple functions or methods for specific HortiView events. When an event occurs, the platform will invoke the corresponding function within this component, enabling you to execute event-driven logic without rendering a React component.

Implementation¶

All events handled via the Functions Component must be implemented as named exports within the component. The Functions Component itself must be exposed under the strict name ./Functions in your module federation configuration. For example:

1
2
3
4
5
6
7

{
    "name": "your_module_name",
    "filename": "yourModule.js",
    "exposes": {
        "./Functions": "./src/Template/events/Functions/HortiViewEvents
    }
}

Each event function should be exported with a dedicated name matching the event it handles. The platform will load the Functions Component and call the appropriate function at the relevant event time, passing the module context as needed. This approach allows your event logic to access other utilities or nested functions within your module.

1
2
3
4
5
6

import { BaseProps } from "@hortiview/modulebase";

export const onPlatformLoaded = (customProps: BaseProps) => {
    //basic  prefetching
    console.log('we just called a function via module federation', customProps);
}

Note:
Events implemented via the Functions Component are preferred by the platform. If an event is defined in both a Functions Component and an Event Component, only the Functions Component implementation will be used. For consistency, it is recommended to implement all event logic either via the Functions Component or via dedicated Event Components, but not both.