Skip to Content
Author's profile photo Former Member

CSS Tips & Tricks: Customizing Radio Buttons and Check Boxes in SAP BusinessObjects Design Studio – Part 2

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)

THEME COMPONENT IMAGE NAME
CLASS NAME

DS 1.4 & DS 1.5

Platinum

Radio-Button group Radio.png .sapUiRb > label
Check-box / Check Box Group Checkbox.png .sapUiCb> label

DS 1.4

Gold Reflection

Radio-button group Radiobutton.png .sapUiRb > label
Check-box / Check- Box Group Checkbox.png .sapUiCb> label

DS 1.4 & DS 1.5

Blue Crystal

Radio-button group Radiobutton.png .sapUiRb > label
Check-box / Check- Box Group Checkbox.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.5 THEME COMPONENT STATE IMAGE NAME CLASS NAME

DS 1.4

Mobile Black

Radio-button Group Selected Radiobutton_sel.png .sapUiRbSel> label
Unselected Radiobutton.png .sapUiRb > label
Check-box / Check-Box Group Selected Checkbox_chk.png .sapUiCbChk> label
Unselected Checkbox.png .sapUiCb> label

DS 1.4 &

DS 1.5

Mobile

Radio-button Group

Selected iPad_Radiobutton_selected.png .sapUiRbSel.sapUiRb > label
Unselected iPad_Radiobutton.png .sapUiRb > label
Check-box / Check-Box Group Selected iPad_Checkbox_selected. png .sapUiCbChk.sapUiCb> label
Unselected iPad_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.!!!

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Great!! Thank you!!

      Author's profile photo Vijai Muniraj
      Vijai Muniraj

      Hi Ganesh,

      Your post is really great one!!!. But in my case, i wanted to reduce the button size as per the requirement though its only working for deselected values(refer pic1). Please see the second pic and let me know if i missed anything on css coding. appreciates your response. thanks

      scn1.PNGscn.PNG

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Vijai,

      Sorry for the late response.

      Button ( markers) are just images as i mentioned above in blog, first you need to resize the image with some image converter to 18px and use it as URI.

      Actually you haven't missed anything, you did great. But, please remember to convert the images also.

      Please find my below script with image size converted to 18 pixels and assign "small" as CSS Class to radio-button.

      Note : Added "small" as a custom class to show you can even use radio buttons with different size and formats in a single dashboard. ( please remove ".small" in front of class if you feel confusing and also don't assign any class to radio button).

      Script: -

      .small .sapUiRb > label

      {

      height:18px !important;

      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAIAAADZrBkAAAAACXBIWXMAAAsSAAALEgHS3X78AAAB6ElEQVQoz42TS8uqUBSG197brZWKdDGKSMEgkAYNgwxn/epm0WXcNEilCCOpEIvchnkGcjrnuxA94/WwXhbrRVmWAQAAMMaCIJjNZpfLhVKKMQaA5/P5eDzK5fJoNFJVVRCEfBi9tMlkstlsqtVqvV6XZblQKABAHMdRFB2Px9Pp1Ol0xuPxF206na7X626322g0JEnief61LUmS6/V6OBzyAdu2AYBjjE2n0+12a1lWpVIplUo8zxNCEEIAkGVZmqayLCuKoqrqYrFgjNm2zQVB4DhOv9+v1+u5gzHOnRxCCPeXXq+3Wq1M0ySDwaBcLpumqSjKTwcAEEIIIYwxIYTn+SiKHMfBYRjqup47r2zfQAjljqIouq6HYYgFQajVaq+LvwFjTCmt1WqCIGBKqSRJhBD4AEKIKIqUUpwH+DXbr2k5jkMI4TRNGWOfa4yxNE1xHMdhGL5+5T1ZloVhGMcxlmXZdd0kST7RkiTxPE+WZWxZlud5vu9/ovm+77quZVlYVVVN05bL5f1+f+/c7/flcqlpmqqq/155v98Ph8Nms8nz/M9svu8vFotWq5W/8pfi7HY7wzAMw6hUKsViMd9wPp8dx3Ecp91ufy/Oq6bz+fx2uxUKBUopADwejziORVG0LOv/mv4Bi/ntZvvFIWYAAAAASUVORK5CYII=);

      }

      .small .sapUiRbSel.sapUiRb > label

      {

      height:18px !important;

      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAIAAADZrBkAAAAACXBIWXMAAAsSAAALEgHS3X78AAAC20lEQVQoz32TQU/jVhSF7/N7z46f7RjHdhSK4pQwQkpZsGREUKSMhmVHXfV3VJr+gW66Tf9Et93MkkWkCJIVQmxmgYrDxENhyEAwJo79HOd1EYl2hqpnfY7OvdL5kBACAAAgTdPxeHx4eDiZTCilkiQBwGKxyLLMsqy9vT3XdRVFWZrRU+zg4OD8/Ny27XK5bBhGoVAAgCRJoii6ubm5vb3d2NjY39//Itbr9c7OzjY3NyuViq7rsiw/tXHOHx8fr6+vl4ZWqwUAJE3TXq83Go2azWapVGKMcSFd3qf3swwAVlS6tmIahmGapuu6/X4/TdNWq0XG47Hv+9vb2+VymTH210P2W/fPbhAPozkArBukXWU/tde/KRYJIVtbW6enp41GA+/s7FiW1Wg0TNO8iuY///H+94/iE9UzzchUbSzo8afkw4eb3Q3HNgqyLEdR5Pu+FIZhrVYzTZMLqdP1333GedEESgEhQAgozYvmu8+40/W5kEzTrNVqYRhKiqI4jkMpDSZJdxTnKoNnylXWHcXBJKGUOo6jKIpEKdV1HWN8H/NhNAdCnseAkGE0v485xljTNEqphBDCGCO0vAnB/wohRAhBCEl5nqdpihBaYfTbIob5/D/s8/m6QSwmI4TSNM3zXEqSJAxDIYRns1dVDc/i5yk8i195mmczIUQYhkmSSIZhDIdDzrmukLevX7xxFvghhCwDIUAIyDL8EL5xFm9fv9AVwjm/uLgwDAN3Op3j42PXdS3LWmH0Zb00Dx+m4eM0jOhsuilnP9bVX75v1GwGAEEQnJyctNtt4rqu53mDwaBSqaiqWrPZrz98N7qNJzEHAIvJns10hQDAbDYbDAae57mu+8+ULy8vd3d3V1dXZVn+6jfO+dXVVb/fX1tbW075C3CCIKjX6/V6vVQqqaq6bLi7u/N93/f9arX6NThPmB4dHU2n00KhQCkFgCzLkiTRNK3ZbP4b078BVBdeZXZ+REsAAAAASUVORK5CYII=) !important;

      }


      Thanks,

      Ganesh

      Author's profile photo Vijai Muniraj
      Vijai Muniraj

      Thank you very much ganesh. Your help was very much appreciated. Its working now 🙂