- SAP Managed Tags:
How to use SAP Icons in your Web Dynpro Java Developments.
Applies to: Tested in SAP Portal 7.01 but will work for all versions.
Summary : The look and feel of Web Dynpro Java development hosted on SAP Enterprise Portal is usually very different from the SAP ECC. This document will help you integrate SAP Icons in your SAP Web Dynpro Java developments. Reading this document will definitely help you know the SAP Icons better that can be integrated in ABAP developments as well.
Author: Amol Gupta
Company: Pitney Bowes Software
Created on: 4 June 2012
Author Bio : Amol Gupta is working with Pitney Bowes Software as an SAP Technical Consultant. He has been working on Web Dynpro Java programming, Enterprise Portal Content Management, SAP NWDI, MDM Java API, MDM Console, MDM Data Manager and Interactive forms for WebDynpro Java. Amol is a Sun Certified Java Programmer (SCJP) and Certified Scrum Master (CSM).
Prerequisites
The target audience of the document are expected to know basics of SAP Web Dynpro Java Development and should have SAP NWDS installed, SAP ECC access credentials and SDM credential for creating an deplyoying Web Dynpro Java applications.
Outcome
Developers will be able to integrate SAP Icons in their Web Dynpro Java developments and have the option of making the look and feel of their SAP
Web Dynpro Java Developments closer to SAP ECC.
Web Dynpro Java Developments closer to SAP ECC.
What all SAP Icons are available in SAP ECC ?
Alternative 1
STEP 1 - Log on Sap Logon Pad
STEP 2 - Go to Transaction Code SE11
STEP 3 - Choose Database Table and enter ICON in the input box and click on Display button
STEP 4 - Click on Contents icon marked with green
STEP 5 - Click on Execute icon marked with green
STEP 6 - Enjoy the list of all SAP Icons available
STEP 7 - Take out list of icons
Alternative 2
STEP 1 - Goto SE38
STEP 2 - Enter program name as "SHOWICON" and click on display
STEP 3 - Select any option from the list and click on execute
STEP 4 - Enjoy the list of all SAP Icons available, you may download them using step 7 mentioned earlier
Alternative 3
Goto following URL and see the listof icons
How to integrate with SAP Web Dynpro Java developments
The methods explained above will give you SAP icon names as e.g. F_BACK or @F_BACK@ now for integrating with Web Dynpro Java you will have to write "~sapicons/s_f_back.gif" in the image source of Button UI elements.
On deployment the application will look something like as follows.
Notice that the icon is exactly the same as in ECC.
Display Icons list in WebDynpro Java Application
Define the following context in Web Dynpro Java. Pls note that node has cardinality 0-n and all context attributes are of type String.
Create a Table with all attributes mapped to Text View UI elements. Add one additional column with Table cell editor set to UI element Image with "source" and "alt" bound to "IconGifNameTranformed" Context attribute. Pls note the View name should be "IconsView" else the for loop will have to be modified.
Now copy the following code in your wdDoInit() method of the view and
deploy and run your application.
deploy and run your application.
String str [][] = new String [][]
{ {"ICON_DUMMY", "@B_DUMY@", "Placeholder icon" },
{"ICON_CHECKED", "@S_OKAY@", "Checked;OK" },
{"ICON_INCOMPLETE", "@S_NONO@", "Incomplete;critical" },
{"ICON_FAILURE", "@S_ERRO@", "Failed"},
{"ICON_POSITIVE", "@S_POSI@", "Positive;Good" },
{"ICON_NEGATIVE", "@S_NEGA@", "Negative;Bad" },
{"ICON_LOCKED", "@S_LOCL@", "Locked;Lock" },
{"ICON_UNLOCKED", "@S_LOOP@", "Free;unlock" },
{"ICON_GREEN_LIGHT", "@S_TL_G@", "Green Light;Go; Okay" },
{"ICON_YELLOW_LIGHT", "@S_TL_Y@", "Yellow light;caution" },
{"ICON_RED_LIGHT", "@S_TL_R@", "Red light;stop; errors" },
{"ICON_TOTAL_LEFT", "@B_TOTL@", "Extreme left;first ..." },
{"ICON_TOTAL_RIGHT", "@B_TOTR@", "Extreme right; last ..." },
{"ICON_COLUMN_LEFT", "@B_COLL@", "Column left;previous ..." },
{"ICON_COLUMN_RIGHT", "@B_COLR@", "Column right;next ..." },
{"ICON_PAGE_RIGHT", "@B_PAGR@", "Page right" },
{"ICON_PAGE_LEFT", "@B_PAGL@", "Page left" },
{"ICON_PREVIOUS_VALUE", "@B_PRVI@", "Previous value; next entry" },
{"ICON_NEXT_VALUE", "@B_NXTI@", "Next value; previous entry" },
{"ICON_ANNOTATION", "@B_ANNO@", "Note; change note; remark" },
{"ICON_CREATE_NOTE", "@B_NOCR@", "Create note" },
{"ICON_DISPLAY_NOTE", "@B_NODP@", "Display note" },
{"ICON_CALCULATION", "@B_CALC@", "Costing"},
{"ICON_GRAPHICS", "@B_GRAF@", "Graphic"},
{"ICON_CREATE_TEXT", "@B_TXCR@", "Create text" },
{"ICON_DISPLAY_TEXT", "@B_TXDP@", "Display text" },
{"ICON_CHANGE_TEXT", "@B_TEXT@", "Text; change text; long text" },
{"ICON_VARIANTS", "@B_VARI@", "Variants"},
{"ICON_INFORMATION", "@B_INFO@", "Information"},
{"ICON_ADDRESS", "@B_ADDR@", "Address"},
{"ICON_VIEWER_OPTICAL_ARCHIVE", "@B_OPTA@", "Optical archive viewer" },
{"ICON_OKAY", "@B_OKAY@", "OK; Continue;Choose <value>" },
{"ICON_CANCEL", "@B_CANC@", "Cancel"},
{"ICON_PRINT", "@B_PRNT@", "Print"},
{"ICON_CREATE", "@B_CREA@", "Create"},
{"ICON_CHANGE", "@B_CHNG@", "Change"},
{"ICON_DISPLAY", "@B_DISP@", "Display"},
{"ICON_DELETE", "@B_DELE@", "Delete"},
{"ICON_TEST", "@B_TEST@", "Test"},
{"ICON_SEARCH", "@B_SRCH@", "Find"},
{"ICON_COPY_OBJECT", "@B_COPY@", "Copy<object>" },
{"ICON_EXECUTE_OBJECT", "@B_EXEC@", "Execute<object>" },
{"ICON_SELECT_DETAIL", "@B_DETL@", "Choose<detail>; Detail" },
{"ICON_INSERT_ROW", "@B_INSR@", "Insert Row" },
{"ICON_DELETE_ROW", "@B_DELR@", "Delete Row" },
{"ICON_MESSAGE_INFORMATION", "@M_INFO@", "Information message" },
{"ICON_MESSAGE_WARNING", "@M_WARN@", "Warning"},
{"ICON_MESSAGE_ERROR", "@M_ERRO@", "Errormessage" },
{"ICON_MESSAGE_QUESTION", "@M_QUES@", "Question"},
{"ICON_MESSAGE_CRITICAL", "@M_CRIT@", "Critical message" },
{"ICON_DISPLAY_MORE", "@BGMORE@", "Multiple Selection (Active)" },
{"ICON_ENTER_MORE", "@B_MORE@", "Multiple selection" },
{"ICON_EQUAL", "@B_EQUA@", "Equals"},
{"ICON_NOT_EQUAL", "@B_NEQU@", "Not equal to" },
{"ICON_GREATER", "@B_GREA@", "Greater than" },
{"ICON_LESS", "@B_LESS@", "Less than" },
{"ICON_GREATER_EQUAL", "@B_GREQ@", "Greater than or equal to" },
{"ICON_LESS_EQUAL", "@B_LEEQ@", "Less than or equal to" },
{"ICON_INTERVAL_INCLUDE", "@B_IVIN@", "Include range" },
{"ICON_INTERVAL_EXCLUDE", "@B_IVEX@", "Exclude range" },
{"ICON_PATTERN_INCLUDE", "@B_PATT@", "Include pattern" },
{"ICON_PATTERN_EXCLUDE", "@B_NPAT@", "Exclude pattern" },
{"ICON_PHONE", "@T_PHON@", "Telephone Number" },
{"ICON_FAX", "@T_TFAX@", "Fax number" },
{"ICON_MAIL", "@T_MAIL@", "Send message; mail" },
{"ICON_TIME", "@T_TIME@", "Time" },
{"ICON_DATE", "@T_DATE@", "Date"},
{"ICON_ALARM", "@T_ALAR@", "Alarm"},
{"ICON_PROSHARE", "@T_PROS@", "ProShare"},
{"ICON_VIDEO", "@T_VIDE@", "Video"},
{"ICON_VOICE_INPUT", "@T_VOIC@", "Voice input" },
{"ICON_VOICE_OUTPUT", "@T_SOUN@", "Voice output" },
{"ICON_EQUAL_GREEN", "@BGEQUA@", "Select: Equal to" },
{"ICON_NOT_EQUAL_GREEN", "@BGNEQU@", "Select: Not equal to" },
{"ICON_GREATER_GREEN", "@BGGREA@", "Select: Greater than" },
{"ICON_LESS_GREEN", "@BGLESS@", "Select: Less than" },
{"ICON_GREATER_EQUAL_GREEN", "@BGGREQ@", "Select: Greater than/equal to" },
{"ICON_LESS_EQUAL_GREEN", "@BGLEEQ@", "Select: Less than/equal to" },
{"ICON_INTERVAL_INCLUDE_GREEN", "@BGIVIN@", "Select: Include range" },
{"ICON_INTERVAL_EXCLUDE_GREEN", "@BGIVEX@", "Select:Exclude range" },
{"ICON_PATTERN_INCLUDE_GREEN", "@BGPATT@", "Select: Include pattern" },
{"ICON_PATTERN_EXCLUDE_GREEN", "@BGNPAT@", "Select:Exclude pattern" },
{"ICON_EQUAL_RED", "@BREQUA@", "Do not select: Equal to" },
{"ICON_NOT_EQUAL_RED", "@BRNEQU@", "Do not select: Not equal to" },
{"ICON_GREATER_RED", "@BRGREA@", "Do not select: Greater than" },
{"ICON_LESS_RED", "@BRLESS@", "Do not select: Less than" },
{"ICON_GREATER_EQUAL_RED", "@BRGREQ@", "Do not select: Greater/equal" },
{"ICON_LESS_EQUAL_RED", "@BRLEEQ@", "Do not select: Less than/equal" },
{"ICON_INTERVAL_INCLUDE_RED", "@BRIVIN@", "Do not select: Include range" },
{"ICON_INTERVAL_EXCLUDE_RED", "@BRIVEX@", "Do not select: Exclude range" },
{"ICON_PATTERN_INCLUDE_RED", "@BRPATT@", "Do not select: Include pattern" },
{"ICON_PATTERN_EXCLUDE_RED", "@BRNPAT@", "Do not select: Exclude pattern" },
{"ICON_SYSTEM_OKAY", "@F_OKAY@", "OK" },
{"ICON_SYSTEM_SAVE", "@F_SAVE@", "Save"},
{"ICON_SYSTEM_BACK", "@F_BACK@", "Back"},
{"ICON_SYSTEM_END", "@F_ENDT@", "Exit"},
{"ICON_SYSTEM_CANCEL", "@F_CANC@", "Cancel"},
{"ICON_SYSTEM_PRINT", "@F_PRNT@", "Print"},
{"ICON_OTHER_OBJECT", "@F_OOBJ@", "Other<object>" },
{"ICON_PREVIOUS_OBJECT", "@F_PRVO@", "Previous Screen" },
{"ICON_NEXT_OBJECT", "@F_NXTO@", "Next Screen" },
{"ICON_SYSTEM_CUT", "@F_CUTO@", "Cut"},
{"ICON_SYSTEM_COPY", "@F_COPY@", "Copy"},
{"ICON_SYSTEM_PASTE", "@F_PAST@", "Paste"},
{"ICON_SYSTEM_UNDO", "@F_UNDO@", "Undo" },
{"ICON_SYSTEM_MARK", "@F_MARK@", "Selection mode; select" },
{"ICON_FIRST_PAGE", "@F_FSTP@", "First Page" },
{"ICON_PREVIOUS_PAGE", "@F_PRVP@", "Previous Page" },
{"ICON_NEXT_PAGE", "@F_NXTP@", "Next Page" },
{"ICON_LAST_PAGE", "@F_LSTP@", "Last Page" },
{"ICON_SYSTEM_MODUS_CREATE", "@F_MOCR@", "Create Session" },
{"ICON_SYSTEM_MODUS_DELETE", "@F_MODE@", "End session" },
{"ICON_SYSTEM_USERMENU", "@F_USER@", "Session Manager" },
{"ICON_SYSTEM_HELP", "@F_HELP@", "Help" },
{"ICON_TABLE_SETTINGS", "@B_TVAR@", "Call report from report" },
{"ICON_REPLACE", "@B_REPL@", "Replace"},
{"ICON_CHECK", "@B_CHCK@", "Check"},
{"ICON_GENERATE", "@B_GENR@", "Generate" },
{"ICON_REFERENCE_LIST", "@B_BOOK@", "Where-Used List" },
{"ICON_STACK", "@B_CHIP@", "Stack"},
{"ICON_ACTIVATE", "@B_ACTI@", "Activate" },
{"ICON_ICON_LIST", "@B_ICON@", "Icon list;Key" },
{"ICON_SORT_UP", "@B_SRTU@", "Sort in Ascending Order" },
{"ICON_SORT_DOWN", "@B_SRTD@", "Sort in Descending Order" },
{"ICON_LAYOUT_CONTROL", "@B_LAYT@", "Print Preview" },
{"ICON_CONVERT", "@B_CONV@", "Convert" },
{"ICON_TOGGLE_DISPLAY_CHANGE", "@B_DPCH@", "Display <-> Change" },
{"ICON_SET_STATE", "@B_STAT@", "Set Status" },
{"ICON_PREVIOUS_NODE", "@B_PRVN@", "Previous Node" },
{"ICON_NEXT_NODE", "@B_NXTN@", "Next Node" },
{"ICON_TREE", "@B_TREE@", "Hierarchy" },
{"ICON_INSERT_RELATION", "@B_INSN@", "Insert relationship" },
{"ICON_FINAL_DATE", "@B_FDAT@", "End date; Dates" },
{"ICON_HEADER", "@B_HEAD@", "Header; basic data" },
{"ICON_OVERVIEW", "@B_OVIW@", "Overview; overview; list scrn" },
{"ICON_DETAIL", "@B_DAIL@", "Detail view" },
{"ICON_EXPAND", "@B_EXPA@", "Expand; enlarge" },
{"ICON_COLLAPSE", "@B_COLS@", "Compress; reduce" },
{"ICON_BREAKPOINT", "@S_BRKP@", "Breakpoint"},
{"ICON_FOREIGN_KEY", "@B_FKEY@", "Foreign Keys" },
{"ICON_LIST", "@B_LIST@", "List" },
{"ICON_CLOSE", "@B_CLOS@", "Close"},
{"ICON_POSITION", "@B_POSN@", "Position;other entry" },
{"ICON_SUM", "@B_SUMM@", "Total"},
{"ICON_MOVE", "@B_MOVE@", "Move"},
{"ICON_RETRIEVE", "@B_RETR@", "Retrieve"},
{"ICON_REFRESH", "@B_REFR@", "Refresh"},
{"ICON_SKIP", "@B_SKIP@", "Skip"},
{"ICON_SYSTEM_SETTINGS", "@F_SETT@", "User Settings" },
{"ICON_TOOLS", "@B_TOOL@", "Tools" },
{"ICON_COMPARE", "@B_COMP@", "Compare" },
{"ICON_SHORT_MESSAGE", "@B_SNDN@", "Short message" },
{"ICON_IMPORT", "@B_UPLO@", "Import" },
{"ICON_EXPORT", "@B_DOWN@", "Export" },
{"ICON_TRANSPORT", "@B_TRNS@", "Transport" },
{"ICON_SELECT_ALL", "@B_MRKA@", "Select All" },
{"ICON_SELECT_BLOCK", "@B_MRKB@", "Select Block" },
{"ICON_DESELECT_ALL", "@B_MRKD@", "Deselect All" },
{"ICON_SEARCH_NEXT", "@B_SRCC@", "Find Next" },
{"ICON_RENAME", "@B_RENM@", "Rename" },
{"ICON_FILTER", "@B_FILT@", "Filters"},
{"ICON_NEXT_HIERARCHY_LEVEL", "@B_NLEV@", "Next hierarchy level" },
{"ICON_PREVIOUS_HIERARCHY_LEVEL", "@B_PLEV@", "Previous hierarchy level" },
{"ICON_SYSTEM_POSSIBLE_ENTRIES", "@F_INPV@", "Possible Entries" },
{"ICON_INTENSIFY", "@B_INTE@", "Highlight"},
{"ICON_PERSONAL_HELP", "@B_PRSH@", "Individual help" },
{"ICON_VARIABLE", "@B_VARB@", "Variable" },
{"ICON_SYSTEM_LOCAL_CUT", "@F_CUTL@", "Cut (local)" },
{"ICON_SYSTEM_LOCAL_COPY", "@F_COPL@", "Copy (local)" },
{"ICON_SYSTEM_LOCAL_PASTE", "@F_PASL@", "Paste (local)" },
{"ICON_SYSTEM_LOCAL_MARK", "@F_MRKL@", "Selection mode (local)" },
{"ICON_SYSTEM_REDO", "@F_REDO@", "Repeat"},
{"ICON_BUSINAV_PROCESS", "@B_BNPR@", "Process"},
{"ICON_BUSINAV_PROCESSMATRIX", "@B_BNPA@", "Process Selection Matrix" },
{"ICON_BUSINAV_SYSORGI", "@B_BNSO@", "System organization chart" },
{"ICON_BUSINAV_SZENARIO", "@B_BNSZ@", "Scenario" },
{"ICON_BUSINAV_OBJECTS", "@B_BNBO@", "Business objects" },
{"ICON_BUSINAV_INFODIAG", "@B_BNID@", "Information flow diagram" },
{"ICON_BUSINAV_ENTITY", "@B_BNET@", "Entity Type" },
{"ICON_BUSINAV_PROC_EXIST", "@B_BNPV@", "Process exists" },
{"ICON_BUSINAV_COMMDIAG", "@B_BNCD@", "Communication diagram" },
{"ICON_BUSINAV_DATAMODEL", "@B_BNDM@", "Data model" },
{"ICON_ALIGN", "@B_ALIG@", "Align" },
{"ICON_CUT_RELATION", "@B_CUTN@", "Cancel link" },
{"ICON_FIX_COLUMN", "@B_FIXC@", "Freeze Columns" },
{"ICON_RELEASE_COLUMN", "@B_RELC@", "Unfreeze columns" },
{"ICON_NET_GRAPHIC", "@B_NETG@", "Network graphic" },
{"ICON_PLANNING_TABLE", "@B_PLAN@", "Bar chart; planning board" },
{"ICON_PERIOD", "@B_PERI@", "Period screen; time breakdown" },
{"ICON_ZOOM_IN", "@B_ZOIN@", "Zoom in" },
{"ICON_ZOOM_OUT", "@B_ZOUT@", "Zoom out" },
{"ICON_LED_GREEN", "@S_LEDG@", "Green LED; go; okay" },
{"ICON_LED_RED", "@S_LEDR@", "Red LED;stop; errors" },
{"ICON_LED_YELLOW", "@S_LEDY@", "Yellow LED; caution" },
{"ICON_SYSTEM_EXTENDED_HELP", "@F_EHLP@", "Application help" },
{"ICON_SPACE", "@B_SPCE@", "Blank"},
{"ICON_BUSINAV_VALUE_CHAIN", "@B_BNWK@", "Value chain" },
{"ICON_WORKFLOW_ACTIVITY", "@B_AKTI@", "Activity" },
{"ICON_WORKFLOW_CONDITION", "@B_BEDI@", "Condition" },
{"ICON_WORKFLOW_DECISION", "@B_BENT@", "User Decision" }
};
/*my source gave me the distorted icon names in the form of "@<a_aaaa>@" so i am applying a little transformation to get "~sapicons/<a_aaaa>.gif" where <a_aaaa> is used as a generalisation */
IPrivateIconsView.IIconsElement ele = null;
for (int i=0; i<str.length ; i++)
{
ele = wdContext.createIconsElement();
ele.setIcon_Name(str[i][0]);
ele.setIconGifName(str[i][1]);
String strTemp = "~sapicons/s_" + str[i][1].substring(1,str[i][1].length()-1).toLowerCase()+ ".gif";
ele.setIconGifNameTransformed(strTemp);
ele.setShortText(str[i][2]);
wdContext.nodeIcons().addElement(ele);
}
Enjoy the List of Icons in your WebDynpro application
This application not only gives you the correct .gif names to be used in Web Dynpro Java but also shows you the correct icon right next to it !
