Liferay custom portlet: usare AUI per disabilitare un pulsante se il valore di alcuni campi cambia

liferay-alloyIn una portlet web (nel nostro esempio ha la sola pagina view.jsp) a volte è necessario impedire all’utente di eseguire un’azione (ad esempio un click su un pulsante) se prima i dati inseriti non sono stati validati (lato server).

Supponiamo quindi di avere un button per eseguire la nostra azione, una serie di campi e il pulsante che valida e salva i dati.

Supponiamo che i nostri dati siano salvati tra le preferences della nostra portlet.

Quindi, all’inizio della pagina view.jsp leggeremo se la configurazione salvata in precedenza è valida.

Questo valore isConfigValid proviene dall’elaborazione dell’action della portlet ed è stato memorizzato nelle preferences della portlet stessa.

<% boolean isConfigValid = GetterUtil.getBoolean(portletPreferences .getValue("isConfigValid", StringPool.BLANK)); %>

In basso nella form avremo il codice per il nostro pulsante.
Si noti il div che contiene un messaggio di avviso.
Nel suo attributo class la classe css hidden (che in Liferay nasconde il div) viene inserita se il valore della variabile isConfigValid è true.
Al contrario l’attributo disabled del pulsante è true se isConfigValid è false.
Quindi se la configurazione è valida, il pulsante è attivo e il messaggio di avviso è nascosto.
Al contrario, se la configurazione NON è valida, il pulsante NON è attivo e il messaggio di avviso è visibile.

<aui:button-row>
	<liferay-portlet:actionURL var="taskURL">
		<portlet:param name="<%=ActionRequest.ACTION_NAME%>"
			value="startTask" />
		<portlet:param name="redirect" value="<%=currentURL%>" />
	</liferay-portlet:actionURL>

	<%
		String taglibTask = "submitForm(document."
				+ renderResponse.getNamespace()
				+ "fm, '" + taskURL + "');";
	%>
	<div id="<portlet:namespace />myTaskAlert" class='alert alert-info <c:if test="<%=isConfigValid%>"> hidden </c:if>'>
		<liferay-ui:message
			key="please-validate-and-save-the-config-before-starting-the-task" />
	</div>
	<aui:button name="startTaskBtn" id="startTaskBtn" onClick="<%=taglibTask%>" value="start-task"
		disabled="<%=!isConfigValid%>" />
</aui:button-row>

La nostra form è chiusa dal pulsante di un classico submit.

	<aui:button-row>
		<aui:button type="submit" value="validate-and-save" />
	</aui:button-row>

All’interno della nostra form suponiamo di avere alcuni campi (a titolo di esempio un input di tipo text e un checkbox).

	<aui:input cssClass="lfr-input-text-container invalidIfChanged"
		label="campo1-label" name="campo1"/>
	<aui:input label="checkbox-label" name="campo2" type="checkbox"
		cssClass="invalidIfChanged"/>

Vogliamo che se il valore di uno dei campi cambia, allora il pulsante startTaskBtn venga disattivato e il messaggio di avviso appaia.
Si noti che per entrambi i campi l’attributo cssClass contiene il nome di una classe: invalidIfChanged
Questa non è una classe vera e propria, ma il suo nome ci consentirà tramite una funzione AUI di selezionare tutti gli elementi che contengono questa classe.

<aui:script>
YUI().use('aui-base', function(A){

    var button = A.one('#<portlet:namespace />startTaskBtn');
    button.set('disabled', <%=!isConfigValid %>);

    var func = function(){
    	button.set('disabled', true);
    	var myAlertDiv = A.one('#<portlet:namespace />myTaskAlert');
    	myAlertDiv.replaceClass('hidden', '');
    	}

    A.all('.invalidIfChanged').each(function(node){
    node.on('change', func)
    })

})
</aui:script>

Il codice qui sopra seleziona tutti gli elementi che hanno la classe CSS invalidIfChanged A.all(‘.invalidIfChanged’) e per ciascuno associa una funzione .each(function(node) che viene eseguita dall’onchange dell’elemento stesso.

    A.all('.invalidIfChanged').each(function(node){
    node.on('change', func)
    })

La funzione func associata all’onchange disabilita il nostro pulsante

    	button.set('disabled', true);

e rimuove la classe css hidden dal div che contiene il messaggio di avviso.

    	var myAlertDiv = A.one('#<portlet:namespace />myTaskAlert');
    	myAlertDiv.replaceClass('hidden', '');

In questo modo il messaggio viene mostrato.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *