SuiteCRM is a full featured open source client management system developed by SalesAgility. It is primarily developed in PHP with JavaScript. It is fully responsive and mobile friendly.
We recently had the pleasure to implement a SuiteCRM pilot project for a large public organization in British Columbia. It was a challenging project to implement SuiteCRM in an OpenShift environment. We will be publishing multiple posts about this experience, sharing what we learning along the way about running SuiteCRM in a highly available containerized environment.
One of the deliverables for the project was a working API connection for SuiteCRM. SuiteCRM actually has multiple APIs available. SuiteCRM is built with Symfony (a PHP framework for web development) and with GraphQL, and has multip[le APIs available.
We ultimately developed an OpenAuth 2.0 connection and solution for SuiteCRM data retrieval using GraphQL. However on the path to that solution we developed JavaScript and jQuery connection to GraphQL. It requires that the user already be logged into SuiteCRM and must be hosted but the SuiteCRM web server. External modifications and connections should use the above mentioned OpenAuth 2.0 path.
We have posted this solution on the SuiteCRM community forum here.
The example posted here is a basic html page that will retrieve a list of users, provided your account has the permissions required.
Follow these steps to recreate the solution:
1) Create a directory called apidemo at /suitecrm/public/legacy/apidemo
2) Within that directory create a file called apidemo.html.
3) Enter the following text:
<html>
<head>
<title>
API Demo Page for GraphQL with SuiteCRM - Tunnell Consulting
</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
function getCookie(cname) {
let name = cname + "=";
let ca = document.cookie.split(';');
for(let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function getGraphQLData(){
var token = getCookie('XSRF-TOKEN');
console.log(token);
var totalmsg = '';
var operationName = 'getRecordList';
var query = `
query getRecordList($module: String!, $limit: Int, $offset: Int, $criteria: Iterable, $sort: Iterable) {
getRecordList(module:$module, limit:$limit, offset: $offset, criteria: $criteria, sort: $sort) {
id
_id
meta
records
__typename
}
}
`;
var variables = {
'criteria': {
'name': "",
'orderBy': "",
'searchModule': "users",
'sortOrder': "",
'filters': {
'terminal': {
'field': "terminal",
'fieldType': "bool",
'operator': "=",
'values': [1]
}
}
},
'module': 'users',
'limit': 20,
'offset': 0,
'sort': {
'orderBy': "",
'sortOrder': "DESC"
}
};
var r = $.ajax({
async: true,
url: '/api/graphql',
method: 'POST',
ContentType: 'application/json',
headers: {
'Accept': 'application/json, text/plain, */*',
'Content-Type': 'application/json',
'X-XSRF-TOKEN': token
},
data: JSON.stringify({
oerationName: operationName, //'getRecordList',
query: query,
variables: variables
})
}).done(function() {
console.log(r.responseText)
var response = $.parseJSON(r.responseText);
let records = response.data.getRecordList.records;
let dropdown = $('#status');
dropdown.empty();
dropdown.prop('selectedIndex', 0);
totalmsg = totalmsg + '<table><tr><td>Your API Token</td><td colspan=2>' + token +'</td></tr><tr><td colspan=3> </td></tr>';
totalmsg = totalmsg + '<tr colspan=3><td>User List From GraphQL API</td></tr>';
totalmsg = totalmsg + '<tr><td>Key</td><td>ID</td><td>Name</td></tr>';
$.each(records, function(key, entry) {
totalmsg = totalmsg + '<tr><td>' + key + '</td><td>' + entry.attributes.id + '</td><td>' + entry.attributes.name + '</td></tr>';
})
totalmsg = totalmsg + '</table>';
document.getElementById('ApiDisplay02').innerHTML = totalmsg;
});
}
</script>
<link rel="stylesheet" href="https://dimensionsofwellness.ai/assets/css/style.css?version=3">
<!-- Responsive CSS -->
<link rel="stylesheet" href="https://dimensionsofwellness.ai/assets/css/responsive.css">
<link rel="stylesheet" href="https://dimensionsofwellness.ai/assets/css/fontawesome.min.css">
<body>
<h2>API Demo Page</h2>
<br />
<br />
Developed by Judson Tunnell of <a href="https://crowdbitz.ai">Crowdbitz</a>
<div class="newbtn" onclick="getGraphQLData()" style="width: 110px; height: 45px; line-height: 45px; border-radius: 5px;" id="showdata">Get User Data</div>
<br /><br/>
<div id="ApiDisplay02">Your API return data should appear here...</div>
<script src="https://dimensionsofwellness.ai/assets/js/bootstrap.min.js"></script>
<script src="https://dimensionsofwellness.ai/assets/js/main.js"></script>
</body>
</html>
4) Save the file and then navigate to https://yoursuitecrmserver/legacy/apidemo/apidemo.html
5) Click the button to retrieve data.
You can use the GraphQL definitions for SuiteCRM to develop your own queries.
If you or your organization needs assistance in installing, configuring, modifying or developing SuiteCRM solutions, let us know.