Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
Former Member

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 themeRadio 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 themeSelected Radio button image in Mobile theme

Deselected Radio button image in Mobile themeDeselected 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.

Design Studio

(DS 1.4 / DS 1.5)

THEMECOMPONENTIMAGE NAME
CLASS NAME

DS 1.4 & DS 1.5

Platinum

Radio-Button groupRadio.png.sapUiRb > label
Check-box / Check Box GroupCheckbox.png.sapUiCb> label

DS 1.4

Gold Reflection

Radio-button groupRadiobutton.png.sapUiRb > label
Check-box / Check- Box GroupCheckbox.png.sapUiCb> label

DS 1.4 & DS 1.5

Blue Crystal

Radio-button groupRadiobutton.png.sapUiRb > label
Check-box / Check- Box GroupCheckbox.png.sapUiCb> label

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.

Design Studio (DS1.4 / DS1.5THEMECOMPONENTSTATEIMAGE NAMECLASS NAME

DS 1.4

Mobile Black

Radio-button GroupSelectedRadiobutton_sel.png.sapUiRbSel> label
UnselectedRadiobutton.png.sapUiRb > label
Check-box / Check-Box GroupSelectedCheckbox_chk.png.sapUiCbChk> label
UnselectedCheckbox.png.sapUiCb> label

DS 1.4 &

DS 1.5

Mobile

Radio-button Group

SelectediPad_Radiobutton_selected.png.sapUiRbSel.sapUiRb > label
UnselectediPad_Radiobutton.png.sapUiRb > label
Check-box / Check-Box GroupSelectediPad_Checkbox_selected. png.sapUiCbChk.sapUiCb> label
UnselectediPad_Checkbox.png.sapUiCb> label

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 ConverterOnline URI Converter

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

URI of the Image converted

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

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

Format of CSS if Components using one image

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

Format of CSS if Components using 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.!!!

4 Comments
Labels in this area