Searchable CRM Customer List in the Front-End

Report · Jul 13, 2016

Is it possible to create something which is accessible to front-end users, which allows them to type a name into a search box, hit submit and be presented with a list of CRM customers from the back-end matching their search criteria?

So far I've managed to get a list of CRM customers in the back-end using the following:

var request =

$.ajax({

url: "/webresources/api/v3/sites/current/customers",

type: "GET",

connection: "keep-alive",

contentType: "application/json",

mimeType: "application/json ",

headers: {

"Authorization": $.cookie('access_token')

}

});

// Request successful, response is in "msg" variable

request.done(function (msg) {

console.log("Members successfully retrieved - displaying on page");

console.log(msg);

for (var i = 0; i < msg.items.length; i++) {

$(".member-list").append("<div class='member'><p>" + msg.items.firstName + " " + msg.items.lastName + " " + msg.items.username + "</p> </div>");

}

}); // Request failed, you can add your own error handling

request.fail(function (jqXHR) {

console.log("Request failed. Error code: " + jqXHR.status);

});

Can you modify this in such a way that the API call returns all customers with a certain name (after being filled in and submitted by the user) - and assuming this is possible, move that to a front-end page so it is available to website visitors?

I've also managed to get a list of customers in the front-end but as far as I'm aware it's not possible to narrow this down to a certain search term... or am I wrong?

{module_data resource="customers" version="v3" fields="titleTypeId,firstName,lastName,webAddress" skip="0" limit="10" order="id" collection="myData"}

{{myData|json}}

{% for customer in myData.items -%} {{customer.firstName}} {{customer.lastName}} {{customer.webAddress.value}} {% endfor -%}

I know you can add a where condition to the module_data tag - but how can you make this dynamic so this can be amended by the user filling in a search box?

Report · Jul 13, 2016

You can not use the API calls for things like web apps on the front end using the open platform (BC APPS) API scripts etc. If you test and find this works - You are logged into the admin and thus have the token. Logout and run your front end element - You will find this no longer works.

It is not advisable to be able to allow people to access customer records, you would have to ensure that when people interact on the site via things like forms and are populated in the CRM they give permission for people publicly. If you do not your in legal troubles there.

In technical terms when you use module_data on a page and have a WHERE in place. You can have that url with paramaters that apply to the WHERE to effect the results. If enabled all pages support json=true.

You can ajax request that JSON data and pass parameters to that URL to return different data results.

Report · Jul 15, 2016

Can you elaborate on adding parameters to the url to affect the results?

I've enabled json, and can successfully retrieve an object using the following which contains the page rendered as json, and the myData object with all of my customer records as you would expect:

jQuery.get('/members/member-list-crm?json=true', function(msg){

console.log(msg)

})

</script>

Just not sure how to modify that "/members" url with an additional "where" parameter to narrow down the results within myData that get returned instead of getting the whole lot.

(This is just testing right now so just hard coding the url, but obviously once I get it working I would be dynamically inserting that value from a field on the page).

Report · Jul 29, 2016

Still not been able to make any headway on this, appreciate any pointers you might be able to give.

Report · Jul 31, 2016

Hi Luke,

If you went: "/members/member-list-crm?searchString=123&json=true"

You could get the variable using {{ globals.get.searchString }} and use this inside a {module_data ... where=""} where clause.

Do you use the BC API Discovery app? Do a search and download the files from Github, here you get resources and a mechanism for generating your custom {module_data} requests.

You'd want to do something like "where firstname contains searchString OR lastname contains searchString". This will make a search work well.

Actually, here I've done a code for you ... you change out the return fields you want to return, but here is a very good start:

On a page called: "/members/member-list-crm?searchString=Luke"

{% assign searchString = globals.get.searchString -%}
{module_data resource="customers" version="v3" fields="id,firstName,lastName,company" skip="0" limit="10" where="\{'$or':\[\{'firstName':\{'$contains':'{{searchString}}'\}\},\{'lastName':\{'$contains':'{{searchString}}'\}\},\{'company':\{'$contains':'{{searchString}}'\}\}\]\}" order="id" collection="crmData"}
<pre>{{crmData|json}}</pre>

Good luck.

Report · Aug 02, 2016

Thanks for that. I have now created a form on the page, and whatever search term I enter gets added to the global variable on submit, which is picked up by the liquid code you kindly provided, the correct CRM record(s) are then displayed as I wanted.

This works if I enter either a first name or a last name - but is there any way to make this work if the user types in first name AND last name together?

I know there's string filters you can use to split based on spaces, could you then assign each half of the search term to different variables and plug those into a different module_data request - one that requires both first name AND last name to match?

Alternatively, I found someone asking something similar for SQL, where the following was suggested:

SELECT *

FROM myTable

WHERE FirstName LIKE @Name OR LastName LIKE @Name OR FirstName + ‘ ‘ + LastName LIKE @Name

But in the BC API Discovery app I couldn't see a way to write liquid to say:

if first name and last name combined match/contain this search term,

then show these results

I'm sure this must be possible somehow, just need to know the best logical way to do it.

Report · Aug 02, 2016

I've managed to get this working with the following code. Maybe someone can advise just how bad this is and if there's a better way of doing it lol

I thought you could also check to see if there's 3 elements and if so assign the middle one to "middle name" as well - or is that just adding unnecessary complication?

{% assign searchTerm = globals.get.searchTerm | split: ' ' %}

{% assign numberOfSearchElements = searchTerm | size %}

{% if numberOfSearchElements == 1 %}

<p>one element, performing module_data request with string straight from global variable...</p>

{module_data resource="customers" version="v3" fields="id,firstName,lastName,customerType" skip="0" limit="10" where="\{'$or':\[\{'firstName':\{'$contains':'{{searchTerm}}'\}\},\{'lastName':\{'$contains':'{{searchTerm}}'\}\},\{'company':\{'$contains':'{{searchTerm}}'\}\}\]\}" order="id" collection="crmData"}

{% elsif numberOfSearchElements == 2 %}

<p>two elements, splitting elements into first name and last name before performing module_data request...</p>

{% assign firstName = searchTerm[0] %}

{% assign lastName = searchTerm[1] %}

{module_data resource="customers" version="v3" fields="id,firstName,lastName,customerType" skip="0" limit="10" where="\{'$and':\[\{'firstName':\{'$contains':'{{firstName}}'\}\},\{'lastName':\{'$contains':'{{lastName}}'\}\}\]\}" order="id" collection="crmData"}

{% endif %}

<h2>Here's your list of members from the directory...</h2><br>

{% for customer in crmData.items -%}

<br>

{% endfor -%}

Report · Aug 02, 2016

Good work.

I would of course have been easier had the Customer resource had a field called "Fullname", then you would have just needed to have placed another clause into your WHERE statement. Alas there is no "Fullname".

Adobe Community

Searchable CRM Customer List in the Front-End