Alloy UI Autocomplete: Get data from SugarCRM

1. Introduzione

Nel precedente articolo Alloy UI AutoComplete Ajax Example abbiamo visto come le specifiche Java Portlet Specification 2.0 (JSR 286) con l’introduzione della ResourceURL vengono incontro all’esigenza di dover accedere in modo semplice a risorse di “qualunque tipo”, infatti, è stata sfruttata questa nuova opportunità per accedere a risorse locali Liferay poi mostrate sulla vista tramite il componente Alloy UI Autocomplete.

L’esempio trattato nel precedente articolo è stato in seguito esteso per soddisfare un caso d’integrazione tra Liferay e SugarCRM, quest’estensione (disponibile sul mio repository GitHub Alloy UI Autocomplete Ajax Example) sarà appunto oggetto di questo articolo. Non scenderemo troppo in dettagli tecnici perché l’obiettivo preposto è quello di far apprendere come con poco sforzo sia semplice e veloce realizzare un caso d’integrazione sfruttando la tecnologia dei servizi web.

2. Caso d’integrazione

Il caso d’integrazione proposto è abbastanza semplice e credo anche vicino alla realtà. E’ possibile ipotizzare che all’interno di un modulo web sia presente una o più combo da cui selezionare degli item e che questi item provengano da risorse remote, come per esempio da un sistema di CRM, ERP, etc… Bene, a mio avviso il mockup della portlet mostrata in Figura 1 dovrebbe rendere l’idea del caso d’integrazione proposto.

CRM Liferay Portlet Example

Figura 1. CRM Liferay Portlet Example

Utilizzeremo Alloy UI Autocomplete per implementare la combo (Account name) visibile in Figura 1 e i cui dati (la lista degli account) saranno richiesti al sistema SugarCRM. Non sarebbe per niente male dare la possibilità all’utente di accedere al dettaglio dell’account appena selezionato, ma in che modo farlo? Direi che la via veloce e semplice sia l’apertura tramite link, di una pop up che mostri il dettaglio dell’account direttamente all’interno di SugarCRM (vedi Figura 2).

CRM Liferay Portlet con link al dettaglio Account

Figura 2. CRM Liferay Portlet con link al dettaglio Account

3. Requisiti per l’integrazione

Affichè sia possibile raggiungere l’obiettivo preposto, occorre soddisfare una serie di requisiti minimi che sono:

  • Indirizzo (web) del sistema SugarCRM da cui si vogliono estrarre i dati;
  • Il client, quindi Liferay deve essere abilitato per accedere ai servizi REST di SugarCRM (nel caso ci siano firewall in mezzo alle due applicazioni o altre regole di restrizione);
  • Almeno un utente di Liferay deve essere un utente di SugarCRM;
  • Liferay deve essere configurato in modo tale che la password dell’utente sia disponibile in chiaro.

Gli ultimi due punti sono giustificati dal fatto che la richiesta della lista degli account deve essere distinta per utente, ogni utente, deve vedere i soli account per i quali ha i permessi sul sistema di SugarCRM, questo si traduce con il fatto che la connessione ai servizi è instaurata utilizzando le credenziali dell’utente che ha eseguito l’accesso a Liferay, è importante quindi, che le password su entrambi i sistemi siano allineate (ipotizziamo un caso senza SSO).

4. Configurazione

La configurazione è suddivisa in due parti:

  • Portlet: sul file di properties della portlet andrà specificato l’indirizzo dell’istanza di SugarCRM a cui connettersi;
  • Portale: sul file di configurazione del portale Liferay dovrà essere consentito la memorizzazione in sessione della password in chiaro dell’utente. 
[sourcecode language="java"] sugarcrm.URL=http://localhost:8888/sugarcrm_dev_WebServices
sugarcrm.ViewAccountRecord=${sugarcrm.URL}/index.php?module=Accounts&action=DetailView&record={recordId}&MSID={sessionId}
sugarcrm.RestURL=${sugarcrm.URL}/service/v4/rest.php?method={method}&input_type={input_type}&response_type={response_type}&rest_data={rest_data}
[/sourcecode]

Source 1. Configurazione connessione servizi SugarCRM (file di properties portlet.properties)

In breve, le righe di configurazione indicate al Source 1 sono:

  1. URL dell’istanza SugarCRM;
  2. URL del link che visualizza il dettaglio dell’account
    1. Il placeholder recordId sarà sostituito dall’id dell’account di cui visualizzare il dettaglio
    2. Il placeholder sessionId sarà sostituito dall’identificativo di sessione dell’utente
  3. URL dei servizi REST di SugarCRM

Il Source 2 mostra invece le righe che bisogna aggiungere alla configurazione del portale tramite il file di properties portal-ext.properties.

[sourcecode language="java"] ##

Session

##

#

Explicitly exclude attributes that are shared from the portal to portlets.

#
session.shared.attributes.excludes=

Set this to true to store the user’s password in the session.

#
session.store.password=true
[/sourcecode]

Source 2. Configurazione della password in chiaro in sessione. 

5. Interrogazione dei servizi di SugarCRM

A differenza del primo articolo Alloy UI AutoComplete Ajax Example dove i dati della combo provengono da un servizio locale di Liferay, in questo caso, i dati saranno richiesti a SugarCRM tramite l’interrogazione al Web Services (di tipo REST). Il flusso delle operazioni da implementare sul metodo serveResource(…), dovrebbe essere il seguente:

  • Login sul sistema SugarCRM;
  • Richiesta della lista degli account sulla base del nome digitato all’interno della combo;
  • Restituzione dei dati in formato JSON alla combo che li visualizzerà.

Nel particolare, le due operazioni (ad alto livello) del servizio sono:

  • String login(String username, String password): la chiamata a questa operation restituisce la sessionId associata all’utente. Il valore della sessionId è utilizzata come parametro d’input per il resto delle operation;
  • List<Account> getAccountsByeName(String sessionId, String keyword): la chiamata a questa operation restituisce una list di Account sulla base della chiave di ricerca passata in input, la chiave di ricerca in questo caso fa riferimento al nome dell’account registrato su SugarCRM.

L’oggetto Account conterrà i soli dati necessari a visualizzare l’informazione dell’account all’interno della combo e generare il link per la visualizzazione del dettaglio. Le informazioni disponibili sull’oggetto sono quindi:

  • id: Identificativo univoco dell’account (esempio: 2411ad3-9fde-f38f-9ae7-4e1efb82e4cc)
  • name: Nome dell’account (esempio: Dontesta Corporation Ltd)
  • description: Descrizione dell’account (esempio: Società di consulenza finanziaria)

La lista di account ricevuti dal servizio sarà poi passata in formato JSON al componente Autocomplete. Al Source 3 e Figura 3 sono mostrati due esempi di struttura JSON restituita al client.

[sourcecode language="javascript"] {
"response": [
{
"sessionId": "97cb23e0868aa60497cfbe523bc0f800",
"description": "",
"name": "Calm Sailing Inc",
"type": "Customer",
"key": "45c25023-17c0-d399-6e0d-50b7d01d59b2"
},
{
"sessionId": "97cb23e0868aa60497cfbe523bc0f800",
"description": "",
"name": "Chandler Logistics Inc",
"type": "Customer",
"key": "efc37c4b-e7ff-f681-1168-50b7d0926541"
},
{
"sessionId": "97cb23e0868aa60497cfbe523bc0f800",
"description": "",
"name": "Constrata Trust LLC",
"type": "Customer",
"key": "88a869f2-98ba-c810-1b07-50b7d0fd784b"
},
{
"sessionId": "97cb23e0868aa60497cfbe523bc0f800",
"description": "",
"name": "Constrata Trust LLC",
"type": "Customer",
"key": "93b50490-12a1-39b2-b040-50b7d0312cce"
}
] }
[/sourcecode]

Source 3. Esempio di struttura dati JSON restituita al client.

Struttura JSON della lista degli account

Figura 3. Struttura JSON della lista degli account

6. Visualizzazione della lista degli Account

Rispetto al precedente esempio non cambia nulla a parte l’adeguamento dell’informazione circa la struttura del JSON che riceverà il componente di Autocomplete. La generazione del link di dettaglio all’account è eseguita a fronte dell’evento itemSelect del componente che visualizza i dati. Le Figure a seguire mostrano Alloy UI Autocomplete all’opera.

La lista dei primi dieci account

Figura 4. La lista dei primi dieci account

Al click sulla freccia sono mostrati i primi dieci account, mentre digitando le iniziali del nome dell’account, saranno mostrati solo quelli che soddisfano la query (vedi Figura 5). Il Source 4 mostra (riga 4) l’impostazione della where condition sull’attributo account name.

[sourcecode highlight="4" language="java"] GetEntryListRequest getEntryList = new GetEntryListRequest();
getEntryList.setSession(sessionId);
getEntryList.setModule_name("Accounts");
getEntryList.setQuery("accounts.name like ‘" + keyword + "’");
getEntryList.setOrder_by("accounts.name asc");
[/sourcecode]

Source 4. Impostazione della query “like” sull’account name.

Lista degli account il cui nome inizia con C

Figura 5. Lista degli account il cui nome inizia con C

Figura 6. Link visualizzazione dettaglio account

Figura 6. Link visualizzazione dettaglio account

La selezione di uno degli account dalla lista provoca l’aggiunta di un link che consente l’apertura del dettaglio dell’account.

7. Visualizzazione del dettaglio su SugarCRM

L’evento itemSelect genera i link per la visualizzazione del dettaglio account. Cliccando sul link si aprirà la scheda di dettaglio dell’account all’interno di una pop up. Al Source 5 è mostrato il link generato mentre in Figura 8 è visibile il pop up con la scheda di dettaglio.

[sourcecode language="html"] <a class="viewAccountRecord" title="Click for open the Account detail (direct to SugarCRM)" href="http://localhost:8888/sugarcrm_dev_WebServices/index.php?module=Accounts&action=DetailView&record=9ff1130a-a7e0-3176-d10f-50b7d00a51ce&MSID=989f7aaf24ee54a2298df910f5bdf751" target="_blank">Aim Capital Inc</a>
[/sourcecode]

Source 5. Link al dettaglio dell’account.

Figura 7. Dettaglio del link generato per la visualizzazione dettaglio account

Figura 7. Dettaglio del link generato per la visualizzazione dettaglio account

Figura 8. Scheda di dettaglio dell'account

Figura 8. Scheda di dettaglio dell’account

8. Conclusioni

Con questo articolo penso di aver concluso il ciclo su Alloy UI Autocomplete, che ho sfruttato come spunto per dimostrare come sia semplice accedere a dati (dinamici) provenienti da sorgenti diverse.

Antonio Musarra

I began my journey into the world of computing from an Olivetti M24 PC (http://it.wikipedia.org/wiki/Olivetti_M24) bought by my father for his work. Day after day, quickly taking control until … Now doing business consulting for projects in the enterprise application development using web-oriented technologies such as J2EE, Web Services, ESB, TIBCO, PHP.

You may also like...