Navigation

    APPDRAG Community

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Popular

    REMINDER

    Please be respectful of all AppDragers! Keep it really civil so that we can make the AppDrag community of builders as embracing, positive and inspiring as possible.

    SOLVED Searchable list using Cloud Backend / API Functions

    Cloud Backend (Cloud DB, API Builder)
    3
    3
    396
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • K
      Karol W last edited by 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

      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.

      S 1 Reply Last reply Reply Quote 0
      • S
        Steve Carrasco @Karol W last edited by

        @karol-w

        1 Reply Last reply Reply Quote 0
        • Joseph Benguira
          Joseph Benguira last edited by

          Hey @Karol-W

          1. "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

          1. 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
          });
          
          1 Reply Last reply Reply Quote 0
          • First post
            Last post