Posts

Showing posts from February, 2021

Build beautiful and interactive API documentation for ORDS

Image
In this blog post, I will show you how to quickly build beautiful and interactive API documentation for your Oracle APEX REST data sources using  swagger hub . Using APEX v23.1. I downloaded the  titanic data set  and loaded them into tables in my APEX instance, created some authorized restful services and published them using swagger hub. You can create a free account on swagger hub.   Check out my titanic swagger hub here ; Press Authorize. Username REST, password Glasgow123! I won't go through creating RESTful services and just show you the four I created that sit on top of the titanic data set; The GET is a very simple SQL query;      select * from TITANIC_DATA_SET_NEW A handy tip is to add comments, as there will appear on swagger hub, making your API self documenting; Once you have created your modules, press the Generate Swagger Doc button; This will generate an open API for you.  Copy the API and paste it into swagger hub This will generate the documentation; As mentioned b
Post a Comment
Read more

Oracle APEX Interactive Grid colour cells based on a condition using JavaScript and CSS

Image
In this post I will describe how to colour an Interactive Grid based on a column condition using CSS and JavaScript.  Using APEX Version 19.2. I want to colour every column red in my IG when the value is 'No'.   I have several IGs on my page I want to colour, so I set all my IGs that I want to colour with a CSS class of ATTENDEE_SCORE_IG in the Appearance section of the IG; Every column I want to colour in the IG I set the CSS Class to COLOUR_YES_NO (in this example I set this in 5 columns); I then created a Dynamic Action (DA) that contains the JavaScript that has the condition check that will colour the cells.  Because I have several IGs that are details of the master/detail relationship and these are refreshed by the user clicking on the master detail IG I have made my DA a Page Change [Interactive Grid].  If you don't need this you can set the DA on page load. The JS which will colour every column is this; ////////////////////////////////////////////////////////////////
2 comments
Read more

Oracle APEX Focus on detail interactive grid from master interactive grid on click

Image
When you have two interactive grids using master-detail you can focus the page on the detail interactive grid when the user clicks on a cell in the master interactive grid.   This is useful when your master interactive grid has lots of rows that takes up most of the screen, when the user clicks on a row on the master IG the page will focus the page on the detail interactive grid. I am using APEX Version 19.2. My master IG has a details column which when the user clicks on it scrolls the page to the details IG. I give this column a CSS class name of  linkToApplicantDetails . I added an Execute JavaScript code Dynamic Action which uses the class name  linkToApplicantDetails as the JQuery Selector for a click; (Ensure your IQuery Selector has a dot (.) in front of it, i.e. .linkToApplicationDetails) Because my detail IG is the last table on the page my JavaScript scrolls to the bottom of the page when the user clicks on the column;      $ ( "html, body" ). animate ({  scrollTop:
Post a Comment
Read more

Oracle APEX Remove the aggregate totals column in an Interactive Grid

Image
This post explains how to remove the Overall Average column on an IG when aggregates are added to an IG.  I am using APEX version 19.2 but this should work on all versions.  I added aggregates to my IG which gives me a row of averages at the bottom of the grid; It also gives me a total averages column at the start of the grid; There are 2 reasons I don't want this column.  Firstly, in my experience with this column its very buggy, as you can see in the picture below it causes the rows of the grid to get out of sync when sorting.   Secondly I have a lot of columns and I want the grid to appear at 100% zoom on the browser with no scrolling and this column is taking up valuable retail space! So.....how do we remove it? In execute when page loads, add this JavaScript where rgBenchmarkingIG is the static ID of your Interactive Grid. apex.region(" rgBenchmarkingIG ").widget().interactiveGrid("getCurrentView").view$.grid("option", "rowHeader", "
Post a Comment
Read more

Oracle APEX fit an interactive grid onto the page when printing

Image
If your Interactive grid does not fit all the columns onto the page when printing this blog post will show you how you can add a small bit of code to your print CSS to fit all the columns onto the page when printing. There are lots of blogs that will show you how to set up printing in APEX, so I won't go into much detail on print set up here.  This blog post will show you how to fit an interactive grid with lots of columns into a page when you print it. I have a standard print CSS set-up in Inline CSS that tries to maximize the space available for printing by setting padding and margins; @media print{ /*---------------------------------------------------------- -- Print the page as a portrait A4 page with no margins ---------------------------------------------------------- */  @page  {     size: A4 portrait;     margin-left: 1px !Important;     margin-right: 1px !Important;     margin-top: 0px !Important;     margin-bottom: 0px !Important;     padding: 0px 0px !Important;  } and a
Post a Comment
Read more

Oracle APEX Change Textarea maximum length (and placeholder) dynamically

Image
The requirement is to change the maximum size of a text area dynamically depending on the type of user that has logged in. Its a standard Textarea; With a placeholder stating the input should be no more than 1750 characters; Which looks like this If the user is of type 'A' which is stored in a P0 item P0_TY_TYPE (calculated when the user logs in) we need to change the maximum characters for this Textarea to 1500.  This can be accomplished with some JavaScript in Execute when page loads; if ($v( "P0_TY_TYPE" ) == 'A') {     $('#P8_ESTEEM').attr('placeholder','This statement should be no more than 200 words (approx 1500 characters)');     $("#P8_ESTEEM").attr('maxlength','1500');         $("#P8_ESTEEM_CHAR_COUNT > span.apex-item-textarea-counter--size").text("1500"); }
Post a Comment
Read more

Oracle APEX rename Region Display Selector tabs at runtime

Image
This post describes how you can change an RDS tab name at runtime using a P0 value.  I am using APEX 19.2. I have a form with a standard RDS with the following tabs.  The requirement is the Scholarship, Knowledge, Exchange & Impact tab name should change depending on the value of a P0 value.   This Scholarship, Knowledge, Exchange & Impact region has this static ID set; and is named Scholarship, Knowledge, Exchange & Impact which is what displays on the tab; Using JavaScript in Execute when page loads we check the PO value, if it is the target form we change the tab name to Scholarship when the page loads. if ($v( "P0_FORM_ID" ) == '6001') {     $('#SKEI_REGION_tab > a > span').text('Scholarship');     $('#SKEI_REGION > div.t-Region-header > div.t-Region-headerItems.t-Region-headerItems--title').text('Scholarship');     }
Post a Comment
Read more

Oracle APEX Interactive Grid rename aggregate row label

Image
This post describes how to rename an Interactive Grid aggregate totals row name.  I am using APEX 19.2. The default name is "Overall Sum" for the totals row, this was knocking out the other rows slightly so I needed to make it "Total" instead. The solution was to add the following JavaScript into the function and Global Variable Declaration. The JS is as follows; /****************************************************************************************** * The spreadsheet (IG) totals default name is "Overall Sum".  Rename it "Total". *  * Param spreadsheetID : The Interactive grid ID *******************************************************************************************/ function renameOverallSumToTotal(spreadsheetID)  {            var g = apex.region(spreadsheetID).widget().interactiveGrid('getViews', 'grid');                var labels = g.view$.grid('option', 'aggregateLabels');            labels.SUM.label = &
Post a Comment
Read more

Oracle APEX Color Interactive Grid (IG) group header using CSS

Image
  This post describes how to colour a group header on an Interactive Grid.  Using Version 19.2 but this should work on all versions. Groups are when you create a group and place columns into the group like this; I want to colour the Research & Teaching Group header to be this; Open the page containing the IG and open Developer tools in Chrome then click on the selector tool (arrow top left). Click the region you header you want to style, in my case Research & Teaching UoFGS.  In developer tools right click on the selected element and copy the selector. This gets copied; #rgBenchmarkingIG_ig_grid_vc > div.a-GV-hdr.js-stickyWidget-toggle > div.a-GV-w-hdr > table > thead > tr:nth-child(1) > th:nth-child(2) I dont only want to colour the selected column I want to colour the whole row, so I remove; > th:nth-child(2) and place the following CSS into inline CSS or preferably a CSS file; #rgBenchmarkingIG_ig_grid_vc > div.a-GV-hdr.js-stickyWidget-toggle > d
Post a Comment
Read more

Popular posts from this blog

Oracle APEX Interactive Grid colour cells based on a condition using JavaScript and CSS

Image
In this post I will describe how to colour an Interactive Grid based on a column condition using CSS and JavaScript.  Using APEX Version 19.2. I want to colour every column red in my IG when the value is 'No'.   I have several IGs on my page I want to colour, so I set all my IGs that I want to colour with a CSS class of ATTENDEE_SCORE_IG in the Appearance section of the IG; Every column I want to colour in the IG I set the CSS Class to COLOUR_YES_NO (in this example I set this in 5 columns); I then created a Dynamic Action (DA) that contains the JavaScript that has the condition check that will colour the cells.  Because I have several IGs that are details of the master/detail relationship and these are refreshed by the user clicking on the master detail IG I have made my DA a Page Change [Interactive Grid].  If you don't need this you can set the DA on page load. The JS which will colour every column is this; ////////////////////////////////////////////////////////////////
Read more

Oracle APEX pretty checkbox item plugin

Image
Following on from the animated on off button this is now an item plugin.  Pretty up your checkboxes..... You have 16 checkbox types to choose from where you can control the size and colour of the checkbox in item settings; demo Create a page item with type Pretty check box Choose type of checkbox Set checkbox attributes. How it works The item plug in code uses this code to plug the rendered checkbox into APEX. /////////////////////////////////////////////////////////////////////////////////////////// // glasgow_simple_checkbox // // Provides a plug- in specific implementation for a checkbox item. The item on the page // should be a checkbox, i.e. <input type = "checkbox" and name should be your item name // i.e. name = 'P12_NAME' // // Params // // itemName - the item name , i.e. name = 'P12_NAME' // checkboxValues - the check and unchecked values , i.e. Y/N /////////////////////////////////////////////////////////////////////////////////////////// f
Read more

Build beautiful and interactive API documentation for ORDS

Image
In this blog post, I will show you how to quickly build beautiful and interactive API documentation for your Oracle APEX REST data sources using  swagger hub . Using APEX v23.1. I downloaded the  titanic data set  and loaded them into tables in my APEX instance, created some authorized restful services and published them using swagger hub. You can create a free account on swagger hub.   Check out my titanic swagger hub here ; Press Authorize. Username REST, password Glasgow123! I won't go through creating RESTful services and just show you the four I created that sit on top of the titanic data set; The GET is a very simple SQL query;      select * from TITANIC_DATA_SET_NEW A handy tip is to add comments, as there will appear on swagger hub, making your API self documenting; Once you have created your modules, press the Generate Swagger Doc button; This will generate an open API for you.  Copy the API and paste it into swagger hub This will generate the documentation; As mentioned b
Read more