DEV Community: Maik Michel

React on RDS PagChange

Maik Michel — Sun, 19 Jan 2025 20:11:49 +0000

With the RDS and the region template tab container, APEX offers two options for grouping regions in such a way that they can be stacked on top of each other to save space. The RDS also has the option of showing all contained regions at once. I like to make use of both options. In the article (here) I had already described how to react to the activation of the individual tabs. This article will now focus on how to react to the change of tabs in an RDS.

Unlike with tab containers, the titles of the respective tabs are always displayed in an RDS, or are always hidden. Sounds strange. What I mean is, if I decide to show the special tab ShowAll , I want the regions to show all their titles. But as soon as I click on a "normal" tab, I don't want the title to be displayed. Why? Well, from a UI point of view, the title of the region would now be displayed twice. Once on the tab and once as a region title. I think that's a bit of a duplicate and doesn't look good either.

If you look at the DOM and define hard in APEX that a region header should be hidden, you will find the class t-Region--hideHeader in the div of the region. This means that whenever this class is present, the title is not visible. In addition, we find the ID of the first list element in the DOM. This is SHOW_ALL_tab. Each time this is activated, the element has the class apex-rds-selected.

We have to check whether the class apex-rds-selected is present in the element #SHOW_ALL_tab on the change event or not and use the class t-Region--hideHeader to hide the titles of the regions. For this I use a bit of Knockout.js and jQuery

// this will hold the model
var viewModel = {};

// check if given element is using the class given
function hasClass(elemID, className) {
  return (' ' + document.getElementById(elemID).className + ' ').indexOf(' ' + className+ ' ') > -1;
}

function initPage () {
  // whenever the RDS is clicked, we check whether the region title should be visible
  // this has the binding defined in the custom attributes: data-bind="class: hideRegionHeader”
  apex.jQuery('.apex-rds').data('onRegionChange', function(mode, activeTab) {
    viewModel.hideRegionHeader(hasClass("SHOW_ALL_tab", 'apex-rds-selected') ? "" : "t-Region--hideHeader");
  });

  // define the model
  viewModel = {
    hideRegionHeader: ko.observable(hasClass("SHOW_ALL_tab", 'apex-rds-selected') ? "" : "t-Region--hideHeader")
  }

  // activate binding with knockout
  ko.applyBindings(viewModel, document.querySelector("html"));
}

We define a model and create the hideRegionHeader property. This contains the class name t-Region--hideHeader or nothing. The property itself should always be calculated when the TabPage is changed. For this we use the event onRegionChange and bind it via JQuery. Whenever the event is triggered, the function hasClass is used to check whether the class is contained in the specified selector and thus the value of the property is recalculated using knockoutjs.

To make this working, you have to reference knockoutjs #JET_BASE_DIRECTORY#js/libs/knockout/knockout-3.5.1.js and call then initPage method on PageLoad.

We bind the property itself to all regions that are displayed by the RDS. data-bind="class: hideRegionHeader"

Done.

As usual, you can find a demo here: https://apex.oracle.com/pls/apex/r/die21/demos/rdspage

New Plugin - Run Accessibility Tests - Streamline Accessibility Checks in APEX

Maik Michel — Wed, 20 Nov 2024 17:07:36 +0000

I am thrilled to introduce my very first APEX plugin! The inspiration for this idea came to me shortly before the last APEX Connect, and it has been a source of excitement and motivation ever since. This plugin allows you to evaluate your pages or entire applications for accessibility, an essential consideration for fostering an inclusive user experience. It leverages the powerful open-source library axe-core from Deque, a tool that Deque itself uses in its comprehensive accessibility solutions.

The plugin is designed as a dynamic action, offering flexible integration into your applications. You can add it to specific pages or, for maximum utility, integrate it on page 0 to make it available across your entire application. For instance, you can activate the plugin via a key combination or by triggering a button, ensuring seamless usability.

Currently, the plugin includes two configurable parameters:

Run with Tags : This attribute allows you to specify the types of tests to be executed.
Store Results : This attribute serves as a toggle to decide whether the test results should be saved in a dedicated table.

The table is installed along with the accompanying app, A11Y-View , where you can review the results in detail. A link in the console provides direct access to the test results, enhancing the plugin's ease of use.

I still have many more ideas for the app and the plugin. I will put a bit more energy into this over the next few weeks. I have already collected the following ideas:

Floating button or message to open the app directly after a test
Tracking of violations to exclude them for later tests if necessary, so that you are only informed of newer violations
Improve the display
If applicable, you can also integrate the playwright reporter

You can try out a demo at https://apex.oracle.com/pls/apex/r/die21/tasks. And if you have any other ideas for improvement, let me know.

dbFlux now finally supports APEX plugins

Maik Michel — Sat, 29 Jun 2024 15:07:10 +0000

Hi guys, finally the time has come. I am happy to announce that I have released the latest version of dbFlux this week. For those who don't know dbFlux yet: dbFlux is an extension for VSCode that supports you as a developer in your daily work within the development of Oracle database applications, and here mainly for APEX applications. dbFlux compiles SQL, PL/SQL, JavaScript, CSS for you and uploads your binary files into your APEX application. It can export your applications, compile multiple schemas, run unit tests, export REST modules and so on... As you can see, dbFlux is the Swiss army knife for APEX application development.

But now to the actual topic. dbFlux can now support you in the development of APEX plugins. After you have created the actual plugin within your application, you need to add it to your dbFlux workspace.

APEX Plugin

By executing the command "dbFlux: Add APEX Plugin", dbFlux prompts you under which application the plugin can be found. You then have to enter the internal name of the plugin as a static identifier. dbFlux will now create empty folders for this plugin. These can be found for example under: ./plugin/f101/DE.DIE21.APEX.A11Y/src.

Add APEX Plugin

The basic structure is now in place. Now we just need to export the plugin from APEX. We do this by executing the command: "dbFlux: Export APEX Plugin". Here we are asked again for the plugin to be exported. The whole process takes a short moment and then we find the corresponding SQL file in the srcdirectory of the plugin. This can now be deployed. Additionally you are able to create a apexplugin.json file in order to publish it to apex.world.

Export Plugin

The real advantage of using VSCode and dbFlux is, of course, that you can use your favorite editor for development. And that includes, for example, editing the JavaScript files contained in such a plugin. With the command "dbFlux: Export Plugin Files" the static files of the plugin are downloaded and unpacked into the plugin directory. You can then simply edit the files accordingly and then compile them with Ctrl+Alt+B, minify them and upload them to the actual plugin in the database.

Export Static Plugin File and compile to upload it

Now you can edit the JavaScript or CSS files of the plugin directly in VS Code. This saves a lot of time. No annoying navigation to the plugin, then to the files and then to editing... Simply change and press Ctrl+Alt+B ⇒ Done.

Optimal amount of columns in a card report

Maik Michel — Fri, 29 Mar 2024 13:41:01 +0000

I often create card reports in my projects. These reports are about showing the data on cards. Depending on the use case, it doesn't always make sense to show this data in tabular form. That's what cards are for. Especially in a mobile environment, i.e. on a mobile phone or tablet, it makes sense to display the cards.

However, it can sometimes happen that there are so few data records that the display on the monitor or tablet is not fully utilized. For example, if you define that there are always 4 columns in a card report, and you unfortunately only have two or three cards in the display. This makes the layout of the page asymmetrical and often looks strange.

Wouldn't it be practical to utilize the full width in such a case?

With a little CSS hack, this is easily possible. In the example above, the report is designed to have 4 columns.

This leads to the following CSS rule being used in the Universal Theme:

This rule must therefore be overwritten. For example, if you define the number of columns in such a way that it fits optimally. You can divide the number of records by 4, 3 or 2. If there is no remaining number, this would be the optimum number of columns. If there is a remainder, the number with the largest residual value could win.

If you have this value, you overwrite the above rule using apex_css.add and placing this call as a page process to be executed before headers.

apex_css.add (
    p_css => '@media (min-width: 768px) {
                .t-Cards--4cols {
                  grid-template-columns: repeat('||:P10_MAX_CARDS_PER_ROW||', 1fr) !important; 
                }
              }',
    p_key => 't-Cards--4cols' );
}

And then you can make sure that the rows of cards are optimally filled.

You can find a demo here: https://apex.oracle.com/pls/apex/r/die21/demos/variable-cards

Featured Image by Kelly Sikkema on Unsplash

Improve reusability in Oracle APEX and PL/SQL projects

Maik Michel — Sat, 30 Dec 2023 19:03:11 +0000

In most of the projects I manage, I often have to reimplement a lot of functionalities from other projects. Especially in the consulting sector, I can't switch off my knowledge. And that's not something you want. Rather, all customers unconsciously benefit from each other. Solutions that I design for one customer may be used in a similar way by another customer.

Copying code snippets is also not really good or useful here. What we are missing in the database world around Oracle is a kind of package manager similar to NPM or Maven. And due to the dependency on the database and the associated restrictions, it is also difficult to implement. Let's imagine that the use of a package requires the existence of a certain table. A table that may not be there or has yet to be created. Surely such a package could be written completely with dynamic code. The disadvantage of such an implementation would be that any errors would only appear at runtime and not during compilation.

Personally, I find it better if such a package is directly invalid on the DB and does not throw a specific error at runtime, which I then have to painstakingly debug later.

So how can you provide a package, for example?

The following approach has already proven itself in many projects. An atomic package is developed. This means that this package has no dependencies on objects that need to be brought along to install the package. Sometimes it happens that such a package has to make use of some configuration. I recommend a simple package header for this. This header only contains the variables that are customized by the developer who is responsible for the actual implementation in the target system. Here it makes sense to standardize the naming of such a Configuration-PackageHeader. I always use the suffix _config for this.

For a package that contains, for example, unit tests for compliance with various standards in an APEX application, there could therefore be a generic package that looks something like this:

create or replace package test_apex_application_quality is

...

end;

/

create or replace package body test_apex_application_quality is

...

  cursor cur_app_items is (select ...

                            from apex_application_items

                           where apex_application = test_apex_application_quality_config.C_APP_ID );

...

end;

/

This is just an example, but you can clearly see how the configuration package is used to restrict the items of the application to be tested.

create or replace package test_apex_application_quality_config is

  C_APP_ID constant number := 1000;

end;

/

This means that the 3 files could be delivered initially. If the test package is now extended to perform other tests on the application, it is sufficient to update the actual package.

Cool, is there any way to update this?

Yes, you can. With dbFlux

dbFluxis a VSCode extension and offers a command for exactly this purpose. Here it is called Add FeatureSet as SubModule. Such a FeatureSet is available for exactly this scenario. Simply enter the GitURL that points to such a FeatureSet. dbFlux will create / clone this repository as a Git-Submodule in the existing project folder. Such a FeatureSet must contain a manifest.json file. This file contains the information required to copy the corresponding files of the FeatureSet into the current project.

The developer of the FeatureSet can provide the files with the flag "initial": true. This is then only copied during initial creation and is no longer overwritten. In addition, the manifest.json file contains the version number of the FeatureSet. If this changes, dbFluxwill ask whether these changes should be transferred to the current project. dbFluxwill not install anything on its own, but only copy the files. These can then be installed in the development database by the developer. And with the support of dbFlow, those files will be shipped and install as usual with your project.

screen recording using dbFlux to add a reusable FeatureSet

Using Authenticator Based MFA in Oracle APEX #JoelKallmanDay

Maik Michel — Wed, 11 Oct 2023 10:58:56 +0000

Many of you are certainly familiar with multifactor authentication, or MFA for short. With MFA, another factor is requested in addition to the user name and password, which basically represents the first factor. An additional one-time password is generated, sent and requested by the application or service to which you want to log in. Usually, an SMS or email is sent to a previously configured account or mobile phone. This contains a small password or a token that must be entered in the corresponding application.

Another possibility for MFA is the use of an authenticator application. There are various applications for the most common mobile phone operating systems. In my company, for example, we use the Microsoft Authenticator. Such an authenticator app supports several authentication methods. Among others also the TOTP method. See: https://de.wikipedia.org/wiki/Time-based\_One-time\_Password\_Algorithmus

In general, an encrypted secret is exchanged and the validity is calculated with an algorithm. The calculated token changes every 30 seconds.

How to implement such an MFA in APEX?

A few years ago, someone on the Oracle forum posted the actual code for the generation. See: https://forums.oracle.com/ords/apexds/post/google-authenticator-totp-0920

We use this code as the basis for calculating a token that is based on a secret assigned to the user. We wrap the code from the forum in its own method and return the determined token here. We have to compare this with the user's input at the appropriate locations.

Please understand that I cannot show the whole code here. Unfortunately, I cannot host a demo application on https://apex.oracle.com because the package dbms_crypto is not available there.

So to set up the second factor, we create a secret and then store it with the user.

C_BASE32_CHARS constant varchar2(32) := 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567';

function generate_random_base32_string(length number) return varchar2 is
  l_random_string varchar2(32767);
begin
  for i in 1..length loop
    l_random_string := l_random_string || 
                       substr(C_BASE32_CHARS, 1 + floor(dbms_random.value(0, 32)), 1);
  end loop;

  return l_random_string;
end;

In order to make the whole process as simple as possible for the user, we offer him (1) a corresponding Authenticator App directly for installation.

Configuring a MFA

The user can then enter the generated secret (2) manually into the application or simply scan the QR code (3). This has a special structure (see code excerpt).

C_OTP_AUTH_LINK constant varchar2(1000) := 'otpauth://totp/%0?secret=%1&issuer=%2&algorithm=SHA1&digits=6&period=30';

function get_otpauth_link(p_secret in varchar2,
                          p_name in varchar2,
                          p_issuer in varchar2,
                          p_prefix in varchar2 default null)
                          return varchar2 is
  l_otp_auth_link varchar2(4000);
begin
  l_otp_auth_link := apex_string.format(p_message => C_OTP_AUTH_LINK,
                                        p0 => p_name,
                                        p1 => p_secret,
                                        p2 => p_issuer);

  return p_prefix || case when p_prefix is null then l_otp_auth_link 
                                         else apex_util.url_encode(l_otp_auth_link) end;
end;

The image, in my case an SVG image, of the QR code is created here with the package ZT_QR from the repo: https://github.com/zorantica/plsql-qr-code

As soon as the user has scanned the QR code, a new entry for authentication is displayed in his Authenticator app. With the code displayed there, they can then confirm directly in the application (4) that the authentication works using the additional factor.

Recording of config MFA service using 2FAS Application

Here you can see what the process might look like.

The next step is then only to implement the additional factor in the login screen of the actual application. Here, the user name and the password must first be validated. Then the input fields for the token are displayed. Only after validation of this input does the actual login to the application become valid.

Enter Token to Sign In

I don't know Joel personally. I have seen him at some conferences and in videos. I think that with Oracle's commitment to APEX as the Cloud Application Development Platform, it's certainly a very big dream of Joel's come true. I hope we all do as you have wished.

Image by Mahesh Patel from Pixabay

Use APEX API to display version infos in your apps

Maik Michel — Fri, 06 Oct 2023 14:46:12 +0000

Many projects require the current version of the application. Oracle APEX applications have a version identifier stored in the application settings by default. This is usually "Release 1.0". In the past, I have stored a version information in semantic form and a log from the commits, matching this version, with the release. To do this, I wrote the version information in a release table during deployment and stored a global application process that reads this information when the application or session is started and writes it to an application item that then displays the corresponding version in the settings at runtime using substitution notation.

For some applications, this is quite an overhead.

Since version 23.1, APEX also offers a solution for this. It is now possible to set the version via API. Setting the workspace and actually calling the API is sufficient here.

begin
  apex_application_install.set_workspace (p_workspace => 'DEMO' );
  apex_application_admin.set_application_version ( p_application_id => 1000,
                                                   p_version => 'Release 1.0');
end;

Actually quite simple.

The whole thing makes even more sense if you include this call in your CI/CD pipeline. If you use dbFlow, for example, you could simply write a global hook script that calls this API directly at the end of a deployment.

This script is called by dbFlowat the end (post) of the main installation. The project here is called TAYRA and the schema used to import the applications is TAYRA_APP. This is a multi-schema setup that maps to a classic 3-tier model. dbFlowalways calls these scripts with the parameters for the version and the import mode. Therefore, such a script can look something like this.

set define '^'
set concat on
set concat .
set verify off
set serveroutput on
set linesize 2000
set wrap off
SET TERMOUT OFF
COLUMN 1 NEW_VALUE 1
COLUMN 2 NEW_VALUE 2

SELECT '' "1" FROM dual WHERE ROWNUM = 0;
SELECT '' "2" FROM dual WHERE ROWNUM = 0;

-- Set params to internal vars
DEFINE _parameter_01 = ^1 "0.0.0"
DEFINE _parameter_02 = ^2 "undefined"

define VERSION = ^_parameter_01
define MODE = ^_parameter_02

SET TERMOUT ON
PROMPT ********************************************************************
PROMPT * VERSION <^VERSION>
PROMPT * MODE <^MODE>
PROMPT ********************************************************************

set timing on;
prompt ............................................................................
prompt ............................................................................
prompt .. ..
prompt .. Setting Versioninfos ..
prompt .. ..
prompt ............................................................................
prompt ............................................................................
begin
  apex_application_install.set_workspace (p_workspace => 'TAYRA' );
  for apps in (select column_value
                 from table(apex_string.split_numbers('1000:2000:3000', ':')))
  loop
    apex_application_admin.set_application_version(p_application_id => apps.column_value,
                                                   p_version => 'Release ^VERSION ('||to_char(sysdate, 'DD.MM.YYYY HH24:MI')||')');
  end loop;
end;
/

After installing, the corresponding applications show the appropriate version.

I tend to always display a version identifier to give a context to screenshot which shows a part or the app.

Maximizing Application Insights with Column Prefixes

Maik Michel — Mon, 07 Aug 2023 19:30:24 +0000

In many projects, I keep encountering negative opinions towards column prefixes. Just recently I started a small poll on Twitter about this topic. And also there the opinion was 75% against column prefixes.

Column names with or without prefix? Leave a comment why you prefer the one over the other. #orclAPEX #oracle #Database
— Maik Michel (@Maik__Michel) June 24, 2023

I can't even say exactly where this comes from. But I suspect more from the non-SQL /PLSQL side. In other languages like Java the use of prefixes makes no sense at all and yes, if you have an object relational mapper that generates code that is prefixed, it's pretty ugly.

Here in my example it is primarily about Oracle SQL/PLSQL and also APEX applications. I think we agree that there should be some rules regarding the naming convention, meaning the notation of columns and objects within the database. From many projects I know the following rules:

No prefixes
Columns with PrimaryKey are name by tablename_ID
Columns which are linked by a ForeignKey relation are named by their own PrimaryKey column

Here is an example with the tables PROJECTS and TASKS, which are related to each other.

create table projects (
  projects_id number not null, -- primary key
  name varchar2(250 char) not null,
  start_date date,
  end_date date,
  created_at date not null,
  created_by varchar2(250 char) not null,
  modified_at date not null,
  modified_by varchar2(250 char) not null
);

create table tasks (
  tasks_id number not null, -- primary key
  name varchar2(250 char) not null,
  hours_estimates number(5),
  projects_id number not null, -- foreign key
  created_at date not null,
  created_by varchar2(250 char) not null,
  modified_at date not null,
  modified_by varchar2(250 char) not null
);

With this principle it is noticeable that we must take in a select statement, which works with a join, definitely an alias per table, since here the ID columns are never unique. In addition, the audit columns are also named identically, which makes the simple joining of two tables much more complicated.

Another impact, and in my opinion a big one, is the maintainability of the database PL/SQL code that results from such naming. So let's imagine a project where there are a lot of packages and additionally a lot of APEX pages where the corresponding information is displayed or edited. And now we have to change the logic concerning the column "name" of the Tasks table. We have to check all places in the code where this column is used.

That is really annoying

And now how about a naming convention that provides column prefixes?

The following rule has worked well in all my projects:

Each column of a table gets assigned a prefix that is unique per table. (The naming / glossary becomes part of the source code and is directly visible to all developers)
Columns with PrimaryKey get the prefix and ID (xyz_id)
Columns which are linked by a ForeignKey relation are named like their PrimaryKey column but with Prefix.

Thus each column is unique

create table projects (
  prj_id number not null, -- primary key
  prj_name varchar2(250 char) not null,
  prj_start date,
  prj_end date,
  prj_created_at date not null,
  prj_created_by varchar2(250 char) not null,
  prj_modified_at date not null,
  prj_modified_by varchar2(250 char) not null
);

create table tasks (
  tsk_id number not null, -- primary key
  tsk_name varchar2(250 char) not null,
  tsk_hours_estimates number(5),
  tsk_prj_id number not null, -- foreign key
  tsk_created_at date not null,
  tsk_created_by varchar2(250 char) not null,
  tsk_modified_at date not null,
  tsk_modified_by varchar2(250 char) not null
);

Which prefixes are chosen and whether they are 3, 4 or 5 digits must be made dependent on the project size. Important is a kind of glosar, in which the mapping can be looked up.

Besides the actual advantage for the impact analysis, there is also the advantage in the naming to exclude certain words as column names. I cannot name a column end in SQL. I would have to surround this column with double quotation marks or name it something else.

And now we can look for our Impact:

Impact analysis - Find in Files / Database Objects the use of a specific columns

Bam, in just 1 second I see the impact

Optimize Your Project Organization with VSCode's File Nesting Feature!

Maik Michel — Tue, 18 Jul 2023 18:24:56 +0000

Greetings, fellow developers! Have you ever found yourself wrestling with a growing number of components in your project? Tables, packages, and files galore! Keeping everything organized can be quite a task. But fear not, because I have an exciting solution to share with you: VSCode's File Nesting feature.

Let me paint a serene picture for you. Picture yourself in the tranquil realm of your coding environment, where order reigns supreme. With File Nesting, you have the power to create a virtual folder beneath your main file, providing a dedicated space for related files. It's like having a personal assistant that effortlessly organizes your project structure.

Using File Nesting is a breeze. Just create a file within the folder you wish to organize. It could be any file type, but I personally find Markdown to be elegantly simple. To give it prominence, prefix its filename with an underscore. This clever trick ensures it appears at the top of the directory, catching your eye immediately.

Now, let's unlock the full potential of File Nesting. Open up your VSCode settings and prepare to customize your organization magic:

...
"explorer.fileNesting.enabled": true,
"explorer.fileNesting.patterns": {
  "_common.md": "app_defaults.pk*, apx_app_util.pk*, apx_ui_util.pk*, generic_templates.pk*",
}
...

Enabling explorer.fileNesting.enabled sets the stage for a beautifully organized coding experience. But there's more! With explorer.fileNesting.patterns, you can define your own rules to tailor the nesting behavior. This is where you can exercise your creativity and create a structure that aligns with your project's needs.

Imagine the sheer joy of effortlessly locating the files you need, with a logical structure that simplifies your workflow. No more endless scrolling or searching for that elusive file buried deep within the hierarchy. With File Nesting, harmony and efficiency become your trusted companions.

So, my friends, it's time to embrace the elegance of File Nesting. Let VSCode be your partner as you conquer the challenges of managing large-scale projects. Enjoy the serenity of a clutter-free workspace, and let your creativity flourish.

Happy coding, my fellow seekers of order!

Highlight current row

Maik Michel — Sun, 09 Jul 2023 19:50:52 +0000

In many applications I build, I use modal dialogs for the actual transaction. This is how the actual data records are processed. The user himself usually opens the dialog with a link. This is often found as a link in a classic report. As soon as the user clicks on this link, he can edit the corresponding content. From a UI/UX perspective, the reference to the clicked content is lost. Due to the shift in focus, it is usually difficult or even impossible to see to which data set the opened dialog actually belongs.

For this reason I mark the corresponding line with the focus. The event onfocus is triggered by the actual click on the button/link or by using the keyboard.

So first we need the function that marks the line for us:

function highlightRow(link) {  
  // remove old highlighted rows
  document.querySelectorAll("table tr.highlighted-row").forEach((elem) => {
    elem.classList.remove('highlighted-row');
  });

  // add class to tr
  link.parentNode.parentNode.classList.add('highlighted-row');
}

Afterwards, we build them into the attribute field of the actual link in the Classic Report:

So that the clicked record also colors itself, we define here still another brighter version of the primary color and a class, which uses this as background color as well.

Done, now as soon as the link is clicked, the corresponding line is highlighted.

Take a look at the demo application.

Use multiple variations of your primary color

Maik Michel — Sun, 09 Jul 2023 19:48:47 +0000

Sometimes it happens that you want to apply a color to certain elements in your application. Now you could just take any color. But you can't, because the color has to match your application. It could also be that your application runs with different themes. So you can't just take any blue or any red. The whole thing has to be variable.

Fortunately CSS offers help here. There is a CSS function called color-mix. We can use this to mix one color to another color. The whole thing is best done with white or black, to stay with the main color of the theme. And so we manage to define different variations of our primary color.

After you have declared your color values, you can easily use them in different classes. For example, to color a row in a Classic Report.

You can take a look at the demo application.

Better UX - Display changes without reloading a page

Maik Michel — Thu, 08 Jun 2023 13:24:05 +0000

Often it happens that data on an application page changes. This can happen through the user himself, for example, when he changes a data record through a modal dialog, or through other users or events on the same system. Let's imagine we are on an application that deals with campaigns. On this page you can see all the dependent data. The campaign itself can be edited through a modal dialog. And just in this dialog we can change the title of the campaign.

If we close this dialog now, we are still on a campaign with the "old" name. In the standard APEX world, it is now considered that this page needs to be reloaded, and thus one would rather choose a branch to the parent page here, instead of just closing the dialog.

I admit, changing the name of a campaign and then updating it is relatively trivial and easy to implement with JavaScript means. But the principle here is applicable to anything. A large part of APEX regions can already be updated. Actually, this is true for almost all regions that are based on a query of some kind.

Here, however, the region titles unfortunately do not belong. So this article is about how you can integrate this reactivity into your applications with simple means and by using Knockoutjs.

As already announced I use Kockout.js for this. Knockout is a free open source library, which is always included in the Oracle Jet part of APEX. Therefore it is easy to include this library in our site or application.

#JET_BASE_DIRECTORY#js/libs/knockout/knockout-3.5.1.js

Knockout is mainly about databinding and reactivity. For this Knockout uses the MVMV principle. Data from the model is stored in a ViewModel and bound to a view by data binding.

Knockout then takes care of updating the data in the ViewModel and in the view. And if we imagine the whole thing dynamically in our APEX world, it might look something like this.

Data is returned here via a query as JSON. This query is part of an AJAX callback, which is stored as a process on the respective page, for example. The data is requested in a JavaScript context, e.g. Dynamics Action, and then manifested in the ViewModel. Through the data binding in the view, Knockout takes care of and the corresponding update of the respective Html element.

In the example according to the ScreenShot (Gif), an AJAX callback is called via JavaScript when the dialog is closed, which returns the campaign title packaged as JSON and writes it to the ViewModel. Knockout then takes care of updating the region title, since the binding in the model was referenced here.

The content of the AJAX callback can then look like this, for example. The end result is that the campaign name is returned as JSON.

Now to update the campaign name in the page by knockout, it is enough to bind it to the text property of a span-element inside the region header.

As I said, for the example updating only one value. Knockout is probably a bit overkill. But let's imagine that there is more than one element to be updated. In this moment the use of Knockout makes sense, because here only the minimal additions are necessary.

Who has the will, just have a look at the Knockout page. https://knockoutjs.com