SharinPix Aggregate Search (Developer-Oriented)

This article, we will see how to personalize the SharinPix search when querying images from a large number of records.

The following sections demonstrate how to use the SharinPix Album to perform a personalized aggregate search to display all the images present on the Contact records related to a particular Account record. This can be done by embedding the SharinPix component inside an Iframe.

Therefore, you will need:

Apex Controller

The Apex Class controller implementation can be found in the following sections.

public String getSearchUrl() {
  loadParams = new Map<String, Object> {
    'path' => '/search?search_bar=false',
    'q' => '',
    'download' => true,
    'download_filename' => acc.Name,
    'download_filenames' => acc.Name
  };
  return clientInstance.token(loadParams);
}

Split records in groups of 20 album IDs

public List<String> slice(List<String> original, Integer startIndex, Integer endIndex) {
  if (startIndex == 0 && endIndex == original.size()) {
  	return original;
  }
  List<String> sliced = new List<String>();
  for (Integer i = startIndex; i < endIndex && i < original.size(); i++) {
  	sliced.add(original[i]);
  }
  return sliced;
}

Build query Strings and generate tokens for each groups

public List<Contact> cnt;
public Account acc;

public SharinPixAggregateSearch(ApexPages.StandardController stdCtrl) {
  Id accId = stdCtrl.getId();
  cnt = [SELECT Id FROM Contact WHERE AccountId = :accId];

  acc = [SELECT Name FROM Account WHERE Id = :accId];
  setParameters();
}

public void setParameters() {
	Map<String, Object> query = new Map<String, Object>();
	list<string> ids = new list<string>();
    for (Contact contact : cnt) {
      ids.add('"'+contact.Id+'"');
    }

    tokens = new List<String>();
    for (Integer i = 0; i < ids.size(); i += 20) {
      List<String> slicedIds = slice(ids, i, i + 20);
      if (slicedIds.size() == 0 || String.isBlank(slicedIds[0])) return '';
      String queryStr = '"' + String.join(albumIds, '" "') + '"';

      params = new Map<String, Object> {
        'path' => '/search?search_bar=false',
        'q' => queryStr,
        'download' => true,
        'download_filename' => acc.Name,
        'download_filenames' => acc.Name
      };

      tokens.add(clientInstance.token(params));
    }
}

Visualforce Page

The code snippet below shows the implementation of the Visualforce Page used to display the search results on a SharinPix Album:

<script>
  const eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
  const eventer = window[eventMethod];
  const messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
  var tokens = JSON.parse("{! JSENCODE(parameters) }");

  document.getElementById("sharinpixIframe").onload = function() {
  	this.contentWindow.postMessage({ token: "{! generateBaseToken }" }, 'https://app.sharinpix.com');
  }

  window.addEventListener('message', event => {
  	const { origin, data: { name, componentId } } = event
  
  	if (origin !== 'https://app.sharinpix.com') { return }
    if (name === 'search-ready') {
      for(i = 0; i < tokens.length; i++) {
        document.getElementById("sharinpixIframe").contentWindow.postMessage({ payload: tokens[i], name: 'search-aggregate' }, 'https://app.sharinpix.com');
      }
    }
  });
</script>

Note:

The SharinPix Aggregate Search is limited to 500 results.

If your search includes more than 500 images, it stops once the limit is reached and the extra results are not displayed.

0 Comments

Add your comment

E-Mail me when someone replies to this comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.