Every application all over world is in fond of key controlled or having shortcuts to report view. I have implemented this with some Javascript. Step:1: By Default , report should not be visible , So we have added attribute to region as: Region Attributes : style= “display:none;” Step: 2: Create a new html region and following javascript code for key recognition and report view : [Shortcut Key: Ctrl+S] <html> …
Read MoreText with Auto Complete is most common requirement and can be done normally for item level. But coming to tabular form it seems to be tedious due to dynamic id’s and queries. Also Cascading process inclusion adds a valuable requirement. Following are steps involved Cascading – Text with Auto-complete: Step : 1: For Cascading I have to get source id and value, so I have used dynamic action, Event : Click Selection Type : JQuery Selector …
Read MoreUser Hooks There were many times we need to put some extra logic before or after happening of some business event. In Such cases, we use user hook API. It…
Read MoreeAM – Asset Number Conversion Asset Number: An asset number uniquely identifies each…
Read MoreAPEX can create “Percentage Bars” within a report. This can be achieved using HTML Code in your Report SQL Query. Steps: 1- Create your report: Create an Interactive or Classic Report using SQL query : SELECT CASE WHEN COLUMN <= 30 THEN ‘<div class=”a-Report-percentChart” style=”background-color:#000000;width:100%;”><div class=”a-Report-percentChart-fill” style=”width:’ || COLUMN || ‘% ; background-color: 330099;”></div><span class=”u-VisuallyHidden”>’ || COLUMN || ‘</span></div>’ || COLUMN || ‘%’ WHEN COLUMN BETWEEN 30 AND 50 THEN ‘<div class=”a-Report-percentChart” style=”background-color:#000000;width:100%;”><div class=”a-Report-percentChart-fill” style=”width:’ || COLUMN || ‘% ; background-color:CC0000;”></div><span class=”u-VisuallyHidden”>’ || COLUMN || ‘</span></div>’ || COLUMN || ‘%’ WHEN COLUMN BETWEEN 55 AND 70 THEN ‘<div class=”a-Report-percentChart” style=”background-color:#000000;width:100%;”><div class=”a-Report-percentChart-fill” style=”width:’ || COLUMN || ‘% ; background-color:#99eb47;”></div><span class=”u-VisuallyHidden”>’ || COLUMN || ‘</span></div>’ || COLUMN || ‘%’ END AS “Progress bar”…
Read MoreIn ADF, Most common used component is table. Previously, I searched for so many blogs, I didn’t get any skinning related stuff to fulfill my requirement then I realized and explored myself to learnt. Finally i could accomplish skinning for table component. I hope this post should definitely useful for your requirement. The below image is how the table look and feel without applying any custom skinning. The below image is how the table look and feel after skinning. The below are the steps to achieve above look and feel . It’s not straight forward approach, We need to apply skinning for each section. af|table { background: none; border: 1px solid #A65B1A; } 1. ColumnHeader: af|table af|column::column-header-cell { height:35px;color:#ffffff; text-align: center;font-size: 12px;font-family:’OpenSans-Bold’; font-weight: bold;background-image: none;background-color: #A65B1A;vertical-align: middle;border-left: 1px solid #BF691E;} 2. Data row: af|table::data-table-VH-lines af|column::data-cell { background-color:#fff;color: #7F4614;font-size:12px;font-family:’OpenSans-Regular’;height:30px;vertical-align: middle;text-align: left;} 3.Data row- Alternative: For implementing different css for alternative rows,we need to be change table rowBandingIntervel property to 1. af|table::data-table-VH-lines af|column::banded-data-cell{ background-color:#F0E5CC; color: #7F4614; font-size:12px; font-family:’OpenSans-Regular’; height:30px; vertical-align: middle; text-align: left; } 4.Table default row selection:Some of the requirements like want to show row selection color for the default selected row.At the time of page load,The default row should selected, It depends on row index value.Normally, First row would be selected.af|table::data-row:selected af|column::data-cell{ background-color: #eeaa00;color: #ffffff; }af|table::data-row:selected af|column::banded-data-cell{ background-color: #eeaa00; color: #ffffff; } 5.Table row selection:The row color will be changed based in your row selection.These are the following selectors for that.af|table::data-row:selected:focused af|column::data-cell{ background-color: #eeaa00; color: #ffffff; }af|table::data-row:selected:focused af|column::banded-data-cell {background-color: #eeaa00; color: #ffffff; } 6.Table row hover:af|table::data-row:hover af|column::data-cell{ background-color: #9bafc8; color: #ffffff; }af|table::data-row:hover af|column::banded-data-cell { background-color: #9bafc8;color: #ffffff; } These all are the common requirements for table skinning.
Read MoreSome times we have a requirement like have to write some css changes based on id selector. The ADF components will rendered with some mixed special characters. For this case if you want to find the id, We need do add ” before to the special character. Example:ADF Actual Rendered ID:pt1:r1:0:pgl13JQuery ID selector: $(“#pt1:r1:0:pgl13”);———-It doesn’t work$(“#pt1:r1:0:pgl13”)——-It works.
Read MoreDrop down menus are a common requirement for web applications, In html we can create using elements like ul, li, div e.t.c. In ADF, We can achieve using menuBar and menu components. The below image is how the dropdown look and feel without applying any custom skinning. The below image is how the dropdown look and feel after applying skinning. These are the component structure in an source page. The below are the skinning selectors for getting above look and feel. af|menu::bar-item-open-icon-style { background-image: url(“/images/select-arrow.png”); height: 16px; width: 16px; padding-top: 2px; } af|menu::bar-item-text { color: #666; font-size: 14px; font-family: openSans-Regular; } af|menu::bar-item-text:hover { color: #eeaa00; font-size: 14px; font-family: openSans-Regular; } af|menu::bar-item { padding: 0px; height: 25px; } af|menu::bar-item:highlighted { background-image: none; background: transparent; border: none; border-bottom: 2px solid #c00;…
Read MoreA responsibility is an important configuration which allows the user to navigate to the various menus and form functions within that responsibility.Oracle API is used to load responsibility from one…
Read MoreThe custom lookup parameters can be passed to the below API’s to insert data into Oracle standard tables fnd_lookup_values and fnd_lookup_types *fnd_lookup_types_pkg.insert_row *fnd_lookup_values_pkg.insert_row Sample script with description to…
Read More