How To Create A Save Button In Javascript

IG Hack - #3, Different ways to Hide Save Button Using JavaScript/CSS in Oracle APEX Interactive Grid

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.controls.splice(toolbarGroup.controls.indexOf("save"),1);
                          config.toolbarData = toolbarData;
                        return config;
                      }

Method 3:

Using the below CSS in theCSS > Inline section of the page.

                                                            #YOUR_IG_STATIC_ID                        .a-Button.a-Toolbar-item.js-actionButton.a-Button--hot[data-action="save"] {      display: none !important; }

Note: In all the above codes Replace YOUR_IG_STATIC_ID with the Static ID of your Interactive Grid.

Happy CODING!!!

Thank You :)

Caps Lock On/Off indicator in Oracle APEX

In this post I will be explaining how to show Caps Lock On/Off indicator in Oracle APEX. Follow the below steps to achieve this: 1) Create a Page Item ( Type of the item is Password ). Item Name: P33_PASSWORD (Use the item name in your page instead of this) 2) Paste the below CSS code in the Inline Section #caps-lock-div{ color:rgb(250, 76, 76); font-size: 1.3rem; line-height: 2rem; } 3) Paste the below JavaScript code in the Function and Global Variable Declaration section var password = document.getElementById("P33_PASSWORD"); var $password = $("#P33_PASSWORD").parent().parent(); var element = '<span id="caps-lock-div" class="fa fa-warning"> CapsLock key is on!</span>'; var capsLockCheck = function (event) { let $element = $('#caps-lock-div'); if (event.getModifierState("CapsLock")) { if($element.length == 0){ $password.append(elemen

Change the Column Width of a POPUP LOV Item In Oracle APEX

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 = columns.NAME; /

Display Inline Popup as Callout in Oracle APEX

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 for the button. The Popup Callout is NOT restricte