Thursday, 9 November 2017

Next and Previous buttons in liferay ui tabs

We can give next and previous buttons in liferay ui tabs.

i.e We can create url for the tabs

In jsp:

<%
String namespace=renderResponse.getNamespace();
String tabParam="tab";
/*Create tabURLs */

String goToTabAURL=Util.getTabURL(namespace, tabParam, "TabA");
String goToTabBURL=Util.getTabURL(namespace, tabParam, "TabB");
%>

<liferay-ui:tabs names="TabA,TabB"
   refresh="<%= false %>"
   param="<%=tabParam%>"  
  >
   <liferay-ui:section>
Tab Values A
<aui:button onClick="goToTabB();" value="NEXT" name="NEXT" />
   </liferay-ui:section>
   <liferay-ui:section>
Tab Values B  
<aui:button onClick="goToTabA();" value="PREVIOUS" name="PREVIOUS" />
 </liferay-ui:section>
</liferay-ui:tabs>
<aui:script>
 AUI().use('aui-base',function(A){
  Liferay.provide(window, 'goToTabA()', function(direction){
  <%=goToTabAURL%>
   });
   Liferay.provide(window, 'goToTabB()', function(){
  <%=goToTabBURL%>
   });
</aui:script>

Util.java

 public static String getTabURL(String namespace, String tabParam,
   String tabName) {
  StringBundler tabUrl = new StringBundler("TabA,TabB");
  String namesJS = JS.toScript();
  String unicode = UnicodeFormatter.toString(tabName);
  tabUrl.append("javascript:Liferay.Portal.Tabs.show(");
  tabUrl.append(StringPool.APOSTROPHE);
  tabUrl.append(namespace);
  tabUrl.append(tabParam);
  tabUrl.append(StringPool.APOSTROPHE);
  tabUrl.append(StringPool.COMMA);
  tabUrl.append(namesJS);
  tabUrl.append(StringPool.COMMA);
  tabUrl.append(StringPool.APOSTROPHE);
  tabUrl.append(unicode);
  tabUrl.append(StringPool.APOSTROPHE);
  tabUrl.append(");");
  return tabUrl.toString();
 }

No comments:

Post a Comment