Oracle Knowledge Street

In this post we will see, Different ways to hide save button using JavaScript/CSS in Oracle APEX Interactive Grid. Method 1:   Using any one of  the below  JavaScript code  in the Execute When Page Loads section of the page. apex.region( "YOUR_IG_STATIC_ID" ). call ( "getActions" ). hide ( "save" ); (OR) $("# YOUR_IG_STATIC_ID .a-Button.a-Toolbar-item.js-actionButton.a-Button--hot[data-action='save']").hide(); Method 2:   Using the below  JavaScript code in  the JavaScript Initialization Code  section in the Interactive Grid. function (config) {     var $ = apex.jQuery,         toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),         toolbarGroup = toolbarData.toolbarFind( "actions2" );     //Hide save button     toolbarGroup.co...

This blog explains how to disable update for a particular column in Interactive Grid using the  Read Only property of a column .  Should we use JavaScript to achieve this? The answer is, NO!!!  Follow the below steps to achieve this 1) Create an Interactive Grid 2) Select the column that has to be made read only when trying to update.  In this example, the  ROLE Column has is made read only when trying to update 3) Scroll down to the Read Only property of the column and do the changes as shown in the below screenshot. Note: It is not mandatory to use 1=1. Any expression can be written. The column will be disabled if the given expression is satisfied. Its is also not mandatory to use Type -> Expression. Other Types can also be used based in the requirement. 4) Save and Run the page. Click here for DEMO Happy CODING!!! Thank you :)

In this blog I will be explaining, how to display an Inline Popup as a callout. Follow the below steps to achieve this: 1) Create a Region   2) Create a Button in the region, provide a static ID to the button ( Advanced -> Static ID)         3) Create another Region   and select the below properties for the region. Layout -> Position -> Inline Dialogs (Optional) Appearance -> Template -> Inline Popup 4) Click on the Template Options (Appearance -> Template Options) of the region. The below mentioned points are mandatory:  Check the Display Popup Callout checkbox.  Choose a Callout Position f rom the list . All the other options can be chosen based on the requirement. 5) Paste the below piece of code in the Advanced -> Custom Attributes section of the region.         data-parent-element="#YOUR_STATIC_ID" In the above piece of code, replace YOUR_STATIC_ID with the static ID that has been provided ...

This blogs explains, how to show page items as legends in Oracle APEX.  Follow the below steps to create a legend 1) Create an Item. 2) Change the Item Type to Display Only. 3) Provide a value to the item ( Source -> Type -> Select any type as per the requirement).  4) Paste the below code in the Label  section. <svg class="legend-svg"><rect class="legend-rect legend-1"></rect></svg> 5) Paste the below code in the CSS - > Inline section of the page. .legend-svg { height: 30px; width: 40px; } .legend-rect { stroke-width: 3; stroke: rgb(0,0,0); height: 20px; width: 40px; } .legend-1 { fill:#E38211; /*color of the legend*/ } Note: The above CSS ,  Layout and Appearance  of the item can be modified as per the requirement.  6) Save and Run the page Please see the How to..   section   in the   demo for better understanding. Reference: https://www.w3schools.com/graphics/svg_...

This blog explains, how to display column name from query as IG column heading. Let me explain this with a use case: Developer 1: The region source of my IG is Function Body returning SQL query. I want to display the column alias name given in my SQL queries as the IG column heading. Can this be achieved? Developer 2: Ofcourse, yes!  You can also display the column name/alias even if the region source is SQL Query. Let's Start.... 1) Create an IG in the page. Select the region source as SQL query. Paste the below code. SELECT 'Akil' as "Employee_Name", 'Oracle' as "Employee Department", 'India' as "Country" FROM dual UNION SELECT 'John' as "Employee_Name", 'JAVA' as "Employee Department", 'Canada' as "Country" FROM dual UNION SELECT 'Max' as "Employee_Name", 'IOT' as "Employee Departme...

Why should I change the Column Width of a Popup LOV when I have an option to stretch it to view the whole content? Let me explain this with a use case: Customer: I want to display a three columns in my Popup LOV and the first column must be fully visible. Akil: There is an option to stretch the column to view its whole content. Customer: No, I want it to be displayed fully. I don't want to stretch the column manually. Akil: Ok, I can make this possible! Let's Start.... 1) Create an Item in the page (In this example: P16_EMP_NAME). 2) Create the list of values that will display the multiple columns in the Popup LOV. I created four columns in my Popup LOV. Refer below screenshot. To know how to display multiple columns in a Popup LOV, see  Karkuvel Raja's Post   3) Paste the below JavaScript code in the J avaScript Initialization Code section of the Popup LOV item (P16_EMP_NAME). function(options) { var col, columns = options.columns; col = col...