Carousel in ADempiere


Problem Statement:

Any Business would like to propagate its core values, latest news and upcoming events to all the stake holders of the company. Stake holders can be employees of the company, vendors and customers who are associated to business. Medium used for this propagation should have broader outreach. ERP application of the business has this broader outreach as one its aspect. So If ERP can help business in propagation of this message, that will be additional advantage. ADempiere has support for dashboards which will help us in this case. Creation of New dashboard with Carousel implementation will be one of the possible solution for this need.

Scope of Article:

As a part of this article we will cover following topics

  • Maintenance of carousel images in application
  • Create a Carousel dashboard entity
  • Configure it to appear in dashboard

Prerequisites:

  • Having knowledge in ZUL file creation based on Java file.
  • Understanding of ADempiere configurations to create Dashboards based on ZUL file
  • Window creation based on Table.

 Technology :

  • ADempiere 342 or above

Details :

  • Create new table to store carousel images.
CREATE TABLE DA_DashBoard_Images(
 DA_DashBoard_Images_ID numeric(10,0) NOT NULL,
 ad_client_id numeric(10,0) NOT NULL,
 ad_org_id numeric(10,0) NOT NULL,
 isactive character(1) DEFAULT 'Y'::bpchar NOT NULL,
 created timestamp without time zone DEFAULT now() NOT NULL,
 createdby numeric(10,0) NOT NULL,
 updated timestamp without time zone DEFAULT now() NOT NULL,
 updatedby numeric(10,0) NOT NULL,
 name character varying(80),
 seqno numeric(10,0),
 description character varying(200),
 formdata bytea
 );
 ALTER TABLE DA_DashBoard_Images ADD CONSTRAINT DA_DashBoard_Images_PK PRIMARY KEY (DA_DashBoard_Images_ID);
    • Created following ADempiere Window based on above table and also generated models.

newwindow

  • Upload Carousel Image ( i.e JPG,JPEG,PNG) in above window.Upload
  • Upload couple of Carousel in Banner Image window.11

Code Changes :

  • Make code changes to read all Banners from DA_DashBoard_Images table and display one by one based on sequence no of Banners.To do this added  BannerOnDashBoardPanel.java file.
 package org.adempiere.webui.dashboard;
 import org.adempiere.webui.dashboard.DashboardPanel;
 import org.adempiere.webui.util.ServerPushTemplate;
 import java.io.ByteArrayInputStream;
 import java.sql.PreparedStatement;
 import java.sql.ResultSet;
 import java.util.logging.Level;
 import org.adempiere.webui.component.Panel;
 import org.compiere.model.MSysConfig;
 import org.compiere.util.CLogger;
 import org.compiere.util.Constants;
 import org.compiere.util.DB;
 import org.zkoss.zk.ui.Component;
 import org.zkoss.zk.ui.event.Event;
 import org.zkoss.zk.ui.event.EventListener;
 import org.zkoss.zul.Image;
 import java.util.*;
 /**
 * The purpose of this class is to display the uploaded image as Banner
 * on DashBoard. And these images will be changed based on given time period
 * in ZK_DASHBOARD_REFRESH_INTERVAL System Configuration Parameter
 * */
 public class BannerOnDashBoardPanel extends DashboardPanel implements EventListener {
 private static final CLogger logger = CLogger.getCLogger(BannerOnDashBoardPanel.class);
 private Panel panel = null;
 private Image image = null;
 private ArrayList<org.zkoss.image.AImage> imageList = null;
 private int currentImageNumber = 0 ;
 private int maxImageNumber = 0 ;
 public BannerOnDashBoardPanel() {
 super();
 panel = new Panel();
 this.appendChild(panel);
 image = new Image();
 image.setParent(panel);
 panel.setStyle("overflow:auto");
 imageList = new ArrayList<org.zkoss.image.AImage>();
 String size = MSysConfig.getValue("BANNER_IMAGE_HEIGHT","200px");
 panel.setHeight(size);
 panel.setWidth("100%");
 // for loading images
 loadImages();
 }
 public void loadImages(){
 ResultSet rs = null;
 PreparedStatement psmt = null;
 try {
 // This Query is used to get the images from a DA_DashBoard_Images table.
 String imageSql = "SELECT formdata FROM DA_DashBoard_Images ORDER BY seqno " ;
 psmt = DB.prepareStatement(imageSql,null);
 rs = psmt.executeQuery();
 while ( rs.next() ) {
 byte[] object = rs.getBytes(1);
 ByteArrayInputStream is = new ByteArrayInputStream( object );
 org.zkoss.image.AImage img = new org.zkoss.image.AImage("",is);
 imageList.add(img);
 }
 maxImageNumber = imageList.size();
 } catch (Exception e) {
 logger.log(Level.SEVERE, " Failed to get the Images from DA_DashBoard_Images this table" +
 " to diaply on Dash Board because of "+e.getMessage());
 } finally {
 DB.close(rs, psmt);
 }
 }
/**
 * This method is used to get the image from the PM_DashBoard_Images table
 * to display on Dash Board Panel (Banner)
 */
 public void displayImageOnBanner() {
 // Now display it on Banner
 image.setContent(imageList.get(currentImageNumber));
 if( currentImageNumber == ( maxImageNumber - 1) ) {
 currentImageNumber = 0 ;
 } else {
 currentImageNumber = currentImageNumber + 1 ;
 }
 }
/**
 * This method is used to refresh the Dash Board Panel(Banner)
 */
 public void refresh(ServerPushTemplate template) {
 template.execute(this);
 }
/**
 * This method is used to update the images in
 * Dash board Panel(Banner).
 */
 public void updateUI() {
 // don't update if not visible
 Component c = this.getParent();
 while (c != null) {
 if (!c.isVisible()) {
 return;
 }
 c = c.getParent();
 }
 displayImageOnBanner();
 }
 public void onEvent(Event event) throws Exception {
 }
 }

In above file, BANNER_IMAGE_HEIGHT is a System configuration parameter to specify Banner Dashboard height. 

  • Add following code in org.adempiere.webui.editor.WBinaryEditor.java file to set proper name for upload image button in Banner Image window.
private void init()
 {
 -----
//Constants.java has all constants like Constants.BANNER_ON_DASH_BOARD_WINDOW_ID
if( window_ID.intValue()==( Constants.BANNER_ON_DASH_BOARD_WINDOW_ID ).intValue() ) { 
getComponent().setLabel( "Upload/Replace Image" ); 
} else { 
----- 
} 
----- 
} // init
  • Made code changes in getDisplayComponent() method org.adempiere.webui.component.GridTabRowRenderer.java file to show proper name for Upload Image button in list view of Banners in Banner Image window.
private Component getDisplayComponent(Object value, GridField gridField) {
-----
if (gridField.getAD_Column_ID() == Constants.BANNER_IMAGE_UPLOAD_OR_REPLACE_COLUMN_ID) {
 setLabelText("Upload/Replace Image", label);
}
 else {
 setLabelText(text, label);
}
-----
 } // getDisplayComponent
  • Create ZUL file(i.e BannerDashBoard.zul ) based on BannerOnDashBoardPanel.java file to create DashBoard.
<?xml version="1.0" encoding="UTF-8"?>
<window use="org.adempiere.webui.dashboard.BannerOnDashBoardPanel"/>
  • Configure ADempiere Dashboard based on BannerDashBoard.zul file.6
  • Now login as a normal user to see carousel on Dashboard and images will be rendered sequentially one after another

Mobile Solutions Banner 9Pentaho Banner 10Sencha Playground Banner7EagleRP Banner8 We are able to see all Images which we uploaded in Banner Image window in specified sequence number.

Summary:

As a part of this article we have learned ADempiere dashboard creation and what are the necessary changes required to craete a carousel and display in a Dashboard. Hope you have enjoyed reading this article.

Walking Tree promotes ADempiere and we support the users as well as the developers to ensure that the business is able to take complete advantage of ADempiere’s wonderful capability. In case you are looking for a professional assistance then do visit our website to get in touch with us.

References :

Tagged with: , ,
Posted in ADempiere, EagleRP

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

We Have Moved Our Blog!

We have moved our blog to our company site. Check out https://walkingtree.tech/index.php/blog for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Recent Publication
%d bloggers like this: