Leveraging dynamic actions in Oracle APEX to interact with a date field

Just starting out with oracle apex and looking for some advice.

I have a form where I need to enter header information. There is a date field called P100_ENTERED_DATE, and if the value entered in this field is less than the current date, I want to enable and make mandatory another field called P_100_REASON.

Would greatly appreciate any suggestions or tips on how to achieve this.

I attempted to use a JavaScript expression for a client-side condition as shown below, but it did not work:

WHEN: Event: Change Type: Item Item(s): :P100_ENTERED_DATE

Client-side Condition: Javascript Expression.

JS Expression:

var ld_cust_date = apex.item("P102_CUST_REQUEST_DATE").getValue();
var current_date = new Date();

if ((current_date - ld_cust_date) > 2){
    return true
  }  
else {
    return false
}

True Condition: Enable the field (I also want to make it mandatory, not sure how to do this) False Condition: Disable the field.

Answer №1

Consider this as a potential solution:

  • There are 4 items displayed on the page:
    • P100_SYSDATE
      • hidden
      • source is function body:
        return to_char(sysdate, 'dd.mm.yyyy');
    • P100_ENTERED_DATE
      • date picker
      • format mask: dd.mm.yyyy
    • P100_DATE_DIFF
      • hidden
      • it will display the difference between sysdate and entered date
    • P100_REASON
      • text item

Set up a dynamic action on P100_ENTERED_DATE triggered by the Change event with 4 true actions:

  • Hide reason upon initialization
    • action: hide
    • affected element: P100_REASON
    • fire on initialization
    • client side condition: item is null, P100_REASON
  • Calculate date difference
    • action: set value
    • PL/SQL expression:
      to_date(:P100_SYSDATE, 'dd.mm.yyyy') - to_date(:P100_ENTERED_DATE, 'dd.mm.yyyy')
    • items to submit: P100_SYSDATE, P100_ENTERED_DATE
  • Show reason if necessary
    • action: show
    • affected element: P100_REASON
    • client side condition: item > value; P100_DATE_DIFF; 0
  • Hide reason when not needed
    • action: hide
    • affected element: P100_REASON
    • client side condition: item <= value; P100_DATE_DIFF; 0

Create validation for P100_REASON:

  • type is function body, returning error text

    if :P100_DATE_DIFF > 0 and :P100_REASON is null then
       return ('Reason is required');
    end if;
    

That wraps it up. Included below are test scenarios and screenshots (today = SYSDATE = 04.07.2023, 4th of July 2023)

  • A: entered date is 02.07.2023 so "reason" must be filled in. Submit button triggers an error due to empty "reason"
  • B: after entering a reason, the page successfully submits
  • C: date (06.07.2023) exceeds today's date so "reason" should not be visible nor mandatory. Submit ... goes through without any issues

https://i.sstatic.net/vfgPW.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I obtain hosting XULDocument for a ContentWindow or HTMLDocument within a Firefox extension?

I have a Firefox Extension with a XUL overlay that includes some Javascript with event handlers. One of these event handlers is an EventListener for DOMContentLoaded. I want to load a second overlay only when visiting a specific website. Here is a snippet ...

Convert a boolean value to a string using filter in AngularJS

I am working on an AngularJS app and need to create a filter. In my database, I have a string value that indicates whether the data is active or inactive. I use 'S' for active and 'N' for inactive. I added a checkbox button on my page t ...

tips for sending a chosen item to the Vujes API

How can I send the selected item from a dropdown to an API in Vue.js? <select :v-model="selectedRole" class="custSelect"> <option v-for="option in options" v-bind:value="option.value"> {{option.role}} </option> ...

Personalized Map Designs for the Store Finder Plugin on WordPress

I am attempting to customize the appearance of a Google Map using the Store Locator Plus plugin for WordPress. I came across a support thread where someone successfully applied custom styles to the map with the following code snippet: <script> $(win ...

Instructions on exporting binary data to a PNG file using nodejs

How can I convert a binary nodejs Buffer object containing bitmap information into an image and save it to a file? Edit: I attempted using the filesystem package as suggested by @herchu, but when I tried the following code: let robot = require("robotjs" ...

What is the best method for displaying a table using a JSON array?

I have a JSON array that I want to display in a table using React boxes: [ { id: 1, color: "red", size: "small" }, { id: 2, color: "blue", size: "medium" }, { id: 3, color: "green", size: "large" }, { id: 4, color: "yellow" ...

Displaying JSON data in a div: a step-by-step guide

This HTML code is currently static. <div class="EquipmentContent row"> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 subSection" style="float:right;background:#dff0ff;"> <section class="col-xs-12 col-sm-2 cl-md-2 col-lg-2 ...

Exploring the Power of Observables in Angular 2: Focusing on Targeting an Array Nested Within

I encountered a situation where I was successfully looping through objects in an array within my Angular 2 application using observables. In the client service file, my code looked like this: getByCategory(category: string) { const q = encodeURICompon ...

Unable to invoke .then when simulating axios call within componentDidMount

I'm currently working on unit testing the componentDidMount method while simulating an Axios call. // src/App.tsx import axios_with_baseUrl from './axios-instance-with-baseUrl'; ... public componentDidMount() { axios_with_baseUrl.get(& ...

Is it considered bad practice to assign a value to a Vuex property directly in an action rather than using a mutation for the change

Currently, I have a Vuex action that performs a GET request and then assigns the response to a Vuex property: async getUserServers({commit, state, dispatch}, userId){ try { let response = await axios.get("/servers/" + userId) state.serv ...

Customizing error messages in Joi validationorHow to show custom

Hi there, currently I am utilizing "@hapi/joi": "^15.1.1". Unfortunately, at this moment I am unable to upgrade to the most recent Joi version. This represents my validation schema const schema = { name: Joi.string() .all ...

How to Handle 404 Errors for Specific Express Routes and Not Others

Struggling with the setup of a single page app using Angular routes on the front end, while facing backend issues. All database-related routes are functional, but any additional route designed to serve an HTML file or simple text like "hello world" result ...

Is there a way to automatically insert page numbers into every internal link on an HTML page?

When in print mode, I want to display links like this: <a href="#targetPage">link</a> but I'd prefer them to appear as: <a href="#targetPage">link (page 11)</a> (assuming the target page is on page 11 in the print preview). ...

What is the best way to filter two tables using only one search bar?

In my Vue2 application, I have implemented a pair of data tables on one of the pages. Each table is placed behind a tab, allowing users to choose which one they want to view. The search bar, however, is not confined within a tab as I wanted to avoid duplic ...

Troubleshooting issues with JavaScript events in order to effectively implement popovers

I am facing an issue on a webpage that contains a significant amount of JavaScript. The Twitter bootstrap's popover widget is not functioning as expected. Specifically, when I hover over the icon that should trigger the "popover," nothing happens. I h ...

The NODE.JS application becomes unresponsive when attempting to retrieve 2.5 million records from an API

I'm facing an issue where my app is retrieving millions of rows from a database and API, causing it to get stuck after calling the getData() function. let closedOrdersStartDate; preparedOrdersPromise = tickApiConnector.obtainT ...

Handling onclick events in Scrapy Splash: A comprehensive guide

I am attempting to extract data from the following website I have managed to receive a response, but I am unsure how to access the inner data of the items below for scraping: It seems that accessing the items requires handling JavaScript and pagination. ...

Creating a form for adding and editing using React Hook Form

I'm currently working on creating a form that can handle both the creation and editing of a product by passing values through an object. The form functions perfectly for creating a product, but I'm facing challenges in making it work for editing ...

What methods can I employ to utilize preg_match with jQuery?

Is it possible to validate a phone number in jQuery using preg_match? I have tried the following code without success: if (!preg_match("/^[0-9]{3}-|\s[0-9]{3}-|\s[0-9]{4}$/", phone.val() )) { phone.addClass("needsfille ...

Is there a straightforward method to determine if any of multiple conditionals are true and return that one?

I've searched high and low for answers to my query, but haven't found any that satisfy my needs. Perhaps I'm not using the right search terms... I'm dealing with a set of checkboxes that can be either "on" or "off". When these checkbo ...