Template Setup

The templateSetup accepts a config object with following closures and parameters, each of which is optional.

preprocess

The payload preprocess configuration in templateSetup allows developers to modify the incoming payload data before it is rendered in the template. By defining a preprocess function, you can perform various data transformations, enrichments, or apply custom logic to ensure the data fits specific requirements or formats within the template.

For example, in the configuration below: preprocess function iterates through image URLs in the payload’s listing.images array and modifies URLs ending with a specific width, updating them to a larger size.

$uhuu.templateSetup({
    preprocess: (payload) => {
        // Implement various preprocessing tasks,
        // such as data transformation, enrichment, custom logic.

        // Example: modify image URLs                 
        const images = payload?.listing?.images ?? [];                
        images.forEach((item) => {
            if (item.url.endsWith('width=200'))
                item.url = item.url.replace("width=200", "width=600");
        });
        return payload;
    }
});

After preprocessing, the transformed payload is returned and used in the template, ensuring that any required adjustments are applied automatically before rendering.

uhuu_restore

The uhuu_restore configuration in templateSetup allows developers to specify default values for certain data paths in the payload, preserving user edits across sessions or resets. Each key in the uhuu_restore object represents a specific data path in the payload where user-edited values can be restored if changes are made or if the document is reset.

In the example below:

$uhuu.templateSetup({
    uhuu_restore: {       
       title: { path: 'title', value: 'Default title' }
    }
});

The uhuu_restore configuration sets the title path to have a default value of "Default title." When the document loads, Uhuu will check this path and restore the last saved edit or apply the default value if no edit exists. This ensures that predefined or user-modified data is available, maintaining continuity in document content.

templateSetup for restoring user edits with Learn more.

filters

The filters configuration in templateSetup allows developers to define custom functions for handling logic, formatting, or data selection within templates. Each function in filters can be applied as a filter on payload data paths, enabling flexible and reusable data manipulation directly in the template.

In the example below:

$uhuu.templateSetup({
    uhuu_restore: {       
       cover_image: { filter: 'findImage', args: { index: 0 } }
    },
    filters: {
        // payload: Recent payload data
        // args: Arguments object used for the filter.
        findImage: (payload, args) => {
            const images = payload?.listing?.images ?? [];                                
            return images.length > args.index ? images[args.index] : null;
        }   
    }
});

In this setup:

• The findImage filter accesses the images array within the listing data in the payload.
• Using the args object, this filter selects the image at a specific index, in this case, the first image (index: 0).
• The uhuu_restore configuration then applies this filter to the cover_image path, ensuring the cover_image data path retrieves the specified image when the document is loaded.

Filters make it possible to define logic once and reuse it across multiple data paths, streamlining template data handling.

options

The options configuration in templateSetup allows developers to specify settings that adjust the template’s behavior, often by defining paths or defaults that the template will use.

In this example:

$uhuu.templateSetup({
    options: {
        imageGalleryPath: 'images'
    }
});

The imageGalleryPath option tells the template where to locate image data within the payload. By setting imageGalleryPath to 'images', the template knows to look in the images path of the payload for any image-related content. This setting simplifies image handling within the template, allowing image-based components or functions to access the specified path automatically.

Options like these streamline the template configuration by providing central points for commonly used paths or settings, reducing repetitive code and making the template setup more efficient.