Have you ever wondered why Cascading Style Sheets (CSS) when applied to SAP BusinessObjects Design Studio have no effect on Radio Buttons and Check Boxes? Read this blog to know why and how you can customize these components in SAP BusinessObjects Design Studio.
How Radio Buttons & Check boxes are styled
In SAP BusinessObjects Design Studio, Cascading Style Sheets (CSS) can be used to change the colors, look and appeal of any components with ease. However, this option is not always viable for a few select components such as the Radio Button Group, Check Box and the Check Box group.
SAP BusinessObjects Design Studio uses images for these components in order to appear as selected or unselected. Therefore, any kind of CSS customization to these components would involve modifying/changing the default images used by SAP BusinessObjects Design Studio.
The images used by each of these components vary according to the theme used by the SAP BusinessObjects Design Studio application. For instance, the images used by a radio button when in the “platinum” theme, will be different from the images used by the radio button when in the “Mobile” theme.
Tip: To see which theme your application is in, look for the “Theme” property under the application properties.
What you need to know before you continue reading
In the remainder of this blog, I will explain how to customize Radio button groups, Check Box and Check Box group by altering images used by these components using CSS.
In order to do this, there are a few pre-requisites to be met:
- Basic CSS knowledge
- Access to and basic knowledge of Image Editing tools (such as Adobe Photoshop, online editing websites like lunapic.com if you merely want to change the colors in images)
Identifying the images used by the components
To identify the styling of the Radio Button component in your application, follow the step-by-step procedure below:
It is important to note that all the steps through to step 4 are common regardless of the component you are using.
1. Insert the “Radio Button Group” component in your SAP BusinessObjects Design Studio. Now we will have to identify the classes and images used by the Radio Button Group.
2. Change the theme of your SAP BusinessObjects Design Studio application as required. In my example, I am using the “Mobile” theme. To change your theme, follow the steps below:
- Click on application name in the OUTLINE pane
- Navigate to “Theme” in Properties pane
- Change the theme to whichever theme you would like to work on.
3. Execute the Application locally (CTRL + F11 inside SAP BusinessObjects Design Studio) using Internet Explorer. Once the application is executed, Press F12 to open the Developer Tools.
The advantages of using Internet Explorer in this case are
- IE’s Developer Tools allows users to easily explore the required CSS Class
- IE stored temporary caches of the images on a web page – It becomes extremely easy for users to locate the required images for the Radio Button Groups and Check Boxes.
Now that you have the Developer Tools pane open, follow the steps given below :
a) Click on the “Select Element” option (CTRL + B) to choose the required item in component
b) Click on any of the options on the Radio button to highlight it
c) Identify the class name for the Radio Button in the DEVELOPER Panel
d) Note down the Class name and the image name used in the CSS. In this case, the image name is “iPad_radiobutton_selected”.
4. As mentioned earlier, IE caches images that it views on pages inside the Temporary Internet Files folder (which is a hidden folder). To make this folder visible, Go to “Computer” and Click Tools – > Folder Options -> View Tab (available in the window appear on click of Folder Options) and change to “Show hidden files, folders and drives” and click OK.
The above identified image file will be available as a Temporary file in the following location:
C:\Users\<Your Windows Username>\AppData\Local\Microsoft\Windows\
5. In the Search Box (highlighted below), search for the image name that you have noted down.
Locate the image name we were looking for in the example “iPad_radiobutton_selected” and copy the image file to another convenient location such as your desktop or to a specified folder. This image can be changed per your requirements using one of the Image editing tools.
We have now discussed about navigating and finding that radio button image to customize the image as required using Image editing tools. In Part II of this blog, I will explain about how CSS works in these components in SAP BusinessObjects Design Studio and how to customize these images on the components in SAP BusinessObjects Design Studio.
Meanwhile, have your image customized and ready!
- SAP Managed Tags:
