Load Listing Images in FormBuilder

dev-filter-set-session-init-select2.php

<?php
defined('MVC_FRAMEWORK') or die;

function listing_form_select2($viewVars, $params)
{
	$asset_manager = S2Object::make('asset_manager');
	
    $asset_manager->add('jquery/select2.min.js','core');

    $listingId = $viewVars['listing']['Listing']['listing_id'];

    cmsFramework::setSessionVar('listing_id',$listingId,'jreviews-edit');

	return $viewVars;
}
 
Clickfwd\Hook\Filter::add('before_theme_render_viewvars_listings_edit', 'listing_form_select2', 10);

function initFormBuilderSelect2($viewVars, $params)
{   
    $asset_manager = S2Object::make('asset_manager');

    $script = "
        jreviews.formBuilderSelect2 = function() {
			jQuery('.jr-page').on('jrFormBuilderValidated',() => {
				function imgSelectFormat(state) {
					if ( state.id ) {
						const imgSrc = state.id.split('|')[1];
					    let output = ''
					    	+'<div class=\"fwd-flex fwd-flex-nowrap fwd-w-12 fwd-h-12 fwd-w-full\">'
					    	+'<img class=\"fwd-flex-shrink-0 fwd-object-cover fwd-rounded fwd-overflow-hidden \" src=\"'+imgSrc+'\" />'
					    	+'<div class=\"fwd-ml-2 fwd-flex-shrink-0 fwd-truncate fwd-whitespace-no-wrap\">'+state.text+'</div>'
					    	+'</div>'
					    	;
					    return jQuery(output);
				    } else {
				    	return state.text;
				    }
				}

				let select = jQuery(\".jrSelect[name*='\[photo\]']:not(.jr-ready)\").prepend(jQuery('<option>')).select2({
				    templateResult: imgSelectFormat,
				}).addClass('jr-ready');

				// Trigger formbuilder event for the select list to update the JSON data for the input
				select.on('select2:select', (event) => {
					select.val(event.params.data.id)[0].dispatchEvent(new Event('change'));;
				});
			});           
        };
        if ( typeof head == 'function' ) {
            head.ready(function() {
                jreviews.addOnload('formbuilder-select2',jreviews.formBuilderSelect2);
            });
        } else {
            jreviews.addOnload('formbuilder-select2',jreviews.formBuilderSelect2);
        }
    ";

    $asset_manager->addScript($script,'jreviews-formbuilder-select2','addon'); 

    return $viewVars;
}  

Clickfwd\Hook\Filter::add('before_theme_render_viewvars_listings_edit', 'initFormBuilderSelect2', 10); 

formbuilder-schmema.json

{
    "title": "Items",
    "type": "array",
    "format": "table",
    "items": {
        "title": "Item",
        "type": "object",
        "properties": {
            "photo": {
                "title": "Photo",
                "type": "string",
                "$ref": "index.php?option=com_jreviews&format=raw&url=developer\/listingImages",
                "options": {
                    "input_width": "13em"
                }
            }
        }
    }
}

macroable-controller.php

<?php
defined('MVC_FRAMEWORK') or die;

DeveloperController::macro('listingImages', function() {

    $listingId = cmsFramework::getSessionVar('listing_id','jreviews-edit');

    if ( !$listingId ) {
        return false;
    }

    S2App::import('Model',['media','everywhere_com_content'],'jreviews');
    
    $listingModel = ClassRegistry::getClass('EverywhereComContentModel');

    $mediaModel = ClassRegistry::getClass('MediaModel');

    $listing = $listingModel->findRow(['conditions'=>['Listing.id = '.$listingId]]);

    $media = $mediaModel->findAll([
        'conditions'=>[
            'Media.listing_id = '.$listingId,
            'Media.review_id = 0',
            'Media.extension = "com_content"',
            'Media.media_type = "photo"',
            'Media.published = 1',
            'Media.approved = 1',
        ],
        'order' => ['Media.ordering ASC']
    ]);

    foreach ( $media as $m ) {
        $source[] = [
            'value' => $m['Media']['media_id'],
            'title' => $m['Media']['title'] ?: $m['Media']['filename'],
            'img' => $m['Media']['media_url'],
        ];
    }

    $response = [
        'type' => 'string',
        'enumSource' => [
            [
                'source' => $source,
                'value' => '{{item.value}}|{{item.img}}',
                'title' => '{{item.title}}',
            ]
        ]
    ];

    return $this->response->json()->array($response);
});

This is an example of how to use an ajax request within the FormBuilder JSON Schema in a custom field to load custom data. In this case, the existing images in the listing, previously saved, are shown in a select list within FormBuilder.

In this example, the data stored for the images when the listing is saved are the media IDs.

The example doesn't have an output theme which needs to be written separately to process the field output.