Colourful Table in Web Dynpro For a long time I could see only shades of blue and grey in Web Dynpro Tables. But we can actually add more colors to it. For this we have property “cellDesign” in Table Column to set the color for that particular column. But does that mean only one colour for the entire column? Can’t we have different colors for different rows? Yes, we can. Lets see how… Adding Colors to a Web Dynpro Table in 10 simple Steps: 1. Create a new Web Dynpro project say, ColourfulTableWD. 2. Create a new Application say, ColourfulTableWDApp In the context, add context node color, and context attributes cellDesign1 and name. 
3. In properties for cellDesign1 add type = com.sap.ide.webdynpro.uielementdefinitions.TableCellDesign 
4. In properties for name add type = String 
5. In Layout, add Table, Table Header, Table Column, Column Header, TableCellEditor 
6. In properties for Table, add dataSource= color. 
7. In properties for Table Column, add cellDesign=color.cellDesign1 
8. In properties for TableCellEditor, add text=color.name 
9. In wdDoInit(), add the following code: for (Iterator i = WDTableCellDesign.iterateValues(); i.hasNext(); ) { WDTableCellDesign design = (WDTableCellDesign) i.next(); IColorElement e = wdContext.nodeColor().createAndAddColorElement(); e.setCellDesign1(design); e.setName(design.toString()); } 10. Deploy and Run the application. 
3. In properties for cellDesign1 add type = com.sap.ide.webdynpro.uielementdefinitions.TableCellDesign 4. In properties for name add type = String 5. In Layout, add Table, Table Header, Table Column, Column Header, TableCellEditor 6. In properties for Table, add dataSource= color. 7. In properties for Table Column, add cellDesign=color.cellDesign1 8. In properties for TableCellEditor, add text=color.name 9. In wdDoInit(), add the following code: for (Iterator i = WDTableCellDesign.iterateValues(); i.hasNext(); ) { WDTableCellDesign design = (WDTableCellDesign) i.next(); IColorElement e = wdContext.nodeColor().createAndAddColorElement(); e.setCellDesign1(design); e.setName(design.toString()); } 10. Deploy and Run the application.
15 Comments
