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:

• An Apex Class Controller that will build the query and generate the token. In the Apex controller you will need to:

  • build a token to initiate the SharinPix search
  • split in group of 20 album IDs
  • build the query string for each groups and generate the token for each
• A Visualforce Page that will embed the Iframe

Apex Controller

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

Build a token to initiate the SharinPix search

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.