In my previous blog, we discussed how Radio buttons and Check boxes are styled in SAP BusinessObjects Design Studio and how to identify the images used by these components in SAP BusinessObjects Design Studio.

In this blog, we will see how CSS works for these components in SAP BusinessObjects Design Studio. We will also learn how to customize the color of these images and how to use these custom images in the components.

Understanding how CSS works in these components

SAP BusinessObjects Design Studio uses different images to differentiate and display the Check box / Radio Button selection. When a user selects an option in the check box or the radio button, the image used by the component changes to the image corresponding to the selected option. Depending on the theme used for your application, either the image will be replaced by another or the position of the image will be changed.

1. On themes such as Platinum, Gold Reflection or Blue Crystal, a single image is used and based on the user selection; the background-position property is used to move this image around to indicate selection & deselection – similar to CSS image Sprites.

Radio button sprite image used for Platinum theme

2. On themes such as Mobile & Mobile Black, two separate images are used, one of which is to indicate ‘selected’ and another is to indicate ‘deselected’. In this case, the image itself will be changed based on the user selection.

Selected Radio button image in Mobile theme

Deselected Radio button image in Mobile theme

In the Mobile theme, when a Radio Button is disabled, the opacity of image used is reduced by 50% in CSS.

Refer to Table 1 for the components which use a single image sprite to denote selected/unselected states on the components.

Note: CSS Class name may varies between DS 1.4 and DS 1.5 for some themes.

Table 1: Image and CSS Class for components using Single image

Refer to Table 2 for the components which use two images and their corresponding CSS Class names.

Table 2: Image name and CSS Class names for components using two separate images

Note: High Contrast black theme uses no image, so the above procedure does not apply for Radio button and Check box components on this theme.

Customizing the color of the images and using them in the components

1. Edit the Images as per your requirements

Use image editing tools of your choice or the websites mentioned in the previous blog to edit the colour of these images as per your requirements. There are a couple of points that you need to look out for:

• Make sure that the image transparency is not affected – Backgrounds that are transparent may tend to fill in black or white automatically on certain image editors or file formats.
• Make sure that the dimensions of the images are un-altered after editing.

2. Convert the image to URI

Once you have the images edited, the next step would be to convert them to a URI so that you can reference them within a custom CSS file.

Use Online image URI Converters like http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/ to convert your edited images to URIs.

• Click Browse to choose the image which needs to be converted
• Once the image is chosen, click convert image to convert the image to URI

Online URI Converter

• Copy the content of “As raw data” section. It contains the URI of your converted image.

URI of Image converted

You can also refer to this blog to learn how effectively URIs can be used.

3. Custom CSS File

Now that we have the edited images converted to URIs, our objective is to override the default images used by these components (in this case, the Radio Button Group). To ensure that the components now use the modified images, we assign the respective image URIs within the CSS classes used by these components in a custom CSS file and upload it to SAP BusinessObjects Design Studio.

Since, in our example, I have used the “Mobile” theme, I will only need to modify the following CSS Class with our custom images:

.sapUiRb > label
{
Background-image: url (< Insert deselected indication Image URI here >);
}
.sapUiRbSel.sapUiRb > label
{
Background-image: url (< Insert selected indication Image URI here >);
}

In my application, I have tried to change the blue Radio Button to red. I inserted the respective Image URIs for deselection and selection indication in the above CSS code. For your reference, I have also shared the CSS file that I have used: Click here to download the CSS file. After uploading this custom CSS file to my SAP BusinessObjects Design Studio application, the customized radio button appeared as in the figure below.

Customized Radio Button by CSS

Please note that when you use a theme with single image, you may have to modify just one class to ensure that the component’s styling changes. Refer to Tables 1 and 2 for CSS classes.

The general structure of the CSS files is as shown below:

a. Format of CSS file if components use one image

b. Format of  CSS file if the components use two images

To learn how to modify a component using CSS, you can refer to this link – http://scn.sap.com/docs/DOC-41398.

Once the CSS file is uploaded, the components will be modified as per the CSS with the modified image and we are done!

Have fun customizing these markers in SAP BusinessObjects Design Studio.!!!