SOLVED Searchable list using Cloud Backend / API Functions

Karol W

I'm building a filter feature for my website where it filters images depending on what category the user selects from a dropdown, checking checkboxes or inputting text. I created a database table and set up the right API functions to output my results. I binded my dynamic data source and added a Cloud Backend Inputs(Searchable List) and a gallery. I edit the gallery element and clicked on 'Data source Cloud Backend' checked 'enable' and selected 'Data source' from the dropdown.

alt text

I dragged a jQuery source code block and pasted my API documentation jQuery code.

<div class="appdrag-gallery" format="rectangle" columns="4" spacing="10" caption-position="full-image" caption-alignment="center" caption-background="rgba(48,76,224,0.56)" border-size="0" border-radius="0" opacity="0.92" text-color="rgba(237,237,237,1)"
    font-family="Montserrat" font-size="30" market-id="3698545" owner-id="1" style="display:block">
    <div class="appdrag-gallery-data" id="galleryData">
    </div>
    <div class="appdrag-gallery-view" id="galleryContainer"></div>
    <div class="clearfix">
    </div>
    </div>
    <script  appdrag-embed="true">
        //Wait for jquery to load before executing code
        addEventListener('JqueryLoaded', function(e) {

            // Pull the ID parameter from URL to place in API
            var url_string = window.location.href; // REFER TO IMAGE NOT PAGE?
            var url = new URL(url_string);
            var id = url.searchParams.get("id");

            // API call to fetch images from database
            var settings = {
                "url": "REPLACE_WITH_YOUR_API_URL", 
                "data": {
                    "id": id, 
                    "AD_PageNbr": "1",
                    "AD_PageSize": "500"
                },
                "method": "GET",
                "async": true,
                "crossDomain": true,
                "processData": true
            };
            $.ajax(settings).done(function(response) {

                // Check recieved Object
                var object = JSON.parse(response);
                if (object != null && object.Table != null && object.Table.length > 0 && object.Table[0].gallery != "") {
                    var images = JSON.parse(object.Table[0].gallery);
                    var pictureData = "";
                    var pictureView = "";

                    // Iterate through each image and create its own HTML block
                    $.each(images, function(idx, url) {
                        pictureData += '<div class="appdrag-gallery-data-elem" caption="" gallery-image="' + url + '" order-id="0"></div>';
                        pictureView += '<div class="col-sm-3 col-xs-12" style="padding:10px">\
                                <div class="appdrag-gallery-link" lightbox="' + url + '">\
                                    <div class="appdrag-gallery-elem" caption="" gallery-image="' + url + '" order-id="0" style="border-style:none;border-width:0;border-radius:0;opacity:.92;border-color:#ccc">\
                                        <div class="appdrag-gallery-image appdrag-gallery-image-rectangle" style="background-image:url(\'' + url + '\')">\
                                            <div class="appdrag-gallery-caption au-center appdrag-gallery-caption-full-image" style="font-family:Montserrat;font-size:30px;background-color:rgba(48,76,224,.56);color:#ededed">\
                                                <span style="display:inline-block;vertical-align:middle"></span>\
                                            </div>\
                                        </div>\
                                    </div>\
                                </div>\
                            </div>';
                    })

                    // Call the containers by their IDs and append the image blocks
                    $("#galleryData").append(pictureData);
                    $("#galleryContainer").append(pictureView);
                    resetLightbox(); //re-init lightbox for all generated images
                }
            });
        }, false);
    </script>

I followed this tutorial what I have mentioned above

Here is where I got stuck.

I know that I have to iterate through each image so it can populate the gallery once I make a selection from the searchable list(dropdown). How would I bind the searchable list, gallery and database properly? In the searchable list edit element would I click on 'Data source Cloud Backend' or would I click on 'Triggers ->Cloud Backend' What is the different between these two options?

alt text

Also would the process look the same binding checkboxes and text inputs with the database

Any screenshots, code snippets, or guidance would be appreciated.

Steve Carrasco

@karol-w

Joseph Benguira

Hey @Karol-W

"Data source Cloud Backend" is to configure which datasources are loaded on the page (don't load too many or your page will be slow)
"Triggers ->Cloud Backend" is to configure an action that will call a cloud backend function

Dynamic datasources are useful to generate pages based on url parameters, they are useless for this kind of interaction you want to do here.
So I would recommend you to remove that data source and replace it with a regular API call instead
We have more tutorials about generating dynamic content without dynamic datasources here: https://support.appdrag.com/doc/Creating-Dynamic-content-using-Factory
https://support.appdrag.com/doc/Creating-Dynamic-content-using-Visual-Factory

here you have a dropdown and you want to change the gallery content when the dropdown value is changed, so you should write some jquery code to capture the change on that SELECT dropdown

$( "SELECT[name='YourSelectNameHere']" ).change(function() {
  var newVal = $("SELECT[name='YourSelectNameHere']").val()
  //Call your function to load data from the api and display it
});

REMINDER

SOLVED Searchable list using Cloud Backend / API Functions