Using your personalized Search

Tip:

The SharinPix Image Search query is a simple Elasticsearch query. You can find more information about Elasticsearch query by clicking here.

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

Therefore, you will need:

  1. an Apex Class Controller that will build the query and generate the token.
  2. a Visualforce Page that will embed the Canvas App or the Iframe. 

Apex Class Controller

  • The implementation for the Apex Class Controller can be found below.
public class SharinPixDemoAccountContactsSearchCtrl {
    private Map<String, Object> params;
    private sharinpix.Client clientInstance = sharinpix.Client.getInstance();

    public SharinPixDemoAccountContactsSearchCtrl(ApexPages.StandardController stdCtrl) {
        Id accountId = stdCtrl.getId();
        List<Contact> contacts = [SELECT Id FROM Contact WHERE AccountId = :accountId];
        String queryStr = '';
        for (Contact contact : contacts) {
            queryStr += '"' + contact.Id + '" ';
        }

        params = new Map<String, Object> {
            'path' => '/search?search_bar=false',
            'q' => queryStr,
            'download' => true,
            'download_filename' => 'my_zip_filename',
            'download_filenames' => 'inside_the_zip-00001'
        };
    }

    public String getParameters() {
        return JSON.serialize(params);
    }

    public String getSearchUrl() {
        return clientInstance.token(params);
    }
}
Click to copy
  • A query is constructed by concatenating several Contact record Ids, separated by a single white-space. This query is meant to search for all Contact Objects that are related to the corresponding Account object.
  • The code snippet below shows how the query is represented in code.
String queryStr = '';
for (Contact contact : contacts) {
	queryStr += '"' + contact.Id + '" ';
}
Click to copy

Search Refinement

There are multiple ways to refine the search by modifying the parameter q. This permits you to:

  • Search for images in one or more specific albums
  • Search for images having specific tags

The following examples demonstrate how to refine the search:

  • Search for images found in specific albums
    • Suppose we have albums with IDs albumID, albumID 1 and albumID 2 and we want to search for images found only in albumID and albumID 1. To do so, we have to modify the parameter as shown below:
Map<String, Object> query = new Map<String, Object>();
query.put('q', queryStr);

params = new Map<String, Object> {
    'path' => '/search?search_bar=false',
    'q' => '"albumID" "albumID 1"',
    'download' => true,
    'download_filename' => 'my_zip_filename',
    'download_filenames' => 'inside_the_zip-00001'
};
Click to copy

Note:

 Double quotes are used for text with spaces. They are optional if no spaces are contained.

For example:

'q' => '"albumID" "albumID 1"', could have been written as 'q' => 'albumID "albumID 1"',

  • Search for images having specific tags
    • Suppose we want to search only for images with tags names Tag1, we have to modify the parameter in the code as shown below:
params = new Map<String, Object> {
    'path' => '/search?search_bar=false',
    'q' => 'tags:(+('+queryStr+') +("Tag1"))',
    'download' => true,
    'download_filename' => 'my_zip_filename',
    'download_filenames' => 'inside_the_zip-00001'
};
Click to copy
  • Suppose we want to search only for images with tags names Tag1 and Tag 2, we have to modify the parameter in the code as shown below:
params = new Map<String, Object> {
    'path' => '/search?search_bar=false',
    'q' => 'tags:(+('+queryStr+') +("Tag1" AND "Tag 2"))',
    'download' => true,
    'download_filename' => 'my_zip_filename',
    'download_filenames' => 'inside_the_zip-00001'
};
Click to copy
  • You can also search for images with either Tag1 or Tag 2 using the code snippet below:
params = new Map<String, Object> {
    'path' => '/search?search_bar=false',
    'q' => 'tags:(+('+queryStr+') +("Tag1" OR "Tag 2"))',
    'download' => true,
    'download_filename' => 'my_zip_filename',
    'download_filenames' => 'inside_the_zip-00001'
};
Click to copy
  • Search for tagged images found in specific albums
    • The example below shows how you can refine the search in order to search for images having tag Tag1 in albums with IDs albumID and albumID 1 only.
Map<String, Object> query = new Map<String, Object>();
query.put('q', queryStr);

params = new Map<String, Object> {
    'path' => '/search?search_bar=false',
    'q' => 'tags:(+("albumID" "albumID 1") +("Tag1"))',
    'download' => true,
    'download_filename' => 'my_zip_filename',
    'download_filenames' => 'inside_the_zip-00001'
};
Click to copy

Enable download and zipping

It is possible to download the search image results into a zipped folder through the use of the following parameters.

  • download - (true or false ) enable or disable the download feature.
  • download_filename - specify the name of the downloaded image file (only 1 image)
  • download_filenames - specify the name format of the downloaded image files (multiple images)

Tip:

For more information about how to personalize the download filenames, refer to the following article:

Multiple Image download (ZIP) - How to personalize the download filenames

params = new Map<String, Object> {
    'path' => '/search?search_bar=false'
    'q' => queryStr,
    'download' => true,
    'download_filename' => 'my_zip_filename',
    'download_filenames' => 'inside_the_zip-00001'
};
Click to copy

Visualforce Page

  • The code snippet below shows the implementation of the Visualforce Page used to display the search results on a SharinPix Album.
<apex:page standardController="Account" extensions="SharinPixDemoAccountContactsSearchCtrl"
           showHeader="false" sidebar="false">
    <!-- Use either -->
    <apex:canvasApp developerName="Albums" width="100%" height="500px" parameters="{! parameters }"/>
    
    <!-- or -->
    <iframe id="iframeId" width="100%" height="500px" style="border: 0;" src="https://app.sharinpix.com/post_message"></iframe>
    <script>
        document.getElementById('iframeId').onload = function() {
            this.contentWindow.postMessage({ token: "{! searchUrl }" }, 'https://app.sharinpix.com');
        }
    </script>
</apex:page>
Click to copy

In the code snippet above, SharinPix makes a reference to the postMessage method when using an Iframe. 

For more information about the postMessage method and how SharinPix uses it, you can refer to the following article:

Using a SharinPix component in an Iframe (Developer-oriented)

0 Comments

Add your comment

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