Referencing Files

Referencing Form Template Files

To utilize static files such as images, logos, or PDFs within your Form Template, located in the Form Template folder, you must reference them using a special syntax: {{HFFormPath}}

Example of referencing a Form Template file in a Form control

<div
    id="video_webview_ctrl"
    data-hf-control="Webview"
    data-hf-options="{
        label: 'Video file',
        url: '{{HFFormPath}}/hybridforms-video.mp4',
        height: 270,
        width: 460,
        type: 'videofile'
    }"
></div>

Example of referencing images in a HybridForms block

<div class="grid column2">
    <div class="r1 c1">
        <img src="{{HFFormPath}}/image-01.svg" />
    </div>
    <div class="r1 c2">
        <img src="{{HFFormPath}}/image-02.svg" />
    </div>
</div>

Referencing Asset Files

To use static files from the assets section, you first need to upload them to the assets section in the Admin UI. Once uploaded, you can reference them using the special syntax: {{HFAssetPath}}.

Create new asset

Then upload one or more assets to the created asset folder. Asset detail view

After that you can reference the asset in your form template like this:

Example of referencing an asset file in a Form template

<div
    <div class="grid column2">
    <div class="r1 c1">
        <img src="{{HFAssetPath}}/kangaru.jpg" />
    </div>
    <!-- Container for unsynched assets, see example below -->
    <div id="unsynched-asset"><div>
</div>

If the synchronization option is disabled in the Admin UI, the assets will not be synchronized with the app. In this case, the assets are not automatically available in the app. To make them available, you must manually download them using Custom Code. Here are the available methods for downloading and managing assets through our HybridForms FormAPI:

Asset related methods in the FormAPI

    public static getAssets(): Promise<IAsset[]> {}

    public static getAssetFromName(assetname: string): Promise<IAsset> {}

    public static getAssetFromPath(assetPath: string): Promise<[IAsset, IAssetFile]> {}

    public static getFileAsBlob(assetname: string, filename: string): Promise<Blob> {}

    public static getFileAsURL(assetname: string, filename: string): Promise<string> {}

    public static resetAssetRepository(): Promise<void> {}

Examaple of downloading an unsynched asset file

    export function fetchAssetFile(init) {        

        return HybridForms.API.Assets.getFileAsBlob('form-test-async', 'kangaru.jpg')
            .then((blob) => {
                const imageUrl = URL.createObjectURL(blob);
                let container: HTMLElement;
                if (HybridForms.API.System.IsView()) {
                    container = $('[data-hf-id="unsynched-asset"]')[0];
                } else {
                    container = document.getElementById('unsynched-asset');
                }
                if (!container) {
                    return;
                }

                const img = document.createElement('img');
                img.src = imageUrl;
                img.alt = 'Kangaru Image';
                img.style.width = '300px';
                img.id = 'kangaru';

                container.appendChild(img);

                img.onload = () => {
                    URL.revokeObjectURL(imageUrl);
                };
            })
            .catch((error) => {
                console.error('ERROR:', error);
            });
    }