Uhuu Docs

Appearance

Uhuu SDK ​

To enable front-end communication with uhuu editor, first load Uhuu SDK in template project by including the uhuu-sdk.js file.

html
<script src="https://platform.uhuu.io/sdk/latest/uhuu-sdk.js"></script>

The Uhuu SDK defines a global $uhuu object that facilitates communication between the template and the Uhuu editor.

Methods ​

$uhuu object in your template provides following methods and event hooks.

payload() ​

A template payload refers to a predefined data structure (JSON) for sending data between template and uhuu. Access recent payload as following:

js
$uhuu.payload()

listen(event, callback) ​

The listen method allows templates to respond to events triggered by the Uhuu SDK, such as the payload event, which occurs whenever the uhuu editor updates the payload.

Parameters

  • event: The event name to listen for (e.g., "payload").
  • callback: A function to execute when the specified event is triggered. The callback receives the updated data, allowing you to work directly with the latest payload.

Example
Listen for changes to the payload event and uses the updated data to refresh or modify template content dynamically:

js
$uhuu.listen('payload', (data) => {
    // Executes each time the payload is updated in the Uhuu editor.
    console.log("Updated payload received:", data);
    // Implement logic to update template content based on new data.
});

editDialog(options) ​

The editDialog method opens a dialog in the Uhuu editor, allowing users to modify specific data within the template's payload.

Changes made in the dialog are saved to the payload and trigger a payload event, enabling real-time updates in the template based on user inputs.

Parameters

The editDialog method accepts a configuration object with the following options:

  • path: The data path within the payload to be edited.
  • value (optional): Initial content for the specified path, used when the template is first initialized.
  • subPath (optional): A sub-path relative to path, for more specific targeting within the data structure.
  • type (default: "textarea"): Specifies the type of content editor in the dialog.
js
$uhuu.editDialog({path: 'name'});

Learn More

templateSetup(config) ​

The templateSetup method allows developers to configure advanced templates with custom data handling and interaction settings. While optional, it is useful for templates requiring more control over data processing, restoration, and display.

Key configurations include:

  • preprocess: Modifies incoming payload data, enabling transformations.
  • uhuu_restore: Defines paths and default values for restoring user edits.
  • filters: functions to format data paths, simplifying data handling.
  • options: Sets paths or defaults, to manage key template elements.

Learn More

emitPayload(payload) ​

The emitPayload method allows developers to manually send updates to the Uhuu editor when the payload has been modified within the template.The updated payload is transmitted to the Uhuu editor, ensuring any changes are synchronized and reflected immediately.

javascript
$uhuu.emitPayload(payload);

This method is especially useful when making direct modifications to the payload within the template, as it ensures the Uhuu editor is informed of the latest data, keeping both the editor and template content aligned.

batchData() ​

The method allows developers to access complete batch data in JSON format. Learn More

js
$uhuu.batchData()