Uhuu SDK

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

<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:

$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:

$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. Common types include textarea, select, switch, selectimage, image, markdown, assistant, table, spreadsheet, map, and schemaform. dataloader remains supported as a legacy alias for table.

$uhuu.editDialog({path: 'name'});

Learn More

editFrame(declaration)

The editFrame method opens an image slot that more than one dialog writes, such as a map, a satellite view and a picked photo with a crop or an annotation on top, as one image frame. The editor shows one chooser for the slot and saves every dialog into the same value, so the image saved last is the one that shows and each source reopens with its own state.

Parameters

• path: The data path of the image slot.
• sources: The dialogs that create the image, each with a type (map, satellite, cadastral, search-image or image) and that dialog's options. The editor names known dialogs itself, in the user's language.
• layers (optional): Overlays drawn over the image, such as annotation.
• transforms (optional): Edits applied to the shown image (image-editor, ai-marketing-studio). By default every transform the editor offers; false for none.
• ratio (optional): The slot's proportions (width / height): the chooser's preview, the crop, and the export of generated sources.
• legacyPrecedence, annotationPath (optional): How values saved before the slot was a frame are read.

$uhuu.editFrame({
  path: 'location.image',
  sources: [
    { type: 'map', config: { lat: 47.3769, lng: 8.5417, design: true } },
    { type: 'image', imageGalleryPath: 'gallery' }
  ],
  ratio: 4 / 3
});

Pages read the image to show from value.contentUrl || value.url at path (uhuu-components' imageUrl() reads the same) and draw value.annotationSvg over it when set. An ImageBlock opens the same frame with dialog={{ path, frame: declaration }}. Editors without frame support show the sources as a regular types chooser.

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.

$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

$uhuu.batchData()