Much has been written about SAP’s in-cloud hybrid solution around SAP Talent Management with SuccessFactors, which is SAP’s stated strategy going forward. In the short term, however, SAP is still supporting on-premise versions of Talent Management, so it is important that SAP ERP HCM users who are still using current on-premise versions of modules (such as Performance Management) stay current. In this article we share some useful insight gained from our recent implementation experiences to help SAP ERP HCM users get the most from their system. The first tip we share is how to customize slider bars and add ribbons for improved usability.  

Creating Custom Slider Bars with Slider Color Functionality

  Custom slider rating scales were developed to enhance ease of use when evaluating employees. In enhancement packages 4 and 5, slider bar functionality existed in the predefined process but was absent in the flexible process. In enhancement package 6, SAP added the slider bar functionality for the flexible process with a standard scale of 1 to 6. For those who might not be very familiar with the performance management options provided by SAP, note that the predefined performance management process is pretty much that: Predefined with very little configuration or customization options — you basically take what you can get. The flexible performance management process, however, provides functionally richer configuration options and user exits for addressing various customer requirements. Figure 1 shows an example of a standard slider bar with standard scale provided by the SAP system.     Figure 2 shows an example of a custom slider bar with a much broader scale and scale intervals incorporating both user-defined slider color functionality and a handy hovering feature (explained below). The customer requirement was for a broader one-to-50 point scale with five main scale intervals:

1–15      =    Unsatisfactory Performance 16–21    =    Needs Improvement 22–30    =    Meets Expectations 31–40    =    Exceeds Expectations 41–50    =    Exceptional Performance

The color of the slider bar changes depending on the scale interval and the selected rating so users can immediately understand the displayed value. The rating for each criterion element can be selected either by dragging the slider bar or simply clicking the point of the rating scale at which you want to rate the employee. For example, the actual rating selected for the Proficient in emergency procedures criterion element is 25; hence, the color green is displayed for the main interval 22–30, with a description of Meets Expectations (Figure 2). The hovering functionality of the slider bar is another feature that aids ease of use. Simply use your cursor to hover over the slider bar on the screen to get more information about your options before making a final selection. In Figure 2, for the criterion Holds self and others accountable for their actions, the actual rating selected is 43. The color pink is displayed for the main interval rating of 41–50, along with the description Exceptional Performance. When you hover over a specific point in the slider bar scale before making a final selection, a pop-up footnote displays the scale text associated with that specific point in the slider bar scale. In my example, the text Rating – Exceptional Performance is displayed. The custom slider functionality was created by enhancing the Web Dynpro for ABAP programs that display the appraisal documents. At a high level, the Performance Management programs read the appraisal structure, as defined through transaction code PHAP_CATALOG, and iteratively create all the user interface (UI) elements that the appraisal requires. The majority of this process is done within the HAP_DOCUMENT_BODY Web Dynpro and, in particular, the VW_BODY_VIEW. First, the layout of the view itself needs to be enhanced via transaction code SE80. It is necessary to have a developer key to make the technical modifications below. The view has a pane that is dynamically repeated and re-created for each UI element in the appraisal (Figure 3). The appropriate Label (ZLBL_SLIDER), MultipleThreshold (MULTIPLE_THRESHOLD), ThresholdSlider (ZSLIDER), and Threshold (BAD_THRESHOLD) UI elements were added to this pane so that when you enhance the method that iteratively creates all the UI elements, your component is made available. The added UI elements are seen in the ZTRC_SLIDER container (Figure 3) circled in red. Also, the T_BODY_CELLS node in the context needs to be enhanced to add a toggle-able visibility property so that you can hide the slider when it isn’t the type of UI element that is being used, as well as enhancing the fields for storing the value of the selected slider and available threshold values. The T_BODY_CELLS context node and added elements are shown in Figures 4 and 5. The BUILD_DOCUMENT_BODY in the component controller is where the real magic happens. In this method, the SAP system loops over the structure of the appraisal and, based on the value and layout types of the cell, it knows which type of UI element (e.g., radio button, text box, text field, or list box) to make visible. To display a slider, you need to create an overwrite enhancement of the BUILD_DOCUMENT_BODY method, that copies over the delivered method and then adds code to populate the values for the context nodes added above. In this particular instance we created a slider bar that displayed whenever a list box was the UI that was supposed to be created, based on the functional configuration of the appraisal document. The slider itself is a ThresholdSlider UI element that is linked to a quantity scale defined in the back end. You can use any quantity scale; the only requirement is that the intervals are in whole number increments. If you are not using whole numbers, then a conversion in the enhancement is required to translate the partial number scale value to a whole number threshold value (e.g., .25 = 1, .5 = 2, .75 = 3, and 1 = 4). The options for the colors available for the slider bars are shown in Figure 6. These color values are used in defining the threshold values for the slider. The threshold element is added to the ThresholdSlider element so that if there is an error in dynamically setting the other threshold values, there is a baseline setting in the slider. Figure 7 shows an example of the default values that can be used for the threshold. The Value property is set to 0 to indicate that any value between 0 and whatever the next highest threshold value is will be displayed in the goodvalue_dark color (Figure 6). The MultipleThreshold element allows you to dynamically set ranges for the thresholds. To achieve this, you need to bind a few of the properties of the MultipleThreshold to the context values that were added earlier. The color is bound to ZT_VALUE_SLIDER.COLOR, the dataSource is bound to ZT_VALUE_SLIDER, the showMarker is bound to ZT_VALUE_SLIDER.SHOW_MARKER, the tooltip is bound to ZT_VALUE_SLIDER.TOOLTIP, and the value is bound to ZT_VALUE_SLIDER.VALUE (Figure 8). Additionally, a tooltip is added for each threshold so that users get a pop-up box when they hover over the slider, which dynamically changes based on the value selected. Example code to populate the threshold values and the tooltip is shown in Figure 9. (Click here for a downloadable version of the code: Download of code in Figure 9.) Now let’s move on to customizing the ribbon.  

Creating a Custom Ribbon

  You can also integrate the custom slider bar functionality described above with other features such as a custom ribbon. Using a red ribbon feature to display the description of every criteria group in the appraisal document allows the different sections of the document to really stand out. The company had existing red ribbons on its portal. Integrating the same structure seamlessly into the display of their performance appraisals allowed the performance management functionality to blend in well and enhanced overall usability and user experience (Figure 10). Functionally this was accomplished by modifying the Web layout in the criteria group’s Description tab to point to an image file that was then displayed on the appraisal template. The image file contained the red ribbon image and an actual embedded description; for example, the image file for the SAFETY ribbon contained both the red ribbon image and also the actual text letters SAFETY (Figure 11). With a little bit of creativity, overall usability and user experience are greatly enhanced—it was our experience that users loved these additional features.