Using Highlighter Styles

the term grid highlighter has been deprecated because it does not adequately describe newly added functions about highlighter styles docid\ ealzqhhx4c 6sp xmvrfabout default highlighter styles docid\ ealzqhhx4c 6sp xmvrfcreating a highlighter style docid\ ealzqhhx4c 6sp xmvrfdeleting a highlighter style docid\ ealzqhhx4c 6sp xmvrfviewing highlighter style usage statistics docid\ ealzqhhx4c 6sp xmvrfexample using the selectorformat property to change a style on hover docid\ ealzqhhx4c 6sp xmvrf about highlighter styles you can create custom styles for lists, forms, and controls you can use these styles to highlight changes to individual records as they are listed in the list when certain conditions apply, or to emphasize certain fields within a form for example, you can have all unlicensed products appear in a list in a bold font with a red background after creating a style, you apply it to a control on a form or list styles include text font, size, style, alignment, and color, as well as backgrounds and borders these styles can be applied to the lists, controls, fields, and labels used on forms see creating a form docid\ jylkxqcbbnayk66grc2ty see the styles under creating a highlighter style docid\ ealzqhhx4c 6sp xmvrf the styles created in the highlighter styles workspace follow standard css guidelines see http //www w3schools com/css/ http //www w3schools com/css/default asp and http //www tizag com/csst/index php http //www tizag com/csst/index php for more information on css syntax about default highlighter styles certain styles are included with by default in older versions (before release 2014 3), you could not modify these styles these older styles will be deprecated in a future release going forward, you can create your own styles as needed creating a highlighter style from the configuration console, click build > user interface styles > highlighter styles to open the highlighter styles workspace the application displays a list of highlighter styles click add new the application displays the new style page under the dynamic style definition pane, the following default fields appear field description name a unique name that only contains alphanumeric characters spaces and special characters are not permitted description the purpose of the highlighter style drag and drop items from the style properties pane onto the dynamic style definition pane, then enter standard css syntax to define each style a highlighter style must have at least one style property any style property that you add must have a value the application lists suggested values in the drop down lists to remove an item, drag and drop it from the dynamic style definition pane back to the style properties pane you can use standard css syntax to define each style property description background color the list cell background specify a color in any format, such as purple , rgb(255,120,0) , or #533b75 you can also select a color from the color picker in the drop down list border color the color of the field border border style the type of border see http //www tizag com/csst/border php http //www tizag com/csst/border php for examples of each border style none hidden dotted dashed solid double groove ridge inset outset border width thickness of the border in pixels color the color of the text font family the text font family font size the text font size enter the font size or choose from the drop down list font style the text font style, either normal or italic font weight the text font weight, such as bold or normal or a number value note 400 is the same as normal and 700 is the same as bold padding the amount of padding around the field enter the values for the top, right, bottom, and left sides separated by spaces for example, if you enter 2px 4px 6px 8px , the result is top = 2px; right = 4px; bottom = 6 px; and left = 8px text align how the text is aligned choose from the drop down list left right center justify background image the location and name of the image file url(' / /images/uploaded/common/icon incident png') background size display size of the background image as a percent of the original background repeat select the no repeat option so that the image does not get repeated background position specifies the background position if you do not enter a value, the image is positioned at the top left corner left top left center left bottom center top center center center bottom right top right center right bottom selectorformat use to override the properties set on the form define a specific label style and use the selectorformat to override default settings such as padding for example padding default settings 5px 5px 5px 5px control the top, right, bottom, left margins in that order a visual representation allows you to see how your changes will affect the style such as changing the settings to 10px, 0px, 10px, 20px selectorformat allows you to apply the change to the style property the format is , input text area where references the selected style as a placeholder for the style name for more information see example using the selectorformat property to change a style on hover docid\ ealzqhhx4c 6sp xmvrf see also creating a form docid\ jylkxqcbbnayk66grc2ty height cell height you can enter a value as a percentage (such as 100%) or by size (such as 200px) the application displays the results of your custom highlighter style in the preview section click save the application displays the highlighter style on the page you might need to click the refresh icon to see the style after creating the highlighter style, you can apply it to lists, controls, fields, and labels on a form, by choosing the style from a drop down list see creating a form docid\ jylkxqcbbnayk66grc2ty deleting a highlighter style you can delete any highlighter style except those with a lock icon from the configuration console, click build > user interface styles > highlighter styles to open the highlighter styles workspace the application displays the list of highlighter styles in the list of highlighter styles, find the style to delete and click the delete icon in the delete dialog box, click yes if you delete a style that was applied to a form, the name of the style remains selected but the properties of the style disappear and the form returns to its default appearance viewing highlighter style usage statistics you can see the business objects to which list highlighter styles have been applied from the configuration console, click build > user interface styles > highlighter styles to open the highlighter styles workspace click get usage statistics a list of the highlighter styles and where they are being used appears if a highlighter style does not have a description, it is not being used example using the selectorformat property to change a style on hover about using the selectorformat property docid\ ealzqhhx4c 6sp xmvrfcreating a style docid\ ealzqhhx4c 6sp xmvrfapplying the style format to a form docid\ ealzqhhx4c 6sp xmvrfapplying the style format to a single control docid\ ealzqhhx4c 6sp xmvrf about using the selectorformat property the selectorformat property allows you assign a specific attribute to an existing or a newly created highlighter style you can apply styles to forms or to specific controls so that for example, a link expands in size or change color when a user hovers over the label the following example walks you through creating a style that changes color when the user hovers on the label as you move through the example, you see the changes you make on the preview pane then it describes how to apply the style to a form or to a single control creating a style from the configuration console, click build > user interface styles > highlighter styles to open the highlighter styles workspace click add new\ and create a new style called pinkhover you must assign a name to a new style it cannot contain spaces, it must begin with an alpha character and can only contain alphanumeric characters the application notifies you if you make a mistake from the style properties pane, select and drag the following properties to the dynamic style definition pane and make the changes as seen in the following table the changes you make to these properties are what you see when hovering on a label style property define value as comment background color #ffff00 select a color for the background in this case, select yellow color #ff6bdc select a pink color for the text font size medium select from the choices in the drop down list selectorformat \ hover enter the values as shown to change the style on 'hover' click save the preview pane example should look similar to the following preview pane applying the style format to a form from the configuration console, click build > business objects to open the business objects workspace open the service request business object click forms in the toolbar the application displays a list of forms for that business object click servicereq defaultform (servicereq defaultform) to open it in the right pane, click on the form to select it you should see something similar to the following form styling pane click form styling on the toolbar to open the form properties dialog box form properties dialog box change the control properties below by selecting choices available from the drop down list item change to comment label style pinkhover the style that you created above control style greenlabel select the style shown or any other style to apply the changes that you make apply to the entire form for information on how to edit a single control, see applying the style format to a single control docid\ ealzqhhx4c 6sp xmvrf click save , then click save on the toolbar to save the changes to the business object form return to the service desk console open a service request to verify that the changes that you made were applied you may need to refresh the page from an existing service request, click the details tab note that the text on the form is green hover over a label and note that the label changes to pink text on a yellow background verifying changes applying the style format to a single control from the configuration console, click build > business objects to open the business objects workspace open the service request business object click forms in the toolbar the application displays a list of forms for that business object select servicereq defaultform (servicereq defaultform) to open it locate a control on the form such as fulfillment target from the control properties tab on the left pane, locate the label style rule and change the expression to $("pinkhover") save the form verify your changes to the form by hovering over the control that you applied the format to in this case, hover over fulfillment comments and note that the format changes you can also check from the application by following the steps in applying the style format to a form docid\ ealzqhhx4c 6sp xmvrf