Skip to main content

Oracle APEX Stylish Radio Buttons

Do you know you can convert your radio buttons into something stylish and fancy almost declaratively in Oracle APEX? If you are not aware about this, then you may find this blog post useful. 

Oracle APEX Stylish Radio Buttons

Pill Buttons

You can easily convert radio buttons into pill buttons using "Template Options". Select Radio button item, and in item properties, go to  "Appearance > Template Options > Advanced". Look for option "Item Group Display" and choose the option "Display as Pill Button". That's it. You radio buttons will be converted as cool "Pill" buttons. 

Radio Buttons Display as Pill Buttons

Display Radio Buttons as Icons

You can display icons instead of label text. For this, all you need to do is
  • In item LOV, write "icon html" as "Display Value". e.g. icon html code
     <span aria-hidden="true" class="fa fa-emoji-big-eyes-smile fa-3x"></span>
  • In item properties, set "Escape special characters" as "Off"
That's it. With this, icons will be displayed for labels instead of text. However, you will still see the "radio buttons" before the icons. To hide these radio buttons, you can go to template options and you can choose "Item Group Display" as "Display as Pill Button". Then you would only see the icons.

You can make them further stylish with little CSS. For e.g. when user selects a icon, you can change icon color, so it will be easy to identify that it's been selected.
/* Page item name P18_RADIO_ICON, change selected icon color */
div#P18_RADIO_ICON input:checked + label span.fa-emoji-big-eyes-smile::before {
  color: #00b533;
}

Display Radio Buttons as Images

You can use similar technique to display images instead of text.
  • In item LOV, write "empty span" as "Display Value" with predefined classes. We can use these class names to specify image details etc. e.g. empty span code 
     <span class="ironman"></span>
  • In item properties, set "Escape special characters" as "Off"
Next, you need to write CSS to display images in those empty spans. Sample CSS code.
/* Page item name P18_RADIO_IMAGE  */
/* display empty span as block element and specify width, height etc. */
div#P18_RADIO_IMAGE label span{
  display:inline-block;
  width:90px;
  height:120px;
  background-size: contain;
  background-repeat: no-repeat;
}
/* specify background image */
div#P18_RADIO_IMAGE span.ironman {
  background-image: url(#APP_IMAGES#ironman.jpg);
}
/* add border for selected option */
div#P18_RADIO_IMAGE input:checked + label span{
  border: 1px solid #0076df;
}
Again, radio buttons will be displayed before images. To hide these radio buttons, you can go to template options and you can choose "Item Group Display" as "Display as Pill Button". Then you would only see images.

Here is the link to demo. Hope it is helpful.

Thank you.

Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

Interactive Grid - Conditional Enable/Disable

In this blogpost, I am going to discuss few approaches using which we can conditionally enable/disable Interactive Grid (IG) column(s) based on other column(s) values. Note:    There is a bug  30801170  in APEX 19.2/20.1 with respect to "enable/disable" dynamic actions for IG columns. Workaround for this bug is provided at the end of this blogpost . This bug has been fixed in APEX version 20.2. Client Side Only Conditions If conditions to enable/disable are simple, then we can check those conditions easily on the client side. For e.g. let's consider IG on EMP table with following SQL Query. SELECT EMPNO, ENAME, JOB, MGR, HIREDATE, SAL, COMM, DEPTNO FROM EMP Let's consider the requirement as - Enable "Commission" column only when JOB is equals to 'SALESMAN' and disable "Commission" column in all other cases. This can be done declaratively using dynamic actions (DA) DA "Enable/Disable Commission - 1" Create DA and give it a prope...
4 comments
Read more

Interactive Grid - Bulk Operation on Selected Rows

What's the Problem? Let's say you have an IG on employee table and you want to update selected employees commission based on user's input. Ideally, it should be very simple, where you can write UPDATE statement in page process and select IG region as "Editable Region" under "Execution Options" of the page process. But, when you select rows and submit page, you can see that, this process won't get executed! The reason is  Selection of 'Row Selector' check-boxes is not considered as row-change. Thus selected rows are not submitted to server. So, is there any work around?  Yes! Luckily there are lot of JavaScript (JS) APIs available to work with IG. If you are not already aware, you can refer "APEX IG Cookbook"  or  JavaScript API Reference documentation. If we continue with above Employee IG example, when user selects IG rows, enters "Commission %" and clicks on "Update Commission" button, then we can writ...
36 comments
Read more

Few tips on Gantt Charts

Oracle APEX offers several beautiful chart types which are based on Oracle JET Data Visualizations. Gantt Chart is one such beautiful and useful chart. However, when I have searched in Google for some help on Gantt Charts, there are not many blogs posts talking about it. So, I thought, I could write one with few basic tips which I have learned this year. I have used Gantt Chart to display employees calendar data and my targeted output was something like below. Pic-1 Looks simple, correct? However, it's little tricky to get there. Multiple Tasks Per Row: When I look at the output, first I thought, I will have to write a query which gives tasks data and employee data with 1 row per task. That is, if there are 10 tasks to be displayed, then there should be 10 rows in SQL query output. But, it's not correct. Instead, I should have 1 row for each task + 1 row for each employee (parent). So I need to write a query which will output data in below format. Pic-2 A...
25 comments
Read more